npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.113 → 2.0.0-next.115 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.113 → 2.0.0-next.115

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 (12) hide show

package/custom-elements.json CHANGED Viewed

@@ -66350,7 +66350,15 @@
             {
               "kind": "method",
               "name": "fireChangeEvent",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -66391,7 +66399,7 @@
               "type": {
                 "text": "Event"
               },
-              "description": "Standard change event on value change"
+              "description": "{CustomEvent<{value: string}>} Dispatched on value change, carrying the committed value"
             },
             {
               "description": "Fired when the input field is blurred",
@@ -69027,7 +69035,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n\nProvides 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\nUse `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\nIn this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.",
+          "description": "`<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n\nProvides 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\nUse `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- `change` – Fired when the toggle state changes by user interaction.\n\nBoth events report the state the user selected. When `externalControl` is\ntrue the component does not update itself; the consumer decides whether to\napply the reported state to `checked` and may reject the interaction by\nleaving `checked` unchanged.\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\nIn this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.",
           "name": "ObcToggleSwitch",
           "slots": [
             {
@@ -69116,6 +69124,15 @@
               "description": "If true, the toggle is controlled externally.\nUse to control the toggle state from outside the component.",
               "attribute": "externalControl"
             },
+            {
+              "kind": "field",
+              "name": "_userSelectedChecked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "description": "The state the user selected in the most recent interaction. In\nexternalControl mode this can differ from `checked` until the consumer\naccepts the change, so the change event reports it instead of `checked`."
+            },
             {
               "kind": "method",
               "name": "_tryChange",
@@ -69157,7 +69174,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Dispatched when the value of the input changes by user interaction"
+              "description": "{ObcToggleSwitchChangeEvent} Dispatched when the value of the input changes by user interaction"
             }
           ],
           "attributes": [

package/dist/components/text-input-field/text-input-field.d.ts CHANGED Viewed

@@ -42,7 +42,7 @@ export declare enum ObcTextInputFieldPlacement {
  * @slot label-icon - Icon displayed before the label text (when `hasLabelIcon` is true)
  * @slot helper-icon - Icon displayed before helper or error text (when `hasHelperIcon` is true)
  * @fires input - Standard input event on value change
- * @fires change - Standard change event on value change
+ * @fires change - {CustomEvent<{value: string}>} Dispatched on value change, carrying the committed value
  * @fires clear - Fired when the clear button is clicked
  * @fires blur - Fired when the input field is blurred
  * @stable

package/dist/components/text-input-field/text-input-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-input-field/text-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAMb,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0CAA0C,CAAC;AAClD,OAAO,2CAA2C,CAAC;AAEnD,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEtE;;;GAGG;AACH,oBAAY,sBAAsB;IAChC,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,oBAAY,0BAA0B;IACpC,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,0BAA0B;IACpC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,EAAE,sBAAsB,CACxB;IACJ,SAAS,EAAE,0BAA0B,CAC7B;IAEQ,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACxD,iCAAiC;IACP,SAAS,SAAM;IACzC,kEAAkE;IACvC,oBAAoB,UAAS;IACxD,+EAA+E;IACpD,aAAa,UAAS;IAEjD;;OAEG;IACwB,sBAAsB,UAAS;IAE1D,0CAA0C;IAChB,IAAI,SAAM;IAEpC,2CAA2C;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAE7C,4CAA4C;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,qBAAqB,CACrB;IAEL,cAAc,UAAS;IAElD,sDAAsD;IAC3B,cAAc,UAAS;IAExB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IAC5C,+BAA+B;IACJ,YAAY,UAAS;IAChD,+BAA+B;IACL,cAAc,EAAE,0BAA0B,CAClC;IAEP,aAAa,UAAS;IACvB,eAAe,EAAE,0BAA0B,CACnC;IAElC,oDAAoD;IAC3C,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,yBAAyB,CAAM;IAEzB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,eAAe;~~IAIvB~~,OAAO,KAAK,iBAAiB,GAO5B;IAED,OAAO,KAAK,OAAO,GAMlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAU5C,OAAO;IAUP,MAAM;IAwHf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
1	+ {"version":3,"file":"text-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-input-field/text-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAMb,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0CAA0C,CAAC;AAClD,OAAO,2CAA2C,CAAC;AAEnD,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEtE;;;GAGG;AACH,oBAAY,sBAAsB;IAChC,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,oBAAY,0BAA0B;IACpC,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,0BAA0B;IACpC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,EAAE,sBAAsB,CACxB;IACJ,SAAS,EAAE,0BAA0B,CAC7B;IAEQ,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACxD,iCAAiC;IACP,SAAS,SAAM;IACzC,kEAAkE;IACvC,oBAAoB,UAAS;IACxD,+EAA+E;IACpD,aAAa,UAAS;IAEjD;;OAEG;IACwB,sBAAsB,UAAS;IAE1D,0CAA0C;IAChB,IAAI,SAAM;IAEpC,2CAA2C;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAE7C,4CAA4C;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,qBAAqB,CACrB;IAEL,cAAc,UAAS;IAElD,sDAAsD;IAC3B,cAAc,UAAS;IAExB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IAC5C,+BAA+B;IACJ,YAAY,UAAS;IAChD,+BAA+B;IACL,cAAc,EAAE,0BAA0B,CAClC;IAEP,aAAa,UAAS;IACvB,eAAe,EAAE,0BAA0B,CACnC;IAElC,oDAAoD;IAC3C,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,yBAAyB,CAAM;IAEzB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,eAAe;IAOvB,OAAO,KAAK,iBAAiB,GAO5B;IAED,OAAO,KAAK,OAAO,GAMlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAU5C,OAAO;IAUP,MAAM;IAwHf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/components/text-input-field/text-input-field.js CHANGED Viewed

@@ -129,8 +129,11 @@ let ObcTextInputField = class extends LitElement {
       ${text}
     </div>`;
   }
-  fireChangeEvent() {
-    this.dispatchEvent(new CustomEvent("change"));
+  fireChangeEvent(e) {
+    const target = e.target;
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: { value: target.value } })
+    );
   }
   get shouldUpdateValue() {
     if (this.rejectUpdates) return false;

package/dist/components/text-input-field/text-input-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-field.js","sources":["../../../src/components/text-input-field/text-input-field.ts"],"sourcesContent":["import {\n LitElement,\n html,\n nothing,\n unsafeCSS,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './text-input-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-visibility-on-google.js';\nimport '../../icons/icon-visibility-off-google.js';\n\nexport type ObcTextInputFieldBlurEvent = CustomEvent<{value: string}>;\n\n/*\n Common HTML input types for practical use with `<obc-text-input-field>`.\n * Focuses on the most commonly used input types in real applications.\n /\nexport enum HTMLInputTypeAttribute {\n Text = 'text',\n Password = 'password',\n Email = 'email',\n Tel = 'tel',\n Url = 'url',\n Search = 'search',\n Date = 'date',\n Time = 'time',\n}\n\nexport enum ObcTextInputFieldTextAlign {\n Left = 'left',\n Center = 'center',\n}\n\nexport enum ObcTextInputFieldSize {\n Regular = 'regular',\n Large = 'large',\n}\n\nexport enum ObcTextInputFieldPlacement {\n Left = 'left',\n Center = 'center',\n Right = 'right',\n}\n\n/\n `<obc-text-input-field>` – A text input field component with optional icons, label, and helper text.\n \n \n \n @slot leading-icon - Icon displayed before the input value (when `hasLeadingIcon` is true)\n * @slot label-icon - Icon displayed before the label text (when `hasLabelIcon` is true)\n * @slot helper-icon - Icon displayed before helper or error text (when `hasHelperIcon` is true)\n * @fires input - Standard input event on value change\n * @fires change - Standard change event on value change\n * @fires clear - Fired when the clear button is clicked\n * @fires blur - Fired when the input field is blurred\n * @stable\n /\n@customElement('obc-text-input-field')\nexport class ObcTextInputField extends LitElement {\n @property({type: String}) value = '';\n @property({type: String}) placeholder = '';\n @property({type: String}) type: HTMLInputTypeAttribute =\n HTMLInputTypeAttribute.Text;\n @property({type: String}) textAlign: ObcTextInputFieldTextAlign =\n ObcTextInputFieldTextAlign.Left;\n\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) readonly = false;\n @property({type: Boolean, reflect: true}) error = false;\n /* @availableWhen error==true /\n @property({type: String}) errorText = '';\n /* If true, the input field will not update its value on focus /\n @property({type: Boolean}) rejectUpdatesOnFocus = false;\n /* If true, the value will only be initially set, and not updated on change /\n @property({type: Boolean}) rejectUpdates = false;\n\n /* If true, the input field will not update its value if the value is the same as the previous value\n * This is useful to avoid React re-rendering to reset the value.\n /\n @property({type: Boolean}) rejectDuplicateUpdates = false;\n\n /* Name attribute for form integration /\n @property({type: String}) name = '';\n\n /* Maximum number of characters allowed /\n @property({type: Number}) maxlength?: number;\n\n /* Minimum number of characters required /\n @property({type: Number}) minlength?: number;\n\n @property({type: String}) size: ObcTextInputFieldSize =\n ObcTextInputFieldSize.Regular;\n\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /* Shows a clear button when the input has a value /\n @property({type: Boolean}) hasClearButton = false;\n\n @property({type: String}) helperText = '';\n\n @property({type: String}) label = '';\n @property({type: Boolean}) required = false;\n /* @availableWhen label!='' /\n @property({type: Boolean}) hasLabelIcon = false;\n /* @availableWhen label!='' /\n @property({type: String}) labelPlacement: ObcTextInputFieldPlacement =\n ObcTextInputFieldPlacement.Left;\n\n @property({type: Boolean}) hasHelperIcon = false;\n @property({type: String}) helperPlacement: ObcTextInputFieldPlacement =\n ObcTextInputFieldPlacement.Left;\n\n /* Internal state for password visibility toggle */\n @state() private passwordVisible = false;\n @state() private hasFocus = false;\n @state() private previousValue = '';\n @state() private previousInputElementValue = '';\n\n @query('.value-input') private inputElement?: HTMLInputElement;\n\n private onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n this.previousInputElementValue = this.value;\n }\n\n private onFocus() {\n this.hasFocus = true;\n }\n\n private onBlur() {\n this.hasFocus = false;\n }\n\n private handleClear(e: Event) {\n // Prevent label click from triggering unwanted focus behavior\n e.stopPropagation();\n\n this.value = '';\n this.inputElement!.value = '';\n this.dispatchEvent(\n new CustomEvent('clear', {bubbles: true, composed: true})\n );\n // Dispatch input and change events for consistency with native behavior\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true})\n );\n this.dispatchEvent(new Event('change', {bubbles: true, composed: true}));\n\n // Return focus to the input field\n this.inputElement?.focus();\n }\n\n private togglePasswordVisibility(e: Event) {\n // Prevent label click from triggering unwanted focus behavior\n e.stopPropagation();\n this.passwordVisible = !this.passwordVisible;\n }\n\n private getInputMode(): string {\n switch (this.type) {\n case HTMLInputTypeAttribute.Tel:\n return 'tel';\n case HTMLInputTypeAttribute.Email:\n return 'email';\n case HTMLInputTypeAttribute.Url:\n return 'url';\n case HTMLInputTypeAttribute.Search:\n return 'search';\n default:\n return 'text';\n }\n }\n\n private renderFooterText(\n text: string,\n isError: boolean\n ): TemplateResult \| typeof nothing {\n if (!text) return nothing;\n return html`<div\n id=\"helper-text\"\n class=${classMap({\n [isError ? 'error-text' : 'helper-text']: true,\n [`helper-placement-${this.helperPlacement}`]: true,\n })}\n >\n ${this.hasHelperIcon\n ? html`<div class=\"helper-icon\"><slot name=\"helper-icon\"></slot></div>`\n : nothing}\n ${text}\n </div>`;\n }\n\n private fireChangeEvent() {\n this.dispatchEvent(new CustomEvent('change'));\n }\n\n private get shouldUpdateValue(): boolean {\n if (this.rejectUpdates) return false;\n if (this.rejectUpdatesOnFocus && this.hasFocus) return false;\n if (this.rejectDuplicateUpdates && this.value === this.previousValue) {\n return false;\n }\n return true;\n }\n\n private get isEmpty(): boolean {\n const currentValue =\n !this.shouldUpdateValue && this.inputElement\n ? this.inputElement.value\n : this.value;\n return currentValue.trim().length === 0;\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n if (\n changedProperties.has('value') &&\n !this.shouldUpdateValue &&\n this.inputElement\n ) {\n this.value = this.inputElement.value;\n }\n }\n\n override updated() {\n if (\n this.rejectDuplicateUpdates &&\n this.value !== this.previousValue &&\n (this.previousInputElementValue !== this.value \|\| !this.hasFocus)\n ) {\n this.previousValue = this.value;\n }\n }\n\n override render() {\n const hasHelperOrError =\n Boolean(this.helperText) \|\| Boolean(this.error && this.errorText);\n const showClearButton =\n this.hasClearButton && this.value.length > 0 && !this.disabled;\n const isPasswordField = this.type === HTMLInputTypeAttribute.Password;\n const showPasswordToggle = isPasswordField && !this.disabled;\n const isClearButtonVisible = showClearButton && !showPasswordToggle;\n const effectiveType =\n isPasswordField && this.passwordVisible\n ? HTMLInputTypeAttribute.Text\n : this.type;\n\n // Determine trailing button state for padding adjustment\n const hasTrailingButton = showPasswordToggle \|\| isClearButtonVisible;\n\n let value = this.value;\n\n if (!this.shouldUpdateValue && this.inputElement) {\n value = this.inputElement.value;\n }\n\n return html`\n <label\n class=${classMap({\n wrapper: true,\n [`align-${this.textAlign}`]: true,\n [`size-${this.size}`]: true,\n error: this.error,\n disabled: this.disabled,\n empty: this.isEmpty,\n helpertext: hasHelperOrError,\n haslabel: Boolean(this.label),\n 'has-trailing-button': hasTrailingButton,\n })}\n >\n ${this.label\n ? html`<div\n class=${classMap({\n 'label-text-container': true,\n [`label-placement-${this.labelPlacement}`]: true,\n })}\n >\n ${this.hasLabelIcon\n ? html`<div class=\"label-icon\">\n <slot name=\"label-icon\"></slot>\n </div>`\n : nothing}\n <span class=\"label-text\">${this.label}</span>\n ${this.required\n ? html`<div class=\"required-indicator\"></div>`\n : nothing}\n </div>`\n : nothing}\n\n <div class=\"horizontal-container\">\n <div class=\"input-field-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"label-container\">\n <input\n type=${effectiveType}\n inputmode=${this.getInputMode()}\n class=\"value-input\"\n .value=${value}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n .placeholder=${this.placeholder}\n name=${ifDefined(this.name \|\| undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n maxlength=${ifDefined(this.maxlength)}\n minlength=${ifDefined(this.minlength)}\n aria-invalid=${this.error ? 'true' : 'false'}\n aria-describedby=${ifDefined(\n hasHelperOrError ? 'helper-text' : undefined\n )}\n autocomplete=\"off\"\n @input=${this.onInput}\n @change=${this.fireChangeEvent}\n />\n </div>\n ${showPasswordToggle\n ? html`<obc-icon-button\n variant=\"flat\"\n class=\"trailing-icon-button\"\n @click=${this.togglePasswordVisibility}\n aria-label=${this.passwordVisible\n ? 'Hide password'\n : 'Show password'}\n >\n ${this.passwordVisible\n ? html`<obi-visibility-on-google></obi-visibility-on-google>`\n : html`<obi-visibility-off-google></obi-visibility-off-google>`}\n </obc-icon-button>`\n : nothing}\n ${isClearButtonVisible\n ? html`<obc-icon-button\n variant=\"flat\"\n class=\"trailing-icon-button\"\n @click=${this.handleClear}\n aria-label=\"Clear input\"\n >\n <obi-close-google></obi-close-google>\n </obc-icon-button>`\n : nothing}\n </div>\n </div>\n\n ${this.error && this.errorText\n ? this.renderFooterText(this.errorText, true)\n : this.renderFooterText(this.helperText, false)}\n </label>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-text-input-field': ObcTextInputField;\n }\n}\n"],"names":["HTMLInputTypeAttribute","ObcTextInputFieldTextAlign","ObcTextInputFieldSize","ObcTextInputFieldPlacement"],"mappings":"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"}
1	+ {"version":3,"file":"text-input-field.js","sources":["../../../src/components/text-input-field/text-input-field.ts"],"sourcesContent":["import {\n LitElement,\n html,\n nothing,\n unsafeCSS,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './text-input-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-visibility-on-google.js';\nimport '../../icons/icon-visibility-off-google.js';\n\nexport type ObcTextInputFieldBlurEvent = CustomEvent<{value: string}>;\n\n/*\n Common HTML input types for practical use with `<obc-text-input-field>`.\n * Focuses on the most commonly used input types in real applications.\n /\nexport enum HTMLInputTypeAttribute {\n Text = 'text',\n Password = 'password',\n Email = 'email',\n Tel = 'tel',\n Url = 'url',\n Search = 'search',\n Date = 'date',\n Time = 'time',\n}\n\nexport enum ObcTextInputFieldTextAlign {\n Left = 'left',\n Center = 'center',\n}\n\nexport enum ObcTextInputFieldSize {\n Regular = 'regular',\n Large = 'large',\n}\n\nexport enum ObcTextInputFieldPlacement {\n Left = 'left',\n Center = 'center',\n Right = 'right',\n}\n\n/\n `<obc-text-input-field>` – A text input field component with optional icons, label, and helper text.\n \n \n \n @slot leading-icon - Icon displayed before the input value (when `hasLeadingIcon` is true)\n * @slot label-icon - Icon displayed before the label text (when `hasLabelIcon` is true)\n * @slot helper-icon - Icon displayed before helper or error text (when `hasHelperIcon` is true)\n * @fires input - Standard input event on value change\n * @fires change - {CustomEvent<{value: string}>} Dispatched on value change, carrying the committed value\n * @fires clear - Fired when the clear button is clicked\n * @fires blur - Fired when the input field is blurred\n * @stable\n /\n@customElement('obc-text-input-field')\nexport class ObcTextInputField extends LitElement {\n @property({type: String}) value = '';\n @property({type: String}) placeholder = '';\n @property({type: String}) type: HTMLInputTypeAttribute =\n HTMLInputTypeAttribute.Text;\n @property({type: String}) textAlign: ObcTextInputFieldTextAlign =\n ObcTextInputFieldTextAlign.Left;\n\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) readonly = false;\n @property({type: Boolean, reflect: true}) error = false;\n /* @availableWhen error==true /\n @property({type: String}) errorText = '';\n /* If true, the input field will not update its value on focus /\n @property({type: Boolean}) rejectUpdatesOnFocus = false;\n /* If true, the value will only be initially set, and not updated on change /\n @property({type: Boolean}) rejectUpdates = false;\n\n /* If true, the input field will not update its value if the value is the same as the previous value\n * This is useful to avoid React re-rendering to reset the value.\n /\n @property({type: Boolean}) rejectDuplicateUpdates = false;\n\n /* Name attribute for form integration /\n @property({type: String}) name = '';\n\n /* Maximum number of characters allowed /\n @property({type: Number}) maxlength?: number;\n\n /* Minimum number of characters required /\n @property({type: Number}) minlength?: number;\n\n @property({type: String}) size: ObcTextInputFieldSize =\n ObcTextInputFieldSize.Regular;\n\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /* Shows a clear button when the input has a value /\n @property({type: Boolean}) hasClearButton = false;\n\n @property({type: String}) helperText = '';\n\n @property({type: String}) label = '';\n @property({type: Boolean}) required = false;\n /* @availableWhen label!='' /\n @property({type: Boolean}) hasLabelIcon = false;\n /* @availableWhen label!='' /\n @property({type: String}) labelPlacement: ObcTextInputFieldPlacement =\n ObcTextInputFieldPlacement.Left;\n\n @property({type: Boolean}) hasHelperIcon = false;\n @property({type: String}) helperPlacement: ObcTextInputFieldPlacement =\n ObcTextInputFieldPlacement.Left;\n\n /* Internal state for password visibility toggle */\n @state() private passwordVisible = false;\n @state() private hasFocus = false;\n @state() private previousValue = '';\n @state() private previousInputElementValue = '';\n\n @query('.value-input') private inputElement?: HTMLInputElement;\n\n private onInput(e: Event) {\n this.value = (e.target as HTMLInputElement).value;\n this.previousInputElementValue = this.value;\n }\n\n private onFocus() {\n this.hasFocus = true;\n }\n\n private onBlur() {\n this.hasFocus = false;\n }\n\n private handleClear(e: Event) {\n // Prevent label click from triggering unwanted focus behavior\n e.stopPropagation();\n\n this.value = '';\n this.inputElement!.value = '';\n this.dispatchEvent(\n new CustomEvent('clear', {bubbles: true, composed: true})\n );\n // Dispatch input and change events for consistency with native behavior\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true})\n );\n this.dispatchEvent(new Event('change', {bubbles: true, composed: true}));\n\n // Return focus to the input field\n this.inputElement?.focus();\n }\n\n private togglePasswordVisibility(e: Event) {\n // Prevent label click from triggering unwanted focus behavior\n e.stopPropagation();\n this.passwordVisible = !this.passwordVisible;\n }\n\n private getInputMode(): string {\n switch (this.type) {\n case HTMLInputTypeAttribute.Tel:\n return 'tel';\n case HTMLInputTypeAttribute.Email:\n return 'email';\n case HTMLInputTypeAttribute.Url:\n return 'url';\n case HTMLInputTypeAttribute.Search:\n return 'search';\n default:\n return 'text';\n }\n }\n\n private renderFooterText(\n text: string,\n isError: boolean\n ): TemplateResult \| typeof nothing {\n if (!text) return nothing;\n return html`<div\n id=\"helper-text\"\n class=${classMap({\n [isError ? 'error-text' : 'helper-text']: true,\n [`helper-placement-${this.helperPlacement}`]: true,\n })}\n >\n ${this.hasHelperIcon\n ? html`<div class=\"helper-icon\"><slot name=\"helper-icon\"></slot></div>`\n : nothing}\n ${text}\n </div>`;\n }\n\n private fireChangeEvent(e: Event) {\n const target = e.target as HTMLInputElement;\n this.dispatchEvent(\n new CustomEvent('change', {detail: {value: target.value}})\n );\n }\n\n private get shouldUpdateValue(): boolean {\n if (this.rejectUpdates) return false;\n if (this.rejectUpdatesOnFocus && this.hasFocus) return false;\n if (this.rejectDuplicateUpdates && this.value === this.previousValue) {\n return false;\n }\n return true;\n }\n\n private get isEmpty(): boolean {\n const currentValue =\n !this.shouldUpdateValue && this.inputElement\n ? this.inputElement.value\n : this.value;\n return currentValue.trim().length === 0;\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n if (\n changedProperties.has('value') &&\n !this.shouldUpdateValue &&\n this.inputElement\n ) {\n this.value = this.inputElement.value;\n }\n }\n\n override updated() {\n if (\n this.rejectDuplicateUpdates &&\n this.value !== this.previousValue &&\n (this.previousInputElementValue !== this.value \|\| !this.hasFocus)\n ) {\n this.previousValue = this.value;\n }\n }\n\n override render() {\n const hasHelperOrError =\n Boolean(this.helperText) \|\| Boolean(this.error && this.errorText);\n const showClearButton =\n this.hasClearButton && this.value.length > 0 && !this.disabled;\n const isPasswordField = this.type === HTMLInputTypeAttribute.Password;\n const showPasswordToggle = isPasswordField && !this.disabled;\n const isClearButtonVisible = showClearButton && !showPasswordToggle;\n const effectiveType =\n isPasswordField && this.passwordVisible\n ? HTMLInputTypeAttribute.Text\n : this.type;\n\n // Determine trailing button state for padding adjustment\n const hasTrailingButton = showPasswordToggle \|\| isClearButtonVisible;\n\n let value = this.value;\n\n if (!this.shouldUpdateValue && this.inputElement) {\n value = this.inputElement.value;\n }\n\n return html`\n <label\n class=${classMap({\n wrapper: true,\n [`align-${this.textAlign}`]: true,\n [`size-${this.size}`]: true,\n error: this.error,\n disabled: this.disabled,\n empty: this.isEmpty,\n helpertext: hasHelperOrError,\n haslabel: Boolean(this.label),\n 'has-trailing-button': hasTrailingButton,\n })}\n >\n ${this.label\n ? html`<div\n class=${classMap({\n 'label-text-container': true,\n [`label-placement-${this.labelPlacement}`]: true,\n })}\n >\n ${this.hasLabelIcon\n ? html`<div class=\"label-icon\">\n <slot name=\"label-icon\"></slot>\n </div>`\n : nothing}\n <span class=\"label-text\">${this.label}</span>\n ${this.required\n ? html`<div class=\"required-indicator\"></div>`\n : nothing}\n </div>`\n : nothing}\n\n <div class=\"horizontal-container\">\n <div class=\"input-field-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"label-container\">\n <input\n type=${effectiveType}\n inputmode=${this.getInputMode()}\n class=\"value-input\"\n .value=${value}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n .placeholder=${this.placeholder}\n name=${ifDefined(this.name \|\| undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n maxlength=${ifDefined(this.maxlength)}\n minlength=${ifDefined(this.minlength)}\n aria-invalid=${this.error ? 'true' : 'false'}\n aria-describedby=${ifDefined(\n hasHelperOrError ? 'helper-text' : undefined\n )}\n autocomplete=\"off\"\n @input=${this.onInput}\n @change=${this.fireChangeEvent}\n />\n </div>\n ${showPasswordToggle\n ? html`<obc-icon-button\n variant=\"flat\"\n class=\"trailing-icon-button\"\n @click=${this.togglePasswordVisibility}\n aria-label=${this.passwordVisible\n ? 'Hide password'\n : 'Show password'}\n >\n ${this.passwordVisible\n ? html`<obi-visibility-on-google></obi-visibility-on-google>`\n : html`<obi-visibility-off-google></obi-visibility-off-google>`}\n </obc-icon-button>`\n : nothing}\n ${isClearButtonVisible\n ? html`<obc-icon-button\n variant=\"flat\"\n class=\"trailing-icon-button\"\n @click=${this.handleClear}\n aria-label=\"Clear input\"\n >\n <obi-close-google></obi-close-google>\n </obc-icon-button>`\n : nothing}\n </div>\n </div>\n\n ${this.error && this.errorText\n ? this.renderFooterText(this.errorText, true)\n : this.renderFooterText(this.helperText, false)}\n </label>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-text-input-field': ObcTextInputField;\n }\n}\n"],"names":["HTMLInputTypeAttribute","ObcTextInputFieldTextAlign","ObcTextInputFieldSize","ObcTextInputFieldPlacement"],"mappings":"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"}

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

@@ -3,6 +3,9 @@ import '../icon-button/icon-button.js';
 export type ObcToggleSwitchInputEvent = CustomEvent<{
     checked: boolean;
 }>;
+export type ObcToggleSwitchChangeEvent = CustomEvent<{
+    checked: boolean;
+}>;
 /**
  * `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).
  *
@@ -50,6 +53,12 @@ export type ObcToggleSwitchInputEvent = CustomEvent<{
  *
  * ### Events
  * - `input` – Fired when the toggle state changes (checked/unchecked).
+ * - `change` – Fired when the toggle state changes by user interaction.
+ *
+ * Both events report the state the user selected. When `externalControl` is
+ * true the component does not update itself; the consumer decides whether to
+ * apply the reported state to `checked` and may reject the interaction by
+ * leaving `checked` unchanged.
  *
  * ---
  *
@@ -79,7 +88,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
+ * @fires change - {ObcToggleSwitchChangeEvent} Dispatched when the value of the input changes by user interaction
  * @stable
  */
 export declare class ObcToggleSwitch extends LitElement {
@@ -121,6 +130,12 @@ export declare class ObcToggleSwitch extends LitElement {
      * Use to control the toggle state from outside the component.
      */
     externalControl: boolean;
+    /**
+     * The state the user selected in the most recent interaction. In
+     * externalControl mode this can differ from `checked` until the consumer
+     * accepts the change, so the change event reports it instead of `checked`.
+     */
+    private _userSelectedChecked?;
     /**
      * Handles input events to change the toggle state.
      * Prevents changes if the toggle is disabled.

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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG~~;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"}
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,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;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;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAC,CAAU;IAEvC;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,gBAAgB;IAYf,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

@@ -38,6 +38,7 @@ let ObcToggleSwitch = class extends LitElement {
       return;
     }
     const nextChecked = !this.checked;
+    this._userSelectedChecked = nextChecked;
     if (!this.externalControl) {
       this.checked = nextChecked;
     }
@@ -56,7 +57,11 @@ let ObcToggleSwitch = class extends LitElement {
       e.preventDefault();
       return;
     }
-    this.dispatchEvent(new CustomEvent("change"));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this._userSelectedChecked ?? this.checked }
+      })
+    );
   }
   render() {
     return html`

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 * @fires change - Dispatched when the value of the input changes by user interaction\n * @stable\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":";;;;;;;;;;;;;;;;AA2FO,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;"}
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\nexport type ObcToggleSwitchChangeEvent = 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 * - `change` – Fired when the toggle state changes by user interaction.\n \n Both events report the state the user selected. When `externalControl` is\n * true the component does not update itself; the consumer decides whether to\n * apply the reported state to `checked` and may reject the interaction by\n * leaving `checked` unchanged.\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 - {ObcToggleSwitchChangeEvent} Dispatched when the value of the input changes by user interaction\n * @stable\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 The state the user selected in the most recent interaction. In\n * externalControl mode this can differ from `checked` until the consumer\n * accepts the change, so the change event reports it instead of `checked`.\n /\n private _userSelectedChecked?: boolean;\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 this._userSelectedChecked = nextChecked;\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(\n new CustomEvent('change', {\n detail: {checked: this._userSelectedChecked ?? this.checked},\n })\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 @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":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.113",
+  "version": "2.0.0-next.115",
   "type": "module",
   "repository": {
     "type": "git",
@@ -75,7 +75,7 @@
     "@lit-labs/cli-localize": "^0.2.2",
     "@lit-labs/gen-wrapper-angular": "file:lit-labs-gen-wrapper-angular-bbde8906.tgz",
     "@lit-labs/gen-wrapper-react": "^0.3.5",
-    "@lit-labs/gen-wrapper-svelte": "file:lit-labs-gen-wrapper-svelte-a2021b06.tgz",
+    "@lit-labs/gen-wrapper-svelte": "file:lit-labs-gen-wrapper-svelte-ab2e44ef.tgz",
     "@lit-labs/gen-wrapper-vue": "file:lit-labs-gen-wrapper-vue-0.4.1.tgz",
     "@open-wc/lit-helpers": "^0.7.0",
     "@playwright/test": "1.60.0",