npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.78 → 2.0.0-next.79 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.78 → 2.0.0-next.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js CHANGED Viewed

@@ -40,7 +40,7 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
     if (this.disabled) return null;
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
-  updateSelection(newValue, emitEvent = true) {
+  updateSelection(newValue, emitValueEvent = true, emitChangeEvent = false) {
     const oldValue = this.value;
     if (!this.hasAnyEnabledOption()) {
       this.options.forEach((option) => {
@@ -69,13 +69,20 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
       option.selected = option.value === newValue;
     });
     this.updateDividers();
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       this.dispatchEvent(
         new CustomEvent("value", {
           detail: { value: newValue, previousValue: oldValue }
         })
       );
     }
+    if (emitChangeEvent && oldValue !== newValue) {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: newValue }
+        })
+      );
+    }
   }
   firstUpdated(changed) {
     super.firstUpdated(changed);
@@ -174,7 +181,7 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
   }
   onOptionSelected(e) {
     const { value } = e.detail;
-    this.updateSelection(value);
+    this.updateSelection(value, true, true);
   }
   render() {
     const classes = {

package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-button-vertical-group.js","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n ObcToggleButtonVerticalOption,\n ObcToggleButtonVerticalOptionType,\n} from '../toggle-button-vertical-option/toggle-button-vertical-option.js';\n\nimport style from './toggle-button-vertical-group.css?inline';\n\nexport type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\n/*\n `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n \n Provides a vertical stack of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-vertical-option>` child element. The group manages selection\n * state automatically, deselecting the previous option when a new one is chosen.\n \n Appears as a visually unified vertical column of buttons with clear selection indicators. Commonly used for sidebar\n * navigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\n * space is available and horizontal space is limited, such as side panels or navigation drawers.\n \n ### Features\n \n - Single selection mode: Only one option can be active at a time; selecting a new option automatically\n * deselects the previous one. Similar to radio button behavior but with a button-like vertical appearance.\n * - Visual variants:\n * - `regular` (default): Standard appearance with full background and border styling.\n * - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n * - `normal`: TODO(designer) – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n * - Layout behavior:\n * - By default, the group stretches to fill available container width, with options stacked vertically.\n * - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\n * - Empty selection mode: When `allowEmptySelection` is true, a `value` that does not match any enabled\n * option leaves the group with no option selected, instead of defaulting to the first enabled option. Use\n * this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not\n * imply a choice the user has not made.\n * - Disabled state: Setting `disabled` on the group disables all contained options at once. Individual\n * options can also be disabled independently while the group remains enabled.\n * - Divider management: Automatically shows visual dividers between options and hides the divider after\n * the last option for a clean, unified appearance.\n * - Property propagation: The group automatically synchronizes the `type` property to all child\n * `<obc-toggle-button-vertical-option>` elements for consistent styling.\n * - Automatic fallback selection: If the current value is set to a disabled or non-existent option, the\n * group automatically selects the first enabled option to ensure a valid state.\n \n ### Usage Guidelines\n \n Use `<obc-toggle-button-vertical-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\n * integrated alternative to radio buttons for vertical navigation or control panels.\n \n Ideal use cases:\n * - Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n * - Vertical filter controls (e.g., all/active/archived items)\n * - Mode selectors in vertical panels (e.g., edit/preview/code modes)\n * - View toggles in constrained horizontal spaces (e.g., mobile side panels)\n * - Control panels with vertical layout preference\n \n When not to use:\n * - For binary on/off choices, use a switch or checkbox instead.\n * - For multiple selections from a set, use checkboxes or chips.\n * - For many options (6+), consider a dropdown/select or radio button list for better scannability.\n * - For horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\n * - For navigation between pages or sections, use tabs or a navigation menu.\n \n Best Practices:\n * - Each option must have a unique `value` property to prevent selection conflicts.\n * - Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n * - For icon-only buttons, ensure icons are universally recognizable or provide tooltips.\n * - Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n * - Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n * - Use `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. \|\n \n ### Events\n \n - `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n * Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n \n ### Example\n \n ```html\n * <obc-toggle-button-vertical-group value=\"list\" type=\"regular\">\n * <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * </obc-toggle-button-vertical-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options.\n * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.\n /\n@customElement('obc-toggle-button-vertical-group')\nexport class ObcToggleButtonVerticalGroup extends LitElement {\n /\n The value of the currently selected option.\n \n Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option.\n /\n @property({type: String}) value = '';\n\n /\n Visual style for all options in the group.\n \n One of: \"flat\", \"regular\", \"normal\".\n /\n @property({type: String}) type = ObcToggleButtonVerticalOptionType.regular;\n\n /\n If true, the group shrinks to fit its content width instead of stretching to fill its container.\n \n Defaults to false.\n /\n @property({type: Boolean}) hugWidth = false;\n\n /\n If true, a `value` that does not match any enabled option leaves the group with no option selected\n * instead of defaulting to the first enabled option.\n \n This also applies when the currently selected option becomes disabled: the group clears its selection\n * rather than falling back to another option.\n \n Defaults to false (the first enabled option is selected when the value does not match).\n /\n @property({type: Boolean}) allowEmptySelection = false;\n\n /\n Disables the entire group and all contained options.\n \n When set to true, all options become non-interactive, regardless of their individual disabled state.\n \n Defaults to false.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-vertical-option'})\n private options!: NodeListOf<ObcToggleButtonVerticalOption>;\n\n private _originalDisabledStates = new Map<\n ObcToggleButtonVerticalOption,\n boolean\n >();\n\n private hasAnyEnabledOption(): boolean {\n if (this.disabled) return false;\n return Array.from(this.options).some((opt) => !opt.disabled);\n }\n\n private canSelectOption(value: string): boolean {\n if (this.disabled) return false;\n const option = this.getOptionByValue(value);\n return option !== null && !option.disabled;\n }\n\n private getOptionByValue(\n value: string\n ): ObcToggleButtonVerticalOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonVerticalOption \| null {\n if (this.disabled) return null;\n return Array.from(this.options).find((opt) => !opt.disabled) \|\| null;\n }\n\n private updateSelection(newValue: string, emitEvent: boolean = true) {\n const oldValue = this.value;\n\n if (!this.hasAnyEnabledOption()) {\n this.options.forEach((option) => {\n option.selected = option.value === this.value;\n });\n this.updateDividers();\n return;\n }\n\n if (!this.canSelectOption(newValue)) {\n if (this.value && this.getOptionByValue(this.value)) {\n this.options.forEach((option) => {\n option.selected = option.value === this.value;\n });\n this.updateDividers();\n return;\n }\n if (this.allowEmptySelection) {\n newValue = '';\n } else {\n const fallback = this.getFirstSelectableOption();\n newValue = fallback?.value \|\| '';\n }\n }\n\n this.value = newValue;\n\n this.options.forEach((option) => {\n option.selected = option.value === newValue;\n });\n\n this.updateDividers();\n\n if (emitEvent && oldValue !== newValue) {\n /\n Fired when the selected option changes.\n \n The event detail contains the new value and the previous value:\n * `{ value: string, previousValue: string }`\n \n @event value\n */\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n }\n\n protected override firstUpdated(changed: PropertyValues) {\n super.firstUpdated(changed);\n\n const values = Array.from(this.options).map((opt) => opt.value);\n const uniqueValues = new Set(values);\n if (values.length !== uniqueValues.size) {\n console.warn(\n 'Toggle button vertical group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((opt) => {\n this._originalDisabledStates.set(opt, opt.disabled);\n\n opt.addEventListener('selected', (e) => this.onOptionSelected(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !opt.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(opt, opt.disabled);\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(opt, {attributes: true, attributeFilter: ['disabled']});\n\n opt.type = this.type;\n\n if (this.disabled) {\n opt.setAttribute('data-group-disabled', 'true');\n opt.disabled = true;\n }\n });\n\n if (!this.value \|\| !this.getOptionByValue(this.value)) {\n if (this.allowEmptySelection) {\n this.updateSelection('', false);\n } else {\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value, false);\n }\n }\n } else {\n this.updateSelection(this.value, false);\n }\n }\n\n private handleOptionDisabledChange() {\n const currentOption = this.getOptionByValue(this.value);\n if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n if (this.allowEmptySelection) {\n this.updateSelection('');\n return;\n }\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changed.has('type')) {\n this.options.forEach((opt) => {\n opt.type = this.type;\n });\n }\n\n if (changed.has('disabled')) {\n this.options.forEach((option) => {\n if (this.disabled) {\n option.setAttribute('data-group-disabled', 'true');\n option.disabled = true;\n } else {\n option.removeAttribute('data-group-disabled');\n const originalState =\n this._originalDisabledStates.get(option) \|\| false;\n option.disabled = originalState;\n }\n });\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n const currentOption = this.getOptionByValue(this.value);\n if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n if (this.allowEmptySelection) {\n this.updateSelection('');\n return;\n }\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n private updateDividers(): void {\n const last = this.options.length - 1;\n this.options.forEach((opt, idx) => {\n opt.showDivider = idx !== last;\n });\n }\n\n private onOptionSelected(e: Event): void {\n const {value} = (e as CustomEvent).detail;\n this.updateSelection(value);\n }\n\n override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.type === ObcToggleButtonVerticalOptionType.flat,\n regular: this.type === ObcToggleButtonVerticalOptionType.regular,\n normal: this.type === ObcToggleButtonVerticalOptionType.normal,\n 'hug-width': this.hugWidth,\n disabled: this.disabled,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\"><slot></slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(style);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-vertical-group': ObcToggleButtonVerticalGroup;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"toggle-button-vertical-group.js","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n ObcToggleButtonVerticalOption,\n ObcToggleButtonVerticalOptionType,\n} from '../toggle-button-vertical-option/toggle-button-vertical-option.js';\n\nimport style from './toggle-button-vertical-group.css?inline';\n\nexport type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\nexport type ObcToggleButtonVerticalGroupChangeEvent = CustomEvent<{\n value: string;\n}>;\n\n/*\n `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n \n Provides a vertical stack of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-vertical-option>` child element. The group manages selection\n * state automatically, deselecting the previous option when a new one is chosen.\n \n Appears as a visually unified vertical column of buttons with clear selection indicators. Commonly used for sidebar\n * navigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\n * space is available and horizontal space is limited, such as side panels or navigation drawers.\n \n ### Features\n \n - Single selection mode: Only one option can be active at a time; selecting a new option automatically\n * deselects the previous one. Similar to radio button behavior but with a button-like vertical appearance.\n * - Visual variants:\n * - `regular` (default): Standard appearance with full background and border styling.\n * - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n * - `normal`: TODO(designer) – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n * - Layout behavior:\n * - By default, the group stretches to fill available container width, with options stacked vertically.\n * - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\n * - Empty selection mode: When `allowEmptySelection` is true, a `value` that does not match any enabled\n * option leaves the group with no option selected, instead of defaulting to the first enabled option. Use\n * this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not\n * imply a choice the user has not made.\n * - Disabled state: Setting `disabled` on the group disables all contained options at once. Individual\n * options can also be disabled independently while the group remains enabled.\n * - Divider management: Automatically shows visual dividers between options and hides the divider after\n * the last option for a clean, unified appearance.\n * - Property propagation: The group automatically synchronizes the `type` property to all child\n * `<obc-toggle-button-vertical-option>` elements for consistent styling.\n * - Automatic fallback selection: If the current value is set to a disabled or non-existent option, the\n * group automatically selects the first enabled option to ensure a valid state.\n \n ### Usage Guidelines\n \n Use `<obc-toggle-button-vertical-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\n * integrated alternative to radio buttons for vertical navigation or control panels.\n \n Ideal use cases:\n * - Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n * - Vertical filter controls (e.g., all/active/archived items)\n * - Mode selectors in vertical panels (e.g., edit/preview/code modes)\n * - View toggles in constrained horizontal spaces (e.g., mobile side panels)\n * - Control panels with vertical layout preference\n \n When not to use:\n * - For binary on/off choices, use a switch or checkbox instead.\n * - For multiple selections from a set, use checkboxes or chips.\n * - For many options (6+), consider a dropdown/select or radio button list for better scannability.\n * - For horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\n * - For navigation between pages or sections, use tabs or a navigation menu.\n \n Best Practices:\n * - Each option must have a unique `value` property to prevent selection conflicts.\n * - Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n * - For icon-only buttons, ensure icons are universally recognizable or provide tooltips.\n * - Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n * - Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n * - Use `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. \|\n \n ### Events\n \n - `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n * Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n \n ### Example\n \n ```html\n * <obc-toggle-button-vertical-group value=\"list\" type=\"regular\">\n * <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * </obc-toggle-button-vertical-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options.\n * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.\n * @fires change {CustomEvent<{value: string}>} Fired when the selected value changes by user interaction.\n /\n@customElement('obc-toggle-button-vertical-group')\nexport class ObcToggleButtonVerticalGroup extends LitElement {\n /\n The value of the currently selected option.\n \n Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option.\n /\n @property({type: String}) value = '';\n\n /\n Visual style for all options in the group.\n \n One of: \"flat\", \"regular\", \"normal\".\n /\n @property({type: String}) type = ObcToggleButtonVerticalOptionType.regular;\n\n /\n If true, the group shrinks to fit its content width instead of stretching to fill its container.\n \n Defaults to false.\n /\n @property({type: Boolean}) hugWidth = false;\n\n /\n If true, a `value` that does not match any enabled option leaves the group with no option selected\n * instead of defaulting to the first enabled option.\n \n This also applies when the currently selected option becomes disabled: the group clears its selection\n * rather than falling back to another option.\n \n Defaults to false (the first enabled option is selected when the value does not match).\n /\n @property({type: Boolean}) allowEmptySelection = false;\n\n /\n Disables the entire group and all contained options.\n \n When set to true, all options become non-interactive, regardless of their individual disabled state.\n \n Defaults to false.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-vertical-option'})\n private options!: NodeListOf<ObcToggleButtonVerticalOption>;\n\n private _originalDisabledStates = new Map<\n ObcToggleButtonVerticalOption,\n boolean\n >();\n\n private hasAnyEnabledOption(): boolean {\n if (this.disabled) return false;\n return Array.from(this.options).some((opt) => !opt.disabled);\n }\n\n private canSelectOption(value: string): boolean {\n if (this.disabled) return false;\n const option = this.getOptionByValue(value);\n return option !== null && !option.disabled;\n }\n\n private getOptionByValue(\n value: string\n ): ObcToggleButtonVerticalOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonVerticalOption \| null {\n if (this.disabled) return null;\n return Array.from(this.options).find((opt) => !opt.disabled) \|\| null;\n }\n\n private updateSelection(\n newValue: string,\n emitValueEvent: boolean = true,\n emitChangeEvent: boolean = false\n ) {\n const oldValue = this.value;\n\n if (!this.hasAnyEnabledOption()) {\n this.options.forEach((option) => {\n option.selected = option.value === this.value;\n });\n this.updateDividers();\n return;\n }\n\n if (!this.canSelectOption(newValue)) {\n if (this.value && this.getOptionByValue(this.value)) {\n this.options.forEach((option) => {\n option.selected = option.value === this.value;\n });\n this.updateDividers();\n return;\n }\n if (this.allowEmptySelection) {\n newValue = '';\n } else {\n const fallback = this.getFirstSelectableOption();\n newValue = fallback?.value \|\| '';\n }\n }\n\n this.value = newValue;\n\n this.options.forEach((option) => {\n option.selected = option.value === newValue;\n });\n\n this.updateDividers();\n\n if (emitValueEvent && oldValue !== newValue) {\n /\n Fired when the selected option changes.\n \n The event detail contains the new value and the previous value:\n * `{ value: string, previousValue: string }`\n \n @event value\n /\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n\n if (emitChangeEvent && oldValue !== newValue) {\n /\n Fired when the selected value changes by user interaction.\n \n The event detail contains the new value:\n * `{ value: string }`\n \n @event change\n */\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value: newValue},\n })\n );\n }\n }\n\n protected override firstUpdated(changed: PropertyValues) {\n super.firstUpdated(changed);\n\n const values = Array.from(this.options).map((opt) => opt.value);\n const uniqueValues = new Set(values);\n if (values.length !== uniqueValues.size) {\n console.warn(\n 'Toggle button vertical group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((opt) => {\n this._originalDisabledStates.set(opt, opt.disabled);\n\n opt.addEventListener('selected', (e) => this.onOptionSelected(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !opt.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(opt, opt.disabled);\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(opt, {attributes: true, attributeFilter: ['disabled']});\n\n opt.type = this.type;\n\n if (this.disabled) {\n opt.setAttribute('data-group-disabled', 'true');\n opt.disabled = true;\n }\n });\n\n if (!this.value \|\| !this.getOptionByValue(this.value)) {\n if (this.allowEmptySelection) {\n this.updateSelection('', false);\n } else {\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value, false);\n }\n }\n } else {\n this.updateSelection(this.value, false);\n }\n }\n\n private handleOptionDisabledChange() {\n const currentOption = this.getOptionByValue(this.value);\n if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n if (this.allowEmptySelection) {\n this.updateSelection('');\n return;\n }\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changed.has('type')) {\n this.options.forEach((opt) => {\n opt.type = this.type;\n });\n }\n\n if (changed.has('disabled')) {\n this.options.forEach((option) => {\n if (this.disabled) {\n option.setAttribute('data-group-disabled', 'true');\n option.disabled = true;\n } else {\n option.removeAttribute('data-group-disabled');\n const originalState =\n this._originalDisabledStates.get(option) \|\| false;\n option.disabled = originalState;\n }\n });\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n const currentOption = this.getOptionByValue(this.value);\n if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n if (this.allowEmptySelection) {\n this.updateSelection('');\n return;\n }\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n private updateDividers(): void {\n const last = this.options.length - 1;\n this.options.forEach((opt, idx) => {\n opt.showDivider = idx !== last;\n });\n }\n\n private onOptionSelected(e: Event): void {\n const {value} = (e as CustomEvent).detail;\n this.updateSelection(value, true, true);\n }\n\n override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.type === ObcToggleButtonVerticalOptionType.flat,\n regular: this.type === ObcToggleButtonVerticalOptionType.regular,\n normal: this.type === ObcToggleButtonVerticalOptionType.normal,\n 'hug-width': this.hugWidth,\n disabled: this.disabled,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\"><slot></slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(style);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-vertical-group': ObcToggleButtonVerticalGroup;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/toggle-switch/toggle-switch.d.ts CHANGED Viewed

@@ -79,6 +79,7 @@ export type ObcToggleSwitchInputEvent = CustomEvent<{
  *
  * @slot icon - Leading icon slot (shown when `hasIcon` is true)
  * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes
+ * @fires change - Dispatched when the value of the input changes by user interaction
  */
 export declare class ObcToggleSwitch extends LitElement {
     /**
@@ -126,6 +127,7 @@ export declare class ObcToggleSwitch extends LitElement {
      * @fires input - Dispatched when the value of the input changes
      */
     private _tryChange;
+    private _fireChangeEvent;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/components/toggle-switch/toggle-switch.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,+BAA+B,CAAC;AAIvC,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG~~;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACuB,WAAW,SAAM;IAE3C;;;OAGG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACwB,eAAe,UAAS;IAEnD;;;;;OAKG;IACH,OAAO,CAAC,UAAU;~~IAsBT~~,MAAM;~~IAsCf~~,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1	+ {"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,+BAA+B,CAAC;AAIvC,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACuB,WAAW,SAAM;IAE3C;;;OAGG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACwB,eAAe,UAAS;IAEnD;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,gBAAgB;IAQf,MAAM;IAuCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/toggle-switch/toggle-switch.js CHANGED Viewed

@@ -51,6 +51,13 @@ let ObcToggleSwitch = class extends LitElement {
       e.target.checked = this.checked;
     }
   }
+  _fireChangeEvent(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("change"));
+  }
   render() {
     return html`
       <label
@@ -75,6 +82,7 @@ let ObcToggleSwitch = class extends LitElement {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>

package/dist/components/toggle-switch/toggle-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-switch.js","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../icon-button/icon-button.js';\nimport componentStyle from './toggle-switch.css?inline';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcToggleSwitchInputEvent = CustomEvent<{\n checked: boolean;\n}>;\n\n/*\n `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n \n Provides a visual switch control for toggling between two states (checked/unchecked), commonly used for enabling or disabling a setting or feature. The component supports an optional label, description, icon, and divider for flexible presentation in lists or forms.\n \n ---\n \n ### Features\n * - Binary toggle: Allows users to switch between checked (on) and unchecked (off) states.\n * - Label and Description: Displays a primary label and an optional secondary description for context.\n * - Icon Support: Can display a leading icon via the `icon` slot for visual emphasis.\n * - Disabled State: Can be set to disabled, preventing user interaction and visually indicating inactivity.\n * - Bottom Divider: Optional divider for use in lists or grouped settings.\n * - Responsive Layout: Adapts label/description layout based on content; long descriptions are truncated with ellipsis.\n \n ---\n \n ### Usage Guidelines\n * Use `obc-toggle-switch` for settings or preferences that require a simple on/off or enable/disable control. Ideal for scenarios where the user needs to quickly toggle a feature, such as activating notifications, enabling dark mode, or switching connectivity options. Avoid using for mutually exclusive choices—use radio buttons for those cases.\n \n - Place in forms, settings panels, or lists where binary choices are needed.\n * - Use the description property to clarify the effect of the toggle if the label alone is not sufficient.\n * - If an icon is relevant, provide it via the `icon` slot to reinforce the meaning.\n * - For accessibility, ensure the label clearly describes the toggle's function.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|---------------------\|-------------------------------------------\|\n * \| icon \| `hasIcon` is true \| Leading icon to visually represent toggle \|\n \n ---\n \n ### Properties and Attributes\n * - `label` (string): Main label for the toggle (required for clarity).\n * - `checked` (boolean): Whether the toggle is in the \"on\" state. Defaults to `false`.\n * - `disabled` (boolean): Disables interaction and applies a disabled style.\n * - `hasDescription` (boolean): If true, shows the description text below the label.\n * - `description` (string): Supplementary text shown when `hasDescription` is true.\n * - `hasBottomDivider` (boolean): If true, renders a divider below the toggle (useful in lists).\n * - `hasIcon` (boolean): If true, displays the `icon` slot before the label.\n \n ---\n \n ### Events\n * - `input` – Fired when the toggle state changes (checked/unchecked).\n \n ---\n \n ### Best Practices\n * - Use concise labels and keep descriptions brief; long descriptions are truncated.\n * - Only use the divider when presenting multiple toggles in a list for visual separation.\n * - For accessibility, ensure the label is descriptive and unique within the context.\n * - Avoid using toggle switches for actions that require confirmation or have destructive effects.\n * - For mutually exclusive options, use radio buttons instead.\n \n ---\n \n Example:\n * ```html\n * <obc-toggle-switch\n * label=\"Enable notifications\"\n * ?checked=${true}\n * ?hasDescription=${true}\n * description=\"Receive updates and alerts\"\n * ?hasIcon=${true}\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-switch>\n * ```\n \n In this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.\n \n @slot icon - Leading icon slot (shown when `hasIcon` is true)\n * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes\n /\n@customElement('obc-toggle-switch')\nexport class ObcToggleSwitch extends LitElement {\n /\n Main label for the toggle switch. Should clearly describe the setting being toggled.\n /\n @property({type: String}) label = 'Label';\n\n /\n Whether the toggle is in the \"on\" (checked) state.\n * Set to true to display as active/on.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Disables the toggle, preventing user interaction and applying a disabled style.\n /\n @property({type: Boolean}) disabled = false;\n\n /\n If true, displays the description text below the label.\n /\n @property({type: Boolean}) hasDescription = false;\n\n /\n Supplementary description text shown when `hasDescription` is true.\n * Use to clarify the effect or details of the toggle.\n * @availableWhen hasDescription==true\n /\n @property({type: String}) description = '';\n\n /\n If true, renders a divider below the toggle switch.\n * Useful for visually separating items in a list.\n /\n @property({type: Boolean}) hasBottomDivider = false;\n\n /\n If true, displays a leading icon before the label.\n * Provide icon content via the `icon` slot.\n /\n @property({type: Boolean}) hasIcon = false;\n\n /\n If true, the toggle is controlled externally.\n * Use to control the toggle state from outside the component.\n /\n @property({type: Boolean}) externalControl = false;\n\n /\n Handles input events to change the toggle state.\n * Prevents changes if the toggle is disabled.\n * @param e {InputEvent}\n * @fires input - Dispatched when the value of the input changes\n */\n private _tryChange(e: InputEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n const nextChecked = !this.checked;\n if (!this.externalControl) {\n this.checked = nextChecked;\n }\n e.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('input', {\n detail: {checked: nextChecked},\n })\n );\n\n if (this.externalControl) {\n (e.target as HTMLInputElement).checked = this.checked;\n }\n }\n\n override render() {\n return html`\n <label\n class=${classMap({\n checked: this.checked,\n disabled: this.disabled,\n 'has-description': this.hasDescription,\n })}\n >\n <div class=\"icon-label-container\">\n ${this.hasIcon\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n <div class=\"label-container\">\n <span class=\"label\">${this.label}</span>\n ${this.hasDescription\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing}\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"presenter ${classMap({checked: this.checked})}\">\n <div class=\"knob\"></div>\n <input\n type=\"checkbox\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n @input=${this._tryChange}\n />\n </div>\n </div>\n ${this.hasBottomDivider\n ? html`<div class=\"bottom-divider\"></div>`\n : nothing}\n </label>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-switch': ObcToggleSwitch;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyFO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,QAAQ;AAMP,SAAA,UAAU;AAKV,SAAA,WAAW;AAKX,SAAA,iBAAiB;AAOlB,SAAA,cAAc;AAMb,SAAA,mBAAmB;AAMnB,SAAA,UAAU;AAMV,SAAA,kBAAkB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrC,WAAW,GAAe;AAChC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,KAAK;AAC1B,QAAI,CAAC,KAAK,iBAAiB;AACzB,WAAK,UAAU;AAAA,IACjB;AACA,MAAE,gBAAA;AACF,SAAK;AAAA,MACH,IAAI,YAAY,SAAS;AAAA,QACvB,QAAQ,EAAC,SAAS,YAAA;AAAA,MAAW,CAC9B;AAAA,IAAA;AAGH,QAAI,KAAK,iBAAiB;AACvB,QAAE,OAA4B,UAAU,KAAK;AAAA,IAChD;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,UACH,oEACA,OAAO;AAAA;AAAA,kCAEa,KAAK,KAAK;AAAA,cAC9B,KAAK,iBACH,iCAAiC,KAAK,WAAW,YACjD,OAAO;AAAA;AAAA;AAAA;AAAA,kCAIW,SAAS,EAAC,SAAS,KAAK,QAAA,CAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI1C,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA,uBAChB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,UAI5B,KAAK,mBACH,2CACA,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AAlHa,gBAiHK,SAAS,UAAU,cAAc;AA7GvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,gBAIe,WAAA,SAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAVd,gBAUgB,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,gBAegB,WAAA,YAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApBd,gBAoBgB,WAAA,kBAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,gBA2Be,WAAA,eAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,gBAiCgB,WAAA,oBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvCd,gBAuCgB,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Cd,gBA6CgB,WAAA,mBAAA,CAAA;AA7ChB,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
1	+ {"version":3,"file":"toggle-switch.js","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../icon-button/icon-button.js';\nimport componentStyle from './toggle-switch.css?inline';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcToggleSwitchInputEvent = CustomEvent<{\n checked: boolean;\n}>;\n\n/*\n `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n \n Provides a visual switch control for toggling between two states (checked/unchecked), commonly used for enabling or disabling a setting or feature. The component supports an optional label, description, icon, and divider for flexible presentation in lists or forms.\n \n ---\n \n ### Features\n * - Binary toggle: Allows users to switch between checked (on) and unchecked (off) states.\n * - Label and Description: Displays a primary label and an optional secondary description for context.\n * - Icon Support: Can display a leading icon via the `icon` slot for visual emphasis.\n * - Disabled State: Can be set to disabled, preventing user interaction and visually indicating inactivity.\n * - Bottom Divider: Optional divider for use in lists or grouped settings.\n * - Responsive Layout: Adapts label/description layout based on content; long descriptions are truncated with ellipsis.\n \n ---\n \n ### Usage Guidelines\n * Use `obc-toggle-switch` for settings or preferences that require a simple on/off or enable/disable control. Ideal for scenarios where the user needs to quickly toggle a feature, such as activating notifications, enabling dark mode, or switching connectivity options. Avoid using for mutually exclusive choices—use radio buttons for those cases.\n \n - Place in forms, settings panels, or lists where binary choices are needed.\n * - Use the description property to clarify the effect of the toggle if the label alone is not sufficient.\n * - If an icon is relevant, provide it via the `icon` slot to reinforce the meaning.\n * - For accessibility, ensure the label clearly describes the toggle's function.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|---------------------\|-------------------------------------------\|\n * \| icon \| `hasIcon` is true \| Leading icon to visually represent toggle \|\n \n ---\n \n ### Properties and Attributes\n * - `label` (string): Main label for the toggle (required for clarity).\n * - `checked` (boolean): Whether the toggle is in the \"on\" state. Defaults to `false`.\n * - `disabled` (boolean): Disables interaction and applies a disabled style.\n * - `hasDescription` (boolean): If true, shows the description text below the label.\n * - `description` (string): Supplementary text shown when `hasDescription` is true.\n * - `hasBottomDivider` (boolean): If true, renders a divider below the toggle (useful in lists).\n * - `hasIcon` (boolean): If true, displays the `icon` slot before the label.\n \n ---\n \n ### Events\n * - `input` – Fired when the toggle state changes (checked/unchecked).\n \n ---\n \n ### Best Practices\n * - Use concise labels and keep descriptions brief; long descriptions are truncated.\n * - Only use the divider when presenting multiple toggles in a list for visual separation.\n * - For accessibility, ensure the label is descriptive and unique within the context.\n * - Avoid using toggle switches for actions that require confirmation or have destructive effects.\n * - For mutually exclusive options, use radio buttons instead.\n \n ---\n \n Example:\n * ```html\n * <obc-toggle-switch\n * label=\"Enable notifications\"\n * ?checked=${true}\n * ?hasDescription=${true}\n * description=\"Receive updates and alerts\"\n * ?hasIcon=${true}\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-switch>\n * ```\n \n In this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.\n \n @slot icon - Leading icon slot (shown when `hasIcon` is true)\n * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes\n * @fires change - Dispatched when the value of the input changes by user interaction\n /\n@customElement('obc-toggle-switch')\nexport class ObcToggleSwitch extends LitElement {\n /\n Main label for the toggle switch. Should clearly describe the setting being toggled.\n /\n @property({type: String}) label = 'Label';\n\n /\n Whether the toggle is in the \"on\" (checked) state.\n * Set to true to display as active/on.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Disables the toggle, preventing user interaction and applying a disabled style.\n /\n @property({type: Boolean}) disabled = false;\n\n /\n If true, displays the description text below the label.\n /\n @property({type: Boolean}) hasDescription = false;\n\n /\n Supplementary description text shown when `hasDescription` is true.\n * Use to clarify the effect or details of the toggle.\n * @availableWhen hasDescription==true\n /\n @property({type: String}) description = '';\n\n /\n If true, renders a divider below the toggle switch.\n * Useful for visually separating items in a list.\n /\n @property({type: Boolean}) hasBottomDivider = false;\n\n /\n If true, displays a leading icon before the label.\n * Provide icon content via the `icon` slot.\n /\n @property({type: Boolean}) hasIcon = false;\n\n /\n If true, the toggle is controlled externally.\n * Use to control the toggle state from outside the component.\n /\n @property({type: Boolean}) externalControl = false;\n\n /\n Handles input events to change the toggle state.\n * Prevents changes if the toggle is disabled.\n * @param e {InputEvent}\n * @fires input - Dispatched when the value of the input changes\n */\n private _tryChange(e: InputEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n const nextChecked = !this.checked;\n if (!this.externalControl) {\n this.checked = nextChecked;\n }\n e.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('input', {\n detail: {checked: nextChecked},\n })\n );\n\n if (this.externalControl) {\n (e.target as HTMLInputElement).checked = this.checked;\n }\n }\n\n private _fireChangeEvent(e: Event) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n this.dispatchEvent(new CustomEvent('change'));\n }\n\n override render() {\n return html`\n <label\n class=${classMap({\n checked: this.checked,\n disabled: this.disabled,\n 'has-description': this.hasDescription,\n })}\n >\n <div class=\"icon-label-container\">\n ${this.hasIcon\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n <div class=\"label-container\">\n <span class=\"label\">${this.label}</span>\n ${this.hasDescription\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing}\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"presenter ${classMap({checked: this.checked})}\">\n <div class=\"knob\"></div>\n <input\n type=\"checkbox\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n @input=${this._tryChange}\n @change=${this._fireChangeEvent}\n />\n </div>\n </div>\n ${this.hasBottomDivider\n ? html`<div class=\"bottom-divider\"></div>`\n : nothing}\n </label>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-switch': ObcToggleSwitch;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0FO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,QAAQ;AAMP,SAAA,UAAU;AAKV,SAAA,WAAW;AAKX,SAAA,iBAAiB;AAOlB,SAAA,cAAc;AAMb,SAAA,mBAAmB;AAMnB,SAAA,UAAU;AAMV,SAAA,kBAAkB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrC,WAAW,GAAe;AAChC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,KAAK;AAC1B,QAAI,CAAC,KAAK,iBAAiB;AACzB,WAAK,UAAU;AAAA,IACjB;AACA,MAAE,gBAAA;AACF,SAAK;AAAA,MACH,IAAI,YAAY,SAAS;AAAA,QACvB,QAAQ,EAAC,SAAS,YAAA;AAAA,MAAW,CAC9B;AAAA,IAAA;AAGH,QAAI,KAAK,iBAAiB;AACvB,QAAE,OAA4B,UAAU,KAAK;AAAA,IAChD;AAAA,EACF;AAAA,EAEQ,iBAAiB,GAAU;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF;AAAA,IACF;AACA,SAAK,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,EAC9C;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,UACH,oEACA,OAAO;AAAA;AAAA,kCAEa,KAAK,KAAK;AAAA,cAC9B,KAAK,iBACH,iCAAiC,KAAK,WAAW,YACjD,OAAO;AAAA;AAAA;AAAA;AAAA,kCAIW,SAAS,EAAC,SAAS,KAAK,QAAA,CAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI1C,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA,uBAChB,KAAK,UAAU;AAAA,wBACd,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,UAInC,KAAK,mBACH,2CACA,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AA3Ha,gBA0HK,SAAS,UAAU,cAAc;AAtHvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,gBAIe,WAAA,SAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAVd,gBAUgB,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,gBAegB,WAAA,YAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApBd,gBAoBgB,WAAA,kBAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,gBA2Be,WAAA,eAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,gBAiCgB,WAAA,oBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvCd,gBAuCgB,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Cd,gBA6CgB,WAAA,mBAAA,CAAA;AA7ChB,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.78",
+  "version": "2.0.0-next.79",
   "type": "module",
   "repository": {
     "type": "git",