npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.66 → 2.0.0-next.67 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.66 → 2.0.0-next.67

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

package/dist/components/stepper-box/stepper-box.css.js CHANGED Viewed

@@ -54,12 +54,6 @@ const compentStyle = css`
 :host([disabled]) .helper-text {
   color: var(--element-disabled-color);
 }
-:host([disabled]) .field-wrapper.has-unit-slot .unit-slot {
-  color: var(--on-normal-disabled-color);
-  border-color: var(--normal-disabled-border-color);
-  background: var(--normal-disabled-background-color);
-}
 `;
 export {
   compentStyle as default

package/dist/components/stepper-box/stepper-box.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper-box.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"stepper-box.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/stepper-box/stepper-box.d.ts CHANGED Viewed

@@ -30,22 +30,15 @@ export declare enum ObcStepperBoxType {
  *   - `up-down`: Uses up and down chevron icons for vertical adjustment.
  *   - `left-right`: Uses left and right chevron icons for horizontal adjustment.
  * - **Value Display:**
- *   - Optional unit label via the `unit` slot.
+ *   - Optional unit label via the `unit` property.
  * - **Helper Text:**
  *   - When `helperText` is set, displays additional helper or status text below the control.
  * - **Icon Buttons:**
  *   - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.
- * - **Customizable Layout:**
- *   - Supports flexible content via the `unit` slot.
  *
  * ### Usage Guidelines
  * Use `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.
  *
- * ### Slots
- * | Slot Name      | Renders When...           | Purpose                                 |
- * |--------------- |--------------------------|-----------------------------------------|
- * | unit           | If provided               | Unit label (e.g., "km", "%").           |
- *
  * ### Events
  * - `down` – Fired when the decrement (left or down) button is clicked.
  * - `up` – Fired when the increment (right or up) button is clicked.
@@ -57,12 +50,9 @@ export declare enum ObcStepperBoxType {
  *
  * **Example:**
  * ```
- * <obc-stepper-box type="up-down" .value=${5} helperText="Set weight">
- *   <div slot="unit">kg</div>
- * </obc-stepper-box>
+ * <obc-stepper-box type="up-down" value="5" unit="kg" helperText="Set weight"></obc-stepper-box>
  * ```
  *
- * @slot unit - Unit label (e.g., "km", "%")
  * @fires down {CustomEvent<{value: number}>} Fired when the decrement (left or down) button is clicked
  * @fires up {CustomEvent<{value: number}>} Fired when the increment (right or up) button is clicked
  * @fires input {CustomEvent<{value: string}>} Fired when the user types in the number input field
@@ -104,7 +94,7 @@ export declare class ObcStepperBox extends LitElement {
      */
     stepDown: number;
     /**
-     * Unit text displayed inside the field. Overridden by the `unit` slot if assigned.
+     * Unit text displayed inside the field.
      */
     unit: string;
     /**

package/dist/components/stepper-box/stepper-box.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper-box.d.ts","sourceRoot":"","sources":["../../../src/components/stepper-box/stepper-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,yCAAyC,CAAC;AAEjD,OAAO,6CAA6C,CAAC;AAGrD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,YAAY;IAClB,SAAS,eAAe;IACxB,SAAS,eAAe;CACzB;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG~~;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;OAOG;IACuB,IAAI,EAAE,iBAAiB,CACnB;IAE9B;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;;OAGG;IACuB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAK;IAEnD;;OAEG;IACuB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACuB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACuB,MAAM,SAAK;IAErC;;OAEG;IACuB,QAAQ,SAAK;IAEvC;;OAEG;IACuB,IAAI,SAAM;IAEpC;;OAEG;IACuB,UAAU,SAAM;IAE1C;;OAEG;IACuB,WAAW,SAAM;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,YAAY,GAOvB;IAED,OAAO,KAAK,UAAU,GAOrB;IAEQ,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMlD,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,cAAc;IAOtB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,SAAS,GAQpB;IAEQ,MAAM;IA0Cf,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,cAAc;IAUtB;;;OAGG;IACH,IAAI;IAiBJ;;;OAGG;IACH,EAAE;IAiBF,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1	+ {"version":3,"file":"stepper-box.d.ts","sourceRoot":"","sources":["../../../src/components/stepper-box/stepper-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,yCAAyC,CAAC;AAEjD,OAAO,6CAA6C,CAAC;AAGrD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,YAAY;IAClB,SAAS,eAAe;IACxB,SAAS,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;OAOG;IACuB,IAAI,EAAE,iBAAiB,CACnB;IAE9B;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;;OAGG;IACuB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAK;IAEnD;;OAEG;IACuB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACuB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACuB,MAAM,SAAK;IAErC;;OAEG;IACuB,QAAQ,SAAK;IAEvC;;OAEG;IACuB,IAAI,SAAM;IAEpC;;OAEG;IACuB,UAAU,SAAM;IAE1C;;OAEG;IACuB,WAAW,SAAM;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C,OAAO,KAAK,YAAY,GAOvB;IAED,OAAO,KAAK,UAAU,GAOrB;IAEQ,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMlD,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,cAAc;IAOtB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,SAAS,GAQpB;IAEQ,MAAM;IA0Cf,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,cAAc;IAUtB;;;OAGG;IACH,IAAI;IAiBJ;;;OAGG;IACH,EAAE;IAiBF,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/stepper-box/stepper-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper-box.js","sources":["../../../src/components/stepper-box/stepper-box.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './stepper-box.css?inline';\nimport '../../icons/icon-down-iec.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport {customElement} from '../../decorator.js';\nimport '../number-input-field/number-input-field.js';\nimport {ObcNumberInputFieldTextAlign} from '../number-input-field/number-input-field.js';\n\n/*\n The visual and behavioral variant of the stepper box.\n \n Uses up and down chevron icons for vertical adjustment.\n * Uses left and right chevron icons for horizontal adjustment.\n * Uses plus and minus icons for increment/decrement (default).\n /\nexport enum ObcStepperBoxType {\n upDown = 'up-down',\n leftRight = 'left-right',\n plusMinus = 'plus-minus',\n}\n\n/\n `<obc-stepper-box>` – A compact input control for incrementing or decrementing a value using step buttons.\n \n This component displays a value with optional unit and helper text, flanked by two icon buttons for adjusting the value up/down, left/right, or plus/minus depending on the selected type. It is typically used for numeric or enumerated value selection where direct text input is not required or desired.\n \n ### Features\n * - Stepper Types:\n * - `plus-minus` (default): Shows plus and minus icons for increment/decrement.\n * - `up-down`: Uses up and down chevron icons for vertical adjustment.\n * - `left-right`: Uses left and right chevron icons for horizontal adjustment.\n * - Value Display:\n * - Optional unit label via the `unit` slot.\n * - Helper Text:\n * - When `helperText` is set, displays additional helper or status text below the control.\n * - Icon Buttons:\n * - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.\n * - Customizable Layout:\n * - Supports flexible content via the `unit` slot.\n \n ### Usage Guidelines\n * Use `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|--------------- \|--------------------------\|-----------------------------------------\|\n * \| unit \| If provided \| Unit label (e.g., \"km\", \"%\"). \|\n \n ### Events\n * - `down` – Fired when the decrement (left or down) button is clicked.\n * - `up` – Fired when the increment (right or up) button is clicked.\n \n ### Best Practices\n * - Use the type that best matches the adjustment direction (e.g., `up-down` for vertical, `left-right` for horizontal, `plus-minus` for generic increment/decrement).\n * - Place concise values and units to maintain compact layout.\n * - Avoid using for free-form input; this is for step-based changes only.\n \n Example:\n * ```\n * <obc-stepper-box type=\"up-down\" .value=${5} helperText=\"Set weight\">\n * <div slot=\"unit\">kg</div>\n * </obc-stepper-box>\n * ```\n \n @slot unit - Unit label (e.g., \"km\", \"%\")\n * @fires down {CustomEvent<{value: number}>} Fired when the decrement (left or down) button is clicked\n * @fires up {CustomEvent<{value: number}>} Fired when the increment (right or up) button is clicked\n * @fires input {CustomEvent<{value: string}>} Fired when the user types in the number input field\n * @fires change {CustomEvent<{value: number \| null}>} Fired when the numeric value changes from any source\n /\n@customElement('obc-stepper-box')\nexport class ObcStepperBox extends LitElement {\n /\n The visual and behavioral variant of the stepper box.\n * - `plus-minus` (default): Uses plus and minus icons.\n * - `up-down`: Uses up and down chevrons.\n * - `left-right`: Uses left and right chevrons.\n \n Changing this property updates the icons and directionality of the stepper buttons.\n /\n @property({type: String}) type: ObcStepperBoxType =\n ObcStepperBoxType.plusMinus;\n\n /\n If true, the stepper box is disabled and the buttons are not clickable.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n The current numeric value displayed in the field.\n * Pass `null` to clear the value and show the `placeholder` instead.\n /\n @property({type: Number}) value: number \| null = 1;\n\n /\n Optional lower bound; decrement button disables at this value.\n /\n @property({type: Number}) min?: number;\n\n /\n Optional upper bound; increment button disables at this value.\n /\n @property({type: Number}) max?: number;\n\n /\n Increment step size (default 1).\n /\n @property({type: Number}) stepUp = 1;\n\n /\n Decrement step size (default 1).\n /\n @property({type: Number}) stepDown = 1;\n\n /\n Unit text displayed inside the field. Overridden by the `unit` slot if assigned.\n /\n @property({type: String}) unit = '';\n\n /\n Helper text displayed below the stepper. When set, the helper text is shown.\n /\n @property({type: String}) helperText = '';\n\n /\n Placeholder text shown when the input is empty.\n /\n @property({type: String}) placeholder = '';\n\n /\n If true, the input is non-editable; programmatic value changes still apply.\n /\n @property({type: Boolean}) readonly = false;\n\n private get downDisabled(): boolean {\n return (\n this.disabled \|\|\n this.readonly \|\|\n this.value == null \|\|\n this.value <= (this.min ?? -Infinity)\n );\n }\n\n private get upDisabled(): boolean {\n return (\n this.disabled \|\|\n this.readonly \|\|\n this.value == null \|\|\n this.value >= (this.max ?? Infinity)\n );\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.syncDisabledAccessibility();\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.syncDisabledAccessibility();\n }\n }\n\n private syncDisabledAccessibility() {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n\n private clamp(value: number): number {\n return Math.min(\n Math.max(value, this.min ?? -Infinity),\n this.max ?? Infinity\n );\n }\n\n private normalizedStep(step: number): number {\n if (!Number.isFinite(step) \|\| step <= 0) {\n return 1;\n }\n return step;\n }\n\n private get leftIcon() {\n if (this.type === ObcStepperBoxType.upDown) {\n return html`<obi-chevron-down-google></obi-chevron-down-google>`;\n } else if (this.type === ObcStepperBoxType.leftRight) {\n return html`<obi-chevron-left-google></obi-chevron-left-google>`;\n } else {\n return html`<obi-down-iec></obi-down-iec>`;\n }\n }\n\n private get rightIcon() {\n if (this.type === ObcStepperBoxType.upDown) {\n return html`<obi-chevron-up-google></obi-chevron-up-google>`;\n } else if (this.type === ObcStepperBoxType.leftRight) {\n return html`<obi-chevron-right-google></obi-chevron-right-google>`;\n } else {\n return html`<obi-up-iec></obi-up-iec>`;\n }\n }\n\n override render() {\n const showHelper = Boolean(this.helperText);\n\n return html`\n <div class=\"wrapper\">\n <div class=\"display\">\n <obc-icon-button\n cornerleft\n .showDivider=${false}\n ?disabled=${this.downDisabled}\n @click=${() => this.down()}\n >\n ${this.leftIcon}\n </obc-icon-button>\n <div class=\"field-wrapper\">\n <obc-number-input-field\n squared\n .value=${this.value == null ? NaN : Number(this.value)}\n .unit=${this.unit}\n .placeholder=${this.placeholder}\n .textAlign=${ObcNumberInputFieldTextAlign.Center}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @input=${this.onNumberFieldInput}\n ></obc-number-input-field>\n </div>\n <obc-icon-button\n cornerright\n .showDivider=${false}\n ?disabled=${this.upDisabled}\n @click=${() => this.up()}\n >\n ${this.rightIcon}\n </obc-icon-button>\n </div>\n ${showHelper\n ? html`<div class=\"helper-text\">${this.helperText}</div>`\n : nothing}\n </div>\n `;\n }\n\n private onNumberFieldInput(e: Event) {\n const input = e.target as HTMLInputElement;\n const raw = input.value;\n this.dispatchEvent(\n new CustomEvent('input', {\n detail: {value: raw},\n bubbles: true,\n composed: true,\n })\n );\n\n if (raw.trim() === '') {\n return;\n }\n\n const parsed = Number(raw);\n if (!Number.isFinite(parsed)) {\n return;\n }\n\n const previous = this.value;\n this.value = parsed;\n if (previous !== this.value) {\n this.dispatchChange(this.value);\n }\n }\n\n private dispatchChange(value: number \| null) {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /\n Dispatches the `down` event when the decrement button is clicked.\n * @fires down\n /\n down() {\n if (this.downDisabled) {\n return;\n }\n const current = this.value as number;\n const newValue = this.clamp(current - this.normalizedStep(this.stepDown));\n this.value = newValue;\n this.dispatchEvent(\n new CustomEvent('down', {\n detail: {value: newValue},\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchChange(newValue);\n }\n\n /\n Dispatches the `up` event when the increment button is clicked.\n * @fires up\n */\n up() {\n if (this.upDisabled) {\n return;\n }\n const current = this.value as number;\n const newValue = this.clamp(current + this.normalizedStep(this.stepUp));\n this.value = newValue;\n this.dispatchEvent(\n new CustomEvent('up', {\n detail: {value: newValue},\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchChange(newValue);\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-stepper-box': ObcStepperBox;\n }\n}\n"],"names":["ObcStepperBoxType"],"mappings":"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"}
1	+ {"version":3,"file":"stepper-box.js","sources":["../../../src/components/stepper-box/stepper-box.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './stepper-box.css?inline';\nimport '../../icons/icon-down-iec.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport {customElement} from '../../decorator.js';\nimport '../number-input-field/number-input-field.js';\nimport {ObcNumberInputFieldTextAlign} from '../number-input-field/number-input-field.js';\n\n/*\n The visual and behavioral variant of the stepper box.\n \n Uses up and down chevron icons for vertical adjustment.\n * Uses left and right chevron icons for horizontal adjustment.\n * Uses plus and minus icons for increment/decrement (default).\n /\nexport enum ObcStepperBoxType {\n upDown = 'up-down',\n leftRight = 'left-right',\n plusMinus = 'plus-minus',\n}\n\n/\n `<obc-stepper-box>` – A compact input control for incrementing or decrementing a value using step buttons.\n \n This component displays a value with optional unit and helper text, flanked by two icon buttons for adjusting the value up/down, left/right, or plus/minus depending on the selected type. It is typically used for numeric or enumerated value selection where direct text input is not required or desired.\n \n ### Features\n * - Stepper Types:\n * - `plus-minus` (default): Shows plus and minus icons for increment/decrement.\n * - `up-down`: Uses up and down chevron icons for vertical adjustment.\n * - `left-right`: Uses left and right chevron icons for horizontal adjustment.\n * - Value Display:\n * - Optional unit label via the `unit` property.\n * - Helper Text:\n * - When `helperText` is set, displays additional helper or status text below the control.\n * - Icon Buttons:\n * - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.\n \n ### Usage Guidelines\n * Use `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.\n \n ### Events\n * - `down` – Fired when the decrement (left or down) button is clicked.\n * - `up` – Fired when the increment (right or up) button is clicked.\n \n ### Best Practices\n * - Use the type that best matches the adjustment direction (e.g., `up-down` for vertical, `left-right` for horizontal, `plus-minus` for generic increment/decrement).\n * - Place concise values and units to maintain compact layout.\n * - Avoid using for free-form input; this is for step-based changes only.\n \n Example:\n * ```\n * <obc-stepper-box type=\"up-down\" value=\"5\" unit=\"kg\" helperText=\"Set weight\"></obc-stepper-box>\n * ```\n \n @fires down {CustomEvent<{value: number}>} Fired when the decrement (left or down) button is clicked\n * @fires up {CustomEvent<{value: number}>} Fired when the increment (right or up) button is clicked\n * @fires input {CustomEvent<{value: string}>} Fired when the user types in the number input field\n * @fires change {CustomEvent<{value: number \| null}>} Fired when the numeric value changes from any source\n /\n@customElement('obc-stepper-box')\nexport class ObcStepperBox extends LitElement {\n /\n The visual and behavioral variant of the stepper box.\n * - `plus-minus` (default): Uses plus and minus icons.\n * - `up-down`: Uses up and down chevrons.\n * - `left-right`: Uses left and right chevrons.\n \n Changing this property updates the icons and directionality of the stepper buttons.\n /\n @property({type: String}) type: ObcStepperBoxType =\n ObcStepperBoxType.plusMinus;\n\n /\n If true, the stepper box is disabled and the buttons are not clickable.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n The current numeric value displayed in the field.\n * Pass `null` to clear the value and show the `placeholder` instead.\n /\n @property({type: Number}) value: number \| null = 1;\n\n /\n Optional lower bound; decrement button disables at this value.\n /\n @property({type: Number}) min?: number;\n\n /\n Optional upper bound; increment button disables at this value.\n /\n @property({type: Number}) max?: number;\n\n /\n Increment step size (default 1).\n /\n @property({type: Number}) stepUp = 1;\n\n /\n Decrement step size (default 1).\n /\n @property({type: Number}) stepDown = 1;\n\n /\n Unit text displayed inside the field.\n /\n @property({type: String}) unit = '';\n\n /\n Helper text displayed below the stepper. When set, the helper text is shown.\n /\n @property({type: String}) helperText = '';\n\n /\n Placeholder text shown when the input is empty.\n /\n @property({type: String}) placeholder = '';\n\n /\n If true, the input is non-editable; programmatic value changes still apply.\n /\n @property({type: Boolean}) readonly = false;\n\n private get downDisabled(): boolean {\n return (\n this.disabled \|\|\n this.readonly \|\|\n this.value == null \|\|\n this.value <= (this.min ?? -Infinity)\n );\n }\n\n private get upDisabled(): boolean {\n return (\n this.disabled \|\|\n this.readonly \|\|\n this.value == null \|\|\n this.value >= (this.max ?? Infinity)\n );\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.syncDisabledAccessibility();\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.syncDisabledAccessibility();\n }\n }\n\n private syncDisabledAccessibility() {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n\n private clamp(value: number): number {\n return Math.min(\n Math.max(value, this.min ?? -Infinity),\n this.max ?? Infinity\n );\n }\n\n private normalizedStep(step: number): number {\n if (!Number.isFinite(step) \|\| step <= 0) {\n return 1;\n }\n return step;\n }\n\n private get leftIcon() {\n if (this.type === ObcStepperBoxType.upDown) {\n return html`<obi-chevron-down-google></obi-chevron-down-google>`;\n } else if (this.type === ObcStepperBoxType.leftRight) {\n return html`<obi-chevron-left-google></obi-chevron-left-google>`;\n } else {\n return html`<obi-down-iec></obi-down-iec>`;\n }\n }\n\n private get rightIcon() {\n if (this.type === ObcStepperBoxType.upDown) {\n return html`<obi-chevron-up-google></obi-chevron-up-google>`;\n } else if (this.type === ObcStepperBoxType.leftRight) {\n return html`<obi-chevron-right-google></obi-chevron-right-google>`;\n } else {\n return html`<obi-up-iec></obi-up-iec>`;\n }\n }\n\n override render() {\n const showHelper = Boolean(this.helperText);\n\n return html`\n <div class=\"wrapper\">\n <div class=\"display\">\n <obc-icon-button\n cornerleft\n .showDivider=${false}\n ?disabled=${this.downDisabled}\n @click=${() => this.down()}\n >\n ${this.leftIcon}\n </obc-icon-button>\n <div class=\"field-wrapper\">\n <obc-number-input-field\n squared\n .value=${this.value == null ? NaN : Number(this.value)}\n .unit=${this.unit}\n .placeholder=${this.placeholder}\n .textAlign=${ObcNumberInputFieldTextAlign.Center}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @input=${this.onNumberFieldInput}\n ></obc-number-input-field>\n </div>\n <obc-icon-button\n cornerright\n .showDivider=${false}\n ?disabled=${this.upDisabled}\n @click=${() => this.up()}\n >\n ${this.rightIcon}\n </obc-icon-button>\n </div>\n ${showHelper\n ? html`<div class=\"helper-text\">${this.helperText}</div>`\n : nothing}\n </div>\n `;\n }\n\n private onNumberFieldInput(e: Event) {\n const input = e.target as HTMLInputElement;\n const raw = input.value;\n this.dispatchEvent(\n new CustomEvent('input', {\n detail: {value: raw},\n bubbles: true,\n composed: true,\n })\n );\n\n if (raw.trim() === '') {\n return;\n }\n\n const parsed = Number(raw);\n if (!Number.isFinite(parsed)) {\n return;\n }\n\n const previous = this.value;\n this.value = parsed;\n if (previous !== this.value) {\n this.dispatchChange(this.value);\n }\n }\n\n private dispatchChange(value: number \| null) {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /\n Dispatches the `down` event when the decrement button is clicked.\n * @fires down\n /\n down() {\n if (this.downDisabled) {\n return;\n }\n const current = this.value as number;\n const newValue = this.clamp(current - this.normalizedStep(this.stepDown));\n this.value = newValue;\n this.dispatchEvent(\n new CustomEvent('down', {\n detail: {value: newValue},\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchChange(newValue);\n }\n\n /\n Dispatches the `up` event when the increment button is clicked.\n * @fires up\n */\n up() {\n if (this.upDisabled) {\n return;\n }\n const current = this.value as number;\n const newValue = this.clamp(current + this.normalizedStep(this.stepUp));\n this.value = newValue;\n this.dispatchEvent(\n new CustomEvent('up', {\n detail: {value: newValue},\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchChange(newValue);\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-stepper-box': ObcStepperBox;\n }\n}\n"],"names":["ObcStepperBoxType"],"mappings":"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"}

package/dist/components/toggle-button-group/toggle-button-group.d.ts CHANGED Viewed

@@ -37,6 +37,10 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
  * - **External control mode:** When `externalControl` is true, the group emits selection events but does not
  *   update its own `value` property, allowing parent components to manage state (useful for form libraries or
  *   custom state management).
+ * - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled
+ *   option leaves the group with no option selected, instead of defaulting to the first enabled option. Use
+ *   this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not
+ *   imply a choice the user has not made.
  * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual
  *   options can also be disabled independently while the group remains enabled.
  * - **Divider management:** Automatically shows visual dividers between options and hides the divider after
@@ -160,6 +164,16 @@ export declare class ObcToggleButtonGroup extends LitElement {
      * Defaults to false.
      */
     externalControl: boolean;
+    /**
+     * If true, a `value` that does not match any enabled option leaves the group with no option selected
+     * instead of defaulting to the first enabled option.
+     *
+     * This also applies when the currently selected option becomes disabled: the group clears its selection
+     * rather than falling back to another option.
+     *
+     * Defaults to false (the first enabled option is selected when the value does not match).
+     */
+    allowEmptySelection: boolean;
     /**
      * Disables the entire toggle button group and all contained options when true.
      *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAEhE,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AAKzD,MAAM,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG~~;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD;;;;;;OAMG;IACuB,KAAK,SAAM;IAErC;;;;;OAKG;IACuB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAExD;;;;;;;;;OASG;IACuB,IAAI,4BAAkC;IAEhE;;;;;;;;OAQG;IACuB,OAAO,+BAAwC;IAEzE;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;;;OAMG;IACwB,eAAe,UAAS;IAEnD;;;;OAIG;IACuC,QAAQ,UAAS;IAE3D;;;;OAIG;IACuC,KAAK,UAAS;IAGxD,OAAO,EAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAE5C,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,eAAe;~~IAwCvB~~,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,uBAAuB,CAA6C;cAEzD,YAAY,CAC7B,kBAAkB,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACtE,IAAI;~~IA4DP~~,OAAO,CAAC,0BAA0B;~~IAUlC~~,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAarB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAsC5C,OAAO,CAAC,iBAAiB,EAAE,cAAc;~~IAYzC~~,MAAM;IAoBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
1	+ {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAEhE,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AAKzD,MAAM,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD;;;;;;OAMG;IACuB,KAAK,SAAM;IAErC;;;;;OAKG;IACuB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAExD;;;;;;;;;OASG;IACuB,IAAI,4BAAkC;IAEhE;;;;;;;;OAQG;IACuB,OAAO,+BAAwC;IAEzE;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;;;OAMG;IACwB,eAAe,UAAS;IAEnD;;;;;;;;OAQG;IACwB,mBAAmB,UAAS;IAEvD;;;;OAIG;IACuC,QAAQ,UAAS;IAE3D;;;;OAIG;IACuC,KAAK,UAAS;IAGxD,OAAO,EAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAE5C,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,eAAe;IA4CvB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,uBAAuB,CAA6C;cAEzD,YAAY,CAC7B,kBAAkB,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACtE,IAAI;IAgEP,OAAO,CAAC,0BAA0B;IAclC,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAarB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAsC5C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAgBzC,MAAM;IAoBf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

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

@@ -22,6 +22,7 @@ let ObcToggleButtonGroup = class extends LitElement {
     this.variant = ObcToggleButtonOptionVariant.regular;
     this.hugText = false;
     this.externalControl = false;
+    this.allowEmptySelection = false;
     this.disabled = false;
     this.large = false;
     this._originalDisabledStates = /* @__PURE__ */ new Map();
@@ -59,8 +60,12 @@ let ObcToggleButtonGroup = class extends LitElement {
         this.setNoDivider();
         return;
       }
-      const fallback = this.getFirstSelectableOption();
-      newValue = fallback?.value || "";
+      if (this.allowEmptySelection) {
+        newValue = "";
+      } else {
+        const fallback = this.getFirstSelectableOption();
+        newValue = fallback?.value || "";
+      }
     }
     this.value = newValue;
     this.options.forEach((option) => {
@@ -138,9 +143,13 @@ let ObcToggleButtonGroup = class extends LitElement {
       }
     });
     if (!this.value || !this.getOptionByValue(this.value)) {
-      const firstSelectable = this.getFirstSelectableOption();
-      if (firstSelectable) {
-        this.updateSelection(firstSelectable.value, false);
+      if (this.allowEmptySelection) {
+        this.updateSelection("", false);
+      } else {
+        const firstSelectable = this.getFirstSelectableOption();
+        if (firstSelectable) {
+          this.updateSelection(firstSelectable.value, false);
+        }
       }
     } else {
       this.updateSelection(this.value, false);
@@ -152,6 +161,10 @@ let ObcToggleButtonGroup = class extends LitElement {
   handleOptionDisabledChange() {
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection("");
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -202,6 +215,10 @@ let ObcToggleButtonGroup = class extends LitElement {
     super.updated(changedProperties);
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection("");
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -246,6 +263,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcToggleButtonGroup.prototype, "externalControl", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcToggleButtonGroup.prototype, "allowEmptySelection", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ObcToggleButtonGroup.prototype, "disabled", 2);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {\n ObcToggleButtonOption,\n ObcToggleButtonOptionVariant,\n ObcToggleButtonOptionType,\n} from '../toggle-button-option/toggle-button-option.js';\nimport componentStyle from './toggle-button-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\n/*\n `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n \n Provides a horizontal group of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-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 set of buttons with clear selection indicators. Commonly used for switching\n * between views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\n * filtering options, or layout toggles (e.g., list vs. grid view).\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 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 * - Content type options:\n * - `text` (default): Options display text labels only.\n * - `icon`: Options display only an icon (compact, suitable for limited space).\n * - `iconText`: Options display an icon and text side-by-side.\n * - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n * - Size control:\n * - Standard size (default): Regular button dimensions.\n * - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n * - Layout behavior:\n * - By default, the group stretches to fill available container width, distributing space equally among options.\n * - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n * - External control mode: When `externalControl` is true, the group emits selection events but does not\n * update its own `value` property, allowing parent components to manage state (useful for form libraries or\n * custom state management).\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 selected option for a seamless, unified appearance.\n * - Property propagation: The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n * properties to all child `<obc-toggle-button-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-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\n * alternative to radio buttons.\n \n Ideal use cases:\n * - View mode toggles (e.g., list vs. grid, map vs. chart)\n * - Filter options (e.g., all/active/completed tasks)\n * - Alignment or layout controls (e.g., left/center/right alignment)\n * - Time range selectors (e.g., day/week/month)\n * - Toolbar mode switches (e.g., edit/preview modes)\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 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 (`type=\"icon\"`), 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 `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Use `large` size for touch interfaces or when the control is a primary interaction element.\n \n TODO(designer): Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. \|\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-group value=\"list\" type=\"iconText\">\n * <obc-toggle-button-option value=\"list\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * List\n * </obc-toggle-button-option>\n * <obc-toggle-button-option value=\"grid\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * Grid\n * </obc-toggle-button-option>\n * <obc-toggle-button-option value=\"table\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * Table\n * </obc-toggle-button-option>\n * </obc-toggle-button-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-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-group')\nexport class ObcToggleButtonGroup extends LitElement {\n /\n The currently selected option's value.\n \n Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.\n \n If set to a value that does not match any enabled option, the first enabled option is selected by default.\n /\n @property({type: String}) value = '';\n\n /\n The value of the option that is activated.\n \n When the group is controlled by an external source, this property is used to set the value of the option that is activated.\n * This is a visual indication that the option is clicked but not yet stored.\n /\n @property({type: String}) activated: string \| undefined;\n\n /\n The visual type of the toggle button options.\n \n - `text` (default): Options display text only.\n * - `icon`: Options display only an icon.\n * - `iconText`: Options display an icon and text side-by-side.\n * - `iconTextUnder`: Options display an icon above the text.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: String}) type = ObcToggleButtonOptionType.text;\n\n /\n The visual variant of the toggle button group.\n \n - `regular` (default): Standard appearance with background and border.\n * - `flat`: Minimal style with no background or border.\n * - `normal`: Alternative style variant.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: String}) variant = ObcToggleButtonOptionVariant.regular;\n\n /\n If true, the group shrinks to fit its content (\"hug\" the text) instead of stretching to fill the container.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: Boolean}) hugText = false;\n\n /\n If true, the group is controlled by an external source.\n \n When true, the group will not update its selection when the `value` property changes.\n \n Defaults to false.\n /\n @property({type: Boolean}) externalControl = false;\n\n /\n Disables the entire toggle button group and all contained options when true.\n \n When disabled, no option can be selected or interacted with.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n If true, the group and all contained options use a larger size.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n */\n @property({type: Boolean, reflect: true}) large = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-option'})\n options!: NodeListOf<ObcToggleButtonOption>;\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(value: string): ObcToggleButtonOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonOption \| 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.setNoDivider();\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.setNoDivider();\n return;\n }\n const fallback = this.getFirstSelectableOption();\n newValue = fallback?.value \|\| '';\n }\n\n this.value = newValue;\n\n this.options.forEach((option) => {\n option.selected = option.value === newValue;\n });\n\n this.setNoDivider();\n\n if (emitEvent && oldValue !== newValue) {\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n }\n\n private updateActivated(newValue: string \| undefined) {\n if (newValue) {\n this.options.forEach((option) => {\n option.activated = option.value === newValue;\n });\n } else {\n this.options.forEach((option) => {\n option.activated = false;\n });\n }\n }\n\n private setNoDivider() {\n const selectedOptionIndex = Array.from(this.options).findIndex(\n (option) => option.selected\n );\n this.options.forEach((option) => {\n option.showDivider = true;\n });\n if (selectedOptionIndex === -1) {\n return;\n }\n const nextOption = this.options[selectedOptionIndex + 1];\n if (nextOption) {\n nextOption.showDivider = false;\n }\n }\n\n private _originalDisabledStates = new Map<ObcToggleButtonOption, boolean>();\n\n protected override firstUpdated(\n _changedProperties: PropertyValues<unknown> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\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 group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((option) => {\n this._originalDisabledStates.set(option, option.hasAttribute('disabled'));\n\n option.addEventListener('selected', (e) => this.handleOptionClick(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !option.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(\n option,\n option.hasAttribute('disabled')\n );\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['disabled'],\n });\n\n option.type = this.type;\n option.variant = this.variant;\n option.hugText = this.hugText;\n option.large = this.large;\n\n if (this.disabled) {\n option.setAttribute('data-group-disabled', 'true');\n option.disabled = true;\n }\n });\n\n if (!this.value \|\| !this.getOptionByValue(this.value)) {\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value, false);\n }\n } else {\n this.updateSelection(this.value, false);\n }\n\n if (this.activated) {\n this.updateActivated(this.activated);\n }\n }\n\n private handleOptionDisabledChange() {\n const currentOption = this.getOptionByValue(this.value);\n if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n handleOptionClick(event: Event) {\n const {value} = (event as CustomEvent).detail;\n if (this.externalControl) {\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value, previousValue: this.value},\n })\n );\n } else {\n this.updateSelection(value);\n }\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changedProperties.has('activated')) {\n this.updateActivated(this.activated);\n }\n\n if (\n changedProperties.has('type') \|\|\n changedProperties.has('variant') \|\|\n changedProperties.has('hugText') \|\|\n changedProperties.has('large')\n ) {\n this.options.forEach((option) => {\n option.type = this.type;\n option.variant = this.variant;\n option.hugText = this.hugText;\n option.large = this.large;\n });\n }\n\n if (changedProperties.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 const firstSelectable = this.getFirstSelectableOption();\n if (firstSelectable) {\n this.updateSelection(firstSelectable.value);\n }\n }\n }\n\n override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.variant === ObcToggleButtonOptionVariant.flat,\n regular: this.variant === ObcToggleButtonOptionVariant.regular,\n 'hug-text': this.hugText,\n 'icon-text-under': this.type === ObcToggleButtonOptionType.iconTextUnder,\n disabled: this.disabled,\n large: this.large,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-group': ObcToggleButtonGroup;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {\n ObcToggleButtonOption,\n ObcToggleButtonOptionVariant,\n ObcToggleButtonOptionType,\n} from '../toggle-button-option/toggle-button-option.js';\nimport componentStyle from './toggle-button-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\n/*\n `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n \n Provides a horizontal group of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-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 set of buttons with clear selection indicators. Commonly used for switching\n * between views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\n * filtering options, or layout toggles (e.g., list vs. grid view).\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 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 * - Content type options:\n * - `text` (default): Options display text labels only.\n * - `icon`: Options display only an icon (compact, suitable for limited space).\n * - `iconText`: Options display an icon and text side-by-side.\n * - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n * - Size control:\n * - Standard size (default): Regular button dimensions.\n * - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n * - Layout behavior:\n * - By default, the group stretches to fill available container width, distributing space equally among options.\n * - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n * - External control mode: When `externalControl` is true, the group emits selection events but does not\n * update its own `value` property, allowing parent components to manage state (useful for form libraries or\n * custom state management).\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 selected option for a seamless, unified appearance.\n * - Property propagation: The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n * properties to all child `<obc-toggle-button-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-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\n * alternative to radio buttons.\n \n Ideal use cases:\n * - View mode toggles (e.g., list vs. grid, map vs. chart)\n * - Filter options (e.g., all/active/completed tasks)\n * - Alignment or layout controls (e.g., left/center/right alignment)\n * - Time range selectors (e.g., day/week/month)\n * - Toolbar mode switches (e.g., edit/preview modes)\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 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 (`type=\"icon\"`), 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 `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Use `large` size for touch interfaces or when the control is a primary interaction element.\n \n TODO(designer): Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. \|\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-group value=\"list\" type=\"iconText\">\n * <obc-toggle-button-option value=\"list\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * List\n * </obc-toggle-button-option>\n * <obc-toggle-button-option value=\"grid\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * Grid\n * </obc-toggle-button-option>\n * <obc-toggle-button-option value=\"table\">\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * Table\n * </obc-toggle-button-option>\n * </obc-toggle-button-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-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-group')\nexport class ObcToggleButtonGroup extends LitElement {\n /\n The currently selected option's value.\n \n Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.\n \n If set to a value that does not match any enabled option, the first enabled option is selected by default.\n /\n @property({type: String}) value = '';\n\n /\n The value of the option that is activated.\n \n When the group is controlled by an external source, this property is used to set the value of the option that is activated.\n * This is a visual indication that the option is clicked but not yet stored.\n /\n @property({type: String}) activated: string \| undefined;\n\n /\n The visual type of the toggle button options.\n \n - `text` (default): Options display text only.\n * - `icon`: Options display only an icon.\n * - `iconText`: Options display an icon and text side-by-side.\n * - `iconTextUnder`: Options display an icon above the text.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: String}) type = ObcToggleButtonOptionType.text;\n\n /\n The visual variant of the toggle button group.\n \n - `regular` (default): Standard appearance with background and border.\n * - `flat`: Minimal style with no background or border.\n * - `normal`: Alternative style variant.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: String}) variant = ObcToggleButtonOptionVariant.regular;\n\n /\n If true, the group shrinks to fit its content (\"hug\" the text) instead of stretching to fill the container.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n /\n @property({type: Boolean}) hugText = false;\n\n /\n If true, the group is controlled by an external source.\n \n When true, the group will not update its selection when the `value` property changes.\n \n Defaults to false.\n /\n @property({type: Boolean}) externalControl = 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 toggle button group and all contained options when true.\n \n When disabled, no option can be selected or interacted with.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n If true, the group and all contained options use a larger size.\n \n This setting is propagated to all child `<obc-toggle-button-option>` elements.\n */\n @property({type: Boolean, reflect: true}) large = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-option'})\n options!: NodeListOf<ObcToggleButtonOption>;\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(value: string): ObcToggleButtonOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonOption \| 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.setNoDivider();\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.setNoDivider();\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.setNoDivider();\n\n if (emitEvent && oldValue !== newValue) {\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n }\n\n private updateActivated(newValue: string \| undefined) {\n if (newValue) {\n this.options.forEach((option) => {\n option.activated = option.value === newValue;\n });\n } else {\n this.options.forEach((option) => {\n option.activated = false;\n });\n }\n }\n\n private setNoDivider() {\n const selectedOptionIndex = Array.from(this.options).findIndex(\n (option) => option.selected\n );\n this.options.forEach((option) => {\n option.showDivider = true;\n });\n if (selectedOptionIndex === -1) {\n return;\n }\n const nextOption = this.options[selectedOptionIndex + 1];\n if (nextOption) {\n nextOption.showDivider = false;\n }\n }\n\n private _originalDisabledStates = new Map<ObcToggleButtonOption, boolean>();\n\n protected override firstUpdated(\n _changedProperties: PropertyValues<unknown> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\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 group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((option) => {\n this._originalDisabledStates.set(option, option.hasAttribute('disabled'));\n\n option.addEventListener('selected', (e) => this.handleOptionClick(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !option.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(\n option,\n option.hasAttribute('disabled')\n );\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['disabled'],\n });\n\n option.type = this.type;\n option.variant = this.variant;\n option.hugText = this.hugText;\n option.large = this.large;\n\n if (this.disabled) {\n option.setAttribute('data-group-disabled', 'true');\n option.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 if (this.activated) {\n this.updateActivated(this.activated);\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 handleOptionClick(event: Event) {\n const {value} = (event as CustomEvent).detail;\n if (this.externalControl) {\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value, previousValue: this.value},\n })\n );\n } else {\n this.updateSelection(value);\n }\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changedProperties.has('activated')) {\n this.updateActivated(this.activated);\n }\n\n if (\n changedProperties.has('type') \|\|\n changedProperties.has('variant') \|\|\n changedProperties.has('hugText') \|\|\n changedProperties.has('large')\n ) {\n this.options.forEach((option) => {\n option.type = this.type;\n option.variant = this.variant;\n option.hugText = this.hugText;\n option.large = this.large;\n });\n }\n\n if (changedProperties.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 override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.variant === ObcToggleButtonOptionVariant.flat,\n regular: this.variant === ObcToggleButtonOptionVariant.regular,\n 'hug-text': this.hugText,\n 'icon-text-under': this.type === ObcToggleButtonOptionType.iconTextUnder,\n disabled: this.disabled,\n large: this.large,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-group': ObcToggleButtonGroup;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js CHANGED Viewed

@@ -287,6 +287,10 @@ const compentStyle = css`
       align-self: stretch;
     }
+:is(:is(.wrapper .content) .alerts):not(.show-alerts) {
+        display: none;
+      }
 :is(:is(.wrapper .content) .alerts) .alert-icon {
         width: 24px;
         height: 24px;

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-fleet-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"integration-fleet-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export declare class ObcIntegrationFleetButton extends LitElement {
         warning: number;
         caution: number;
     };
+    showAlerts: boolean;
     render(): import('lit-html').TemplateResult<1>;
     renderAlertCount(): import('lit-html').TemplateResult<1>[];
     static styles: import('lit').CSSResult;

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-fleet-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;~~AAKhD~~,OAAO,iCAAiC,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,MAAM,CAAM;IACvB,MAAM,EAAE,MAAM,CAAM;IAE9C,QAAQ,EAAE,6BAA6B,EAAE,CAAM;IACrB,UAAU,EAAE,MAAM,CAAM;IACN,MAAM,EAAE;QAClD,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAsC;~~IAE9B~~,MAAM;~~IAoCf~~,gBAAgB;IAiChB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}
1	+ {"version":3,"file":"integration-fleet-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,iCAAiC,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,MAAM,CAAM;IACvB,MAAM,EAAE,MAAM,CAAM;IAE9C,QAAQ,EAAE,6BAA6B,EAAE,CAAM;IACrB,UAAU,EAAE,MAAM,CAAM;IACN,MAAM,EAAE;QAClD,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAsC;IACZ,UAAU,EAAE,OAAO,CAAS;IAE9C,MAAM;IA2Cf,gBAAgB;IAiChB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html } from "lit";
 import { customElement } from "../../decorator.js";
 import compentStyle from "./integration-fleet-button.css.js";
 import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
 import "../../components/badge/badge.js";
 var __defProp = Object.defineProperty;
@@ -23,6 +24,7 @@ let ObcIntegrationFleetButton = class extends LitElement {
     this.readouts = [];
     this.alertTopic = "";
     this.alerts = { alarm: 0, warning: 0, caution: 0 };
+    this.showAlerts = false;
   }
   render() {
     const hasAlert = this.alerts.alarm > 0 || this.alerts.warning > 0 || this.alerts.caution > 0;
@@ -42,7 +44,14 @@ let ObcIntegrationFleetButton = class extends LitElement {
                 </div>`
     )}
           </div>
-          <div class="alerts ${hasAlert ? "has-alert" : "no-alert"}">
+          <div
+            class=${classMap({
+      alerts: true,
+      "has-alert": hasAlert,
+      "no-alert": !hasAlert,
+      "show-alerts": this.showAlerts
+    })}
+          >
             <div class="alert-icon ">
               <slot name="alert-topic-icon"></slot>
             </div>
@@ -107,6 +116,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Object, attribute: false })
 ], ObcIntegrationFleetButton.prototype, "alerts", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationFleetButton.prototype, "showAlerts", 2);
 ObcIntegrationFleetButton = __decorateClass([
   customElement("obc-integration-fleet-button")
 ], ObcIntegrationFleetButton);

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-fleet-button.js","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-fleet-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {msg} from '@lit/localize';\nimport '../../components/badge/badge.js';\n\nexport interface IntegrationFleetButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\n@customElement('obc-integration-fleet-button')\nexport class ObcIntegrationFleetButton extends LitElement {\n @property({type: Boolean}) selected: boolean = false;\n @property({type: String}) fleetName: string = '';\n @property({type: String}) status: string = '';\n @property({type: Array, attribute: false})\n readouts: IntegrationFleetButtonReadout[] = [];\n @property({type: String}) alertTopic: string = '';\n @property({type: Object, attribute: false}) alerts: {\n alarm: number;\n warning: number;\n caution: number;\n } = {alarm: 0, warning: 0, caution: 0};\n\n override render() {\n const hasAlert =\n this.alerts.alarm > 0 \|\|\n this.alerts.warning > 0 \|\|\n this.alerts.caution > 0;\n return html`\n <button class=\"wrapper ${this.selected ? 'selected' : ''}\">\n <div class=\"header\">\n <div class=\"fleet-name\">${this.fleetName}</div>\n <div class=\"status\">${this.status}</div>\n </div>\n <div class=\"content\">\n <div class=\"readouts\">\n ${this.readouts.map(\n (readout) =>\n html`<div class=\"readout\">\n <div class=\"readout-label\">${readout.label}</div>\n <div class=\"readout-value\">${readout.value}</div>\n <div class=\"readout-unit\">${readout.unit}</div>\n </div>`\n )}\n </div>\n <div class~~=\"~~alerts ~~${hasAlert ?~~ 'has-alert' : 'no-alert'}\">\n <div class=\"alert-icon \">\n <slot name=\"alert-topic-icon\"></slot>\n </div>\n <div class=\"alert-topic\">${this.alertTopic}</div>\n <div class=\"alert-counts\">\n ${hasAlert ? this.renderAlertCount() : msg('No alerts')}\n </div>\n </div>\n </div>\n </button>\n `;\n }\n\n renderAlertCount() {\n const {alarm, warning, caution} = this.alerts;\n const divs = [];\n if (alarm > 0) {\n divs.push(\n html`<obc-badge\n type=\"alarm\"\n .number=\"${alarm}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n if (warning > 0) {\n divs.push(\n html`<obc-badge\n type=\"warning\"\n .number=\"${warning}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n if (caution > 0) {\n divs.push(\n html`<obc-badge\n type=\"caution\"\n .number=\"${caution}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n return divs;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-fleet-button': ObcIntegrationFleetButton;\n }\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;AAcO~~,IAAM,4BAAN,cAAwC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,WAAoB;AACrB,SAAA,YAAoB;AACpB,SAAA,SAAiB;AAE3C,SAAA,WAA4C,CAAA;AAClB,SAAA,aAAqB;AACH,SAAA,SAIxC,EAAC,OAAO,GAAG,SAAS,GAAG,SAAS,EAAA;AAAA,~~EAAC~~;AAAA,~~EAE5B~~,SAAS;AAChB,UAAM,WACJ,KAAK,OAAO,QAAQ,KACpB,KAAK,OAAO,UAAU,KACtB,KAAK,OAAO,UAAU;AACxB,WAAO;AAAA,+BACoB,KAAK,WAAW,aAAa,EAAE;AAAA;AAAA,oCAE1B,KAAK,SAAS;AAAA,gCAClB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,KAAK,SAAS;AAAA,MACd,CAAC,YACC;AAAA,+CAC+B,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA,IAAA,CAE7C;AAAA;AAAA~~,+BAEkB~~,~~WAAW~~,~~cAAc~~,~~UAAU~~;AAAA;AAAA;AAAA;AAAA,~~uCAI3B~~,KAAK,UAAU;AAAA;AAAA,gBAEtC,WAAW,KAAK,iBAAA,IAAqB,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnE;AAAA,EAEA,mBAAmB;AACjB,UAAM,EAAC,OAAO,SAAS,QAAA,IAAW,KAAK;AACvC,UAAM,OAAO,CAAA;AACb,QAAI,QAAQ,GAAG;AACb,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,KAAK;AAAA;AAAA;AAAA,MAAA;AAAA,IAItB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,WAAO;AAAA,EACT;AAGF;~~AAnFa~~,~~0BAkFK~~,SAAS,UAAU,YAAY;~~AAjFpB~~,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,0BACgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,0BAEe,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,0BAGe,WAAA,UAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,0BAKX,WAAA,YAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,0BAMe,WAAA,cAAA,CAAA;AACkB,gBAAA;AAAA,EAA3C,SAAS,EAAC,MAAM,QAAQ,WAAW,OAAM;AAAA,GAP/B,0BAOiC,WAAA,UAAA,CAAA;~~AAPjC~~,4BAAN,gBAAA;AAAA,EADN,cAAc,8BAA8B;AAAA,GAChC,yBAAA;"}
1	+ {"version":3,"file":"integration-fleet-button.js","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-fleet-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport '../../components/badge/badge.js';\n\nexport interface IntegrationFleetButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\n@customElement('obc-integration-fleet-button')\nexport class ObcIntegrationFleetButton extends LitElement {\n @property({type: Boolean}) selected: boolean = false;\n @property({type: String}) fleetName: string = '';\n @property({type: String}) status: string = '';\n @property({type: Array, attribute: false})\n readouts: IntegrationFleetButtonReadout[] = [];\n @property({type: String}) alertTopic: string = '';\n @property({type: Object, attribute: false}) alerts: {\n alarm: number;\n warning: number;\n caution: number;\n } = {alarm: 0, warning: 0, caution: 0};\n @property({type: Boolean}) showAlerts: boolean = false;\n\n override render() {\n const hasAlert =\n this.alerts.alarm > 0 \|\|\n this.alerts.warning > 0 \|\|\n this.alerts.caution > 0;\n return html`\n <button class=\"wrapper ${this.selected ? 'selected' : ''}\">\n <div class=\"header\">\n <div class=\"fleet-name\">${this.fleetName}</div>\n <div class=\"status\">${this.status}</div>\n </div>\n <div class=\"content\">\n <div class=\"readouts\">\n ${this.readouts.map(\n (readout) =>\n html`<div class=\"readout\">\n <div class=\"readout-label\">${readout.label}</div>\n <div class=\"readout-value\">${readout.value}</div>\n <div class=\"readout-unit\">${readout.unit}</div>\n </div>`\n )}\n </div>\n <div\n class=${classMap({\n alerts: true,\n 'has-alert': hasAlert,\n 'no-alert': !hasAlert,\n 'show-alerts': this.showAlerts,\n })}\n >\n <div class=\"alert-icon \">\n <slot name=\"alert-topic-icon\"></slot>\n </div>\n <div class=\"alert-topic\">${this.alertTopic}</div>\n <div class=\"alert-counts\">\n ${hasAlert ? this.renderAlertCount() : msg('No alerts')}\n </div>\n </div>\n </div>\n </button>\n `;\n }\n\n renderAlertCount() {\n const {alarm, warning, caution} = this.alerts;\n const divs = [];\n if (alarm > 0) {\n divs.push(\n html`<obc-badge\n type=\"alarm\"\n .number=\"${alarm}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n if (warning > 0) {\n divs.push(\n html`<obc-badge\n type=\"warning\"\n .number=\"${warning}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n if (caution > 0) {\n divs.push(\n html`<obc-badge\n type=\"caution\"\n .number=\"${caution}\"\n size=\"large\"\n ></obc-badge>`\n );\n }\n return divs;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-fleet-button': ObcIntegrationFleetButton;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAeO,IAAM,4BAAN,cAAwC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,WAAoB;AACrB,SAAA,YAAoB;AACpB,SAAA,SAAiB;AAE3C,SAAA,WAA4C,CAAA;AAClB,SAAA,aAAqB;AACH,SAAA,SAIxC,EAAC,OAAO,GAAG,SAAS,GAAG,SAAS,EAAA;AACT,SAAA,aAAsB;AAAA,EAAA;AAAA,EAExC,SAAS;AAChB,UAAM,WACJ,KAAK,OAAO,QAAQ,KACpB,KAAK,OAAO,UAAU,KACtB,KAAK,OAAO,UAAU;AACxB,WAAO;AAAA,+BACoB,KAAK,WAAW,aAAa,EAAE;AAAA;AAAA,oCAE1B,KAAK,SAAS;AAAA,gCAClB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,KAAK,SAAS;AAAA,MACd,CAAC,YACC;AAAA,+CAC+B,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA,IAAA,CAE7C;AAAA;AAAA;AAAA,oBAGO,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,YAAY,CAAC;AAAA,MACb,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyB,KAAK,UAAU;AAAA;AAAA,gBAEtC,WAAW,KAAK,iBAAA,IAAqB,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnE;AAAA,EAEA,mBAAmB;AACjB,UAAM,EAAC,OAAO,SAAS,QAAA,IAAW,KAAK;AACvC,UAAM,OAAO,CAAA;AACb,QAAI,QAAQ,GAAG;AACb,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,KAAK;AAAA;AAAA;AAAA,MAAA;AAAA,IAItB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,WAAO;AAAA,EACT;AAGF;AA3Fa,0BA0FK,SAAS,UAAU,YAAY;AAzFpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,0BACgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,0BAEe,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,0BAGe,WAAA,UAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,0BAKX,WAAA,YAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,0BAMe,WAAA,cAAA,CAAA;AACkB,gBAAA;AAAA,EAA3C,SAAS,EAAC,MAAM,QAAQ,WAAW,OAAM;AAAA,GAP/B,0BAOiC,WAAA,UAAA,CAAA;AAKjB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAZd,0BAYgB,WAAA,cAAA,CAAA;AAZhB,4BAAN,gBAAA;AAAA,EADN,cAAc,8BAA8B;AAAA,GAChC,yBAAA;"}

package/package.json CHANGED Viewed

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