@quartzds/core 1.0.0-beta.123 → 1.0.0-beta.125
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.
- package/CHANGELOG.md +43 -0
- package/components/index.js +1 -1
- package/components/{p-BvRd7jA2.js → p-2tdMcXmA.js} +5 -5
- package/components/{p-BvRd7jA2.js.map → p-2tdMcXmA.js.map} +1 -1
- package/components/{p-CVuTVnQo.js → p-B6ToH-uM.js} +4 -4
- package/components/p-B6ToH-uM.js.map +1 -0
- package/components/{p-C93kOEAe.js → p-BRpaYGSM.js} +5 -5
- package/components/{p-C93kOEAe.js.map → p-BRpaYGSM.js.map} +1 -1
- package/components/{p-CbY4T0d2.js → p-B_CYrw-t.js} +3 -3
- package/components/{p-CbY4T0d2.js.map → p-B_CYrw-t.js.map} +1 -1
- package/components/{p-BoSYRCNp.js → p-BceRDckL.js} +4 -4
- package/components/{p-BoSYRCNp.js.map → p-BceRDckL.js.map} +1 -1
- package/components/{p-BZlKeCFb.js → p-BuCcV5P1.js} +9 -9
- package/components/p-BuCcV5P1.js.map +1 -0
- package/components/{p-B7s906mS.js → p-CG_jPYOl.js} +5 -5
- package/components/{p-B7s906mS.js.map → p-CG_jPYOl.js.map} +1 -1
- package/components/p-CaibVX_2.js +3539 -0
- package/components/p-CaibVX_2.js.map +1 -0
- package/components/{p-CowZ-pDD.js → p-CgQQYnEy.js} +75 -39
- package/components/p-CgQQYnEy.js.map +1 -0
- package/components/{p-yb0Kv4Y6.js → p-DTMrBXCl.js} +24 -9
- package/components/p-DTMrBXCl.js.map +1 -0
- package/components/{p-C9R8N06B.js → p-EjoVBa5a.js} +3 -3
- package/components/{p-C9R8N06B.js.map → p-EjoVBa5a.js.map} +1 -1
- package/components/{p-CKp062X8.js → p-ox2syNht.js} +6 -6
- package/components/{p-CKp062X8.js.map → p-ox2syNht.js.map} +1 -1
- package/components/qds-action-item.js +3 -3
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-breadcrumb-item.js +11 -6
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +9 -9
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +5 -5
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +5 -5
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +23 -17
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +4 -4
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +5 -5
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +3 -3
- package/components/qds-label.js +2 -2
- package/components/qds-list-item.js +16 -13
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +1 -1
- package/components/qds-menu-item.js +38 -12
- package/components/qds-menu-item.js.map +1 -1
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +3 -3
- package/components/qds-standalone-link.js +4 -4
- package/components/qds-switch.js +6 -6
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +7 -7
- package/components/qds-tabbar.js +59 -38
- package/components/qds-tabbar.js.map +1 -1
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +3 -3
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/helpers-DjUgyTKn.js +3559 -0
- package/dist/cjs/helpers-DjUgyTKn.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +72 -36
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +9 -4
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +7 -7
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +2 -2
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +2 -2
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +3 -3
- package/dist/cjs/qds-dropdown.cjs.entry.js +20 -6
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +26 -16
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +8 -5
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +34 -8
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +2 -2
- package/dist/cjs/qds-standalone-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-switch.cjs.entry.js +5 -5
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +4 -4
- package/dist/cjs/qds-tabbar.cjs.entry.js +57 -33
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag.cjs.entry.js +3 -3
- package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/qds-title.cjs.entry.js +2 -2
- package/dist/cjs/qds-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +224 -70
- package/dist/docs.json +48 -6
- package/dist/esm/helpers-mPQzhx-O.js +3539 -0
- package/dist/esm/helpers-mPQzhx-O.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +72 -36
- package/dist/esm/qds-breadcrumb-item.entry.js +9 -4
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +7 -7
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +2 -2
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +2 -2
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +3 -3
- package/dist/esm/qds-dropdown.entry.js +20 -6
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +26 -16
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +1 -1
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +4 -4
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +1 -1
- package/dist/esm/qds-label.entry.js +1 -1
- package/dist/esm/qds-list-item.entry.js +8 -5
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +34 -8
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +2 -2
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +2 -2
- package/dist/esm/qds-standalone-link.entry.js +3 -3
- package/dist/esm/qds-switch.entry.js +5 -5
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +4 -4
- package/dist/esm/qds-tabbar.entry.js +57 -33
- package/dist/esm/qds-tabbar.entry.js.map +1 -1
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag.entry.js +3 -3
- package/dist/esm/qds-textarea.entry.js +3 -3
- package/dist/esm/qds-title.entry.js +2 -2
- package/dist/esm/qds-tooltip.entry.js +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +9 -9
- package/dist/types/components/dropdown/dropdown.d.ts +1 -0
- package/dist/types/components/form-message/form-message.d.ts +2 -0
- package/dist/types/components/menu-item/menu-item.d.ts +1 -0
- package/dist/types/components/tabbar/tabbar.d.ts +2 -0
- package/dist/types/components.d.ts +3 -2
- package/dist/types/helpers.d.ts +6 -1
- package/dist/vscode.html-custom-data.json +1 -1
- package/hydrate/index.js +3560 -193
- package/hydrate/index.mjs +3560 -193
- package/package.json +2 -1
- package/components/p-BZlKeCFb.js.map +0 -1
- package/components/p-BalM52S_.js +0 -291
- package/components/p-BalM52S_.js.map +0 -1
- package/components/p-CVuTVnQo.js.map +0 -1
- package/components/p-CowZ-pDD.js.map +0 -1
- package/components/p-yb0Kv4Y6.js.map +0 -1
- package/dist/cjs/helpers-Qs3cpKiI.js +0 -308
- package/dist/cjs/helpers-Qs3cpKiI.js.map +0 -1
- package/dist/esm/helpers-Fe2AA6uo.js +0 -291
- package/dist/esm/helpers-Fe2AA6uo.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-menu-item.entry.js","sources":["src/components/menu-item/menu-item.css?tag=qds-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-menu-item-container {\n display: flex;\n align-items: center;\n flex-grow: 1;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--qds-theme-title);\n flex-grow: 1;\n}\n\n.qds-shortcut {\n color: var(--qds-theme-text-subdued);\n}\n\n[data-size='small'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-small-gap-internal);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n padding-block: var(--qds-list-item-small-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-small-title);\n }\n}\n\n[data-size='standard'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-standard-gap-internal);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n}\n\n[data-size='large'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-large-gap-internal);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n padding-block: var(--qds-list-item-large-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-large-title);\n }\n}\n\n.qds-menu-item {\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n align-items: center;\n appearance: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n cursor: pointer;\n text-align: initial;\n text-decoration: none;\n color: var(--qds-theme-text-standard);\n\n &:not(.qds-selected, .qds-disabled) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n invariant,\n isEllipsisActive,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Type = 'checkbox' | undefined\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/menu-item\n */\n@Component({\n tag: 'qds-menu-item',\n shadow: true,\n styleUrl: 'menu-item.css',\n})\nexport class MenuItem implements ComponentInterface {\n /**\n * Prevents the menu item from being interacted with: it cannot be clicked\n * or focused.\n */\n @Prop() public readonly disabled?: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The menu item's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the menu item should be selectable.\n */\n @Prop() public type: Type\n\n /**\n * Whether or not the menu item is checked.\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * The menu item's text\n */\n @Prop() public readonly text!: string\n\n /**\n * The shortcut of the action.\n */\n @Prop() public readonly shortcut?: string\n\n @State() private hasSubmenuSlot = false\n\n @State() private tooltip = false\n\n /**\n * Emitted when the menu item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item is checked.\n */\n @Event({ eventName: 'qdsSelect', cancelable: false })\n private readonly selectEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #ro?: ResizeObserver\n\n #menuItem!: HTMLDivElement\n\n #span?: HTMLSpanElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): Type {\n return this.type ?? undefined\n }\n\n get #computedCheckable(): boolean {\n return this.#computedType === 'checkbox'\n }\n\n get #computedChecked(): boolean {\n return (\n (this.#computedCheckable && !this.#hasSubmenu && this.checked) ?? false\n )\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #hasSubmenu(): boolean {\n return this.hasSubmenuSlot\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#computedCheckable) {\n this.checked = !this.#computedChecked\n this.selectEmitter.emit()\n }\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.ariaChecked = this.#computedChecked.toString()\n }\n\n public componentDidLoad(): void {\n this.checkedChanged()\n invariant(this.#span)\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isEllipsisActive(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.hasSubmenuSlot = this.host.hasChildNodes()\n this.internals.role =\n this.type === 'checkbox' ? 'menuitemcheckbox' : 'menuitem'\n this.disabledChanged()\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-menu-item': true,\n 'qds-disabled': this.#computedDisabled,\n 'qds-has-submenu': this.#hasSubmenu,\n }}\n ref={this.#menuitemDivRef}\n data-size={this.#computedSize}\n aria-hidden=\"true\"\n >\n <div class=\"qds-menu-item-container\">\n {this.#computedCheckable && !this.#computedChecked && (\n <span class=\"menu-item-checkable\" />\n )}\n {this.#computedChecked && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"checked\" />\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.shortcut !== undefined && this.shortcut !== '' && (\n <span class=\"qds-shortcut\">{this.shortcut}</span>\n )}\n {this.#hasSubmenu && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"navigation\" />\n )}\n </div>\n {this.#hasSubmenu && (\n <qds-dropdown\n class=\"qds-accessory qds-related\"\n placement=\"right-start\"\n target={this.#menuitemDivRef}\n >\n <slot />\n </qds-dropdown>\n )}\n {this.tooltip && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n readonly #menuitemDivRef = (menuItem?: HTMLDivElement): HTMLDivElement => {\n if (menuItem) {\n this.#menuItem = menuItem\n }\n\n return this.#menuItem\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#menuItem\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-menu-item.entry.js","sources":["src/components/menu-item/menu-item.css?tag=qds-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-menu-item-container {\n display: flex;\n align-items: center;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-icon,\n.menu-item-checkable {\n flex-shrink: 0;\n}\n\n.qds-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--qds-theme-title);\n flex-grow: 1;\n}\n\n.qds-shortcut {\n color: var(--qds-theme-text-subdued);\n}\n\n[data-size='small'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-small-gap-internal);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n padding-block: var(--qds-list-item-small-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-small-title);\n }\n}\n\n[data-size='standard'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-standard-gap-internal);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n}\n\n[data-size='large'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-large-gap-internal);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n padding-block: var(--qds-list-item-large-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-large-title);\n }\n}\n\n.qds-menu-item {\n box-sizing: border-box;\n align-items: center;\n appearance: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n cursor: pointer;\n text-align: initial;\n text-decoration: none;\n color: var(--qds-theme-text-standard);\n\n &:not(.qds-selected, .qds-disabled) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n getSubmenuOpenKey,\n invariant,\n isEllipsisActive,\n isRTL,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Type = 'checkbox' | undefined\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/menu-item\n */\n@Component({\n tag: 'qds-menu-item',\n shadow: true,\n styleUrl: 'menu-item.css',\n})\nexport class MenuItem implements ComponentInterface {\n /**\n * Prevents the menu item from being interacted with: it cannot be clicked\n * or focused.\n */\n @Prop() public readonly disabled?: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The menu item's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the menu item should be selectable.\n */\n @Prop() public type: Type\n\n /**\n * Whether or not the menu item is checked.\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * The menu item's text\n */\n @Prop() public readonly text!: string\n\n /**\n * The shortcut of the action.\n */\n @Prop() public readonly shortcut?: string\n\n @State() private hasSubmenuSlot = false\n\n @State() private tooltip = false\n\n /**\n * Emitted when the menu item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item is checked.\n */\n @Event({ eventName: 'qdsSelect', cancelable: false })\n private readonly selectEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #ro?: ResizeObserver\n\n #menuItem!: HTMLDivElement\n\n #span?: HTMLSpanElement\n\n #submenuDropdown?: HTMLQdsDropdownElement\n\n get #submenuPlacement(): 'left-start' | 'right-start' {\n return isRTL(this.host) ? 'left-start' : 'right-start'\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): Type {\n return this.type ?? undefined\n }\n\n get #computedCheckable(): boolean {\n return this.#computedType === 'checkbox'\n }\n\n get #computedChecked(): boolean {\n return (\n (this.#computedCheckable && !this.#hasSubmenu && this.checked) ?? false\n )\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #hasSubmenu(): boolean {\n return this.hasSubmenuSlot\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#computedCheckable) {\n this.checked = !this.#computedChecked\n this.selectEmitter.emit()\n }\n\n if (this.#hasSubmenu && this.#submenuDropdown) {\n this.#submenuDropdown.placement = isRTL(this.host)\n ? this.#submenuPlacement\n : this.#submenuPlacement\n }\n }\n\n @Listen('keydown')\n protected async onKeydown(event: KeyboardEvent): Promise<void> {\n if (!this.#hasSubmenu || !this.#submenuDropdown) return\n\n const openKey = getSubmenuOpenKey(this.host)\n if (event.key === openKey || event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n event.stopPropagation()\n this.#submenuDropdown.placement =\n event.key === openKey ? this.#submenuPlacement : this.#submenuPlacement\n await this.#submenuDropdown.show()\n await this.#submenuDropdown.focusFirstItem()\n }\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.ariaChecked = this.#computedChecked.toString()\n }\n\n public componentDidLoad(): void {\n this.checkedChanged()\n invariant(this.#span)\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isEllipsisActive(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.hasSubmenuSlot = this.host.hasChildNodes()\n\n this.internals.role = this.hasSubmenuSlot\n ? 'menu'\n : this.type === 'checkbox'\n ? 'menuitemcheckbox'\n : 'menuitem'\n\n this.disabledChanged()\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-menu-item': true,\n 'qds-disabled': this.#computedDisabled,\n 'qds-has-submenu': this.#hasSubmenu,\n }}\n ref={this.#menuitemDivRef}\n data-size={this.#computedSize}\n aria-hidden=\"true\"\n >\n <div class=\"qds-menu-item-container\">\n {this.#computedCheckable && !this.#computedChecked && (\n <span class=\"menu-item-checkable\" />\n )}\n {this.#computedChecked && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"checked\" />\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.shortcut !== undefined && this.shortcut !== '' && (\n <span class=\"qds-shortcut\">{this.shortcut}</span>\n )}\n {this.#hasSubmenu && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"navigation\" />\n )}\n </div>\n {this.#hasSubmenu && (\n <qds-dropdown\n class=\"qds-accessory qds-related\"\n target={this.#menuitemDivRef}\n ref={(element: HTMLQdsDropdownElement | undefined) => {\n this.#submenuDropdown = element\n }}\n >\n <slot />\n </qds-dropdown>\n )}\n {this.tooltip && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n readonly #menuitemDivRef = (menuItem?: HTMLDivElement): HTMLDivElement => {\n if (menuItem) {\n this.#menuItem = menuItem\n }\n\n return this.#menuItem\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#menuItem\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes } from './helpers-mPQzhx-O.js';
|
|
8
8
|
|
|
9
9
|
const miniButtonCss = ":host{border-radius:var(--qds-control-rounded-border-radius);display:block}:host(:focus-visible){box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}:host(:hover){background-color:var(--qds-theme-interactive-background-hover)}:host(:active){background-color:var(--qds-theme-interactive-background-pressed)}.qds-mini-button{align-items:center;background-color:initial;border:none;color:var(--qds-theme-control-text-standard);cursor:pointer;display:flex;justify-content:center;min-height:var(--qds-control-mini-button-standard-size);padding:0;width:var(--qds-control-mini-button-standard-size)}.qds-mini-button:focus-visible{outline:none}.qds-mini-button:disabled{pointer-events:none}.qds-icon{align-content:center;font-size:var(--qds-control-standard-icon-size);line-height:normal}";
|
|
10
10
|
|
|
@@ -108,7 +108,7 @@ const MiniButton = class {
|
|
|
108
108
|
}
|
|
109
109
|
render() {
|
|
110
110
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
111
|
-
return (h(Tag, { key: '
|
|
111
|
+
return (h(Tag, { key: '12e7bec4062ae51880303f18207945d79dc5f4ae', type: Tag === 'a' ? undefined : 'button', class: "qds-mini-button", href: Tag === 'a' ? this.href : undefined, rel: Tag === 'a' ? this.rel : undefined, disabled: __classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get), "aria-hidden": "true", onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, tabIndex: -1 }, h("qds-icon", { key: '52296f8479a2d844f1b32664a137dcec30eeb38c', class: "qds-icon", library: this.library, name: this.name })));
|
|
112
112
|
}
|
|
113
113
|
static get formAssociated() { return true; }
|
|
114
114
|
get host() { return getElement(this); }
|
|
@@ -90,7 +90,7 @@ const ProgressBar = class {
|
|
|
90
90
|
this.valueChanged();
|
|
91
91
|
}
|
|
92
92
|
render() {
|
|
93
|
-
return (h("div", { key: '
|
|
93
|
+
return (h("div", { key: 'dceeec47c9023f86eb5c0be5535f04de6d9e0502', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, h("div", { key: 'd8e61e369da33e1e661a021f05adf57691975e45', class: {
|
|
94
94
|
'qds-bar': true,
|
|
95
95
|
'qds-indeterminate': __classPrivateFieldGet(this, _ProgressBar_position, "f") === -1,
|
|
96
96
|
}, "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get), style: { width: this.width } })));
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { i as invariant, p as pickFocusEventAttributes, e as pickInputEventAttributes, c as inheritAriaAttributes } from './helpers-
|
|
7
|
+
import { i as invariant, p as pickFocusEventAttributes, e as pickInputEventAttributes, c as inheritAriaAttributes } from './helpers-mPQzhx-O.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
|
-
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"
|
|
10
|
+
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"c\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-form-input-text-active);grid-area:c}.qds-icon{place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-form-input-background-default);border-color:var(--qds-theme-form-input-border-default);border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-form-input-border-radius)\n );border-style:solid;border-width:var(--qds-form-input-border-width-default) var(\n --qds-form-input-border-width-inline-end,var(--qds-form-input-border-width-default)\n ) var(\n --qds-form-input-border-width-block-end,var(--qds-form-input-border-width-default)\n ) var(--qds-form-input-border-width-default);margin:0;outline:0;padding-block:0;text-overflow:ellipsis}.qds-select:enabled:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-select:enabled:active{background-color:var(--qds-theme-form-input-background-active);color:var(--qds-theme-form-input-text-active)}.qds-select:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-select[data-status]{border-width:var(--qds-form-input-border-width-status) var(\n --qds-form-input-border-width-inline-end,var(--qds-form-input-border-width-status)\n ) var(\n --qds-form-input-border-width-block-end,var(--qds-form-input-border-width-status)\n ) var(--qds-form-input-border-width-status)}.qds-select[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-select[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-select :not(:focus):user-invalid,.qds-select[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-form-small-text);padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}.qds-select[data-size=small]:not([multiple]){min-height:var(--qds-form-input-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-form-input-small-gap-internal) + var(--qds-form-input-small-padding-end))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);margin-inline-end:calc(var(--qds-form-input-small-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-form-standard-text);padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}.qds-select[data-size=standard]:not([multiple]){min-height:var(--qds-form-input-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-form-input-standard-gap-internal) + var(--qds-form-input-standard-padding-end))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);margin-inline-end:calc(var(--qds-form-input-standard-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-form-large-text);padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}.qds-select[data-size=large]:not([multiple]){min-height:var(--qds-form-input-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-form-input-large-gap-internal) + var(--qds-form-input-large-padding-end))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);margin-inline-end:calc(var(--qds-form-input-large-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-form-input-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:c;height:calc(100% + var(--qds-form-input-border-width-default) - var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n ));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-form-input-border-width-default) - var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, i as invariant, d as determineLinkIcon } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, d as determineLinkIcon } from './helpers-mPQzhx-O.js';
|
|
8
8
|
|
|
9
9
|
const standaloneLinkCss = ":host([hidden]){display:none!important}:host{display:inline-block}:host(:focus-visible){border-radius:var(--qds-control-border-radius);box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-icon-crop{align-items:center;display:flex;justify-content:center}.qds-icon{flex-shrink:0;transform:scaleX(var(--qds-direction-factor,1))}.qds-standalone-link{box-sizing:border-box;display:inline-flex;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;width:100%}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}[data-importance=emphasized],[data-importance=standard]{-webkit-text-decoration:none;text-decoration:none}.qds-visitable[data-importance=emphasized],.qds-visitable[data-importance=standard],[data-importance=emphasized]:active,[data-importance=emphasized]:hover,[data-importance=standard]:active,[data-importance=standard]:hover{-webkit-text-decoration:underline;text-decoration:underline}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}.qds-visitable[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}.qds-visitable[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}.qds-visitable[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}.qds-visitable[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}.qds-visitable[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}.qds-visitable[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-standalone-link[data-size=small]{font:var(--qds-control-small-text);gap:var(--qds-control-small-gap-internal);min-height:var(--qds-control-small-height);padding-block:var(--qds-control-small-padding-auto-height)}.qds-icon-crop[data-size=small]{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-standalone-link[data-size=standard]{font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-internal);min-height:var(--qds-control-standard-height);padding-block:var(--qds-control-standard-padding-auto-height)}.qds-icon-crop[data-size=standard]{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-standalone-link[data-size=large]{font:var(--qds-control-large-text);gap:var(--qds-control-large-gap-internal);min-height:var(--qds-control-large-height);padding-block:var(--qds-control-large-padding-auto-height)}.qds-icon-crop[data-size=large]{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
|
|
10
10
|
|
|
@@ -123,11 +123,11 @@ const StandaloneLink = class {
|
|
|
123
123
|
__classPrivateFieldGet(this, _StandaloneLink_updateAriaLabelElements, "f").call(this);
|
|
124
124
|
}
|
|
125
125
|
render() {
|
|
126
|
-
return (h("a", { key: '
|
|
126
|
+
return (h("a", { key: '2b62e43bfd05f5bdd1c350081351bd94006f29cc', "aria-hidden": "true", class: {
|
|
127
127
|
'qds-standalone-link': true,
|
|
128
128
|
'qds-disabled': this.disabled,
|
|
129
129
|
'qds-visitable': this.visitable,
|
|
130
|
-
}, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: -1, target: this.target, ref: __classPrivateFieldGet(this, _StandaloneLink_linkRef, "f") }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: '
|
|
130
|
+
}, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: -1, target: this.target, ref: __classPrivateFieldGet(this, _StandaloneLink_linkRef, "f") }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: 'ab9324da83afb571c47c4dd26b2d26cb1289da55', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: 'ee87282c15b9656af82a0469c7bc32bab2dfbfaa', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName }))), h("span", { key: '4e53119ab88ee2264d811e46ac7da4dc5215312a', class: "qds-text" }, h("slot", { key: 'f4388e7e7ab8a300d10f9c3410a284203bed5817', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("span", { key: '005ac6933014277997e9418ef4dbf030303e5db2', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: 'e35052fa041a15dc17f0832fb896f3384ced7895', class: "qds-icon", library: "core", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), name: this.linkIcon }))), this.importance === 'emphasized' && (h("span", { key: 'fb4e0ed25b26ab1f63d6dcc519d5e9a4567841f0', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '9396024100a0bb6669270d068620799c2d567afe', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: "core", name: "next" })))));
|
|
131
131
|
}
|
|
132
132
|
get host() { return getElement(this); }
|
|
133
133
|
static get watchers() { return {
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes } from './helpers-mPQzhx-O.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
|
-
const switchCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-knob,.qds-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-track{align-items:center;background-color:var(--qds-theme-control-toggle-track-default);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:flex;flex-shrink:0;padding-inline:var(--qds-control-toggle-track-padding)}.qds-track:hover{background-color:var(--qds-theme-control-toggle-track-hover)}.qds-track:active{background-color:var(--qds-theme-control-toggle-track-pressed)}.qds-knob-container{align-items:center;align-self:stretch;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;padding-block:var(--qds-control-toggle-track-padding)}.qds-knob{background-color:var(--qds-theme-control-background);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;height:100%;margin:0}.qds-indicator{color:var(--qds-theme-control-background);flex-grow:1;justify-content:center;padding-block:var(--qds-control-toggle-track-padding)}.qds-container,.qds-indicator{align-items:center;display:flex}.qds-container{box-sizing:border-box;cursor:pointer}.qds-switch{clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.qds-switch:checked~.qds-track{background-color:var(--qds-theme-signature-color-default);justify-content:flex-end}.qds-switch:checked~.qds-track:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-switch:checked~.qds-track:active{background-color:var(--qds-theme-signature-color-pressed)}:host(:focus-visible) .qds-switch~.qds-track{box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-container[data-size=small]{min-height:var(--qds-control-toggle-small-height)}.qds-inline[data-size=small]{min-height:var(--qds-control-small-height);padding-block:var(--qds-control-small-padding-auto-height)}.qds-track[data-size=small]{height:var(--qds-control-toggle-small-track-height);width:var(--qds-control-toggle-small-track-width)}.qds-knob[data-size=small]{width:var(--qds-control-toggle-small-knob-width)}.qds-indicator[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-container[data-size=standard]{min-height:var(--qds-control-toggle-standard-height)}.qds-inline[data-size=standard]{min-height:var(--qds-control-standard-height);padding-block:var(--qds-control-standard-padding-auto-height)}.qds-track[data-size=standard]{height:var(--qds-control-toggle-standard-track-height);width:var(--qds-control-toggle-standard-track-width)}.qds-knob[data-size=standard]{width:var(--qds-control-toggle-standard-knob-width)}.qds-indicator[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-container[data-size=large]{min-height:var(--qds-control-toggle-large-height)}.qds-inline[data-size=large]{min-height:var(--qds-control-large-height);padding-block:var(--qds-control-large-padding-auto-height)}.qds-track[data-size=large]{height:var(--qds-control-toggle-large-track-height);width:var(--qds-control-toggle-large-track-width)}.qds-knob[data-size=large]{width:var(--qds-control-toggle-large-knob-width)}.qds-indicator[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
|
|
10
|
+
const switchCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-knob,.qds-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-track{align-items:center;background-color:var(--qds-theme-control-toggle-track-default);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:flex;flex-shrink:0;padding-inline:var(--qds-control-toggle-track-padding)}.qds-track:hover{background-color:var(--qds-theme-control-toggle-track-hover)}.qds-track:active{background-color:var(--qds-theme-control-toggle-track-pressed)}.qds-knob-container{align-items:center;align-self:stretch;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;padding-block:var(--qds-control-toggle-track-padding)}.qds-knob{background-color:var(--qds-theme-control-background-default);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;height:100%;margin:0}.qds-indicator{color:var(--qds-theme-control-background-default);flex-grow:1;justify-content:center;padding-block:var(--qds-control-toggle-track-padding)}.qds-container,.qds-indicator{align-items:center;display:flex}.qds-container{box-sizing:border-box;cursor:pointer}.qds-switch{clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.qds-switch:checked~.qds-track{background-color:var(--qds-theme-signature-color-default);justify-content:flex-end}.qds-switch:checked~.qds-track:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-switch:checked~.qds-track:active{background-color:var(--qds-theme-signature-color-pressed)}:host(:focus-visible) .qds-switch~.qds-track{box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-container[data-size=small]{min-height:var(--qds-control-toggle-small-height)}.qds-inline[data-size=small]{min-height:var(--qds-control-small-height);padding-block:var(--qds-control-small-padding-auto-height)}.qds-track[data-size=small]{height:var(--qds-control-toggle-small-track-height);width:var(--qds-control-toggle-small-track-width)}.qds-knob[data-size=small]{width:var(--qds-control-toggle-small-knob-width)}.qds-indicator[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-container[data-size=standard]{min-height:var(--qds-control-toggle-standard-height)}.qds-inline[data-size=standard]{min-height:var(--qds-control-standard-height);padding-block:var(--qds-control-standard-padding-auto-height)}.qds-track[data-size=standard]{height:var(--qds-control-toggle-standard-track-height);width:var(--qds-control-toggle-standard-track-width)}.qds-knob[data-size=standard]{width:var(--qds-control-toggle-standard-knob-width)}.qds-indicator[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-container[data-size=large]{min-height:var(--qds-control-toggle-large-height)}.qds-inline[data-size=large]{min-height:var(--qds-control-large-height);padding-block:var(--qds-control-large-padding-auto-height)}.qds-track[data-size=large]{height:var(--qds-control-toggle-large-track-height);width:var(--qds-control-toggle-large-track-width)}.qds-knob[data-size=large]{width:var(--qds-control-toggle-large-knob-width)}.qds-indicator[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -181,13 +181,13 @@ const Switch = class {
|
|
|
181
181
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
182
182
|
}
|
|
183
183
|
render() {
|
|
184
|
-
return (h("div", { key: '
|
|
184
|
+
return (h("div", { key: '5737ac1a3c38df703f7cc795e2032d7575281200', class: {
|
|
185
185
|
'qds-container': true,
|
|
186
186
|
'qds-disabled': __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get),
|
|
187
187
|
'qds-inline': this.inline,
|
|
188
|
-
}, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get), "aria-hidden": "true" }, h("input", { key: '
|
|
188
|
+
}, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get), "aria-hidden": "true" }, h("input", { key: '1b8f0ce739d5fbdb1d7c4e8edb77feeb64edba47', "aria-hidden": "true",
|
|
189
189
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
190
|
-
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, type: "checkbox", value: this.value ?? undefined, tabIndex: -1 }), h("div", { key: '
|
|
190
|
+
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, type: "checkbox", value: this.value ?? undefined, tabIndex: -1 }), h("div", { key: '4cea0f923dae9b4d6c6ff38d99fa3c2a74e65f02', class: "qds-track", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, !this.noIndicator && __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedChecked_get) && (h("div", { key: '5ae795102526abb97de7ae5d5d4d6e1559ee3da5', class: "qds-indicator", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("qds-icon", { key: '02085b582084f6c271beb2d1ac46bbd2d993ca96', class: "qds-icon", name: "toggle-on", library: "core" }))), h("div", { key: '8fe61ec49e46a3b99d95c1bcc6bb496bfef988f1', class: "qds-knob-container" }, h("div", { key: '1cdb41690cb3ed4c1cd116274d2c62daf4d29171', class: "qds-knob", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) })), !this.noIndicator && !__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedChecked_get) && (h("div", { key: 'd5ff9b46807d07a3f9f913ed8e50c9e9ed1ae75f', class: "qds-indicator", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("qds-icon", { key: '4a4d174e59d16ead1cdafc3a1933c5a898e8a073', class: "qds-icon", name: "toggle-off", library: "core" }))))));
|
|
191
191
|
}
|
|
192
192
|
static get formAssociated() { return true; }
|
|
193
193
|
get host() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-switch.entry.js","sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n outline: none;\n}\n\n.qds-track,\n.qds-knob {\n print-color-adjust: exact;\n}\n\n.qds-track {\n align-items: center;\n display: flex;\n box-sizing: border-box;\n flex-shrink: 0;\n padding-inline: var(--qds-control-toggle-track-padding);\n print-color-adjust: exact;\n background-color: var(--qds-theme-control-toggle-track-default);\n border-radius: var(--qds-control-rounded-border-radius);\n\n &:hover {\n background-color: var(--qds-theme-control-toggle-track-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-control-toggle-track-pressed);\n }\n}\n\n.qds-knob-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n padding-block: var(--qds-control-toggle-track-padding);\n}\n\n.qds-knob {\n height: 100%;\n background-color: var(--qds-theme-control-background);\n box-sizing: border-box;\n margin: 0;\n border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n color: var(--qds-theme-control-background);\n padding-block: var(--qds-control-toggle-track-padding);\n}\n\n.qds-container {\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n\n.qds-switch {\n clip-path: inset(50%);\n height: 1px;\n margin: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n\n &:checked ~ .qds-track {\n justify-content: flex-end;\n background-color: var(--qds-theme-signature-color-default);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n:host(:focus-visible) .qds-switch ~ .qds-track {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-small-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-small-padding-auto-height);\n min-height: var(--qds-control-small-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-small-track-width);\n height: var(--qds-control-toggle-small-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-small-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-standard-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-standard-padding-auto-height);\n min-height: var(--qds-control-standard-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-standard-track-width);\n height: var(--qds-control-toggle-standard-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-standard-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-large-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-large-padding-auto-height);\n min-height: var(--qds-control-large-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-large-track-width);\n height: var(--qds-control-toggle-large-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-large-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n tag: 'qds-switch',\n formAssociated: true,\n shadow: true,\n styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n /**\n * Adds vertical margin to the switch for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The switches's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n *Sets the switch's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the switch from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the switch with (its form owner).\n *\n * The value of this property must be the id of a `<form>` in the same\n * document. If this property is not set, the `<qds-switch>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-switch>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n *an ancestor `<form>` element.\n *\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-switch` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n /**\n * The name of the switch, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * The value of the switch, submitted as a name/value pair with form data.\n *\n * @webnative\n */\n @Prop() public readonly value?: Value\n\n /**\n * Display the status indicator.\n *\n * By default, the indicator is visible.\n */\n @Prop() public readonly noIndicator: boolean = false\n\n /**\n * The error message that would be shown to the user if the `<qds-switch>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-switch>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * True if `<qds-switch>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the switch loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the switch's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the switch gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n #savedTabIndex = 0\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): string | null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = !this.#computedChecked\n this.changeEmitter.emit()\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this.internals.form) {\n this.internals.form.requestSubmit()\n }\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.#updateFormValue()\n this.internals.ariaChecked = this.#computedChecked.toString()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.#updateFormValue()\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string | null): void {\n if (newValue !== null) {\n const parsedValue = Number.parseInt(newValue, 10)\n this.#savedTabIndex =\n Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n ? 0\n : parsedValue\n }\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('value')\n protected valueChanged(): void {\n this.#updateFormValue()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'switch'\n this.checkedChanged()\n this.disabledChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('labels', () => this.internals.labels)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-disabled': this.#computedDisabled,\n 'qds-inline': this.inline,\n }}\n data-size={this.#computedSize}\n aria-hidden=\"true\"\n >\n <input\n aria-hidden=\"true\"\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.checked}\n class=\"qds-switch\"\n disabled={this.disabled}\n type=\"checkbox\"\n value={this.value ?? undefined}\n tabIndex={-1}\n />\n <div class=\"qds-track\" data-size={this.#computedSize}>\n {!this.noIndicator && this.#computedChecked && (\n <div class=\"qds-indicator\" data-size={this.#computedSize}>\n <qds-icon class=\"qds-icon\" name=\"toggle-on\" library=\"core\" />\n </div>\n )}\n <div class=\"qds-knob-container\">\n <div class=\"qds-knob\" data-size={this.#computedSize} />\n </div>\n {!this.noIndicator && !this.#computedChecked && (\n <div class=\"qds-indicator\" data-size={this.#computedSize}>\n <qds-icon class=\"qds-icon\" name=\"toggle-off\" library=\"core\" />\n </div>\n )}\n </div>\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n\n #updateFormValue(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-switch.entry.js","sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n outline: none;\n}\n\n.qds-track,\n.qds-knob {\n print-color-adjust: exact;\n}\n\n.qds-track {\n align-items: center;\n display: flex;\n box-sizing: border-box;\n flex-shrink: 0;\n padding-inline: var(--qds-control-toggle-track-padding);\n print-color-adjust: exact;\n background-color: var(--qds-theme-control-toggle-track-default);\n border-radius: var(--qds-control-rounded-border-radius);\n\n &:hover {\n background-color: var(--qds-theme-control-toggle-track-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-control-toggle-track-pressed);\n }\n}\n\n.qds-knob-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n align-self: stretch;\n padding-block: var(--qds-control-toggle-track-padding);\n}\n\n.qds-knob {\n height: 100%;\n background-color: var(--qds-theme-control-background-default);\n box-sizing: border-box;\n margin: 0;\n border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n color: var(--qds-theme-control-background-default);\n padding-block: var(--qds-control-toggle-track-padding);\n}\n\n.qds-container {\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n\n.qds-switch {\n clip-path: inset(50%);\n height: 1px;\n margin: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n\n &:checked ~ .qds-track {\n justify-content: flex-end;\n background-color: var(--qds-theme-signature-color-default);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n:host(:focus-visible) .qds-switch ~ .qds-track {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-small-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-small-padding-auto-height);\n min-height: var(--qds-control-small-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-small-track-width);\n height: var(--qds-control-toggle-small-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-small-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-standard-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-standard-padding-auto-height);\n min-height: var(--qds-control-standard-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-standard-track-width);\n height: var(--qds-control-toggle-standard-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-standard-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-container {\n min-height: var(--qds-control-toggle-large-height);\n }\n\n &.qds-inline {\n padding-block: var(--qds-control-large-padding-auto-height);\n min-height: var(--qds-control-large-height);\n }\n\n &.qds-track {\n width: var(--qds-control-toggle-large-track-width);\n height: var(--qds-control-toggle-large-track-height);\n }\n\n &.qds-knob {\n width: var(--qds-control-toggle-large-knob-width);\n }\n\n &.qds-indicator {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n tag: 'qds-switch',\n formAssociated: true,\n shadow: true,\n styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n /**\n * Adds vertical margin to the switch for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The switches's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n *Sets the switch's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the switch from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the switch with (its form owner).\n *\n * The value of this property must be the id of a `<form>` in the same\n * document. If this property is not set, the `<qds-switch>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-switch>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n *an ancestor `<form>` element.\n *\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-switch` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n /**\n * The name of the switch, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * The value of the switch, submitted as a name/value pair with form data.\n *\n * @webnative\n */\n @Prop() public readonly value?: Value\n\n /**\n * Display the status indicator.\n *\n * By default, the indicator is visible.\n */\n @Prop() public readonly noIndicator: boolean = false\n\n /**\n * The error message that would be shown to the user if the `<qds-switch>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-switch>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * True if `<qds-switch>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the switch loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the switch's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the switch gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n #savedTabIndex = 0\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): string | null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = !this.#computedChecked\n this.changeEmitter.emit()\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this.internals.form) {\n this.internals.form.requestSubmit()\n }\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.#updateFormValue()\n this.internals.ariaChecked = this.#computedChecked.toString()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.#updateFormValue()\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string | null): void {\n if (newValue !== null) {\n const parsedValue = Number.parseInt(newValue, 10)\n this.#savedTabIndex =\n Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n ? 0\n : parsedValue\n }\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('value')\n protected valueChanged(): void {\n this.#updateFormValue()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'switch'\n this.checkedChanged()\n this.disabledChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('labels', () => this.internals.labels)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-disabled': this.#computedDisabled,\n 'qds-inline': this.inline,\n }}\n data-size={this.#computedSize}\n aria-hidden=\"true\"\n >\n <input\n aria-hidden=\"true\"\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.checked}\n class=\"qds-switch\"\n disabled={this.disabled}\n type=\"checkbox\"\n value={this.value ?? undefined}\n tabIndex={-1}\n />\n <div class=\"qds-track\" data-size={this.#computedSize}>\n {!this.noIndicator && this.#computedChecked && (\n <div class=\"qds-indicator\" data-size={this.#computedSize}>\n <qds-icon class=\"qds-icon\" name=\"toggle-on\" library=\"core\" />\n </div>\n )}\n <div class=\"qds-knob-container\">\n <div class=\"qds-knob\" data-size={this.#computedSize} />\n </div>\n {!this.noIndicator && !this.#computedChecked && (\n <div class=\"qds-indicator\" data-size={this.#computedSize}>\n <qds-icon class=\"qds-icon\" name=\"toggle-off\" library=\"core\" />\n </div>\n )}\n </div>\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n\n #updateFormValue(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, r as resolveTarget } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes, r as resolveTarget } from './helpers-mPQzhx-O.js';
|
|
8
8
|
|
|
9
9
|
const tabCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-target-icon{color:var(--qds-theme-control-text-standard)}.qds-icon,.qds-target-icon{flex-shrink:0}.qds-chevron{transform:rotate(180deg)}.qds-selected:hover{background-color:var(--qds-theme-interactive-background-selected-hover)}.qds-selected:active{background-color:var(--qds-theme-interactive-background-selected-pressed)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab,.qds-texts{display:flex}.qds-texts{flex:1 0;flex-direction:column}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle);font:var(--qds-nav-element-standard-subtitle)}.qds-closable-wrapper[data-size=small],.qds-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal);min-height:var(--qds-nav-element-small-height);padding-inline:var(--qds-nav-element-small-padding-horizontal)}.qds-closable-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal)}[data-size=small]>.qds-icon{height:var(--qds-nav-element-small-icon-size);width:var(--qds-nav-element-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-nav-element-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-nav-element-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-nav-element-small-subtitle)}.qds-target-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-closable-wrapper[data-size=standard],.qds-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal);min-height:var(--qds-nav-element-standard-height);padding-inline:var(--qds-nav-element-standard-padding-horizontal)}.qds-closable-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal)}[data-size=standard]>.qds-icon{height:var(--qds-nav-element-standard-icon-size);width:var(--qds-nav-element-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-nav-element-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-nav-element-standard-subtitle)}.qds-target-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-closable-wrapper[data-size=large],.qds-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal);min-height:var(--qds-nav-element-large-height);padding-inline:var(--qds-nav-element-large-padding-horizontal)}.qds-closable-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal)}[data-size=large]>.qds-icon{height:var(--qds-nav-element-large-icon-size);width:var(--qds-nav-element-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-nav-element-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-nav-element-large-title)}[data-size=large] .qds-subtext{font:var(--qds-nav-element-large-subtitle)}.qds-target-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-importance=standard] .qds-selected .qds-icon{color:var(--qds-theme-title)}.qds-selected[data-importance=standard]:after{background-color:var(--qds-theme-signature-color-default)}.qds-selected[data-importance=subdued]:after{background-color:var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n )}.qds-selected[data-importance=standard]:after,.qds-selected[data-importance=subdued]:after{border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";display:block;position:absolute}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after,.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{height:100%;width:var(--qds-signature-line-connection-width)}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after{inset-inline-end:0}.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{inset-inline-start:0}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after,.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{height:var(--qds-signature-line-connection-width);width:100%}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after{bottom:0}.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{top:0}.qds-selected[data-importance=standard][data-size=standard] .qds-text,.qds-selected[data-importance=subdued][data-size=standard] .qds-text{font:var(--qds-nav-element-standard-title-emphasized)}.qds-selected[data-importance=standard][data-size=small] .qds-text,.qds-selected[data-importance=subdued][data-size=small] .qds-text{font:var(--qds-nav-element-small-title-emphasized)}.qds-selected[data-importance=standard][data-size=large] .qds-text,.qds-selected[data-importance=subdued][data-size=large] .qds-text{font:var(--qds-nav-element-large-title-emphasized)}.qds-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-closable-tab{width:100%}.qds-closable-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-closable-tab,.qds-closable-wrapper,.qds-tab{align-items:center;justify-content:center}.qds-closable-tab,.qds-tab{background-color:initial;border:none;cursor:pointer;text-align:initial}.qds-closable-tab:any-link,.qds-tab:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-closable-wrapper,.qds-tab{position:relative}.qds-closable-wrapper:not(.qds-selected):hover,.qds-tab:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-closable-wrapper:not(.qds-selected):active,.qds-tab:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}";
|
|
10
10
|
|
|
@@ -182,11 +182,11 @@ const Tab = class {
|
|
|
182
182
|
: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable'
|
|
183
183
|
? 'button'
|
|
184
184
|
: 'div';
|
|
185
|
-
return (h("div", { key: '
|
|
185
|
+
return (h("div", { key: '7b70ccc733ed75a400bb054cb428eedacf292225', "aria-disabled": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get) ? 'true' : undefined, class: {
|
|
186
186
|
'qds-closable-wrapper': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
187
187
|
'qds-selected': this.selected,
|
|
188
188
|
[`qds-indicator-${this.indicatorPosition}`]: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
189
|
-
}, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, h(Tag, { key: '
|
|
189
|
+
}, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, h(Tag, { key: '28e9f81ef19ba8ba663da7dcaded2a09a31c6747', ref: __classPrivateFieldGet(this, _Tab_tabRef, "f"), disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
|
|
190
190
|
'qds-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) !== 'closable',
|
|
191
191
|
'qds-closable-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
192
192
|
'qds-selected': this.selected,
|
|
@@ -196,7 +196,7 @@ const Tab = class {
|
|
|
196
196
|
? 'true'
|
|
197
197
|
: 'false'
|
|
198
198
|
: undefined, "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get), "data-action": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), href: isLink ? this.href : undefined }, ((this.tagText !== undefined && this.tagText !== '') ||
|
|
199
|
-
(this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: '
|
|
199
|
+
(this.tagIconName !== undefined && this.tagIconName !== '')) && (h("qds-tag", { key: 'ab5ce12308980ea1249d1f1594ada82a119ece87', text: this.tagText, status: this.tagStatus, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), importance: this.tagImportance, "icon-library": this.tagIconLibrary, "icon-name": this.tagIconName, "icon-description": this.tagIconDescription })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '97943a87bb21b72b52f1900305227d9781d7ba45', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), this.text && __classPrivateFieldGet(this, _Tab_instances, "m", _Tab_renderText).call(this), isIndicator(this.badge) && (h("qds-badge-indicator", { key: 'dab4973edd6ef5ffd9adb7921ceb5312030839e7', status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: 'e0f12eb560604937a4b3aaa2b0edb8f810cc8862', description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'expandable' && (h("qds-icon", { key: 'd5a28c2f63a43b351512aa53dd29ae626ecd5198', class: { 'qds-target-icon': true, 'qds-chevron': this.selected }, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), library: "core", name: "dropdown" }))), __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable' && (h("qds-mini-button", { key: '9f4badb4baa2275d6763de7ed92244a8d1607cfb', name: "close", library: "core", text: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_ariaLabel_get), "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), disabled: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Tab_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computeCloseButtonTabIndex_get) }))));
|
|
200
200
|
}
|
|
201
201
|
get host() { return getElement(this); }
|
|
202
202
|
static get watchers() { return {
|