@quartzds/core 1.0.0-beta.122 → 1.0.0-beta.123
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 +22 -0
- package/components/{p-C0VgKX4J.js → p-B7s906mS.js} +4 -4
- package/components/{p-C0VgKX4J.js.map → p-B7s906mS.js.map} +1 -1
- package/components/{p-DCAlWquR.js → p-BZlKeCFb.js} +4 -4
- package/components/{p-DCAlWquR.js.map → p-BZlKeCFb.js.map} +1 -1
- package/components/{p-io1iVgY1.js → p-BoSYRCNp.js} +3 -3
- package/components/p-BoSYRCNp.js.map +1 -0
- package/components/p-BvRd7jA2.js +102 -0
- package/components/p-BvRd7jA2.js.map +1 -0
- package/components/{p-DgYrfIr_.js → p-C93kOEAe.js} +5 -7
- package/components/p-C93kOEAe.js.map +1 -0
- package/components/{p-oqmnh-8P.js → p-CbY4T0d2.js} +4 -4
- package/components/p-CbY4T0d2.js.map +1 -0
- package/components/{p-DRcxeXWE.js → p-CowZ-pDD.js} +4 -4
- package/components/{p-DRcxeXWE.js.map → p-CowZ-pDD.js.map} +1 -1
- package/components/qds-action-item.js +1 -1
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-breadcrumb-item.js +1 -1
- package/components/qds-button.js +2 -2
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +3 -3
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +2 -2
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +2 -2
- package/components/qds-input.js +2 -2
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +6 -6
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +1 -1
- package/components/qds-menu-item.js +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 +1 -1
- package/components/qds-select.js.map +1 -1
- package/components/qds-switch.js +1 -1
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +3 -3
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +2 -2
- package/components/qds-textarea.js +1 -1
- package/components/qds-textarea.js.map +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.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 +3 -3
- package/dist/cjs/qds-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +1 -1
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +1 -1
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-loader.cjs.entry.js +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +3 -5
- package/dist/cjs/qds-mini-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +1 -1
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +2 -2
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-textarea.cjs.entry.js +1 -1
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +1 -1
- package/dist/cjs/qds-title.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +3 -3
- package/dist/esm/qds-button.entry.js +1 -1
- package/dist/esm/qds-chip.entry.js +1 -1
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +1 -1
- package/dist/esm/qds-input.entry.js +1 -1
- package/dist/esm/qds-list-item.entry.js +1 -1
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-loader.entry.js +1 -1
- package/dist/esm/qds-mini-button.entry.js +3 -5
- package/dist/esm/qds-mini-button.entry.js.map +1 -1
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +1 -1
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-switch.entry.js +1 -1
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +2 -2
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-textarea.entry.js +1 -1
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +1 -1
- package/dist/esm/qds-title.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/hydrate/index.js +21 -23
- package/hydrate/index.mjs +21 -23
- package/package.json +1 -2
- package/components/p-Ck9w5WIb.js +0 -102
- package/components/p-Ck9w5WIb.js.map +0 -1
- package/components/p-DgYrfIr_.js.map +0 -1
- package/components/p-io1iVgY1.js.map +0 -1
- package/components/p-oqmnh-8P.js.map +0 -1
|
@@ -9,7 +9,7 @@ var index = require('./index-DIY7gpXM.js');
|
|
|
9
9
|
var helpers = require('./helpers-Qs3cpKiI.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
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:\"
|
|
12
|
+
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:\"b\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-form-input-text-active);grid-area:b}.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:b;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}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-select.entry.cjs.js","sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.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}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n}\n\n.qds-container,\n.qds-select {\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-form-input-text-placeholder);\n grid-area: select;\n}\n\n.qds-icon {\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-form-input-background-default);\n border-color: var(--qds-theme-form-input-border-default);\n border-radius: var(\n --qds-form-input-border-radius-top-left,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-top-right,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-bottom-right,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-bottom-left,\n var(--qds-form-input-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-form-input-border-width-default)\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n )\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n )\n var(--qds-form-input-border-width-default);\n margin: 0;\n outline: 0;\n padding-block: 0;\n text-overflow: ellipsis;\n\n &:enabled:hover {\n background-color: var(--qds-theme-form-input-background-hover);\n border-color: var(--qds-theme-form-input-border-hover);\n }\n\n &:enabled:active {\n background-color: var(--qds-theme-form-input-background-active);\n color: var(--qds-theme-form-input-text-active);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n\n &[data-status] {\n border-width: var(--qds-form-input-border-width-status)\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-status)\n )\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-status)\n )\n var(--qds-form-input-border-width-status);\n }\n\n &[data-status='success'] {\n border-color: var(--qds-theme-form-input-border-success);\n }\n\n &[data-status='warning'] {\n border-color: var(--qds-theme-form-input-border-warning);\n }\n\n &[data-status='error'],\n :not(:focus):user-invalid {\n border-color: var(--qds-theme-form-input-border-error);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-form-small-text);\n padding-inline: var(--qds-form-input-small-padding-start)\n var(--qds-form-input-small-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) +\n var(--qds-form-input-small-gap-internal) +\n var(--qds-form-input-small-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-small-padding-end) +\n var(--qds-form-input-border-width-default)\n );\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-select {\n font: var(--qds-form-standard-text);\n padding-inline: var(--qds-form-input-standard-padding-start)\n var(--qds-form-input-standard-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) +\n var(--qds-form-input-standard-gap-internal) +\n var(--qds-form-input-standard-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-standard-padding-end) +\n var(--qds-form-input-border-width-default)\n );\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-select {\n font: var(--qds-form-large-text);\n padding-inline: var(--qds-form-input-large-padding-start)\n var(--qds-form-input-large-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) +\n var(--qds-form-input-large-gap-internal) +\n var(--qds-form-input-large-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-large-padding-end) +\n var(--qds-form-input-border-width-default)\n );\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-form-input-border-radius-top-left,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-top-right,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-bottom-right,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-bottom-left,\n var(--qds-form-input-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n\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 pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-form-input-border-width-default) -\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n )\n );\n height: calc(\n 100% + var(--qds-form-input-border-width-default) -\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n )\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\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 State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size, Status } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\nexport type SelectStatus = Exclude<Status, 'info'>\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's status.\n */\n @Prop() public readonly status?: SelectStatus\n\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Prevents the select 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>`][] element to associate the select with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 * The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\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 #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedStatus(): SelectStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\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 #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n }\n\n @Watch('status')\n protected statusChanged(): void {\n this.internals.ariaInvalid = (this.#computedStatus === 'error').toString()\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.statusChanged()\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\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: HTMLSelectElement['setCustomValidity'] = (\n error,\n ) => {\n invariant(this.#select)\n\n this.#select.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["invariant","VALID_STATE","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","inheritAriaAttributes","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-select.entry.cjs.js","sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.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}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n}\n\n.qds-container,\n.qds-select {\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-form-input-text-active);\n grid-area: select;\n}\n\n.qds-icon {\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-form-input-background-default);\n border-color: var(--qds-theme-form-input-border-default);\n border-radius: var(\n --qds-form-input-border-radius-top-left,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-top-right,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-bottom-right,\n var(--qds-form-input-border-radius)\n )\n var(\n --qds-form-input-border-radius-bottom-left,\n var(--qds-form-input-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-form-input-border-width-default)\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n )\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n )\n var(--qds-form-input-border-width-default);\n margin: 0;\n outline: 0;\n padding-block: 0;\n text-overflow: ellipsis;\n\n &:enabled:hover {\n background-color: var(--qds-theme-form-input-background-hover);\n border-color: var(--qds-theme-form-input-border-hover);\n }\n\n &:enabled:active {\n background-color: var(--qds-theme-form-input-background-active);\n color: var(--qds-theme-form-input-text-active);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n\n &[data-status] {\n border-width: var(--qds-form-input-border-width-status)\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-status)\n )\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-status)\n )\n var(--qds-form-input-border-width-status);\n }\n\n &[data-status='success'] {\n border-color: var(--qds-theme-form-input-border-success);\n }\n\n &[data-status='warning'] {\n border-color: var(--qds-theme-form-input-border-warning);\n }\n\n &[data-status='error'],\n :not(:focus):user-invalid {\n border-color: var(--qds-theme-form-input-border-error);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-form-small-text);\n padding-inline: var(--qds-form-input-small-padding-start)\n var(--qds-form-input-small-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) +\n var(--qds-form-input-small-gap-internal) +\n var(--qds-form-input-small-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-small-padding-end) +\n var(--qds-form-input-border-width-default)\n );\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-select {\n font: var(--qds-form-standard-text);\n padding-inline: var(--qds-form-input-standard-padding-start)\n var(--qds-form-input-standard-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) +\n var(--qds-form-input-standard-gap-internal) +\n var(--qds-form-input-standard-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-standard-padding-end) +\n var(--qds-form-input-border-width-default)\n );\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-select {\n font: var(--qds-form-large-text);\n padding-inline: var(--qds-form-input-large-padding-start)\n var(--qds-form-input-large-padding-end);\n\n &:not([multiple]) {\n min-height: var(--qds-form-input-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) +\n var(--qds-form-input-large-gap-internal) +\n var(--qds-form-input-large-padding-end)\n );\n }\n }\n\n &.qds-icon {\n margin-inline-end: calc(\n var(--qds-form-input-large-padding-end) +\n var(--qds-form-input-border-width-default)\n );\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-form-input-border-radius-top-left,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-top-right,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-bottom-right,\n var(--qds-form-input-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-form-input-border-radius-bottom-left,\n var(--qds-form-input-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n\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 pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-form-input-border-width-default) -\n var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n )\n );\n height: calc(\n 100% + var(--qds-form-input-border-width-default) -\n var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n )\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\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 State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size, Status } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\nexport type SelectStatus = Exclude<Status, 'info'>\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's status.\n */\n @Prop() public readonly status?: SelectStatus\n\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Prevents the select 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>`][] element to associate the select with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 * The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\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 #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedStatus(): SelectStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\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 #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n }\n\n @Watch('status')\n protected statusChanged(): void {\n this.internals.ariaInvalid = (this.#computedStatus === 'error').toString()\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.statusChanged()\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\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: HTMLSelectElement['setCustomValidity'] = (\n error,\n ) => {\n invariant(this.#select)\n\n this.#select.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["invariant","VALID_STATE","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","inheritAriaAttributes","h"],"mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,6iLAA6iL;;ACA/jL;AACA;AACA;;;;;;;;;;;;;;;;;;AAiCA,MAAM,UAAU,GAAG,MAAY;IAC7BA,iBAAS,CAAC,KAAK,CAAC;AAClB,CAAC;AACD,MAAM,wBAAwB,GAAiC;AAC7D,IAAA,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,EAAE;AACjB,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,SAAS,EAAE,UAAU;AACrB,IAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,UAAU;CAC9B;MAcY,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;;;;AAYE;;;;;;;AAOG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAU,UAAU;AAuBhD;;;;;;;;;;;;;;;AAeG;;AAEqB,QAAA,IAAI,CAAA,IAAA,GAAsC,IAAI;AAEtE;;;;;;;AAOG;AACqB,QAAA,IAAM,CAAA,MAAA,GAAgC,CAAC;AAmB/D;;;;;;;;;AASG;AACqB,QAAA,IAAO,CAAA,OAAA,GAC7B,wBAAwB;AAgB1B;;;;;;;;AAQG;AAEI,QAAA,IAAa,CAAA,aAAA,GAAuC,EAAE;AAE7D;;;;;;;;AAQG;AAEa,QAAA,IAAe,CAAA,eAAA,GAC7B,wBAAwB;AAE1B;;;;;;AAMG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAe,YAAY;AAEvD;;;;;;AAMG;AAEa,QAAA,IAAiB,CAAA,iBAAA,GAA0C,EAAE;AAE7E;;;;;;;AAOG;AACqB,QAAA,IAAQ,CAAA,QAAA,GAAiCC,oBAAW;AAE5E;;;;;;;AAOG;AAC6B,QAAA,IAAK,CAAA,KAAA,GAAI,EAAE;AAE3C;;;;;;AAMG;AACqB,QAAA,IAAY,CAAA,YAAA,GAAqC,KAAK;AAiC9E,QAAA,2BAAA,CAAA,GAAA,CAAA,IAAA,EAAmC,EAAE,CAAA;QAErC,cAA2B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAiLpB,QAAA,IAAa,CAAA,aAAA,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;AAEzB,QAAA,IAAc,CAAA,cAAA,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;AAE1B,QAAA,IAAA,CAAA,iBAAiB,GAA2C,CACjE,KAAK,KACH;YACFD,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,iBAAiB,CAAC,KAAK,CAAC;AACrC,YAAA,IAAI,KAAK;AACP,gBAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAACE,2BAAkB,EAAE,KAAK,EAAE,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;;AAChE,gBAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAACC,uBAAc,CAAC;AACjD,SAAC;QAEM,IAAA,CAAA,OAAO,GAA6B,CAAC,OAAO,EAAE,MAAM,KAAI;YAC7DH,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,sBAAA,CAAA,IAAI,sBAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC;AACnC,SAAC;AAEM,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAa,KAAU;YAC1CA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,KAAK,CAAC;AAC5B,SAAC;AAEM,QAAA,IAAA,CAAA,IAAI,GAA8B,CAAC,KAAK,KAAI;YACjDA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,OAAO,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,SAAC;AAEM,QAAA,IAAA,CAAA,SAAS,GAAmC,CAAC,IAAI,KAAI;YAC1DA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,OAAO,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,SAAS,CAAC,IAAI,CAAC;AACrC,SAAC;QAEQ,WAAO,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAA0B,KAAU;YACnD,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAW,MAAM,EAAA,GAAA,CAAA;AACvB,SAAC,CAAA;QAEQ,cAAU,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAACI,gCAAwB,CAAC,KAAK,CAAC,CAAC;AACxD,SAAC,CAAA;AAEQ,QAAA,gBAAA,CAAA,GAAA,CAAA,IAAA,EAAY,MAAW;AAC9B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AAC3B,SAAC,CAAA;QAEQ,eAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAACA,gCAAwB,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAA;QAEQ,eAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC9CJ,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,YAAA,IAAI,CAAC,KAAK,GAAG,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,KAAK;YAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAACK,gCAAwB,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAA;QAEQ,oBAAgB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAY,KAAU;YAC9CL,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AACvB,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK;AAC/B,YAAAA,iBAAS,CAAC,aAAa,YAAY,eAAe,CAAC;AAEnD,YAAA,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,eAAe,CAC1B,GAAG,aAAa,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CACrE;AACH,SAAC,CAAA;AAKF;AApMW,IAAA,OAAO,CAAC,KAAiB,EAAA;QACjC,IAAI,sBAAA,CAAA,IAAI,EAAkB,iBAAA,EAAA,GAAA,EAAA,4BAAA,CAAA;YAAE,KAAK,CAAC,wBAAwB,EAAE;;IAIpD,eAAe,GAAA;QACvB,IAAI,sBAAA,CAAA,IAAI,EAAkB,iBAAA,EAAA,GAAA,EAAA,4BAAA,CAAA;;AAExB,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;AAC9B,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,sBAAA,CAAA,IAAI,EAAe,iBAAA,EAAA,GAAA,EAAA,yBAAA,CAAA,CAAC;;IAI7C,oBAAoB,GAAA;QAC5BA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;AAEvB,QAAA,sBAAA,CAAA,IAAI,sBAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;AAIvC,IAAA,eAAe,CAAC,QAAgB,EAAA;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;AACjD,QAAA,IAAI,CAAC,QAAQ;AACX,YAAA,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW;;IAKlE,iBAAiB,GAAA;QACzBA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;QAEvB,sBAAA,CAAA,IAAI,sBAAQ,CAAC,KAAK,GAAG,sBAAA,CAAA,IAAI,oDAAe;AACxC,QAAA,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK;AAE9C,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC,QAAQ;AACvC,QAAA,IAAI,KAAK;AACP,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAACG,uBAAc,EAAE,SAAS,EAAE,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;;AAEnE,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,sBAAA,CAAA,IAAI,sBAAQ,CAAC,QAAQ,EACrB,sBAAA,CAAA,IAAI,sBAAQ,CAAC,iBAAiB,EAC9B,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CACb;;IAIK,aAAa,GAAA;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,0BAAA,CAAgB,KAAK,OAAO,EAAE,QAAQ,EAAE;;IAGrE,iBAAiB,GAAA;QACtB,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACrD,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;QACrE,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;QAC7D,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC;AAED,QAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAc,CAAlB,IAAA,CAAA,IAAI,EAAe,MAAM,EAAE,MAAM,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,wBAAA,CAAc,CAAC;AACpD,QAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAc,CAAlB,IAAA,CAAA,IAAI,EAAe,SAAS,EAAE,MAAM,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,2BAAA,CAAiB,CAAC;AAC1D,QAAA,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,uBAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,2BAAA,CAAiB,CAAC,MAAM,CAAC;AAChE,QAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,oBAAA,CAAc,CAAlB,IAAA,CAAA,IAAI,EAAe,iBAAiB,EAAE,MAAM,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,mCAAA,CAAyB,CAAC;AAE1E,QAAA,sBAAA,CAAA,IAAI,+BAAwBG,6BAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,GAAA,CAAA;AAC5D,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC;QAC/D,IAAI,CAAC,aAAa,EAAE;;IAGf,gBAAgB,GAAA;QACrBN,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;QAEvB,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,aAAa;;IAG1C,MAAM,GAAA;QACX,QACEO,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,cAAc,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;aACvC,EACU,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,EAAA,EAE7BA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,YAAY,EAAE,IAAI,CAAC,YAAY;;YAE/B,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAC9B,KAAK,EAAC,YAAY,eACP,sBAAA,CAAA,IAAI,mDAAc,EAChB,aAAA,EAAA,sBAAA,CAAA,IAAI,EAAgB,iBAAA,EAAA,GAAA,EAAA,0BAAA,CAAA,EACjC,QAAQ,EAAE,sBAAA,CAAA,IAAI,EAAkB,iBAAA,EAAA,GAAA,EAAA,4BAAA,CAAA,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,EACpB,QAAQ,EAAE,sBAAA,CAAA,IAAI,EAAU,gBAAA,EAAA,GAAA,CAAA,EACxB,OAAO,EAAE,sBAAA,CAAA,IAAI,EAAS,eAAA,EAAA,GAAA,CAAA,EACtB,OAAO,EAAE,sBAAA,CAAA,IAAI,EAAS,eAAA,EAAA,GAAA,CAAA,EACtB,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAK,WAAA,EAAA,GAAA,CAAA,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,sBAAA,CAAA,IAAI,EAAkB,iBAAA,EAAA,GAAA,EAAA,4BAAA,CAAA,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,KAExD,sBAAA,CAAA,IAAI,mCAAqB,EAC7B,CAAA,EACD,IAAI,CAAC,QAAQ,KAAK,IAAI,KACrBA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAAA,WAAA,EACL,uBAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,EAAA,wBAAA,CAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,UAAU,EAAA,CACf,CACH,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,sBAAA,CAAA,IAAI,4BAAc,EAAI,CAAA,EAC1CA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAG,CAAA,CAC1B;;;;;;;;;;;;;;;AA1KR,IAAA,QACE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO;AAElD,CAAC,EAAA,2BAAA,GAAA,SAAA,2BAAA,GAAA;IAGCP,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;IAEvB,OAAO,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,OAAO;AAC7B,CAAC,EAAA,0BAAA,GAAA,SAAA,0BAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,MAAM;AACjB,QAAA,KAAK,OAAO;AACZ,QAAA,KAAK,SAAS;QACd,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,MAAM;;QAEpB,SAAS;AACP,YAAA,OAAO,SAAS;;;AAGtB,CAAC,EAAA,wBAAA,GAAA,SAAA,wBAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,UAAU;AACf,QAAA,KAAK,OAAO;QACZ,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,wBAAA,GAAA,SAAA,wBAAA,GAAA;IAGCA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;IAEvB,OAAO,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,IAAI;AAC1B,CAAC,EAAA,yBAAA,GAAA,SAAA,yBAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;AACzB,CAAC,EAAA,mCAAA,GAAA,SAAA,mCAAA,GAAA;IAGCA,iBAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAQ,CAAC;IAEvB,OAAO,sBAAA,CAAA,IAAI,EAAQ,cAAA,EAAA,GAAA,CAAA,CAAC,eAAe;AACrC,CAAC,EAAA,oBAAA,GAAA,SAAA,oBAAA,CAoMa,CAAc,EAAE,GAAkB,EAAA;AAC9C,IAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AAChE,CAAC;;;;;"}
|
|
@@ -9,7 +9,7 @@ var index = require('./index-DIY7gpXM.js');
|
|
|
9
9
|
var helpers = require('./helpers-Qs3cpKiI.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
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-
|
|
12
|
+
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)}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-switch.entry.cjs.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-input-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-input-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":["VALID_STATE","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-switch.entry.cjs.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":["VALID_STATE","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","h"],"mappings":"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"}
|
|
@@ -188,7 +188,7 @@ const Tab = class {
|
|
|
188
188
|
'qds-closable-wrapper': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
189
189
|
'qds-selected': this.selected,
|
|
190
190
|
[`qds-indicator-${this.indicatorPosition}`]: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
191
|
-
}, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, index.h(Tag, { key: '
|
|
191
|
+
}, "data-size": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedImportance_get) }, index.h(Tag, { key: '02722d2d5e2460ccdc98371f35d8461ad8e31e4c', ref: __classPrivateFieldGet(this, _Tab_tabRef, "f"), disabled: isLink ? undefined : this.disabled, onBlur: __classPrivateFieldGet(this, _Tab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Tab_onFocus, "f"), class: {
|
|
192
192
|
'qds-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) !== 'closable',
|
|
193
193
|
'qds-closable-tab': __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedAction_get) === 'closable',
|
|
194
194
|
'qds-selected': this.selected,
|
|
@@ -198,7 +198,7 @@ const Tab = class {
|
|
|
198
198
|
? 'true'
|
|
199
199
|
: 'false'
|
|
200
200
|
: 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 !== '') ||
|
|
201
|
-
(this.tagIconName !== undefined && this.tagIconName !== '')) && (index.h("qds-tag", { key: '
|
|
201
|
+
(this.tagIconName !== undefined && this.tagIconName !== '')) && (index.h("qds-tag", { key: 'a09730df3cc6497e88a6d17de8535eaf74bcd6f8', 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 !== '' && (index.h("qds-icon", { key: '9e6ae551c8cdda86e5422ffdad736a7f5176809a', "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) && (index.h("qds-badge-indicator", { key: '46110fa313decfaaf6231917c77ffca56ec980a8', status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tab_instances, "a", _Tab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (index.h("qds-badge-counter", { key: '3a709e7b62089ff8a3fa2287d1e22caa1e42c900', 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' && (index.h("qds-icon", { key: 'e63e61abefbd804a2e78dfd59615521b2d97031c', 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' && (index.h("qds-mini-button", { key: '9cd5449bdb62322945325bb9ba698b4e0f1decdd', 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) }))));
|
|
202
202
|
}
|
|
203
203
|
get host() { return index.getElement(this); }
|
|
204
204
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-tab.entry.cjs.js","sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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 line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n}\n\n.qds-target-icon {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n flex-shrink: 0;\n}\n\n.qds-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-small-icon-size);\n width: var(--qds-nav-element-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\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-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-standard-icon-size);\n width: var(--qds-nav-element-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\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-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-large-icon-size);\n width: var(--qds-nav-element-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected {\n &::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\n }\n }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n &.qds-selected {\n &::after {\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n display: block;\n position: absolute;\n }\n\n &.qds-indicator-inline-end::after,\n &.qds-indicator-inline-start::after {\n width: var(--qds-signature-line-connection-width);\n height: 100%;\n }\n\n &.qds-indicator-inline-end::after {\n inset-inline-end: 0;\n }\n\n &.qds-indicator-inline-start::after {\n inset-inline-start: 0;\n }\n\n &.qds-indicator-block-end::after,\n &.qds-indicator-block-start::after {\n width: 100%;\n height: var(--qds-signature-line-connection-width);\n }\n\n &.qds-indicator-block-end::after {\n bottom: 0;\n }\n\n &.qds-indicator-block-start::after {\n top: 0;\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n.qds-tab {\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n }\n}\n\n.qds-closable-tab {\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n text-align: initial;\n\n &:any-link {\n text-decoration: none;\n }\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes, resolveTarget } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\nimport type { TabbarImportance, TabbarSize } from '../tabbar/tabbar'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'> | undefined\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n | 'block-end'\n | 'block-start'\n | 'inline-end'\n | 'inline-start'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n value === '' || value === true\n\nlet autoIncrementingId = 1\n\n/**\n * <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n *\n * @see https://quartz.se.com/build/components/tab\n */\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\n\n /**\n * Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n */\n @Prop() public readonly badge?: number | string | true\n\n /**\n * The tab's counter importance.\n */\n @Prop()\n public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n 'standard'\n\n /**\n * The indicator or counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /**\n * Prevents the tab from being interacted with: it cannot be\n * selected or focused.\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\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 tab's importance.\n */\n @Prop() public readonly importance?: TabImportance = 'standard'\n\n /**\n * The tab's indicator position.\n */\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-start'\n\n /**\n * The tab panel element associated with this tab. The `panel` specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][]\n * - A function returning a reference to an [`Element`][] or a CSS selector\n * string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n */\n @Prop() public readonly panel!: Element | string | (() => Element | string)\n\n /**\n * The tag icon's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly tagIconDescription?: string\n\n /**\n * The name of the tab's tag icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly tagIconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /**\n * The tab's tag importance.\n */\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /**\n * The tab's tag size.\n */\n @Prop() public readonly tagSize?: Size = 'small'\n\n /**\n * The tab's tag status.\n */\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /**\n * The tab's tag text.\n */\n @Prop() public readonly tagText?: string\n\n /**\n * Whether or not the tab is selected.\n */\n @Prop() public selected = false\n\n /**\n * The tab's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * When set, the underlying tab will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * This property has no effect if the tab has an `action`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Emitted when the tab is closed.\n */\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the tab loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the tab 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 @State() private tabIndex?: number\n\n @State() private isIndicatorOnTop = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action | undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n if (this.#parentSize !== undefined) return this.#parentSize\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 #computedImportance(): TabImportance {\n if (this.#parentImportance !== undefined) return this.#parentImportance\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentImportance(): TabbarImportance {\n return this.host.closest('qds-tabbar')?.importance ?? undefined\n }\n\n get #parentSize(): TabbarSize {\n return this.host.closest('qds-tabbar')?.size ?? undefined\n }\n\n get #parentLayer(): string {\n return this.host.closest('qds-tabbar')?.layer ?? 'main'\n }\n\n get #parentLevel(): string {\n return this.host.closest('qds-tabbar')?.level ?? 'root'\n }\n\n get #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number | undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : this.tabIndex\n }\n return -1\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel)\n if (!(panel instanceof globalThis.Element)) return\n this.#panel = panel\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n if (this.#panel.getAttribute('aria-labelledby') === null)\n this.#panel.setAttribute('aria-labelledby', this.host.id)\n this.#panel.setAttribute(\n 'tabindex',\n this.#panel.getAttribute('tabindex') ?? '0',\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id ||= `qds-tab-${autoIncrementingId}`\n autoIncrementingId += 1\n\n this.#defineTab()\n }\n\n public componentWillRender(): void {\n const isPanelRoot =\n this.#parentLayer === 'panel' && this.#parentLevel === 'root'\n const isMainSubsection =\n this.#parentLayer === 'main' && this.#parentLevel === 'subsection'\n\n this.isIndicatorOnTop = isPanelRoot || isMainSubsection\n }\n\n public componentDidLoad(): void {\n this.panelChanged()\n }\n\n public disconnectedCallback(): void {\n if (!this.#panel) return\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.removeAttribute('aria-controls')\n\n if (this.#panel.role === 'tabpanel')\n // eslint-disable-next-line unicorn/no-null\n this.#panel.role = null\n if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n this.#panel.removeAttribute('aria-labelledby')\n this.#panel.removeAttribute('tabindex')\n }\n\n public render() {\n const isLink = this.href !== undefined && this.#computedAction === undefined\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={\n !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n }\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') ||\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabIndex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #defineTab = (): void => {\n if (this.#computedAction === 'closable') {\n this.#defineGetter('tab', () => this.#tab)\n } else {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.host)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["pickFocusEventAttributes","resolveTarget","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-tab.entry.cjs.js","sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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 line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n}\n\n.qds-target-icon {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n flex-shrink: 0;\n}\n\n.qds-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-small-icon-size);\n width: var(--qds-nav-element-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\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-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-standard-icon-size);\n width: var(--qds-nav-element-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\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-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\n\n & > .qds-icon {\n height: var(--qds-nav-element-large-icon-size);\n width: var(--qds-nav-element-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected {\n &::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\n }\n }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n &.qds-selected {\n &::after {\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n display: block;\n position: absolute;\n }\n\n &.qds-indicator-inline-end::after,\n &.qds-indicator-inline-start::after {\n width: var(--qds-signature-line-connection-width);\n height: 100%;\n }\n\n &.qds-indicator-inline-end::after {\n inset-inline-end: 0;\n }\n\n &.qds-indicator-inline-start::after {\n inset-inline-start: 0;\n }\n\n &.qds-indicator-block-end::after,\n &.qds-indicator-block-start::after {\n width: 100%;\n height: var(--qds-signature-line-connection-width);\n }\n\n &.qds-indicator-block-end::after {\n bottom: 0;\n }\n\n &.qds-indicator-block-start::after {\n top: 0;\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n.qds-tab {\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n }\n}\n\n.qds-closable-tab {\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n text-align: initial;\n\n &:any-link {\n text-decoration: none;\n }\n}\n\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes, resolveTarget } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\nimport type { TabbarImportance, TabbarSize } from '../tabbar/tabbar'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'> | undefined\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n | 'block-end'\n | 'block-start'\n | 'inline-end'\n | 'inline-start'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n value === '' || value === true\n\nlet autoIncrementingId = 1\n\n/**\n * <qds-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n *\n * @see https://quartz.se.com/build/components/tab\n */\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\n\n /**\n * Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n */\n @Prop() public readonly badge?: number | string | true\n\n /**\n * The tab's counter importance.\n */\n @Prop()\n public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n 'standard'\n\n /**\n * The indicator or counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /**\n * Prevents the tab from being interacted with: it cannot be\n * selected or focused.\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\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 tab's importance.\n */\n @Prop() public readonly importance?: TabImportance = 'standard'\n\n /**\n * The tab's indicator position.\n */\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-start'\n\n /**\n * The tab panel element associated with this tab. The `panel` specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][]\n * - A function returning a reference to an [`Element`][] or a CSS selector\n * string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n */\n @Prop() public readonly panel!: Element | string | (() => Element | string)\n\n /**\n * The tag icon's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly tagIconDescription?: string\n\n /**\n * The name of the tab's tag icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly tagIconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /**\n * The tab's tag importance.\n */\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /**\n * The tab's tag size.\n */\n @Prop() public readonly tagSize?: Size = 'small'\n\n /**\n * The tab's tag status.\n */\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /**\n * The tab's tag text.\n */\n @Prop() public readonly tagText?: string\n\n /**\n * Whether or not the tab is selected.\n */\n @Prop() public selected = false\n\n /**\n * The tab's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * When set, the underlying tab will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * This property has no effect if the tab has an `action`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Emitted when the tab is closed.\n */\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the tab loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the tab 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 @State() private tabIndex?: number\n\n @State() private isIndicatorOnTop = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action | undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n if (this.#parentSize !== undefined) return this.#parentSize\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 #computedImportance(): TabImportance {\n if (this.#parentImportance !== undefined) return this.#parentImportance\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentImportance(): TabbarImportance {\n return this.host.closest('qds-tabbar')?.importance ?? undefined\n }\n\n get #parentSize(): TabbarSize {\n return this.host.closest('qds-tabbar')?.size ?? undefined\n }\n\n get #parentLayer(): string {\n return this.host.closest('qds-tabbar')?.layer ?? 'main'\n }\n\n get #parentLevel(): string {\n return this.host.closest('qds-tabbar')?.level ?? 'root'\n }\n\n get #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number | undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : this.tabIndex\n }\n return -1\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel)\n if (!(panel instanceof globalThis.Element)) return\n this.#panel = panel\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n if (this.#panel.getAttribute('aria-labelledby') === null)\n this.#panel.setAttribute('aria-labelledby', this.host.id)\n this.#panel.setAttribute(\n 'tabindex',\n this.#panel.getAttribute('tabindex') ?? '0',\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id ||= `qds-tab-${autoIncrementingId}`\n autoIncrementingId += 1\n\n this.#defineTab()\n }\n\n public componentWillRender(): void {\n const isPanelRoot =\n this.#parentLayer === 'panel' && this.#parentLevel === 'root'\n const isMainSubsection =\n this.#parentLayer === 'main' && this.#parentLevel === 'subsection'\n\n this.isIndicatorOnTop = isPanelRoot || isMainSubsection\n }\n\n public componentDidLoad(): void {\n this.panelChanged()\n }\n\n public disconnectedCallback(): void {\n if (!this.#panel) return\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.removeAttribute('aria-controls')\n\n if (this.#panel.role === 'tabpanel')\n // eslint-disable-next-line unicorn/no-null\n this.#panel.role = null\n if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n this.#panel.removeAttribute('aria-labelledby')\n this.#panel.removeAttribute('tabindex')\n }\n\n public render() {\n const isLink = this.href !== undefined && this.#computedAction === undefined\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={\n !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n }\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') ||\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabIndex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #defineTab = (): void => {\n if (this.#computedAction === 'closable') {\n this.#defineGetter('tab', () => this.#tab)\n } else {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.host)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["pickFocusEventAttributes","resolveTarget","h"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ var index = require('./index-DIY7gpXM.js');
|
|
|
9
9
|
var helpers = require('./helpers-Qs3cpKiI.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
const textareaCss = ":host([hidden]){display:none!important}:host{display:inline-block;resize:both}slot{display:none}.qds-textarea{background-color:var(--qds-theme-form-input-background-active);border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-form-input-border-radius);box-sizing:border-box;color:var(--qds-theme-
|
|
12
|
+
const textareaCss = ":host([hidden]){display:none!important}:host{display:inline-block;resize:both}slot{display:none}.qds-textarea{background-color:var(--qds-theme-form-input-background-active);border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-form-input-border-radius);box-sizing:border-box;color:var(--qds-theme-form-input-text-active);height:100%;padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%}.qds-textarea:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-textarea:disabled{background-color:var(--qds-theme-form-input-background-default);opacity:var(--qds-theme-disabled);pointer-events:none}.qds-textarea:read-only{background-color:var(--qds-theme-form-input-background-read-only);border-color:var(--qds-theme-form-input-border-disabled)}.qds-textarea: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}.qds-textarea:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-textarea:not(:focus):user-invalid{border-color:var(--qds-theme-form-input-border-error)}.qds-textarea[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-textarea[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-textarea[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-textarea[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}[data-size=small]{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|