From 0bb444b4907d20e69682d24290c7985e26ed1644 Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 16:57:41 +0100 Subject: [PATCH 1/7] wc: Fix value triggered with filterChange event in toggle-switch #TASK-6409 --- src/webcomponents/commons/forms/toggle-switch.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index c449b4969..bbe3547d4 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -59,10 +59,6 @@ export default class ToggleSwitch extends LitElement { classes: { type: String }, - _value: { - type: Boolean, - state: true - } }; } @@ -190,14 +186,14 @@ export default class ToggleSwitch extends LitElement {
this.onFilterChange("ON")} autocomplete="off"> + @click=${() => this.onFilterChange(true)} autocomplete="off"> this.onFilterChange("OFF")} autocomplete="off"> + @click=${() => this.onFilterChange(false)} autocomplete="off"> From 93d312d2ac23ce308ec25b717634524986cb9f9f Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 16:58:14 +0100 Subject: [PATCH 2/7] wc: Remove unused html code in toggle-switch #TASK-6409 --- .../commons/forms/toggle-switch.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index bbe3547d4..83a003f91 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -199,23 +199,6 @@ export default class ToggleSwitch extends LitElement {
- - `; } From 0dc1b9df038240391c7dc7c4cbf03c5b747ac409 Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 16:58:57 +0100 Subject: [PATCH 3/7] wc: Remove commented code in toggle-switch #TASK-6409 --- .../commons/forms/toggle-switch.js | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index 83a003f91..d80c252c1 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -18,17 +18,10 @@ import {LitElement, html} from "lit"; import UtilsNew from "../../../core/utils-new.js"; import LitUtils from "../utils/lit-utils.js"; - -/** - * Usage: - * - */ export default class ToggleSwitch extends LitElement { constructor() { super(); - - // Set status and init private properties this._init(); } @@ -73,29 +66,6 @@ export default class ToggleSwitch extends LitElement { this.classes = ""; } - // updated(changedProperties) { - // if (changedProperties.has("value")) { - // this._propertyObserver(); - // this._value = this.value; - // } - // if (changedProperties.has("onText")) { - // this.onText = this.onText ? this.onText : "ON"; - // // this._propertyObserver(); - // } - // if (changedProperties.has("offText")) { - // this.offText = this.offText ? this.offText : "OFF"; - // // this._propertyObserver(); - // } - // if (changedProperties.has("activeClass")) { - // this.activeClass = this.activeClass ? this.activeClass : "btn-primary"; - // this._propertyObserver(); - // } - // if (changedProperties.has("inactiveClass")) { - // this.inactiveClass = this.inactiveClass ? this.inactiveClass : "btn-light"; - // this._propertyObserver(); - // } - // } - firstUpdated(changedProperties) { if (changedProperties.has("value")) { this.propertyObserver(); From 1652f89528daf543e7edb9cf760daa7e5864fda8 Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 17:00:34 +0100 Subject: [PATCH 4/7] wc: Remove unused properties and methods in toggle-switch #TASK-6409 --- .../commons/forms/toggle-switch.js | 92 ------------------- 1 file changed, 92 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index d80c252c1..c72534635 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -40,18 +40,9 @@ export default class ToggleSwitch extends LitElement { offText: { type: String }, - activeClass: { - type: String - }, - inactiveClass: { - type: String - }, disabled: { type: Boolean }, - classes: { - type: String - }, }; } @@ -61,89 +52,6 @@ export default class ToggleSwitch extends LitElement { // Default values this.onText = "ON"; this.offText = "OFF"; - this.activeClass = "btn-primary"; - this.inactiveClass = "btn-light"; - this.classes = ""; - } - - firstUpdated(changedProperties) { - if (changedProperties.has("value")) { - this.propertyObserver(); - } - } - - update(changedProperties) { - // if (changedProperties.has("value")) { - // this.propertyObserver(); - // } - - if (changedProperties.has("onText")) { - this.onText = this.onText ? this.onText : "ON"; - } - - if (changedProperties.has("offText")) { - this.offText = this.offText ? this.offText : "OFF"; - } - super.update(changedProperties); - } - - propertyObserver() { - // const val = this.value?.toString(); - // if (val !== "OFF" && val !== "false") { - // this._value = true; - // } else { - // this._value = false; - // } - this._value = this.value; - } - - _propertyObserver() { - if (typeof this.value !== "undefined" && this.activeClass && this.inactiveClass) { - if (this.value) { - this._onClass = this.activeClass + " active"; - this._offClass = this.inactiveClass; - } else { - this._onClass = this.inactiveClass; - this._offClass = this.activeClass + " active"; - } - this.requestUpdate(); - } - } - - onToggleClick(buttonId) { - // Check if there is anything to do - if ((this.value && buttonId === "ON") || (!this.value && buttonId === "OFF")) { - return; - } - - // Support several classes - const activeClasses = this.activeClass.split(" "); - const inactiveClasses = this.inactiveClass.split(" "); - - // Fetch and reset buttons status - const buttons = this.getElementsByClassName("btn-toggle-" + this._prefix); - Array.from(buttons).forEach(button => { - button.classList.remove(...activeClasses, ...inactiveClasses, "active"); - }); - let onIndex = 0; - let offIndex = 1; - if (buttons[0].dataset.id === "OFF") { - onIndex = 1; - offIndex = 0; - } - - // Set proper classes - this.value = buttonId === "ON"; - if (this.value) { - buttons[onIndex].classList.add(...activeClasses, "active"); - buttons[offIndex].classList.add(...inactiveClasses); - } else { - buttons[onIndex].classList.add(...inactiveClasses); - buttons[offIndex].classList.add(...activeClasses, "active"); - } - - // Set the field status - this.onFilterChange(); } onFilterChange(val) { From 1100c53e6ebc1558be25659b753db6cc8cb6edcf Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 17:18:48 +0100 Subject: [PATCH 5/7] wc: Code style format and restore classes property in toggle-switch #TASK-6409 --- .../commons/forms/toggle-switch.js | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index c72534635..d87ed6f53 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -22,7 +22,7 @@ export default class ToggleSwitch extends LitElement { constructor() { super(); - this._init(); + this.#init(); } createRenderRoot() { @@ -43,15 +43,15 @@ export default class ToggleSwitch extends LitElement { disabled: { type: Boolean }, + classes: { + type: String, + }, }; } - _init() { + #init() { this._prefix = UtilsNew.randomString(8); - - // Default values - this.onText = "ON"; - this.offText = "OFF"; + this.classes = ""; } onFilterChange(val) { @@ -62,18 +62,25 @@ export default class ToggleSwitch extends LitElement { return html`
- this.onFilterChange(true)} autocomplete="off"> -
From 97c7a53e4a42c410c9b193c64dbe36d1b911c488 Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 17:20:52 +0100 Subject: [PATCH 6/7] wc: Fix changing value in toggle-switch #TASK-6409 --- src/webcomponents/commons/forms/toggle-switch.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/webcomponents/commons/forms/toggle-switch.js b/src/webcomponents/commons/forms/toggle-switch.js index d87ed6f53..66d3cd3ed 100644 --- a/src/webcomponents/commons/forms/toggle-switch.js +++ b/src/webcomponents/commons/forms/toggle-switch.js @@ -60,12 +60,12 @@ export default class ToggleSwitch extends LitElement { render() { return html` -
+
this.onFilterChange(true)}> @@ -75,7 +75,7 @@ export default class ToggleSwitch extends LitElement { this.onFilterChange(false)}> From 077bda51641dd473ce4d702f39ca146cb45355fc Mon Sep 17 00:00:00 2001 From: Josemi Date: Mon, 8 Jul 2024 18:27:55 +0100 Subject: [PATCH 7/7] wc: Remove unused activeClass and inactiveClass for toggle switch #TASK-6409 --- src/webcomponents/commons/forms/data-form.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js index 62ad9a308..5dfe27aeb 100644 --- a/src/webcomponents/commons/forms/data-form.js +++ b/src/webcomponents/commons/forms/data-form.js @@ -954,9 +954,6 @@ export default class DataForm extends LitElement { _createToggleSwitchElement(element) { const value = this.getValue(element.field); const disabled = this._getBooleanValue(element.display?.disabled, false, element); - const activeClassName = element.display?.activeClassName ?? element.display?.activeClass ?? ""; - const inactiveClassName = element.display?.inactiveClassName ?? element.display?.inactiveClass ?? ""; - const content = html`
@@ -973,7 +968,6 @@ export default class DataForm extends LitElement { `; return this._createElementTemplate(element, value, content); - } _createToggleButtonsElement(element) {