npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.117 → 2.0.0-next.119 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.117 → 2.0.0-next.119

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

package/dist/components/check-button/check-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"check-button.js","sources":["../../../src/components/check-button/check-button.ts"],"sourcesContent":["import {LitElement, unsafeCSS} from 'lit';\nimport {html} from 'lit/static-html.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport checkButtonStyle from './check-button.css?inline';\nimport '../../icons/icon-checkbox-checked-filled.js';\nimport '../../icons/icon-checkbox-uncheck-google.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Enum for the two visual variants of `<obc-check-button>`.\n * - `regular`: Standard toggle button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n /\nexport enum CheckButtonType {\n regular = 'regular',\n checkbox = 'checkbox',\n}\n\n/\n Optional checkbox appearance variants for `<obc-check-button type=\"checkbox\">`.\n * - `default`: Existing check-button checkbox visuals.\n * - `updated`: Updated checkbox visuals (24px box, icon-check mark, custom state tokens).\n /\nexport enum CheckButtonCheckboxAppearance {\n default = 'default',\n updated = 'updated',\n}\n\n/\n `<obc-check-button>` – A versatile state‑toggle component used to represent\n * persistent settings (on/off, enabled/disabled, selected/unselected). It is\n * not intended for transient command actions such as “Send”, “Save”, or\n * navigation – use a standard `<button>` or action component for those.\n \n The element supports two visual variants, both exposing the same checked /\n * unchecked semantics:\n \n ### Regular (toggle button)\n * * Entire surface changes color when checked.\n * * Optional single icon (via `icon` slot) is identical in both states; the\n * button’s styling conveys the difference.\n * * Ideal for equipment controls, system modes, feature enable/disable, etc.\n \n ### Checkbox (icon‑swap)\n * * Renders a familiar checkbox frame but allows custom icons for checked and\n * unchecked states (`checked-icon` / `unchecked-icon` slots). Falls back to\n * built‑in checkbox icons when none supplied.\n * * Useful for semantic pairs such as microphone on/off, volume mute/unmute,\n * communication link active/inactive, etc.\n \n ## Difference from `<obc-checkbox>`\n * `<obc-checkbox>` is a classic form control with a fixed check/mixed visual and\n * built‑in change events. `<obc-check-button>` focuses on state indication\n * and leaves business logic to the host via the `check-button-click` event, plus\n * offers width, icon, and full customization options.\n \n ## Features\n * * Two Variants – `regular` & `checkbox` (see above).\n * * Checkbox Appearance – Optional `checkboxAppearance` mode for updated visuals.\n * * Icon Support – Single icon (regular) or paired icons (checkbox).\n * * Width Control – `fullWidth` (hug content vs. expand) and `width` for a\n * fixed size when `fullWidth` is true.\n * * State API – `checked`, `disabled`, and `check-button-click` event.\n * * Accessibility – Uses `aria-pressed` (regular) or `aria-checked` with\n * `role=\"checkbox\"` (checkbox) so assistive tech announces state correctly.\n \n ## Usage Guidelines\n * 1. Prefer regular when a solid background change is the clearest cue and\n * the meaning of the state does not rely on an icon transformation.\n * 2. Choose checkbox when the icon itself conveys the before/after state\n * (e.g., microphone on or off). Provide both icons for maximum clarity.\n * 3. Group independent toggles freely; for mutually exclusive choices use radio\n * buttons or segmented controls instead.\n * 4. Keep labels concise. For icon‑only checkbox buttons supply an\n * `aria-label`.\n \n ## Slots\n * \| Slot Name \| When Rendered \| Purpose \|\n * \| -------------- \| ----------------------------------------- \| ------------------------------------ \|\n * \| (default) \| Always \| Button label text/content \|\n * \| icon \| type=\"regular\" & showIcon \| Icon before label (same for both states) \|\n * \| checked-icon \| type=\"checkbox\" & hasCheckedIcon \| Custom icon for checked state \|\n * \| unchecked-icon \| type=\"checkbox\" & hasUncheckedIcon \| Custom icon for unchecked state \|\n \n ## Events\n * * `check-button-click` – Fired after user toggles the control. Detail:\n * `{ checked: boolean, type: 'regular' \| 'checkbox' }`.\n \n @slot - Default slot for button label/content\n * @slot icon - Icon before label (regular mode, if showIcon is true)\n * @slot checked-icon - Custom icon for checked state (checkbox mode)\n * @slot unchecked-icon - Custom icon for unchecked state (checkbox mode)\n * @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n * @stable\n /\n@customElement('obc-check-button')\nexport class ObcCheckButton extends LitElement {\n /\n Determines the visual style and toggle behavior of the button.\n * - `regular`: Standard button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n \n @default 'regular'\n /\n @property({type: String}) type: CheckButtonType = CheckButtonType.regular;\n\n /\n Whether the button is currently checked (selected/on).\n \n When clicked, this state toggles and the `check-button-click` event is fired.\n \n @default false\n /\n @property({type: Boolean}) checked = false;\n\n /\n Disables the button, preventing user interaction and applying disabled styling.\n \n @default false\n /\n @property({type: Boolean}) disabled = false;\n\n /\n If false, button width adapts to its content (fit-content).\n * If true, uses the `width` property (if set) or expands to 100% of parent.\n \n @default false\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n Specific width for the button (e.g., \"200px\", \"10rem\").\n * Only applies when `fullWidth` is true.\n \n @default ''\n * @availableWhen fullWidth==true\n /\n @property({type: String}) width = '';\n\n /\n Whether to show the icon in regular mode (icon slot).\n * Ignored in checkbox mode.\n \n @availableWhen type==regular\n /\n @property({type: Boolean}) showIcon = false;\n\n /\n If true, uses the `checked-icon` slot for the checked state in checkbox mode.\n * Otherwise, uses the default checked icon.\n \n @default false\n * @availableWhen type==checkbox\n /\n @property({type: Boolean}) hasCheckedIcon = false;\n\n /\n If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.\n * Otherwise, uses the default unchecked icon.\n \n @default false\n * @availableWhen type==checkbox\n /\n @property({type: Boolean}) hasUncheckedIcon = false;\n\n /\n Optional appearance mode for checkbox type.\n * Keep `default` for existing behavior. Use `updated` for the new checkbox visuals.\n \n @default 'default'\n * @availableWhen type==checkbox\n /\n @property({type: String, attribute: 'checkbox-appearance'})\n checkboxAppearance: CheckButtonCheckboxAppearance =\n CheckButtonCheckboxAppearance.default;\n\n private get isUpdatedCheckboxAppearance(): boolean {\n return (\n this.type === CheckButtonType.checkbox &&\n this.checkboxAppearance === CheckButtonCheckboxAppearance.updated\n );\n }\n\n private get customWidthStyle() {\n if (!this.fullWidth \|\| this.width === '') return '';\n return `--custom-width: ${this.width}`;\n }\n\n private handleClick() {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n\n /\n Fired after the user toggles the check button.\n * The event detail includes the new checked state and the type of the button.\n \n @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n */\n this.dispatchEvent(\n new CustomEvent('check-button-click', {\n detail: {\n checked: this.checked,\n type: this.type,\n },\n })\n );\n }\n\n private renderIcon() {\n if (this.type === CheckButtonType.checkbox) {\n return html`\n <div class=\"icon-container\">\n ${this.checked\n ? this.renderCheckedIcon()\n : this.renderUncheckedIcon()}\n </div>\n `;\n }\n\n if (this.type === CheckButtonType.regular && this.showIcon) {\n return html`\n <div class=\"icon-container\">\n <slot name=\"icon\"></slot>\n </div>\n `;\n }\n\n return html``;\n }\n\n private renderCheckedIcon() {\n if (this.isUpdatedCheckboxAppearance && !this.hasCheckedIcon) {\n return this.renderUpdatedCheckedIcon();\n }\n\n if (this.hasCheckedIcon) {\n return html`<slot name=\"checked-icon\"></slot>`;\n }\n return html`<obi-checkbox-checked-filled></obi-checkbox-checked-filled>`;\n }\n\n private renderUncheckedIcon() {\n if (this.isUpdatedCheckboxAppearance && !this.hasUncheckedIcon) {\n return this.renderUpdatedUncheckedIcon();\n }\n\n if (this.hasUncheckedIcon) {\n return html`<slot name=\"unchecked-icon\"></slot>`;\n }\n return html`<obi-checkbox-uncheck-google></obi-checkbox-uncheck-google>`;\n }\n\n private renderUpdatedUncheckedIcon() {\n return html`\n <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"23\"\n height=\"23\"\n rx=\"3.5\"\n fill=\"var(--obc-check-button-checkbox-unchecked-background, var(--indent-enabled-background-color))\"\n stroke=\"var(--obc-check-button-checkbox-unchecked-border, var(--element-symbol-color))\"\n />\n </svg>\n </span>\n `;\n }\n\n private renderUpdatedCheckedIcon() {\n return html`\n <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"23\"\n height=\"23\"\n rx=\"3.5\"\n fill=\"var(--obc-check-button-checkbox-checked-background, var(--selected-enabled-background-color))\"\n stroke=\"var(--obc-check-button-checkbox-checked-border, var(--selected-enabled-border-color))\"\n />\n <path\n d=\"M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7L19.5899 5.59L8.99991 16.17Z\"\n fill=\"var(--on-selected-active-color)\"\n />\n </svg>\n </span>\n `;\n }\n\n override render() {\n return html`\n <button\n class=${classMap({\n wrapper: true,\n 'state-checked': this.checked,\n 'state-unchecked': !this.checked,\n 'type-regular': this.type === CheckButtonType.regular,\n 'type-checkbox': this.type === CheckButtonType.checkbox,\n 'checkbox-appearance-updated': this.isUpdatedCheckboxAppearance,\n hasIcon:\n this.type === CheckButtonType.checkbox \|\|\n (this.type === CheckButtonType.regular && this.showIcon),\n 'full-width': this.fullWidth,\n 'has-custom-width': this.fullWidth && this.width !== '',\n })}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n part=\"wrapper\"\n style=${this.customWidthStyle}\n aria-checked=${ifDefined(\n this.type === CheckButtonType.checkbox\n ? this.checked\n ? 'true'\n : 'false'\n : undefined\n )}\n aria-pressed=${ifDefined(\n this.type === CheckButtonType.regular\n ? this.checked\n ? 'true'\n : 'false'\n : undefined\n )}\n >\n <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n <div class=\"content-container\">\n ${this.renderIcon()}\n <span class=\"label-container\" part=\"label\">\n <slot></slot>\n </span>\n </div>\n </div>\n </button>\n `;\n }\n\n static override styles = unsafeCSS(checkButtonStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-check-button': ObcCheckButton;\n }\n}\n"],"names":["CheckButtonType","CheckButtonCheckboxAppearance"],"mappings":"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"}
1	+ {"version":3,"file":"check-button.js","sources":["../../../src/components/check-button/check-button.ts"],"sourcesContent":["import {LitElement, unsafeCSS} from 'lit';\nimport {html} from 'lit/static-html.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport checkButtonStyle from './check-button.css?inline';\nimport '../../icons/icon-checkbox-checked-filled.js';\nimport '../../icons/icon-checkbox-uncheck-google.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Enum for the two visual variants of `<obc-check-button>`.\n * - `regular`: Standard toggle button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n /\nexport enum CheckButtonType {\n regular = 'regular',\n checkbox = 'checkbox',\n}\n\n/\n Optional checkbox appearance variants for `<obc-check-button type=\"checkbox\">`.\n * - `default`: Existing check-button checkbox visuals.\n * - `updated`: Updated checkbox visuals (24px box, icon-check mark, custom state tokens).\n /\nexport enum CheckButtonCheckboxAppearance {\n default = 'default',\n updated = 'updated',\n}\n\n/\n `<obc-check-button>` – A versatile state‑toggle component used to represent\n * persistent settings (on/off, enabled/disabled, selected/unselected). It is\n * not intended for transient command actions such as “Send”, “Save”, or\n * navigation – use a standard `<button>` or action component for those.\n \n The element supports two visual variants, both exposing the same checked /\n * unchecked semantics:\n \n ### Regular (toggle button)\n * * Entire surface changes color when checked.\n * * Optional single icon (via `icon` slot) is identical in both states; the\n * button’s styling conveys the difference.\n * * Ideal for equipment controls, system modes, feature enable/disable, etc.\n \n ### Checkbox (icon‑swap)\n * * Renders a familiar checkbox frame but allows custom icons for checked and\n * unchecked states (`checked-icon` / `unchecked-icon` slots). Falls back to\n * built‑in checkbox icons when none supplied.\n * * Useful for semantic pairs such as microphone on/off, volume mute/unmute,\n * communication link active/inactive, etc.\n \n ## Difference from `<obc-checkbox>`\n * `<obc-checkbox>` is a classic form control with a fixed check/mixed visual and\n * built‑in change events. `<obc-check-button>` focuses on state indication\n * and leaves business logic to the host via the `check-button-click` event, plus\n * offers width, icon, and full customization options.\n \n ## Features\n * * Two Variants – `regular` & `checkbox` (see above).\n * * Checkbox Appearance – Optional `checkboxAppearance` mode for updated visuals.\n * * Icon Support – Single icon (regular) or paired icons (checkbox).\n * * Width Control – `fullWidth` (hug content vs. expand) and `width` for a\n * fixed size when `fullWidth` is true.\n * * State API – `checked`, `disabled`, and `check-button-click` event.\n * * Accessibility – Uses `aria-pressed` (regular) or `aria-checked` with\n * `role=\"checkbox\"` (checkbox) so assistive tech announces state correctly.\n \n ## Usage Guidelines\n * 1. Prefer regular when a solid background change is the clearest cue and\n * the meaning of the state does not rely on an icon transformation.\n * 2. Choose checkbox when the icon itself conveys the before/after state\n * (e.g., microphone on or off). Provide both icons for maximum clarity.\n * 3. Group independent toggles freely; for mutually exclusive choices use radio\n * buttons or segmented controls instead.\n * 4. Keep labels concise. For icon‑only checkbox buttons supply an\n * `aria-label`.\n \n ## Slots\n * \| Slot Name \| When Rendered \| Purpose \|\n * \| -------------- \| ----------------------------------------- \| ------------------------------------ \|\n * \| (default) \| Always \| Button label text/content \|\n * \| icon \| type=\"regular\" & showIcon \| Icon before label (same for both states) \|\n * \| checked-icon \| type=\"checkbox\" & hasCheckedIcon \| Custom icon for checked state \|\n * \| unchecked-icon \| type=\"checkbox\" & hasUncheckedIcon \| Custom icon for unchecked state \|\n \n ## Events\n * * `check-button-click` – Fired after user toggles the control. Detail:\n * `{ checked: boolean, type: 'regular' \| 'checkbox' }`.\n \n @slot - Default slot for button label/content\n * @slot icon - Icon before label (regular mode, if showIcon is true)\n * @slot checked-icon - Custom icon for checked state (checkbox mode)\n * @slot unchecked-icon - Custom icon for unchecked state (checkbox mode)\n * @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n * @stable\n /\n@customElement('obc-check-button')\nexport class ObcCheckButton extends LitElement {\n /\n Determines the visual style and toggle behavior of the button.\n * - `regular`: Standard button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n \n @default 'regular'\n /\n @property({type: String}) type: CheckButtonType = CheckButtonType.regular;\n\n /\n Whether the button is currently checked (selected/on).\n \n When clicked, this state toggles and the `check-button-click` event is fired.\n \n @default false\n /\n @property({type: Boolean}) checked = false;\n\n /\n Disables the button, preventing user interaction and applying disabled styling.\n \n @default false\n /\n @property({type: Boolean}) disabled = false;\n\n /\n If false, button width adapts to its content (fit-content).\n * If true, uses the `width` property (if set) or expands to 100% of parent.\n \n @default false\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n Specific width for the button (e.g., \"200px\", \"10rem\").\n * Only applies when `fullWidth` is true.\n \n @default ''\n * @availableWhen fullWidth==true\n /\n @property({type: String}) width = '';\n\n /\n Whether to show the icon in regular mode (icon slot).\n * Ignored in checkbox mode.\n \n @availableWhen type==regular\n /\n @property({type: Boolean}) showIcon = false;\n\n /\n If true, uses the `checked-icon` slot for the checked state in checkbox mode.\n * Otherwise, uses the default checked icon.\n \n @default false\n * @availableWhen type==checkbox\n /\n @property({type: Boolean}) hasCheckedIcon = false;\n\n /\n If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.\n * Otherwise, uses the default unchecked icon.\n \n @default false\n * @availableWhen type==checkbox\n /\n @property({type: Boolean}) hasUncheckedIcon = false;\n\n /\n Optional appearance mode for checkbox type.\n * Keep `default` for existing behavior. Use `updated` for the new checkbox visuals.\n \n @default 'default'\n * @availableWhen type==checkbox\n /\n @property({type: String, attribute: 'checkbox-appearance'})\n checkboxAppearance: CheckButtonCheckboxAppearance =\n CheckButtonCheckboxAppearance.default;\n\n private get isUpdatedCheckboxAppearance(): boolean {\n return (\n this.type === CheckButtonType.checkbox &&\n this.checkboxAppearance === CheckButtonCheckboxAppearance.updated\n );\n }\n\n private get customWidthStyle() {\n if (!this.fullWidth \|\| this.width === '') return '';\n return `--custom-width: ${this.width}`;\n }\n\n private handleClick() {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n\n /\n Fired after the user toggles the check button.\n * The event detail includes the new checked state and the type of the button.\n \n @fires check-button-click\n */\n this.dispatchEvent(\n new CustomEvent('check-button-click', {\n detail: {\n checked: this.checked,\n type: this.type,\n },\n })\n );\n }\n\n private renderIcon() {\n if (this.type === CheckButtonType.checkbox) {\n return html`\n <div class=\"icon-container\">\n ${this.checked\n ? this.renderCheckedIcon()\n : this.renderUncheckedIcon()}\n </div>\n `;\n }\n\n if (this.type === CheckButtonType.regular && this.showIcon) {\n return html`\n <div class=\"icon-container\">\n <slot name=\"icon\"></slot>\n </div>\n `;\n }\n\n return html``;\n }\n\n private renderCheckedIcon() {\n if (this.isUpdatedCheckboxAppearance && !this.hasCheckedIcon) {\n return this.renderUpdatedCheckedIcon();\n }\n\n if (this.hasCheckedIcon) {\n return html`<slot name=\"checked-icon\"></slot>`;\n }\n return html`<obi-checkbox-checked-filled></obi-checkbox-checked-filled>`;\n }\n\n private renderUncheckedIcon() {\n if (this.isUpdatedCheckboxAppearance && !this.hasUncheckedIcon) {\n return this.renderUpdatedUncheckedIcon();\n }\n\n if (this.hasUncheckedIcon) {\n return html`<slot name=\"unchecked-icon\"></slot>`;\n }\n return html`<obi-checkbox-uncheck-google></obi-checkbox-uncheck-google>`;\n }\n\n private renderUpdatedUncheckedIcon() {\n return html`\n <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"23\"\n height=\"23\"\n rx=\"3.5\"\n fill=\"var(--obc-check-button-checkbox-unchecked-background, var(--indent-enabled-background-color))\"\n stroke=\"var(--obc-check-button-checkbox-unchecked-border, var(--element-symbol-color))\"\n />\n </svg>\n </span>\n `;\n }\n\n private renderUpdatedCheckedIcon() {\n return html`\n <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"23\"\n height=\"23\"\n rx=\"3.5\"\n fill=\"var(--obc-check-button-checkbox-checked-background, var(--selected-enabled-background-color))\"\n stroke=\"var(--obc-check-button-checkbox-checked-border, var(--selected-enabled-border-color))\"\n />\n <path\n d=\"M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7L19.5899 5.59L8.99991 16.17Z\"\n fill=\"var(--on-selected-active-color)\"\n />\n </svg>\n </span>\n `;\n }\n\n override render() {\n return html`\n <button\n class=${classMap({\n wrapper: true,\n 'state-checked': this.checked,\n 'state-unchecked': !this.checked,\n 'type-regular': this.type === CheckButtonType.regular,\n 'type-checkbox': this.type === CheckButtonType.checkbox,\n 'checkbox-appearance-updated': this.isUpdatedCheckboxAppearance,\n hasIcon:\n this.type === CheckButtonType.checkbox \|\|\n (this.type === CheckButtonType.regular && this.showIcon),\n 'full-width': this.fullWidth,\n 'has-custom-width': this.fullWidth && this.width !== '',\n })}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n part=\"wrapper\"\n style=${this.customWidthStyle}\n aria-checked=${ifDefined(\n this.type === CheckButtonType.checkbox\n ? this.checked\n ? 'true'\n : 'false'\n : undefined\n )}\n aria-pressed=${ifDefined(\n this.type === CheckButtonType.regular\n ? this.checked\n ? 'true'\n : 'false'\n : undefined\n )}\n >\n <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n <div class=\"content-container\">\n ${this.renderIcon()}\n <span class=\"label-container\" part=\"label\">\n <slot></slot>\n </span>\n </div>\n </div>\n </button>\n `;\n }\n\n static override styles = unsafeCSS(checkButtonStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-check-button': ObcCheckButton;\n }\n}\n"],"names":["CheckButtonType","CheckButtonCheckboxAppearance"],"mappings":"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"}

package/dist/components/checkbox/checkbox.d.ts CHANGED Viewed

@@ -87,8 +87,8 @@ export type ObcCheckboxChangeEvent = CustomEvent<{
  * ```
  *
  * @slot - No named slots.
- * @fires {ObcCheckboxChangeEvent} change - – Emitted when the status changes.
- * @fires {ObcCheckboxChangeEvent} disabled - – Emitted when the disabled state changes.
+ * @fires {ObcCheckboxChangeEvent} change - Emitted when the status changes.
+ * @fires {ObcCheckboxChangeEvent} disabled - Emitted when the disabled state changes.
  * @stable
  */
 export declare class ObcCheckbox extends LitElement {

package/dist/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../../icons/icon-check-mixed.js';\nimport '../../icons/icon-check-google.js';\nimport componentStyle from './checkbox.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Represents the possible states of the checkbox.\n * - `unchecked`: The checkbox is not selected.\n * - `checked`: The checkbox is selected.\n * - `mixed`: The checkbox is in an indeterminate state (typically used for\n * parent checkboxes when some, but not all, child checkboxes are selected).\n /\nexport enum CheckboxStatus {\n unchecked = 'unchecked',\n checked = 'checked',\n mixed = 'mixed',\n}\n\n/\n Represents the visual interaction state of the checkbox.\n * - `enabled`: Default interactive state.\n * - `loading`: Shows loading spinner and locks interaction.\n /\nexport enum CheckboxState {\n enabled = 'enabled',\n loading = 'loading',\n}\n\n/\n The payload for `change` and `disabled` events emitted by `<obc-checkbox>`.\n * - `status`: The current checkbox status.\n * - `disabled`: Whether the checkbox is currently disabled.\n /\nexport type ObcCheckboxChangeEvent = CustomEvent<{\n status: CheckboxStatus;\n disabled: boolean;\n}>;\n\n/\n ### Overview\n * `<obc-checkbox>` is a selectable input for binary and mixed states.\n * It supports `checked`, `unchecked`, and `mixed` (indeterminate) status\n * and is intended for forms, lists, and settings.\n \n Keywords: checkbox, check box, tickbox, tri-state, indeterminate, select all.\n \n ### Features\n * - Three‑state support: Allows `checked`, `unchecked`, and `mixed` (indeterminate) status for parent/child\n * selection scenarios.\n * - Visual state support: `state` allows `enabled` and `loading` visual behavior.\n * - Disabled state: Can be set to non‑interactive, visually indicating its disabled status.\n * - Accessible: Implements proper ARIA role and keyboard interaction (Space or Enter toggles state).\n * - Touch target: Uses a minimum 48x48 interactive area.\n * - Icon display: Uses `<obi-check-google>` for checked and `<obi-check-mixed>` for mixed states.\n * - Loading display: Uses an indeterminate spinner when `state=\"loading\"`.\n \n ### Variants\n * - Unchecked (default): Empty checkbox.\n * - Checked: Filled checkbox with a check‑mark icon.\n * - Mixed: Partially filled checkbox with a mixed icon.\n * - Loading: Spinner is shown and interaction is locked.\n \n ### Usage Guidelines\n * - Use `obc-checkbox` for independent binary choices or when representing a group selection with a mixed state.\n * - For mutually exclusive choices, use a radio group instead.\n * - The mixed state should be applied by application logic; users should not toggle into or out of it directly.\n * - Use the `disabled` property to prevent interaction and visually indicate the option is unavailable.\n * - Use `state=\"loading\"` for transient async state while preserving layout.\n * - If there is no visible external label, provide an `aria-label` or `aria-labelledby`.\n \n ### Properties and Attributes\n * - `status` (`checked` \| `unchecked` \| `mixed`) · default: `unchecked` – Controls the checkbox status.\n * - `state` (`enabled` \| `loading`) · default: `enabled` – Controls the checkbox visual state.\n * - `disabled` (`boolean`) · Disables interaction and applies disabled styling.\n * - `aria-label` (`string`) · Accessible name for screen readers.\n * - `aria-labelledby` (`string`) · ID reference to an external visible label.\n * - `aria-describedby` (`string`) · ID reference(s) for supplementary description.\n \n ### Events\n * - `change` – Fired when the checkbox status changes.\n * detail: `{ status, disabled }`\n * - `disabled` – Fired when the `disabled` property changes.\n * detail: `{ status, disabled }`\n \n ### Example\n * ```html\n * <obc-checkbox\n * status=\"mixed\"\n * state=\"enabled\"\n * aria-label=\"Select all items\"\n * ></obc-checkbox>\n * ```\n \n @slot - No named slots.\n * @fires {ObcCheckboxChangeEvent} change - – Emitted when the status changes.\n * @fires {ObcCheckboxChangeEvent} disabled - – Emitted when the disabled state changes.\n * @stable\n /\n@customElement('obc-checkbox')\nexport class ObcCheckbox extends LitElement {\n /\n Controls the checkbox status: `checked`, `unchecked`, or `mixed` (indeterminate).\n \n Defaults to `unchecked`.\n /\n @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n /\n Controls the visual state: `enabled` or `loading`.\n \n Defaults to `enabled`.\n /\n @property({type: String}) state: CheckboxState = CheckboxState.enabled;\n\n /\n Disables the checkbox and prevents user interaction.\n \n When `true`, the checkbox is visually styled as disabled and does not respond to user input.\n * Interaction is also locked when `state === loading`.\n /\n @property({type: Boolean}) disabled = false;\n\n /* Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */\n @property({type: Boolean, attribute: false}) hasHoverEffects = true;\n\n @query('.visually-hidden') private checkboxControl?: HTMLDivElement;\n\n private get _isInteractionLocked() {\n return this.disabled \|\| this.state === CheckboxState.loading;\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (changed.has('disabled')) {\n this.dispatchEvent(\n new CustomEvent('disabled', {\n detail: {\n status: this.status,\n disabled: this.disabled,\n },\n })\n );\n }\n }\n\n private toggleStatus() {\n if (this._isInteractionLocked) return;\n\n if (this.status === CheckboxStatus.checked) {\n this.status = CheckboxStatus.unchecked;\n } else {\n this.status = CheckboxStatus.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n status: this.status,\n disabled: this.disabled,\n },\n })\n );\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key === ' ' \|\| e.key === 'Space' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.toggleStatus();\n }\n }\n\n private get _computedAriaChecked() {\n switch (this.status) {\n case 'checked':\n return 'true';\n case 'mixed':\n return 'mixed';\n case 'unchecked':\n default:\n return 'false';\n }\n }\n\n public override focus(options?: FocusOptions): void {\n this.checkboxControl?.focus(options);\n }\n\n private syncFocusVisibleAttribute() {\n const isFocusVisible = this.checkboxControl?.matches(':focus-visible');\n this.toggleAttribute('data-focus-visible', Boolean(isFocusVisible));\n }\n\n private handleControlFocus() {\n queueMicrotask(() => this.syncFocusVisibleAttribute());\n }\n\n private handleControlBlur() {\n this.removeAttribute('data-focus-visible');\n }\n\n override render() {\n const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n const hostAriaLabelledBy =\n this.getAttribute('aria-labelledby') ?? undefined;\n const hostAriaDescribedBy =\n this.getAttribute('aria-describedby') ?? undefined;\n const forwardedAriaLabel = hostAriaLabelledBy\n ? undefined\n : (hostAriaLabel ?? 'Checkbox item');\n\n return html`\n <div\n class=${classMap({\n 'visually-hidden': true,\n [`status-${this.status}`]: true,\n [`state-${this.state}`]: true,\n disabled: this.disabled,\n 'no-hover-effects': !this.hasHoverEffects,\n })}\n role=\"checkbox\"\n aria-checked=${this._computedAriaChecked}\n aria-label=${ifDefined(forwardedAriaLabel)}\n aria-labelledby=${ifDefined(hostAriaLabelledBy)}\n aria-describedby=${ifDefined(hostAriaDescribedBy)}\n aria-disabled=${this._isInteractionLocked ? 'true' : 'false'}\n aria-busy=${this.state === CheckboxState.loading ? 'true' : 'false'}\n tabindex=${this._isInteractionLocked ? '-1' : '0'}\n @click=${this.toggleStatus}\n @keydown=${this.handleKeydown}\n @focus=${this.handleControlFocus}\n @blur=${this.handleControlBlur}\n >\n <div class=\"checkbox-container\">\n <div class=\"checkbox-box\">\n ${this.state === CheckboxState.loading\n ? html`\n <svg\n class=\"checkbox-loading-spinner type-indeterminate size-small style-regular\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"6\"></circle>\n </svg>\n `\n : this.status === 'checked'\n ? html`<obi-check-google\n class=\"checkbox-icon\"\n ></obi-check-google>`\n : this.status === 'mixed'\n ? html`<obi-check-mixed\n class=\"checkbox-icon\"\n ></obi-check-mixed>`\n : html`<span class=\"checkbox-icon\"></span>`}\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = [unsafeCSS(componentStyle)];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-checkbox': ObcCheckbox;\n }\n}\n"],"names":["CheckboxStatus","CheckboxState"],"mappings":"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"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../../icons/icon-check-mixed.js';\nimport '../../icons/icon-check-google.js';\nimport componentStyle from './checkbox.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Represents the possible states of the checkbox.\n * - `unchecked`: The checkbox is not selected.\n * - `checked`: The checkbox is selected.\n * - `mixed`: The checkbox is in an indeterminate state (typically used for\n * parent checkboxes when some, but not all, child checkboxes are selected).\n /\nexport enum CheckboxStatus {\n unchecked = 'unchecked',\n checked = 'checked',\n mixed = 'mixed',\n}\n\n/\n Represents the visual interaction state of the checkbox.\n * - `enabled`: Default interactive state.\n * - `loading`: Shows loading spinner and locks interaction.\n /\nexport enum CheckboxState {\n enabled = 'enabled',\n loading = 'loading',\n}\n\n/\n The payload for `change` and `disabled` events emitted by `<obc-checkbox>`.\n * - `status`: The current checkbox status.\n * - `disabled`: Whether the checkbox is currently disabled.\n /\nexport type ObcCheckboxChangeEvent = CustomEvent<{\n status: CheckboxStatus;\n disabled: boolean;\n}>;\n\n/\n ### Overview\n * `<obc-checkbox>` is a selectable input for binary and mixed states.\n * It supports `checked`, `unchecked`, and `mixed` (indeterminate) status\n * and is intended for forms, lists, and settings.\n \n Keywords: checkbox, check box, tickbox, tri-state, indeterminate, select all.\n \n ### Features\n * - Three‑state support: Allows `checked`, `unchecked`, and `mixed` (indeterminate) status for parent/child\n * selection scenarios.\n * - Visual state support: `state` allows `enabled` and `loading` visual behavior.\n * - Disabled state: Can be set to non‑interactive, visually indicating its disabled status.\n * - Accessible: Implements proper ARIA role and keyboard interaction (Space or Enter toggles state).\n * - Touch target: Uses a minimum 48x48 interactive area.\n * - Icon display: Uses `<obi-check-google>` for checked and `<obi-check-mixed>` for mixed states.\n * - Loading display: Uses an indeterminate spinner when `state=\"loading\"`.\n \n ### Variants\n * - Unchecked (default): Empty checkbox.\n * - Checked: Filled checkbox with a check‑mark icon.\n * - Mixed: Partially filled checkbox with a mixed icon.\n * - Loading: Spinner is shown and interaction is locked.\n \n ### Usage Guidelines\n * - Use `obc-checkbox` for independent binary choices or when representing a group selection with a mixed state.\n * - For mutually exclusive choices, use a radio group instead.\n * - The mixed state should be applied by application logic; users should not toggle into or out of it directly.\n * - Use the `disabled` property to prevent interaction and visually indicate the option is unavailable.\n * - Use `state=\"loading\"` for transient async state while preserving layout.\n * - If there is no visible external label, provide an `aria-label` or `aria-labelledby`.\n \n ### Properties and Attributes\n * - `status` (`checked` \| `unchecked` \| `mixed`) · default: `unchecked` – Controls the checkbox status.\n * - `state` (`enabled` \| `loading`) · default: `enabled` – Controls the checkbox visual state.\n * - `disabled` (`boolean`) · Disables interaction and applies disabled styling.\n * - `aria-label` (`string`) · Accessible name for screen readers.\n * - `aria-labelledby` (`string`) · ID reference to an external visible label.\n * - `aria-describedby` (`string`) · ID reference(s) for supplementary description.\n \n ### Events\n * - `change` – Fired when the checkbox status changes.\n * detail: `{ status, disabled }`\n * - `disabled` – Fired when the `disabled` property changes.\n * detail: `{ status, disabled }`\n \n ### Example\n * ```html\n * <obc-checkbox\n * status=\"mixed\"\n * state=\"enabled\"\n * aria-label=\"Select all items\"\n * ></obc-checkbox>\n * ```\n \n @slot - No named slots.\n * @fires {ObcCheckboxChangeEvent} change - Emitted when the status changes.\n * @fires {ObcCheckboxChangeEvent} disabled - Emitted when the disabled state changes.\n * @stable\n /\n@customElement('obc-checkbox')\nexport class ObcCheckbox extends LitElement {\n /\n Controls the checkbox status: `checked`, `unchecked`, or `mixed` (indeterminate).\n \n Defaults to `unchecked`.\n /\n @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n /\n Controls the visual state: `enabled` or `loading`.\n \n Defaults to `enabled`.\n /\n @property({type: String}) state: CheckboxState = CheckboxState.enabled;\n\n /\n Disables the checkbox and prevents user interaction.\n \n When `true`, the checkbox is visually styled as disabled and does not respond to user input.\n * Interaction is also locked when `state === loading`.\n /\n @property({type: Boolean}) disabled = false;\n\n /* Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */\n @property({type: Boolean, attribute: false}) hasHoverEffects = true;\n\n @query('.visually-hidden') private checkboxControl?: HTMLDivElement;\n\n private get _isInteractionLocked() {\n return this.disabled \|\| this.state === CheckboxState.loading;\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (changed.has('disabled')) {\n this.dispatchEvent(\n new CustomEvent('disabled', {\n detail: {\n status: this.status,\n disabled: this.disabled,\n },\n })\n );\n }\n }\n\n private toggleStatus() {\n if (this._isInteractionLocked) return;\n\n if (this.status === CheckboxStatus.checked) {\n this.status = CheckboxStatus.unchecked;\n } else {\n this.status = CheckboxStatus.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n status: this.status,\n disabled: this.disabled,\n },\n })\n );\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key === ' ' \|\| e.key === 'Space' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.toggleStatus();\n }\n }\n\n private get _computedAriaChecked() {\n switch (this.status) {\n case 'checked':\n return 'true';\n case 'mixed':\n return 'mixed';\n case 'unchecked':\n default:\n return 'false';\n }\n }\n\n public override focus(options?: FocusOptions): void {\n this.checkboxControl?.focus(options);\n }\n\n private syncFocusVisibleAttribute() {\n const isFocusVisible = this.checkboxControl?.matches(':focus-visible');\n this.toggleAttribute('data-focus-visible', Boolean(isFocusVisible));\n }\n\n private handleControlFocus() {\n queueMicrotask(() => this.syncFocusVisibleAttribute());\n }\n\n private handleControlBlur() {\n this.removeAttribute('data-focus-visible');\n }\n\n override render() {\n const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n const hostAriaLabelledBy =\n this.getAttribute('aria-labelledby') ?? undefined;\n const hostAriaDescribedBy =\n this.getAttribute('aria-describedby') ?? undefined;\n const forwardedAriaLabel = hostAriaLabelledBy\n ? undefined\n : (hostAriaLabel ?? 'Checkbox item');\n\n return html`\n <div\n class=${classMap({\n 'visually-hidden': true,\n [`status-${this.status}`]: true,\n [`state-${this.state}`]: true,\n disabled: this.disabled,\n 'no-hover-effects': !this.hasHoverEffects,\n })}\n role=\"checkbox\"\n aria-checked=${this._computedAriaChecked}\n aria-label=${ifDefined(forwardedAriaLabel)}\n aria-labelledby=${ifDefined(hostAriaLabelledBy)}\n aria-describedby=${ifDefined(hostAriaDescribedBy)}\n aria-disabled=${this._isInteractionLocked ? 'true' : 'false'}\n aria-busy=${this.state === CheckboxState.loading ? 'true' : 'false'}\n tabindex=${this._isInteractionLocked ? '-1' : '0'}\n @click=${this.toggleStatus}\n @keydown=${this.handleKeydown}\n @focus=${this.handleControlFocus}\n @blur=${this.handleControlBlur}\n >\n <div class=\"checkbox-container\">\n <div class=\"checkbox-box\">\n ${this.state === CheckboxState.loading\n ? html`\n <svg\n class=\"checkbox-loading-spinner type-indeterminate size-small style-regular\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"6\"></circle>\n </svg>\n `\n : this.status === 'checked'\n ? html`<obi-check-google\n class=\"checkbox-icon\"\n ></obi-check-google>`\n : this.status === 'mixed'\n ? html`<obi-check-mixed\n class=\"checkbox-icon\"\n ></obi-check-mixed>`\n : html`<span class=\"checkbox-icon\"></span>`}\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = [unsafeCSS(componentStyle)];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-checkbox': ObcCheckbox;\n }\n}\n"],"names":["CheckboxStatus","CheckboxState"],"mappings":";;;;;;;;;;;;;;;;;;AAgBO,IAAK,mCAAAA,oBAAL;AACLA,kBAAA,WAAA,IAAY;AACZA,kBAAA,SAAA,IAAU;AACVA,kBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAWL,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,SAAA,IAAU;AACVA,iBAAA,SAAA,IAAU;AAFA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AA4EL,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMqB,SAAA,SAAyB;AAOzB,SAAA,QAAuB;AAQtB,SAAA,WAAW;AAGO,SAAA,kBAAkB;AAAA,EAAA;AAAA,EAI/D,IAAY,uBAAuB;AACjC,WAAO,KAAK,YAAY,KAAK,UAAU;AAAA,EACzC;AAAA,EAEmB,QAAQ,SAAqC;AAC9D,QAAI,QAAQ,IAAI,UAAU,GAAG;AAC3B,WAAK;AAAA,QACH,IAAI,YAAY,YAAY;AAAA,UAC1B,QAAQ;AAAA,YACN,QAAQ,KAAK;AAAA,YACb,UAAU,KAAK;AAAA,UAAA;AAAA,QACjB,CACD;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,QAAI,KAAK,qBAAsB;AAE/B,QAAI,KAAK,WAAW,WAAwB;AAC1C,WAAK,SAAS;AAAA,IAChB,OAAO;AACL,WAAK,SAAS;AAAA,IAChB;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ;AAAA,UACN,QAAQ,KAAK;AAAA,UACb,UAAU,KAAK;AAAA,QAAA;AAAA,MACjB,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,cAAc,GAAkB;AACtC,QAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAAS;AAC3D,QAAE,eAAA;AACF,WAAK,aAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEA,IAAY,uBAAuB;AACjC,YAAQ,KAAK,QAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEgB,MAAM,SAA8B;AAClD,SAAK,iBAAiB,MAAM,OAAO;AAAA,EACrC;AAAA,EAEQ,4BAA4B;AAClC,UAAM,iBAAiB,KAAK,iBAAiB,QAAQ,gBAAgB;AACrE,SAAK,gBAAgB,sBAAsB,QAAQ,cAAc,CAAC;AAAA,EACpE;AAAA,EAEQ,qBAAqB;AAC3B,mBAAe,MAAM,KAAK,2BAA2B;AAAA,EACvD;AAAA,EAEQ,oBAAoB;AAC1B,SAAK,gBAAgB,oBAAoB;AAAA,EAC3C;AAAA,EAES,SAAS;AAChB,UAAM,gBAAgB,KAAK,aAAa,YAAY,KAAK;AACzD,UAAM,qBACJ,KAAK,aAAa,iBAAiB,KAAK;AAC1C,UAAM,sBACJ,KAAK,aAAa,kBAAkB,KAAK;AAC3C,UAAM,qBAAqB,qBACvB,SACC,iBAAiB;AAEtB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,CAAC,UAAU,KAAK,MAAM,EAAE,GAAG;AAAA,MAC3B,CAAC,SAAS,KAAK,KAAK,EAAE,GAAG;AAAA,MACzB,UAAU,KAAK;AAAA,MACf,oBAAoB,CAAC,KAAK;AAAA,IAAA,CAC3B,CAAC;AAAA;AAAA,uBAEa,KAAK,oBAAoB;AAAA,qBAC3B,UAAU,kBAAkB,CAAC;AAAA,0BACxB,UAAU,kBAAkB,CAAC;AAAA,2BAC5B,UAAU,mBAAmB,CAAC;AAAA,wBACjC,KAAK,uBAAuB,SAAS,OAAO;AAAA,oBAChD,KAAK,UAAU,YAAwB,SAAS,OAAO;AAAA,mBACxD,KAAK,uBAAuB,OAAO,GAAG;AAAA,iBACxC,KAAK,YAAY;AAAA,mBACf,KAAK,aAAa;AAAA,iBACpB,KAAK,kBAAkB;AAAA,gBACxB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,cAIxB,KAAK,UAAU,YACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASA,KAAK,WAAW,YACd;AAAA;AAAA,0CAGA,KAAK,WAAW,UACd;AAAA;AAAA,2CAGA,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3D;AAGF;AAhKa,YA+JK,SAAS,CAAC,UAAU,cAAc,CAAC;AAzJzB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,YAMe,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,YAae,WAAA,SAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,YAqBgB,WAAA,YAAA,CAAA;AAGkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAxBhC,YAwBkC,WAAA,mBAAA,CAAA;AAEV,gBAAA;AAAA,EAAlC,MAAM,kBAAkB;AAAA,GA1Bd,YA0BwB,WAAA,mBAAA,CAAA;AA1BxB,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/components/command-menu/command-menu.d.ts CHANGED Viewed

@@ -106,7 +106,7 @@ export declare class ObcCommandMenu extends LitElement {
     /**
      * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.
      *
-     * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.
+     * @fires change
      */
     private onChange;
     static styles: import('lit').CSSResult;

package/dist/components/command-menu/command-menu.js CHANGED Viewed

@@ -85,7 +85,7 @@ let ObcCommandMenu = class extends LitElement {
   /**
    * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.
    *
-   * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.
+   * @fires change
    */
   onChange(event) {
     event.stopPropagation();

package/dist/components/command-menu/command-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"command-menu.js","sources":["../../../src/components/command-menu/command-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './command-menu.css?inline';\nimport '../start-stop-switch/start-stop-switch.js';\nimport '../../icons/icon-command-in.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcStartStopSwitchChangeEvent} from '../start-stop-switch/start-stop-switch.js';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcCommandMenuChangeEvent = CustomEvent<{inCommand: boolean}>;\n\n/*\n `<obc-command-menu>` – A toggleable command status menu for switching between \"in command\" and \"no command\" states.\n \n Displays the current command status, description, and (optionally) location, along with a prominent toggle control for taking or releasing command. The component is designed for scenarios where a user needs to view and change the active command state for a system or station.\n \n ---\n \n ### Features\n * - Command State Toggle: Switch between \"in command\" and \"no command\" states using an integrated toggle (based on `obc-start-stop-switch`).\n * - Status Display: Shows a customizable status label, description, and optional location for the current command.\n * - Icon Support: Accepts custom icons for command state via slots.\n * - Customizable Labels: All action and state labels for the toggle can be customized via slots.\n * - Visual Feedback: The component visually distinguishes between \"in command\" and \"no command\" states, including color and icon changes.\n * - Location Support: Optionally displays the location of the command if `showLocation` is true.\n \n ---\n \n ### Usage Guidelines\n * Use `<obc-command-menu>` to present and manage the active command state for a system, device, or station. It is ideal when users need to clearly see the current command status and quickly toggle control. The component is suitable for dashboards, control panels, or any interface where command handover is required.\n \n TODO(designer): Confirm if there are recommended icons, color schemes, or text length limits for status/description. Clarify if there are any constraints on when to use this component versus other status/toggle components.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|---------------------------------------\|-------------------------------\|-----------------------------------------------------------------\|\n * \| `command-icon` \| Always \| Main icon representing the current command state. \|\n * \| `command-status` \| Always \| Status label (e.g., \"Joystick\", \"NO CMD\"). \|\n * \| `command-description` \| Always \| Description of the command state (e.g., \"DP\", \"CMD at DP\"). \|\n * \| `command-location` \| `showLocation` is true \| Location label for the command (e.g., \"Aft Bridge\"). \|\n * \| `toogle-action-to-in-command-label` \| Always \| Label for the action to take command (toggle to \"in command\"). \|\n * \| `toogle-action-to-no-command-label` \| Always \| Label for the action to release command (toggle to \"no command\").\|\n * \| `toogle-state-in-command-label` \| Always \| Status label when in \"in command\" state. \|\n * \| `toogle-state-no-command-label` \| Always \| Status label when in \"no command\" state. \|\n * \| `toogle-state-in-command-icon` \| Always \| Icon for the \"in command\" state (defaults to `<obi-command-in>`).\|\n \n ---\n \n ### Properties and Attributes\n * - `inCommand` (`boolean`): Whether the menu is in the \"in command\" state. Controls the toggle and visual state. (Default: `false`)\n * - `showLocation` (`boolean`): Whether to display the location slot. If `false`, the location is omitted. (Default: `true`)\n \n ---\n \n ### Events\n * - `change` – Fired when the command state is toggled. The event detail contains `{inCommand: boolean}` indicating the new state.\n \n ---\n \n ### Best Practices & Constraints\n * - Use clear, concise labels for status and actions to ensure quick recognition.\n * - Only display the location if it is relevant to the command context.\n * - Ensure that only one command menu is active for a given system at a time to avoid conflicting states.\n * - For accessibility, provide meaningful icons and text in all slots.\n * - TODO(designer): Specify if there are any timing, animation, or accessibility requirements for the toggle interaction.\n \n ---\n \n ### Example\n * ```html\n * <obc-command-menu .inCommand=${true}>\n * <div slot=\"command-icon\"><obi-joystick></obi-joystick></div>\n * <div slot=\"command-status\">Joystick</div>\n * <div slot=\"command-description\">DP</div>\n * <div slot=\"command-location\">Aft Bridge</div>\n * <div slot=\"toogle-action-to-in-command-label\">Take</div>\n * <div slot=\"toogle-action-to-no-command-label\">Release</div>\n * <div slot=\"toogle-state-in-command-label\">In CMD</div>\n * <div slot=\"toogle-state-no-command-label\">DP Aft Bridge</div>\n * </obc-command-menu>\n * ```\n \n @slot command-icon - Main icon representing the current command state.\n * @slot command-status - Status label (e.g., \"Joystick\", \"NO CMD\").\n * @slot command-description - Description of the command state.\n * @slot command-location - Location label for the command (shown if `showLocation` is true).\n * @slot toogle-action-to-in-command-label - Label for the action to take command.\n * @slot toogle-action-to-no-command-label - Label for the action to release command.\n * @slot toogle-state-in-command-label - Status label when in \"in command\" state.\n * @slot toogle-state-no-command-label - Status label when in \"no command\" state.\n * @slot toogle-state-in-command-icon - Icon for the \"in command\" state (defaults to `<obi-command-in>`).\n * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.\n * @beta\n /\n@customElement('obc-command-menu')\nexport class ObcCommandMenu extends LitElement {\n /\n Whether the menu is in the \"in command\" state.\n * Controls the toggle and visual state.\n \n @default false\n /\n @property({type: Boolean}) inCommand = false;\n\n /\n Whether to display the location slot.\n * If false, the location is omitted from the menu.\n /\n @property({type: Boolean, attribute: false}) showLocation: boolean = true;\n\n override render() {\n return html`\n <div\n class=${classMap({\n card: true,\n 'in-command': this.inCommand,\n 'no-command': !this.inCommand,\n 'has-location': this.showLocation,\n })}\n >\n <div class=\"title-container\">Command</div>\n <div class=\"command-container\">\n <div class=\"value-container\">\n <div class=\"icon command\">\n <slot name=\"command-icon\"></slot>\n </div>\n <div class=\"value\">\n <div class=\"status\">\n <slot name=\"command-status\"></slot>\n </div>\n <div class=\"description\">\n <div class=\"command-description\">\n <slot name=\"command-description\"></slot>\n </div>\n ${this.showLocation\n ? html` <div class=\"divider\"></div>\n <div class=\"command-location\">\n <slot name=\"command-location\"></slot>\n </div>`\n : nothing}\n </div>\n </div>\n </div>\n <div class=\"action-container\">\n <obc-start-stop-switch\n @change=${this.onChange}\n .checked=${this.inCommand}\n showCheckedStateIcon\n .size=${'large'}\n >\n <div slot=\"to-checked-action-label\">\n <slot name=\"toogle-action-to-in-command-label\"></slot>\n </div>\n <div slot=\"to-unchecked-action-label\">\n <slot name=\"toogle-action-to-no-command-label\"></slot>\n </div>\n <div slot=\"checked-state-label\">\n <slot name=\"toogle-state-in-command-label\"></slot>\n </div>\n <div slot=\"checked-state-icon\">\n <slot name=\"toogle-state-in-command-icon\">\n <obi-command-in></obi-command-in>\n </slot>\n </div>\n <div slot=\"unchecked-state-label\">\n <slot name=\"toogle-state-no-command-label\"></slot>\n </div>\n </obc-start-stop-switch>\n </div>\n </div>\n </div>\n `;\n }\n\n /\n Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.\n \n @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.\n */\n private onChange(event: ObcStartStopSwitchChangeEvent) {\n // Stop the start-stop-switch's composed event from leaking through\n // our shadow DOM — consumers should only see command-menu's own event.\n event.stopPropagation();\n const newValue = event.detail.checked;\n this.inCommand = newValue;\n this.dispatchEvent(\n new CustomEvent<{inCommand: boolean}>('change', {\n detail: {inCommand: newValue},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-command-menu': ObcCommandMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiGO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOsB,SAAA,YAAY;AAMM,SAAA,eAAwB;AAAA,EAAA;AAAA,EAE5D,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,cAAc,KAAK;AAAA,MACnB,cAAc,CAAC,KAAK;AAAA,MACpB,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBQ,KAAK,eACH;AAAA;AAAA;AAAA,gCAIA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMH,KAAK,QAAQ;AAAA,yBACZ,KAAK,SAAS;AAAA;AAAA,sBAEjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwB3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,SAAS,OAAsC;AAGrD,UAAM,gBAAA;AACN,UAAM,WAAW,MAAM,OAAO;AAC9B,SAAK,YAAY;AACjB,SAAK;AAAA,MACH,IAAI,YAAkC,UAAU;AAAA,QAC9C,QAAQ,EAAC,WAAW,SAAA;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAGF;AApGa,eAmGK,SAAS,UAAU,YAAY;AA5FpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,eAOgB,WAAA,aAAA,CAAA;AAMkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAbhC,eAakC,WAAA,gBAAA,CAAA;AAblC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
1	+ {"version":3,"file":"command-menu.js","sources":["../../../src/components/command-menu/command-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './command-menu.css?inline';\nimport '../start-stop-switch/start-stop-switch.js';\nimport '../../icons/icon-command-in.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcStartStopSwitchChangeEvent} from '../start-stop-switch/start-stop-switch.js';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcCommandMenuChangeEvent = CustomEvent<{inCommand: boolean}>;\n\n/*\n `<obc-command-menu>` – A toggleable command status menu for switching between \"in command\" and \"no command\" states.\n \n Displays the current command status, description, and (optionally) location, along with a prominent toggle control for taking or releasing command. The component is designed for scenarios where a user needs to view and change the active command state for a system or station.\n \n ---\n \n ### Features\n * - Command State Toggle: Switch between \"in command\" and \"no command\" states using an integrated toggle (based on `obc-start-stop-switch`).\n * - Status Display: Shows a customizable status label, description, and optional location for the current command.\n * - Icon Support: Accepts custom icons for command state via slots.\n * - Customizable Labels: All action and state labels for the toggle can be customized via slots.\n * - Visual Feedback: The component visually distinguishes between \"in command\" and \"no command\" states, including color and icon changes.\n * - Location Support: Optionally displays the location of the command if `showLocation` is true.\n \n ---\n \n ### Usage Guidelines\n * Use `<obc-command-menu>` to present and manage the active command state for a system, device, or station. It is ideal when users need to clearly see the current command status and quickly toggle control. The component is suitable for dashboards, control panels, or any interface where command handover is required.\n \n TODO(designer): Confirm if there are recommended icons, color schemes, or text length limits for status/description. Clarify if there are any constraints on when to use this component versus other status/toggle components.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|---------------------------------------\|-------------------------------\|-----------------------------------------------------------------\|\n * \| `command-icon` \| Always \| Main icon representing the current command state. \|\n * \| `command-status` \| Always \| Status label (e.g., \"Joystick\", \"NO CMD\"). \|\n * \| `command-description` \| Always \| Description of the command state (e.g., \"DP\", \"CMD at DP\"). \|\n * \| `command-location` \| `showLocation` is true \| Location label for the command (e.g., \"Aft Bridge\"). \|\n * \| `toogle-action-to-in-command-label` \| Always \| Label for the action to take command (toggle to \"in command\"). \|\n * \| `toogle-action-to-no-command-label` \| Always \| Label for the action to release command (toggle to \"no command\").\|\n * \| `toogle-state-in-command-label` \| Always \| Status label when in \"in command\" state. \|\n * \| `toogle-state-no-command-label` \| Always \| Status label when in \"no command\" state. \|\n * \| `toogle-state-in-command-icon` \| Always \| Icon for the \"in command\" state (defaults to `<obi-command-in>`).\|\n \n ---\n \n ### Properties and Attributes\n * - `inCommand` (`boolean`): Whether the menu is in the \"in command\" state. Controls the toggle and visual state. (Default: `false`)\n * - `showLocation` (`boolean`): Whether to display the location slot. If `false`, the location is omitted. (Default: `true`)\n \n ---\n \n ### Events\n * - `change` – Fired when the command state is toggled. The event detail contains `{inCommand: boolean}` indicating the new state.\n \n ---\n \n ### Best Practices & Constraints\n * - Use clear, concise labels for status and actions to ensure quick recognition.\n * - Only display the location if it is relevant to the command context.\n * - Ensure that only one command menu is active for a given system at a time to avoid conflicting states.\n * - For accessibility, provide meaningful icons and text in all slots.\n * - TODO(designer): Specify if there are any timing, animation, or accessibility requirements for the toggle interaction.\n \n ---\n \n ### Example\n * ```html\n * <obc-command-menu .inCommand=${true}>\n * <div slot=\"command-icon\"><obi-joystick></obi-joystick></div>\n * <div slot=\"command-status\">Joystick</div>\n * <div slot=\"command-description\">DP</div>\n * <div slot=\"command-location\">Aft Bridge</div>\n * <div slot=\"toogle-action-to-in-command-label\">Take</div>\n * <div slot=\"toogle-action-to-no-command-label\">Release</div>\n * <div slot=\"toogle-state-in-command-label\">In CMD</div>\n * <div slot=\"toogle-state-no-command-label\">DP Aft Bridge</div>\n * </obc-command-menu>\n * ```\n \n @slot command-icon - Main icon representing the current command state.\n * @slot command-status - Status label (e.g., \"Joystick\", \"NO CMD\").\n * @slot command-description - Description of the command state.\n * @slot command-location - Location label for the command (shown if `showLocation` is true).\n * @slot toogle-action-to-in-command-label - Label for the action to take command.\n * @slot toogle-action-to-no-command-label - Label for the action to release command.\n * @slot toogle-state-in-command-label - Status label when in \"in command\" state.\n * @slot toogle-state-no-command-label - Status label when in \"no command\" state.\n * @slot toogle-state-in-command-icon - Icon for the \"in command\" state (defaults to `<obi-command-in>`).\n * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.\n * @beta\n /\n@customElement('obc-command-menu')\nexport class ObcCommandMenu extends LitElement {\n /\n Whether the menu is in the \"in command\" state.\n * Controls the toggle and visual state.\n \n @default false\n /\n @property({type: Boolean}) inCommand = false;\n\n /\n Whether to display the location slot.\n * If false, the location is omitted from the menu.\n /\n @property({type: Boolean, attribute: false}) showLocation: boolean = true;\n\n override render() {\n return html`\n <div\n class=${classMap({\n card: true,\n 'in-command': this.inCommand,\n 'no-command': !this.inCommand,\n 'has-location': this.showLocation,\n })}\n >\n <div class=\"title-container\">Command</div>\n <div class=\"command-container\">\n <div class=\"value-container\">\n <div class=\"icon command\">\n <slot name=\"command-icon\"></slot>\n </div>\n <div class=\"value\">\n <div class=\"status\">\n <slot name=\"command-status\"></slot>\n </div>\n <div class=\"description\">\n <div class=\"command-description\">\n <slot name=\"command-description\"></slot>\n </div>\n ${this.showLocation\n ? html` <div class=\"divider\"></div>\n <div class=\"command-location\">\n <slot name=\"command-location\"></slot>\n </div>`\n : nothing}\n </div>\n </div>\n </div>\n <div class=\"action-container\">\n <obc-start-stop-switch\n @change=${this.onChange}\n .checked=${this.inCommand}\n showCheckedStateIcon\n .size=${'large'}\n >\n <div slot=\"to-checked-action-label\">\n <slot name=\"toogle-action-to-in-command-label\"></slot>\n </div>\n <div slot=\"to-unchecked-action-label\">\n <slot name=\"toogle-action-to-no-command-label\"></slot>\n </div>\n <div slot=\"checked-state-label\">\n <slot name=\"toogle-state-in-command-label\"></slot>\n </div>\n <div slot=\"checked-state-icon\">\n <slot name=\"toogle-state-in-command-icon\">\n <obi-command-in></obi-command-in>\n </slot>\n </div>\n <div slot=\"unchecked-state-label\">\n <slot name=\"toogle-state-no-command-label\"></slot>\n </div>\n </obc-start-stop-switch>\n </div>\n </div>\n </div>\n `;\n }\n\n /\n Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.\n \n @fires change\n */\n private onChange(event: ObcStartStopSwitchChangeEvent) {\n // Stop the start-stop-switch's composed event from leaking through\n // our shadow DOM — consumers should only see command-menu's own event.\n event.stopPropagation();\n const newValue = event.detail.checked;\n this.inCommand = newValue;\n this.dispatchEvent(\n new CustomEvent<{inCommand: boolean}>('change', {\n detail: {inCommand: newValue},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-command-menu': ObcCommandMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiGO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOsB,SAAA,YAAY;AAMM,SAAA,eAAwB;AAAA,EAAA;AAAA,EAE5D,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,cAAc,KAAK;AAAA,MACnB,cAAc,CAAC,KAAK;AAAA,MACpB,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBQ,KAAK,eACH;AAAA;AAAA;AAAA,gCAIA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMH,KAAK,QAAQ;AAAA,yBACZ,KAAK,SAAS;AAAA;AAAA,sBAEjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwB3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,SAAS,OAAsC;AAGrD,UAAM,gBAAA;AACN,UAAM,WAAW,MAAM,OAAO;AAC9B,SAAK,YAAY;AACjB,SAAK;AAAA,MACH,IAAI,YAAkC,UAAU;AAAA,QAC9C,QAAQ,EAAC,WAAW,SAAA;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAGF;AApGa,eAmGK,SAAS,UAAU,YAAY;AA5FpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,eAOgB,WAAA,aAAA,CAAA;AAMkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAbhC,eAakC,WAAA,gBAAA,CAAA;AAblC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

package/dist/components/dropdown-button/dropdown-button.d.ts CHANGED Viewed

@@ -127,8 +127,8 @@ export declare class ObcDropdownButton extends LitElement {
     /**
      * Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.
      *
-     * @fires {ObcDropdownButtonChangeEvent} dropdown-change - Fired when the user selects a different option.
-     * @fires {ObcDropdownButtonChangeEvent} change - Fired when the user selects a different option.
+     * @fires dropdown-change
+     * @fires change
      */
     private changeHandler;
     static styles: import('lit').CSSResult;

package/dist/components/dropdown-button/dropdown-button.js CHANGED Viewed

@@ -108,8 +108,8 @@ let ObcDropdownButton = class extends LitElement {
   /**
    * Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.
    *
-   * @fires {ObcDropdownButtonChangeEvent} dropdown-change - Fired when the user selects a different option.
-   * @fires {ObcDropdownButtonChangeEvent} change - Fired when the user selects a different option.
+   * @fires dropdown-change
+   * @fires change
    */
   changeHandler(event) {
     const target = event.target;

package/dist/components/dropdown-button/dropdown-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-button.js","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport '../button/button.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum DropdownButtonType {\n label = 'label',\n icon = 'icon',\n labelIcon = 'label-icon',\n}\n\nexport type ObcDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type DropdownButtonOption = {\n value: string;\n label: string;\n level?: number;\n};\n\n/*\n `<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n \n Presents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n \n ### Features\n * - Single selection: Allows users to pick one option from a provided list.\n * - Customizable options: Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n * - Visual label and icon: Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n * - Full width mode: Can expand to fill the width of its container using the `fullWidth` property.\n * - Accessible: Uses a native `<select>` element under the hood for keyboard and screen reader support.\n * - Focus styling: Highlights the visible wrapper when the select is focused.\n \n ### Variants\n * - Default: Renders at intrinsic width, sized to content.\n * - Full Width: When `fullWidth` is true, stretches to fill the parent container.\n \n ### Usage Guidelines\n * Use `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n \n TODO(designer): Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n \n ### Properties\n * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n * - `value` (string): The currently selected option's value. If not set, defaults to the first option.\n * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.\n * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n \n ### Events\n * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n * - `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n \n ### Best Practices\n * - Always provide a non-empty `options` array; if empty, the select will show no label or options.\n * - Use unique `value` strings for each option to ensure correct selection and event detail.\n * - For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n * - Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n \n ### Example:\n * ```html\n * <obc-dropdown-button\n * .options=${[\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 },\n * { value: 'mercedes', label: 'Mercedes' },\n * { value: 'audi', label: 'Audi' }\n * ]}\n * value=\"volvo\"\n * ></obc-dropdown-button>\n * ```\n \n @slot - (No named slots; all content is provided via properties)\n * @slot icon - Icon displayed at the start of the button when `type` is `icon` or `label-icon`.\n * @fires {ObcDropdownButtonChangeEvent} dropdown-change - Fires when the value of the select changes\n * @fires {ObcDropdownButtonChangeEvent} change - Fires when the value of the select changes\n * @stable\n /\n@customElement('obc-dropdown-button')\nexport class ObcDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), and optional `level` (number) for indentation/grouping.\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 }\n * ]\n /\n @property({type: Array}) options: DropdownButtonOption[] = [];\n\n /\n The value of the currently selected option. If not set, defaults to the first option in the list.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n If true, a `value` that does not match any option leaves the button with no option selected,\n * showing `placeholder` instead of defaulting to the first option. Default is false.\n /\n @property({type: Boolean}) allowEmptySelection = false;\n\n /\n Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n /\n @property({type: String}) placeholder = '';\n\n /\n Controls the button's display type.\n * - `label`: Text label only (default)\n * - `icon`: Icon only, no label\n * - `label-icon`: Icon before the label\n /\n @property({type: String}) type: DropdownButtonType = DropdownButtonType.label;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n If true, the select is integration style. Default is false, only for integration bar.\n /\n @property({type: Boolean}) integration = false;\n\n @property({type: Boolean}) flat = false;\n\n @state() private selectedValue = '';\n @state() private selectedLabel = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateSelectedValues();\n }\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('value') \|\| changedProperties.has('options')) {\n this.updateSelectedValues();\n }\n }\n\n private updateSelectedValues(): void {\n if (this.options.length === 0) {\n this.selectedValue = '';\n this.selectedLabel = '';\n return;\n }\n const match = this.value\n ? this.options.find((item) => item.value === this.value)\n : undefined;\n if (match) {\n this.selectedValue = match.value;\n this.selectedLabel = match.label;\n return;\n }\n if (this.allowEmptySelection) {\n this.selectedValue = '';\n this.selectedLabel = this.placeholder;\n return;\n }\n this.selectedValue = this.options[0].value;\n this.selectedLabel = this.options[0].label;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n integration: this.integration,\n flat: this.flat && !this.integration,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.type !== DropdownButtonType.label\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n ${this.type !== DropdownButtonType.icon\n ? html`<div class=\"label\">${this.selectedLabel}</div>`\n : nothing}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.allowEmptySelection && this.selectedValue === ''\n ? html`<option value=\"\" disabled selected hidden>\n ${this.placeholder}\n </option>`\n : nothing}\n ${this.options.map((item) => {\n const indent = item.level ? (item.level - 1) 2 : 0;\n const indentText = [];\n for (let i = 0; i < indent; i++) {\n indentText.push(html` `);\n }\n\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.selectedValue}\n >\n ${indentText}${item.label}\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /*\n Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n \n @fires {ObcDropdownButtonChangeEvent} dropdown-change - Fired when the user selects a different option.\n * @fires {ObcDropdownButtonChangeEvent} change - Fired when the user selects a different option.\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.selectedValue = target.value;\n this.selectedLabel = this.options\n .find((item) => item.value === this.selectedValue)!\n .label.trim();\n this.dispatchEvent(\n new CustomEvent('dropdown-change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-dropdown-button': ObcDropdownButton;\n }\n}\n"],"names":["DropdownButtonType"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-button.js","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport '../button/button.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum DropdownButtonType {\n label = 'label',\n icon = 'icon',\n labelIcon = 'label-icon',\n}\n\nexport type ObcDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type DropdownButtonOption = {\n value: string;\n label: string;\n level?: number;\n};\n\n/*\n `<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n \n Presents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n \n ### Features\n * - Single selection: Allows users to pick one option from a provided list.\n * - Customizable options: Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n * - Visual label and icon: Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n * - Full width mode: Can expand to fill the width of its container using the `fullWidth` property.\n * - Accessible: Uses a native `<select>` element under the hood for keyboard and screen reader support.\n * - Focus styling: Highlights the visible wrapper when the select is focused.\n \n ### Variants\n * - Default: Renders at intrinsic width, sized to content.\n * - Full Width: When `fullWidth` is true, stretches to fill the parent container.\n \n ### Usage Guidelines\n * Use `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n \n TODO(designer): Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n \n ### Properties\n * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n * - `value` (string): The currently selected option's value. If not set, defaults to the first option.\n * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.\n * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n \n ### Events\n * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n * - `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n \n ### Best Practices\n * - Always provide a non-empty `options` array; if empty, the select will show no label or options.\n * - Use unique `value` strings for each option to ensure correct selection and event detail.\n * - For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n * - Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n \n ### Example:\n * ```html\n * <obc-dropdown-button\n * .options=${[\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 },\n * { value: 'mercedes', label: 'Mercedes' },\n * { value: 'audi', label: 'Audi' }\n * ]}\n * value=\"volvo\"\n * ></obc-dropdown-button>\n * ```\n \n @slot - (No named slots; all content is provided via properties)\n * @slot icon - Icon displayed at the start of the button when `type` is `icon` or `label-icon`.\n * @fires {ObcDropdownButtonChangeEvent} dropdown-change - Fires when the value of the select changes\n * @fires {ObcDropdownButtonChangeEvent} change - Fires when the value of the select changes\n * @stable\n /\n@customElement('obc-dropdown-button')\nexport class ObcDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), and optional `level` (number) for indentation/grouping.\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo' },\n * { value: 'xc90', label: 'XC 90', level: 2 }\n * ]\n /\n @property({type: Array}) options: DropdownButtonOption[] = [];\n\n /\n The value of the currently selected option. If not set, defaults to the first option in the list.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n If true, a `value` that does not match any option leaves the button with no option selected,\n * showing `placeholder` instead of defaulting to the first option. Default is false.\n /\n @property({type: Boolean}) allowEmptySelection = false;\n\n /\n Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n /\n @property({type: String}) placeholder = '';\n\n /\n Controls the button's display type.\n * - `label`: Text label only (default)\n * - `icon`: Icon only, no label\n * - `label-icon`: Icon before the label\n /\n @property({type: String}) type: DropdownButtonType = DropdownButtonType.label;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n If true, the select is integration style. Default is false, only for integration bar.\n /\n @property({type: Boolean}) integration = false;\n\n @property({type: Boolean}) flat = false;\n\n @state() private selectedValue = '';\n @state() private selectedLabel = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.updateSelectedValues();\n }\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('value') \|\| changedProperties.has('options')) {\n this.updateSelectedValues();\n }\n }\n\n private updateSelectedValues(): void {\n if (this.options.length === 0) {\n this.selectedValue = '';\n this.selectedLabel = '';\n return;\n }\n const match = this.value\n ? this.options.find((item) => item.value === this.value)\n : undefined;\n if (match) {\n this.selectedValue = match.value;\n this.selectedLabel = match.label;\n return;\n }\n if (this.allowEmptySelection) {\n this.selectedValue = '';\n this.selectedLabel = this.placeholder;\n return;\n }\n this.selectedValue = this.options[0].value;\n this.selectedLabel = this.options[0].label;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n integration: this.integration,\n flat: this.flat && !this.integration,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.type !== DropdownButtonType.label\n ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n : nothing}\n ${this.type !== DropdownButtonType.icon\n ? html`<div class=\"label\">${this.selectedLabel}</div>`\n : nothing}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.allowEmptySelection && this.selectedValue === ''\n ? html`<option value=\"\" disabled selected hidden>\n ${this.placeholder}\n </option>`\n : nothing}\n ${this.options.map((item) => {\n const indent = item.level ? (item.level - 1) 2 : 0;\n const indentText = [];\n for (let i = 0; i < indent; i++) {\n indentText.push(html` `);\n }\n\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.selectedValue}\n >\n ${indentText}${item.label}\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /*\n Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n \n @fires dropdown-change\n * @fires change\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.selectedValue = target.value;\n this.selectedLabel = this.options\n .find((item) => item.value === this.selectedValue)!\n .label.trim();\n this.dispatchEvent(\n new CustomEvent('dropdown-change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {value: this.selectedValue, label: this.selectedLabel},\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-dropdown-button': ObcDropdownButton;\n }\n}\n"],"names":["DropdownButtonType"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../src/components/menu-button/menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,6CAA6C,CAAC;AACrD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,WAAW,EACZ,MAAM,6CAA6C,CAAC;AAGrD,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;OAGG;IACuB,KAAK,SAAM;IAErC;;;;;;;;OAQG;IACsB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAE3D;;;OAGG;IACsB,cAAc,EAAE,MAAM,EAAE,CAAM;IAEvD;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;;;;;;;OAUG;IAEH,QAAQ,EAAE,eAAe,CAA2B;IAEpD;;;;OAIG;IACwB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEjD;;;OAGG;IACwB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEpD;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACuB,SAAS,SAAM;IAEzC;;;OAGG;IACsB,YAAY,EAAE,WAAW,EAAE,CAAM;IAE1D;;;OAGG;IACuB,cAAc,SAAK;IAE7C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACwB,QAAQ,UAAS;IAEnC,OAAO,CAAC,MAAM,CAAS;IAEhC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAA6C;IAE3C,OAAO,CAAC,IAAI,CAAC,CAAoC;IAEnD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAEnE,OAAO,KAAK,oBAAoB,GAU/B;IAED,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB,~~CAqBzB~~;YAEY,kBAAkB;IAYhC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,gBAAgB;~~IAkBxB~~,OAAO,CAAC,eAAe;~~IAuBvB~~,OAAO,CAAC,eAAe;IAMvB,OAAO,KAAK,aAAa,GAQxB;IAGD,OAAO,KAAK,uBAAuB,GAElC;IAEQ,MAAM;IA2Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1	+ {"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../src/components/menu-button/menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,6CAA6C,CAAC;AACrD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,WAAW,EACZ,MAAM,6CAA6C,CAAC;AAGrD,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;CAC3B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;OAGG;IACuB,KAAK,SAAM;IAErC;;;;;;;;OAQG;IACsB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAE3D;;;OAGG;IACsB,cAAc,EAAE,MAAM,EAAE,CAAM;IAEvD;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;;;;;;;OAUG;IAEH,QAAQ,EAAE,eAAe,CAA2B;IAEpD;;;;OAIG;IACwB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEjD;;;OAGG;IACwB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEpD;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACuB,SAAS,SAAM;IAEzC;;;OAGG;IACsB,YAAY,EAAE,WAAW,EAAE,CAAM;IAE1D;;;OAGG;IACuB,cAAc,SAAK;IAE7C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACwB,QAAQ,UAAS;IAEnC,OAAO,CAAC,MAAM,CAAS;IAEhC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAA6C;IAE3C,OAAO,CAAC,IAAI,CAAC,CAAoC;IAEnD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAEnE,OAAO,KAAK,oBAAoB,GAU/B;IAED,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB,CAuBzB;YAEY,kBAAkB;IAYhC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,eAAe;IAMvB,OAAO,KAAK,aAAa,GAQxB;IAGD,OAAO,KAAK,uBAAuB,GAElC;IAEQ,MAAM;IA2Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/menu-button/menu-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-button.js","sources":["../../../src/components/menu-button/menu-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport compentStyle from './menu-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../context-menu-input/context-menu-input.js';\nimport {\n ContextMenuType,\n ContextMenuOption,\n ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n selectedValues: string[];\n selectedOptions: Array<ContextMenuOption>;\n}>;\n\nexport type ObcMenuButtonItemClickEvent = CustomEvent<{\n value: string;\n option: ContextMenuOption;\n}>;\n\n/*\n `<obc-menu-button>` – A dropdown menu button for selecting one or more options from a contextual menu.\n \n Provides a button that opens a configurable context menu, supporting single or multi-select, nested/flyout submenus, and multi-column layouts. The button can display a label, an optional icon, and adapts to various menu types (regular, checkboxes, flyout, multi-column, etc.).\n \n Appears as a compact button that, when clicked, reveals a menu for actions, filtering, or grouped selections. Useful for toolbars, filter bars, or anywhere contextual actions or selections are needed without taking up persistent space.\n \n ## Features\n * - Menu Types: Supports multiple menu variants via `menuType`:\n * - `Regular`: Standard single-select menu (action menu).\n * - `Checkboxes`: Multi-select with checkboxes.\n * - `NestedCheckboxes`: Hierarchical multi-select with nested checkboxes.\n * - `Flyout`: Multi-level flyout menu (supports nested groups).\n * - `Multi`: Multi-column menu (for large option sets).\n * - `MultiWithSubtitles`: Multi-column menu with group subtitles.\n * - Selection Modes:\n * - Single-select or multi-select (controlled by `multiSelect` and `menuType`).\n * - Per-group selection (only one item per group/column, via `selectPerGroup`).\n * - Optionally persist selection state (`persistSelection`).\n * - Layout Options:\n * - Full width (`fullWidth`) or fit-content.\n * - Menu can open above or below the button (`openTop`).\n * - Multi-column and grouped layouts (`columnGroups`, `itemsPerColumn`).\n * - Optional title bar with close button (`hasTitleBar`, `menuTitle`).\n * - Content Customization:\n * - Optional icon slot in button (`hasIcon`).\n * - Option icons and hierarchical/nested option structures.\n * - Accessibility & Keyboard:\n * - Keyboard navigation and ARIA roles.\n * - Disabled state disables both button and menu.\n * - Events:\n * - Emits `change` when selection changes.\n * - Emits `item-click` when an item is clicked.\n * - Emits `close` when the menu closes.\n \n ## Usage Guidelines\n * Use `obc-menu-button` to present a compact button that reveals a contextual menu for actions, filtering, or grouped selections. Ideal for toolbars, filter bars, or overflow menus where space is limited but multiple or hierarchical options are needed. Choose the menu type and selection mode based on your use case:\n * - Use `menuType=\"Regular\"` for simple single-action menus.\n * - Use `multiSelect` or `menuType=\"Checkboxes\"` for multi-select scenarios (e.g., filtering).\n * - Use `menuType=\"Flyout\"` for hierarchical or grouped actions.\n * - Use `menuType=\"Multi\"` or `menuType=\"MultiWithSubtitles\"` for large sets of options, grouped or split across columns.\n * - Use the icon slot for visual context (e.g., filter, settings, actions).\n * - Avoid using for persistent navigation—this is for contextual, transient actions or selections.\n \n TODO(designer): Confirm recommended use cases for each menu type and when to use per-group selection.\n \n ## Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|---------------------\|-----------------------------------------\|\n * \| `icon` \| `hasIcon` is true \| Icon displayed at the start of the button. \|\n \n ## Properties & Attributes\n * - `label`: Text label shown on the button.\n * - `options`: Array of menu options (each with value, label, optional icon, children, etc.).\n * - `selectedValues`: Array of currently selected option values.\n * - `fullWidth`: If true, button stretches to fill its container.\n * - `hasIcon`: If true, shows the `icon` slot.\n * - `menuType`: Controls menu variant (see Features above). Defaults to `Regular`.\n * - `multiSelect`: If true, enables multi-select (overrides default for menuType).\n * - `selectPerGroup`: If true, only one selection per group/column (flyout/multi-column).\n * - `hasTitleBar`: If true, shows a title bar with close button in the menu.\n * - `menuTitle`: Title text for the menu (if `hasTitleBar` is true).\n * - `columnGroups`: Used for `multi-with-subtitles` layout; defines grouped columns.\n * - `itemsPerColumn`: Number of items per column in multi-column layouts.\n * - `openTop`: If true, menu opens above the button.\n * - `disabled`: Disables both the button and the menu.\n \n ## Events\n * - `change` – Fired when the menu selection changes (returns selected values and options).\n * - `item-click` – Fired when a menu item is clicked (returns value and option).\n * - `open` – Fired when the menu is opened.\n * - `close` – Fired when the menu is closed.\n \n ## Best Practices & Constraints\n * - Only use multi-select for scenarios where users may need to select multiple items (e.g., filters, bulk actions).\n * - For action menus (single-select, no persistence), set `persistSelection` to false.\n * - Use per-group selection (`selectPerGroup`) for grouped flyout or multi-column menus where only one selection per group is allowed.\n * - Avoid nesting too deeply in flyout menus for usability.\n * - If using icons in options, supply them via the `icon` property of each option (e.g., `<obi-placeholder></obi-placeholder>`).\n * - The button is fully keyboard accessible and supports ARIA roles for menu and menuitem.\n * - Menu closes automatically on selection (unless in multi-select mode).\n \n ## Example\n * ```html\n * <obc-menu-button\n * label=\"Actions\"\n * .options=${[\n * { value: 'edit', label: 'Edit', icon: html`<obi-placeholder></obi-placeholder>` },\n * { value: 'delete', label: 'Delete' }\n * ]}\n * .selectedValues=${['edit']}\n * hasIcon\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-menu-button>\n * ```\n * In this example, the button displays an icon and label, and opens a menu with two options (one with an icon).\n \n @slot icon - Icon displayed at the start of the button when `hasIcon` is true.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the menu selection changes.\n * @fires {ObcMenuButtonItemClickEvent} item-click - Fired when a menu item is clicked.\n * @fires {CustomEvent<void>} open - Fired when the menu is opened.\n * @fires {CustomEvent<void>} close - Fired when the menu is closed.\n * @beta\n /\n@customElement('obc-menu-button')\nexport class ObcMenuButton extends LitElement {\n /\n The label displayed on the button.\n * If empty, the button can be rendered as icon-only.\n /\n @property({type: String}) label = '';\n\n /\n Array of menu options with value, label, and optional level, icon, and children.\n * Each option can include:\n * - `value`: Unique string identifier.\n * - `label`: Display text.\n * - `icon`: Optional icon (e.g., `<obi-placeholder></obi-placeholder>`).\n * - `children`: Optional array of child options (for nested/flyout menus).\n * - `level`: Optional nesting level (for hierarchical menus).\n /\n @property({type: Array}) options: ContextMenuOption[] = [];\n\n /\n Array of currently selected option values.\n * Used to control which options are checked/selected in the menu.\n /\n @property({type: Array}) selectedValues: string[] = [];\n\n /\n Whether the button should fill the full width of its container.\n * If true, the button stretches to 100% width.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n Whether the button should show an icon slot.\n * If true, the `icon` slot is rendered at the start of the button.\n /\n @property({type: Boolean}) hasIcon = false;\n\n /\n The variant type of context menu to display.\n * Determines menu layout and selection behavior.\n * - `Regular`: Standard single-select.\n * - `Checkboxes`: Multi-select with checkboxes.\n * - `NestedCheckboxes`: Hierarchical multi-select.\n * - `Flyout`: Multi-level flyout menu.\n * - `Multi`: Multi-column menu.\n * - `MultiWithSubtitles`: Multi-column with group subtitles.\n * @default ContextMenuType.Regular\n /\n @property({type: String})\n menuType: ContextMenuType = ContextMenuType.Regular;\n\n /\n Whether multiple selections are allowed.\n * Overrides the default selection mode for the chosen variant.\n * If not explicitly set, defaults based on `menuType`.\n /\n @property({type: Boolean}) multiSelect?: boolean;\n\n /\n Allows single selection per group (flyout/multi-column only).\n * When true, only one item per group/column can be selected.\n /\n @property({type: Boolean}) selectPerGroup?: boolean;\n\n /\n Whether to show a title bar with close button at the top of the menu.\n * If true, the menu displays a title bar (use `menuTitle` for text).\n /\n @property({type: Boolean}) hasTitleBar = false;\n\n /\n Title text displayed in the title bar (if `hasTitleBar` is true).\n /\n @property({type: String}) menuTitle = '';\n\n /\n Array of column groups for the `multi-with-subtitles` layout.\n * Used to define grouped columns with subtitles in multi-column menus.\n /\n @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n /\n Number of items per column in multi-column layouts.\n * Used for `Multi` and `MultiWithSubtitles` menu types.\n /\n @property({type: Number}) itemsPerColumn = 5;\n\n /\n Render the dropdown context menu above or below the button.\n * If true, the menu opens above the button; otherwise, it opens below.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n Whether both parts of the button are disabled.\n * Disables both the button and the menu.\n /\n @property({type: Boolean}) disabled = false;\n\n @state() private isOpen = false;\n\n private restoreFocusOnClose = false;\n\n private menuFocusStrategy: 'first' \| 'selected' \| 'last' = 'selected';\n\n @query('.positioned-menu') private menu?: HTMLElement & ObcContextMenuInput;\n\n @query('button.wrapper') private triggerButton?: HTMLButtonElement;\n\n private get effectiveMultiSelect(): boolean {\n if (this.multiSelect !== undefined) return this.multiSelect;\n\n // Auto-determine based on menuType only for types that are inherently multi-select\n return [\n ContextMenuType.Checkboxes,\n ContextMenuType.NestedCheckboxes,\n ContextMenuType.Multi,\n ContextMenuType.MultiWithSubtitles,\n ].includes(this.menuType);\n }\n\n private get effectiveMenuType(): ContextMenuType {\n // Only rewrite regular->checkboxes for multi, never flyout\n if (\n this.effectiveMultiSelect &&\n this.menuType === ContextMenuType.Regular\n ) {\n return ContextMenuType.Checkboxes;\n }\n // DO NOT map Flyout to NestedCheckboxes!\n return this.menuType;\n }\n\n private handlePopoverToggle = (e: ToggleEvent) => {\n this.isOpen = e.newState === 'open';\n if (e.newState === 'open') {\n void this.focusMenuAfterOpen();\n /\n @event open - Fired when the menu is opened.\n * @type {CustomEvent<void>}\n /\n this.dispatchEvent(new CustomEvent('open'));\n }\n if (e.newState === 'closed') {\n if (this.restoreFocusOnClose) {\n this.restoreFocusOnClose = false;\n this.triggerButton?.focus();\n }\n /\n @event close - Fired when the menu is closed.\n * @type {CustomEvent<void>}\n /\n this.dispatchEvent(new CustomEvent('close'));\n }\n };\n\n private async focusMenuAfterOpen() {\n await this.updateComplete;\n if (this.menuFocusStrategy === 'last') {\n this.menu?.focusLastItem();\n } else if (this.menuFocusStrategy === 'first') {\n this.menu?.focusFirstItem();\n } else {\n this.menu?.focusSelectedItem();\n }\n this.menuFocusStrategy = 'selected';\n }\n\n private openMenu(focusStrategy: 'first' \| 'selected' \| 'last' = 'selected') {\n if (this.disabled) return;\n\n this.menuFocusStrategy = focusStrategy;\n this.menu?.showPopover();\n }\n\n private handleTriggerKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.openMenu('first');\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.openMenu('last');\n break;\n case 'Home':\n event.preventDefault();\n this.openMenu('first');\n break;\n case 'End':\n event.preventDefault();\n this.openMenu('last');\n break;\n default:\n break;\n }\n }\n\n private handleMenuChange(\n e: CustomEvent<{\n selectedValues: string[];\n selectedOptions: ContextMenuOption[];\n }>\n ) {\n this.selectedValues = e.detail.selectedValues;\n\n /\n @event change - Fired when the menu selection changes.\n * @type {CustomEvent<{selectedValues: string[], selectedOptions: Array<ContextMenuOption>}>}\n /\n this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n if (!this.effectiveMultiSelect) {\n this.handleMenuClose();\n }\n }\n\n private handleItemClick(\n e: CustomEvent<{value: string; option: ContextMenuOption}>\n ) {\n /\n @event item-click - Fired when a menu item is clicked.\n * @type {CustomEvent<{value: string, option: ContextMenuOption}>}\n */\n this.dispatchEvent(new CustomEvent('item-click', {detail: e.detail}));\n const option = e.detail.option;\n if (option.children?.length) {\n return;\n }\n\n const isFlyoutMenu =\n this.menuType === ContextMenuType.Flyout \|\|\n this.menuType === ContextMenuType.NestedCheckboxes;\n\n if (isFlyoutMenu && !this.effectiveMultiSelect) {\n this.handleMenuClose();\n return;\n }\n }\n\n private handleMenuClose() {\n if (this.menu === undefined) return;\n this.restoreFocusOnClose = true;\n this.menu.hidePopover();\n }\n\n private get isMultiSelect(): boolean {\n if (this.multiSelect !== undefined) return this.multiSelect;\n return [\n ContextMenuType.Checkboxes,\n ContextMenuType.NestedCheckboxes,\n ContextMenuType.Multi,\n ContextMenuType.MultiWithSubtitles,\n ].includes(this.menuType);\n }\n\n // Only meaningful if not multi-select AND persistSelection is true\n private get effectiveSelectPerGroup(): boolean {\n return !this.isMultiSelect && !!this.selectPerGroup;\n }\n\n override render() {\n return html`\n <button\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'is-open': this.isOpen,\n 'open-top': this.openTop,\n disabled: this.disabled,\n })}\n ?disabled=${this.disabled}\n popovertarget=\"menu-popover\"\n aria-expanded=${this.isOpen}\n aria-haspopup=\"menu\"\n @keydown=${this.handleTriggerKeydown}\n >\n <div class=\"visible-wrapper\">\n <div class=\"content-container\">\n ${\n this.hasIcon\n ? html`\n <div class=\"icon-container\"><slot name=\"icon\"></slot></div>\n `\n : nothing\n }\n ${\n this.label\n ? html` <div class=\"label-container\">${this.label}</div> `\n : nothing\n }\n </div>\n <div class=\"arrow-flyout-container\">\n <obi-arrow-flyout-google></obi-arrow-flyout-google>\n </div>\n </div>\n\n \n </button>\n <obc-context-menu-input\n popover=\"auto\"\n id=\"menu-popover\"\n class=\"positioned-menu\"\n .type=${this.effectiveMenuType}\n .options=${this.options}\n .selectedValues=${this.selectedValues}\n .multiSelect=${this.isMultiSelect}\n .selectPerGroup=${this.effectiveSelectPerGroup}\n .hasTitleBar=${this.hasTitleBar}\n .title=${this.menuTitle}\n .columnGroups=${this.columnGroups}\n .itemsPerColumn=${this.itemsPerColumn}\n @change=${this.handleMenuChange}\n @item-click=${this.handleItemClick}\n @close=${this.handleMenuClose}\n @toggle=${this.handlePopoverToggle}\n /></obc-context-menu-input>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-menu-button': ObcMenuButton;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"menu-button.js","sources":["../../../src/components/menu-button/menu-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport compentStyle from './menu-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../context-menu-input/context-menu-input.js';\nimport {\n ContextMenuType,\n ContextMenuOption,\n ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n selectedValues: string[];\n selectedOptions: Array<ContextMenuOption>;\n}>;\n\nexport type ObcMenuButtonItemClickEvent = CustomEvent<{\n value: string;\n option: ContextMenuOption;\n}>;\n\n/*\n `<obc-menu-button>` – A dropdown menu button for selecting one or more options from a contextual menu.\n \n Provides a button that opens a configurable context menu, supporting single or multi-select, nested/flyout submenus, and multi-column layouts. The button can display a label, an optional icon, and adapts to various menu types (regular, checkboxes, flyout, multi-column, etc.).\n \n Appears as a compact button that, when clicked, reveals a menu for actions, filtering, or grouped selections. Useful for toolbars, filter bars, or anywhere contextual actions or selections are needed without taking up persistent space.\n \n ## Features\n * - Menu Types: Supports multiple menu variants via `menuType`:\n * - `Regular`: Standard single-select menu (action menu).\n * - `Checkboxes`: Multi-select with checkboxes.\n * - `NestedCheckboxes`: Hierarchical multi-select with nested checkboxes.\n * - `Flyout`: Multi-level flyout menu (supports nested groups).\n * - `Multi`: Multi-column menu (for large option sets).\n * - `MultiWithSubtitles`: Multi-column menu with group subtitles.\n * - Selection Modes:\n * - Single-select or multi-select (controlled by `multiSelect` and `menuType`).\n * - Per-group selection (only one item per group/column, via `selectPerGroup`).\n * - Optionally persist selection state (`persistSelection`).\n * - Layout Options:\n * - Full width (`fullWidth`) or fit-content.\n * - Menu can open above or below the button (`openTop`).\n * - Multi-column and grouped layouts (`columnGroups`, `itemsPerColumn`).\n * - Optional title bar with close button (`hasTitleBar`, `menuTitle`).\n * - Content Customization:\n * - Optional icon slot in button (`hasIcon`).\n * - Option icons and hierarchical/nested option structures.\n * - Accessibility & Keyboard:\n * - Keyboard navigation and ARIA roles.\n * - Disabled state disables both button and menu.\n * - Events:\n * - Emits `change` when selection changes.\n * - Emits `item-click` when an item is clicked.\n * - Emits `close` when the menu closes.\n \n ## Usage Guidelines\n * Use `obc-menu-button` to present a compact button that reveals a contextual menu for actions, filtering, or grouped selections. Ideal for toolbars, filter bars, or overflow menus where space is limited but multiple or hierarchical options are needed. Choose the menu type and selection mode based on your use case:\n * - Use `menuType=\"Regular\"` for simple single-action menus.\n * - Use `multiSelect` or `menuType=\"Checkboxes\"` for multi-select scenarios (e.g., filtering).\n * - Use `menuType=\"Flyout\"` for hierarchical or grouped actions.\n * - Use `menuType=\"Multi\"` or `menuType=\"MultiWithSubtitles\"` for large sets of options, grouped or split across columns.\n * - Use the icon slot for visual context (e.g., filter, settings, actions).\n * - Avoid using for persistent navigation—this is for contextual, transient actions or selections.\n \n TODO(designer): Confirm recommended use cases for each menu type and when to use per-group selection.\n \n ## Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|---------------------\|-----------------------------------------\|\n * \| `icon` \| `hasIcon` is true \| Icon displayed at the start of the button. \|\n \n ## Properties & Attributes\n * - `label`: Text label shown on the button.\n * - `options`: Array of menu options (each with value, label, optional icon, children, etc.).\n * - `selectedValues`: Array of currently selected option values.\n * - `fullWidth`: If true, button stretches to fill its container.\n * - `hasIcon`: If true, shows the `icon` slot.\n * - `menuType`: Controls menu variant (see Features above). Defaults to `Regular`.\n * - `multiSelect`: If true, enables multi-select (overrides default for menuType).\n * - `selectPerGroup`: If true, only one selection per group/column (flyout/multi-column).\n * - `hasTitleBar`: If true, shows a title bar with close button in the menu.\n * - `menuTitle`: Title text for the menu (if `hasTitleBar` is true).\n * - `columnGroups`: Used for `multi-with-subtitles` layout; defines grouped columns.\n * - `itemsPerColumn`: Number of items per column in multi-column layouts.\n * - `openTop`: If true, menu opens above the button.\n * - `disabled`: Disables both the button and the menu.\n \n ## Events\n * - `change` – Fired when the menu selection changes (returns selected values and options).\n * - `item-click` – Fired when a menu item is clicked (returns value and option).\n * - `open` – Fired when the menu is opened.\n * - `close` – Fired when the menu is closed.\n \n ## Best Practices & Constraints\n * - Only use multi-select for scenarios where users may need to select multiple items (e.g., filters, bulk actions).\n * - For action menus (single-select, no persistence), set `persistSelection` to false.\n * - Use per-group selection (`selectPerGroup`) for grouped flyout or multi-column menus where only one selection per group is allowed.\n * - Avoid nesting too deeply in flyout menus for usability.\n * - If using icons in options, supply them via the `icon` property of each option (e.g., `<obi-placeholder></obi-placeholder>`).\n * - The button is fully keyboard accessible and supports ARIA roles for menu and menuitem.\n * - Menu closes automatically on selection (unless in multi-select mode).\n \n ## Example\n * ```html\n * <obc-menu-button\n * label=\"Actions\"\n * .options=${[\n * { value: 'edit', label: 'Edit', icon: html`<obi-placeholder></obi-placeholder>` },\n * { value: 'delete', label: 'Delete' }\n * ]}\n * .selectedValues=${['edit']}\n * hasIcon\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-menu-button>\n * ```\n * In this example, the button displays an icon and label, and opens a menu with two options (one with an icon).\n \n @slot icon - Icon displayed at the start of the button when `hasIcon` is true.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the menu selection changes.\n * @fires {ObcMenuButtonItemClickEvent} item-click - Fired when a menu item is clicked.\n * @fires {CustomEvent<void>} open - Fired when the menu is opened.\n * @fires {CustomEvent<void>} close - Fired when the menu is closed.\n * @beta\n /\n@customElement('obc-menu-button')\nexport class ObcMenuButton extends LitElement {\n /\n The label displayed on the button.\n * If empty, the button can be rendered as icon-only.\n /\n @property({type: String}) label = '';\n\n /\n Array of menu options with value, label, and optional level, icon, and children.\n * Each option can include:\n * - `value`: Unique string identifier.\n * - `label`: Display text.\n * - `icon`: Optional icon (e.g., `<obi-placeholder></obi-placeholder>`).\n * - `children`: Optional array of child options (for nested/flyout menus).\n * - `level`: Optional nesting level (for hierarchical menus).\n /\n @property({type: Array}) options: ContextMenuOption[] = [];\n\n /\n Array of currently selected option values.\n * Used to control which options are checked/selected in the menu.\n /\n @property({type: Array}) selectedValues: string[] = [];\n\n /\n Whether the button should fill the full width of its container.\n * If true, the button stretches to 100% width.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n Whether the button should show an icon slot.\n * If true, the `icon` slot is rendered at the start of the button.\n /\n @property({type: Boolean}) hasIcon = false;\n\n /\n The variant type of context menu to display.\n * Determines menu layout and selection behavior.\n * - `Regular`: Standard single-select.\n * - `Checkboxes`: Multi-select with checkboxes.\n * - `NestedCheckboxes`: Hierarchical multi-select.\n * - `Flyout`: Multi-level flyout menu.\n * - `Multi`: Multi-column menu.\n * - `MultiWithSubtitles`: Multi-column with group subtitles.\n * @default ContextMenuType.Regular\n /\n @property({type: String})\n menuType: ContextMenuType = ContextMenuType.Regular;\n\n /\n Whether multiple selections are allowed.\n * Overrides the default selection mode for the chosen variant.\n * If not explicitly set, defaults based on `menuType`.\n /\n @property({type: Boolean}) multiSelect?: boolean;\n\n /\n Allows single selection per group (flyout/multi-column only).\n * When true, only one item per group/column can be selected.\n /\n @property({type: Boolean}) selectPerGroup?: boolean;\n\n /\n Whether to show a title bar with close button at the top of the menu.\n * If true, the menu displays a title bar (use `menuTitle` for text).\n /\n @property({type: Boolean}) hasTitleBar = false;\n\n /\n Title text displayed in the title bar (if `hasTitleBar` is true).\n /\n @property({type: String}) menuTitle = '';\n\n /\n Array of column groups for the `multi-with-subtitles` layout.\n * Used to define grouped columns with subtitles in multi-column menus.\n /\n @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n /\n Number of items per column in multi-column layouts.\n * Used for `Multi` and `MultiWithSubtitles` menu types.\n /\n @property({type: Number}) itemsPerColumn = 5;\n\n /\n Render the dropdown context menu above or below the button.\n * If true, the menu opens above the button; otherwise, it opens below.\n /\n @property({type: Boolean}) openTop = false;\n\n /\n Whether both parts of the button are disabled.\n * Disables both the button and the menu.\n /\n @property({type: Boolean}) disabled = false;\n\n @state() private isOpen = false;\n\n private restoreFocusOnClose = false;\n\n private menuFocusStrategy: 'first' \| 'selected' \| 'last' = 'selected';\n\n @query('.positioned-menu') private menu?: HTMLElement & ObcContextMenuInput;\n\n @query('button.wrapper') private triggerButton?: HTMLButtonElement;\n\n private get effectiveMultiSelect(): boolean {\n if (this.multiSelect !== undefined) return this.multiSelect;\n\n // Auto-determine based on menuType only for types that are inherently multi-select\n return [\n ContextMenuType.Checkboxes,\n ContextMenuType.NestedCheckboxes,\n ContextMenuType.Multi,\n ContextMenuType.MultiWithSubtitles,\n ].includes(this.menuType);\n }\n\n private get effectiveMenuType(): ContextMenuType {\n // Only rewrite regular->checkboxes for multi, never flyout\n if (\n this.effectiveMultiSelect &&\n this.menuType === ContextMenuType.Regular\n ) {\n return ContextMenuType.Checkboxes;\n }\n // DO NOT map Flyout to NestedCheckboxes!\n return this.menuType;\n }\n\n private handlePopoverToggle = (e: ToggleEvent) => {\n this.isOpen = e.newState === 'open';\n if (e.newState === 'open') {\n void this.focusMenuAfterOpen();\n /\n Fired when the menu is opened.\n * @event open\n * @type {CustomEvent<void>}\n /\n this.dispatchEvent(new CustomEvent('open'));\n }\n if (e.newState === 'closed') {\n if (this.restoreFocusOnClose) {\n this.restoreFocusOnClose = false;\n this.triggerButton?.focus();\n }\n /\n Fired when the menu is closed.\n * @event close\n * @type {CustomEvent<void>}\n /\n this.dispatchEvent(new CustomEvent('close'));\n }\n };\n\n private async focusMenuAfterOpen() {\n await this.updateComplete;\n if (this.menuFocusStrategy === 'last') {\n this.menu?.focusLastItem();\n } else if (this.menuFocusStrategy === 'first') {\n this.menu?.focusFirstItem();\n } else {\n this.menu?.focusSelectedItem();\n }\n this.menuFocusStrategy = 'selected';\n }\n\n private openMenu(focusStrategy: 'first' \| 'selected' \| 'last' = 'selected') {\n if (this.disabled) return;\n\n this.menuFocusStrategy = focusStrategy;\n this.menu?.showPopover();\n }\n\n private handleTriggerKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.openMenu('first');\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.openMenu('last');\n break;\n case 'Home':\n event.preventDefault();\n this.openMenu('first');\n break;\n case 'End':\n event.preventDefault();\n this.openMenu('last');\n break;\n default:\n break;\n }\n }\n\n private handleMenuChange(\n e: CustomEvent<{\n selectedValues: string[];\n selectedOptions: ContextMenuOption[];\n }>\n ) {\n this.selectedValues = e.detail.selectedValues;\n\n /\n Fired when the menu selection changes.\n * @event change\n * @type {CustomEvent<{selectedValues: string[], selectedOptions: Array<ContextMenuOption>}>}\n /\n this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n if (!this.effectiveMultiSelect) {\n this.handleMenuClose();\n }\n }\n\n private handleItemClick(\n e: CustomEvent<{value: string; option: ContextMenuOption}>\n ) {\n /\n Fired when a menu item is clicked.\n * @event item-click\n * @type {CustomEvent<{value: string, option: ContextMenuOption}>}\n */\n this.dispatchEvent(new CustomEvent('item-click', {detail: e.detail}));\n const option = e.detail.option;\n if (option.children?.length) {\n return;\n }\n\n const isFlyoutMenu =\n this.menuType === ContextMenuType.Flyout \|\|\n this.menuType === ContextMenuType.NestedCheckboxes;\n\n if (isFlyoutMenu && !this.effectiveMultiSelect) {\n this.handleMenuClose();\n return;\n }\n }\n\n private handleMenuClose() {\n if (this.menu === undefined) return;\n this.restoreFocusOnClose = true;\n this.menu.hidePopover();\n }\n\n private get isMultiSelect(): boolean {\n if (this.multiSelect !== undefined) return this.multiSelect;\n return [\n ContextMenuType.Checkboxes,\n ContextMenuType.NestedCheckboxes,\n ContextMenuType.Multi,\n ContextMenuType.MultiWithSubtitles,\n ].includes(this.menuType);\n }\n\n // Only meaningful if not multi-select AND persistSelection is true\n private get effectiveSelectPerGroup(): boolean {\n return !this.isMultiSelect && !!this.selectPerGroup;\n }\n\n override render() {\n return html`\n <button\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'is-open': this.isOpen,\n 'open-top': this.openTop,\n disabled: this.disabled,\n })}\n ?disabled=${this.disabled}\n popovertarget=\"menu-popover\"\n aria-expanded=${this.isOpen}\n aria-haspopup=\"menu\"\n @keydown=${this.handleTriggerKeydown}\n >\n <div class=\"visible-wrapper\">\n <div class=\"content-container\">\n ${\n this.hasIcon\n ? html`\n <div class=\"icon-container\"><slot name=\"icon\"></slot></div>\n `\n : nothing\n }\n ${\n this.label\n ? html` <div class=\"label-container\">${this.label}</div> `\n : nothing\n }\n </div>\n <div class=\"arrow-flyout-container\">\n <obi-arrow-flyout-google></obi-arrow-flyout-google>\n </div>\n </div>\n\n \n </button>\n <obc-context-menu-input\n popover=\"auto\"\n id=\"menu-popover\"\n class=\"positioned-menu\"\n .type=${this.effectiveMenuType}\n .options=${this.options}\n .selectedValues=${this.selectedValues}\n .multiSelect=${this.isMultiSelect}\n .selectPerGroup=${this.effectiveSelectPerGroup}\n .hasTitleBar=${this.hasTitleBar}\n .title=${this.menuTitle}\n .columnGroups=${this.columnGroups}\n .itemsPerColumn=${this.itemsPerColumn}\n @change=${this.handleMenuChange}\n @item-click=${this.handleItemClick}\n @close=${this.handleMenuClose}\n @toggle=${this.handlePopoverToggle}\n /></obc-context-menu-input>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-menu-button': ObcMenuButton;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation-item/navigation-item.d.ts CHANGED Viewed

@@ -83,7 +83,7 @@ import '../tree-navigation-item/tree-navigation-item.js';
  *
  * @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.
  * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.
- * @fires {CustomEvent<void>} click - Fired when the navigation item is clicked.
+ * @fires click - Fired when the navigation item is clicked, either as a link or as a button.
  * @stable
  */
 export declare class ObcNavigationItem extends LitElement {
@@ -144,10 +144,6 @@ export declare class ObcNavigationItem extends LitElement {
     alerts?: TreeNavigationItemAlerts;
     private anchorElement?;
     private treeItemElement?;
-    /**
-     * @fires {CustomEvent<void>} click - Fired when the navigation item is clicked (either as a link or button).
-     */
-    onClick(): void;
     private handleKeydown;
     focus(options?: FocusOptions): void;
     private getItemRole;

package/dist/components/navigation-item/navigation-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAE/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;OAIG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE1D,uDAAuD;IAC5B,eAAe,UAAS;IAEnD,yFAAyF;IAC9D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;OAIG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAEhD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAGnB,OAAO,CAAC,eAAe,CAAC,CAAc;IAEzE~~;;OAEG;IACH~~,OAAO~~;IAIP~~,~~OAAO,~~CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;~~IAgFf~~,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAE/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;OAIG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE1D,uDAAuD;IAC5B,eAAe,UAAS;IAEnD,yFAAyF;IAC9D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;OAIG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAEhD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAGnB,OAAO,CAAC,eAAe,CAAC,CAAc;IAEzE,OAAO,CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;IA8Ef,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/navigation-item/navigation-item.js CHANGED Viewed

@@ -31,12 +31,6 @@ let ObcNavigationItem = class extends LitElement {
     this.treeBranches = [];
     this.terminalType = TreeTerminalType.regular;
   }
-  /**
-   * @fires {CustomEvent<void>} click - Fired when the navigation item is clicked (either as a link or button).
-   */
-  onClick() {
-    dispatchEvent(new CustomEvent("click"));
-  }
   handleKeydown(event) {
     const isMenuItem = this.getAttribute("role") === "menuitem";
     if (this.href !== void 0 && !isMenuItem) return;
@@ -76,7 +70,6 @@ let ObcNavigationItem = class extends LitElement {
           .href=${this.href}
           .terminalType=${this.terminalType}
           .alerts=${this.alerts}
-          @click=${this.onClick}
         >
           ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
         </obc-tree-navigation-item>
@@ -94,7 +87,6 @@ let ObcNavigationItem = class extends LitElement {
       [this.variant]: true
     })}"
         href=${ifDefined(this.href)}
-        @click=${this.onClick}
         @keydown=${this.handleKeydown}
         tabindex=${ifDefined(this.getItemTabIndex())}
         role=${ifDefined(this.getItemRole())}