@quartzds/core 1.0.0-beta.120 → 1.0.0-beta.121
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 +24 -0
- package/components/index.js +1 -1
- package/components/{p-eFhV8w2l.js → p-5dwtV5iH.js} +4 -4
- package/components/{p-eFhV8w2l.js.map → p-5dwtV5iH.js.map} +1 -1
- package/components/{p-Dsc0-aXK.js → p-B2ZVUvk9.js} +5 -5
- package/components/{p-Dsc0-aXK.js.map → p-B2ZVUvk9.js.map} +1 -1
- package/components/{p-5RFBIepu.js → p-C1c4JVlg.js} +4 -4
- package/components/{p-5RFBIepu.js.map → p-C1c4JVlg.js.map} +1 -1
- package/components/{p-CXP6q9Mr.js → p-CURs27Ur.js} +11 -6
- package/components/p-CURs27Ur.js.map +1 -0
- package/components/{p-DwxIJEUj.js → p-CjVnGhSO.js} +3 -3
- package/components/{p-DwxIJEUj.js.map → p-CjVnGhSO.js.map} +1 -1
- package/components/{p-DeRqCYmp.js → p-CkUTS1aU.js} +6 -6
- package/components/{p-DeRqCYmp.js.map → p-CkUTS1aU.js.map} +1 -1
- package/components/{p-CFVg7I9T.js → p-CkyaV9az.js} +5 -5
- package/components/{p-CFVg7I9T.js.map → p-CkyaV9az.js.map} +1 -1
- package/components/{p-B03FWheS.js → p-D82sb4oJ.js} +4 -4
- package/components/{p-B03FWheS.js.map → p-D82sb4oJ.js.map} +1 -1
- package/components/{p-Bnc7Puxx.js → p-D9pW936J.js} +10 -10
- package/components/{p-Bnc7Puxx.js.map → p-D9pW936J.js.map} +1 -1
- package/components/{p-BkBJDD6Y.js → p-DNHI4C-W.js} +6 -6
- package/components/{p-BkBJDD6Y.js.map → p-DNHI4C-W.js.map} +1 -1
- package/components/{p-DnZdwX0l.js → p-DR79BVX5.js} +6 -6
- package/components/{p-DnZdwX0l.js.map → p-DR79BVX5.js.map} +1 -1
- package/components/{p-BkgfW_tl.js → p-DtxwXYGb.js} +5 -5
- package/components/p-DtxwXYGb.js.map +1 -0
- package/components/{p-CRVPDKfO.js → p-laE-pGH7.js} +6 -6
- package/components/{p-CRVPDKfO.js.map → p-laE-pGH7.js.map} +1 -1
- package/components/qds-action-item.js +4 -4
- package/components/qds-action-item.js.map +1 -1
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-breadcrumb-item.js +4 -4
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +3 -3
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +5 -5
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +6 -6
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +2 -2
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +5 -5
- package/components/qds-icon-tab.js.map +1 -1
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +4 -4
- package/components/qds-input.js +42 -15
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +13 -13
- package/components/qds-loader.js +2 -2
- package/components/qds-menu-item.js +6 -6
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +2 -2
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +27 -9
- package/components/qds-select.js.map +1 -1
- package/components/qds-standalone-link.js +4 -4
- package/components/qds-switch.js +5 -5
- package/components/qds-tab.js +8 -8
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +9 -9
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +4 -4
- 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/{helpers-BIL8yXqA.js → helpers-Qs3cpKiI.js} +11 -6
- package/dist/cjs/{helpers-BIL8yXqA.js.map → helpers-Qs3cpKiI.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +2 -2
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +6 -6
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +2 -2
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +2 -2
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +3 -3
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +2 -2
- package/dist/cjs/qds-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/qds-form-message.cjs.entry.js +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +2 -2
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +3 -3
- package/dist/cjs/qds-icon.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-input.cjs.entry.js +39 -13
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +3 -3
- package/dist/cjs/qds-list-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-loader.cjs.entry.js +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-mini-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/qds-select.cjs.entry.js +23 -7
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-switch.cjs.entry.js +4 -4
- package/dist/cjs/qds-tab.cjs.entry.js +5 -5
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +5 -5
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag.cjs.entry.js +3 -3
- package/dist/cjs/qds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +95 -3
- package/dist/docs.json +85 -2
- package/dist/esm/{helpers-BgaJNF9u.js → helpers-eFD8hV6J.js} +11 -6
- package/dist/esm/{helpers-BgaJNF9u.js.map → helpers-eFD8hV6J.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +2 -2
- package/dist/esm/qds-action-item.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +6 -6
- package/dist/esm/qds-breadcrumb-item.entry.js +2 -2
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +1 -1
- package/dist/esm/qds-chip.entry.js +2 -2
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +3 -3
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +2 -2
- package/dist/esm/qds-dropdown.entry.js +2 -2
- package/dist/esm/qds-form-message.entry.js +1 -1
- package/dist/esm/qds-icon-tab.entry.js +2 -2
- package/dist/esm/qds-icon-tab.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +3 -3
- package/dist/esm/qds-icon.entry.js.map +1 -1
- package/dist/esm/qds-inline-link.entry.js +3 -3
- package/dist/esm/qds-input.entry.js +39 -13
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +3 -3
- package/dist/esm/qds-list-item.entry.js +4 -4
- package/dist/esm/qds-loader.entry.js +1 -1
- package/dist/esm/qds-menu-item.entry.js +3 -3
- package/dist/esm/qds-mini-button.entry.js +2 -2
- package/dist/esm/qds-progress-bar.entry.js +2 -2
- package/dist/esm/qds-select.entry.js +23 -7
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +3 -3
- package/dist/esm/qds-switch.entry.js +4 -4
- package/dist/esm/qds-tab.entry.js +5 -5
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +5 -5
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag.entry.js +3 -3
- package/dist/esm/qds-textarea.entry.js +4 -4
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/input/input.d.ts +10 -0
- package/dist/types/components/select/select.d.ts +7 -1
- package/dist/types/components.d.ts +22 -4
- package/dist/vscode.html-custom-data.json +20 -1
- package/hydrate/index.js +127 -78
- package/hydrate/index.mjs +127 -78
- package/package.json +1 -1
- package/components/p-BkgfW_tl.js.map +0 -1
- package/components/p-CXP6q9Mr.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-DeRqCYmp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.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: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-titles,\n.qds-title {\n hyphens: inherit;\n}\n\n.qds-subtitle,\n.qds-kicker {\n hyphens: initial;\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-standard-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { AttachInternals, Component, h, Prop } from '@stencil/core'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n | 'web-main-section-display'\n | 'web-main-section-hero'\n | 'web-main-section-promo'\n | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The alignment of the title.\n */\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n /**\n * The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'group'\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n role=\"none\"\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-CkUTS1aU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.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: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-titles,\n.qds-title {\n hyphens: inherit;\n}\n\n.qds-subtitle,\n.qds-kicker {\n hyphens: initial;\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-standard-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { AttachInternals, Component, h, Prop } from '@stencil/core'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n | 'web-main-section-display'\n | 'web-main-section-hero'\n | 'web-main-section-promo'\n | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The alignment of the title.\n */\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n /**\n * The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'group'\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n role=\"none\"\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-D2489VzR.js';
|
|
7
|
-
import { p as pickFocusEventAttributes } from './p-
|
|
7
|
+
import { p as pickFocusEventAttributes } from './p-CURs27Ur.js';
|
|
8
8
|
import { d as defineCustomElement$4 } from './p-CDRwHAIT.js';
|
|
9
9
|
import { d as defineCustomElement$3 } from './p-U2Q0vF-d.js';
|
|
10
|
-
import { d as defineCustomElement$2 } from './p-
|
|
11
|
-
import { d as defineCustomElement$1 } from './p-
|
|
10
|
+
import { d as defineCustomElement$2 } from './p-DtxwXYGb.js';
|
|
11
|
+
import { d as defineCustomElement$1 } from './p-D82sb4oJ.js';
|
|
12
12
|
|
|
13
13
|
const iconButtonCss = ":host{display:block;outline:none}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:a;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width));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-control-border-width) - var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-container{display:grid;grid-template-areas:\"a\"}.qds-icon-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n );box-sizing:border-box;color:var(--qds-theme-control-text-standard);cursor:pointer;display:flex;grid-area:a;justify-content:center;line-height:normal;min-width:0;outline:none;padding-inline:0;position:relative;-webkit-user-select:none;user-select:none}.qds-icon-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-icon-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}[data-size=small]{min-height:var(--qds-control-small-height);width:var(--qds-control-small-height)}.qds-icon[data-size=small]{min-height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=standard]{min-height:var(--qds-control-standard-height);width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{min-height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=large]{min-height:var(--qds-control-large-height);width:var(--qds-control-large-height)}.qds-icon[data-size=large]{min-height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=hero]{border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n ) var(\n --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n );min-height:var(--qds-control-hero-height);width:var(--qds-control-hero-height)}.qds-icon[data-size=hero]{min-height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{color:var(--qds-theme-control-text-standard)}[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border:none;color:var(--qds-theme-feedback-action-destructive-default)}[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}";
|
|
14
14
|
|
|
@@ -264,6 +264,6 @@ function defineCustomElement() {
|
|
|
264
264
|
}
|
|
265
265
|
|
|
266
266
|
export { IconButton as I, defineCustomElement as d };
|
|
267
|
-
//# sourceMappingURL=p-
|
|
267
|
+
//# sourceMappingURL=p-CkyaV9az.js.map
|
|
268
268
|
|
|
269
|
-
//# sourceMappingURL=p-
|
|
269
|
+
//# sourceMappingURL=p-CkyaV9az.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-CFVg7I9T.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.css?tag=qds-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host {\n display: block;\n outline: none;\n}\n\n.qds-focus-ring {\n /* Support control groups where each corner needs to be individually adjusted depending on where these components are placed in the control group (start, middle, end) */\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: icon-button;\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-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) - var(--qds-control-border-width)\n );\n}\n\n:host(:focus-visible) .qds-focus-ring {\n visibility: visible;\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'icon-button';\n}\n\n.qds-icon-button {\n display: flex;\n position: relative;\n\n /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n min-width: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n grid-area: icon-button;\n outline: none;\n border: none;\n appearance: none;\n user-select: none;\n cursor: pointer;\n box-sizing: border-box;\n background-color: initial;\n color: var(--qds-theme-control-text-standard);\n padding-inline: 0;\n line-height: normal;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n min-height: var(--qds-control-small-height);\n width: var(--qds-control-small-height);\n\n &.qds-icon {\n min-height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n min-height: var(--qds-control-standard-height);\n width: var(--qds-control-standard-height);\n\n &.qds-icon {\n min-height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n min-height: var(--qds-control-large-height);\n width: var(--qds-control-large-height);\n\n &.qds-icon {\n min-height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='hero'] {\n min-height: var(--qds-control-hero-height);\n width: var(--qds-control-hero-height);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n );\n\n &.qds-icon {\n min-height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\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[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size, Target } from '../shared'\n\nexport type IconButtonSize = Size | 'hero'\nexport type IconButtonImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\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\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n event.preventDefault()\n}\n/**\n * The `<qds-icon-button>` is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/icon-button\n */\n@Component({\n tag: 'qds-icon-button',\n formAssociated: true,\n styleUrl: 'icon-button.css',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n /**\n * Prevents the icon button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The icon button's size.\n */\n @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n /**\n * The icon button's importance.\n */\n @Prop() public readonly importance?: IconButtonImportance = 'standard'\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 * @webnative\n */\n @Prop() public readonly badge?: number | string | true\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 * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string = 'noopener'\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The icon button's accessible name.\n */\n @Prop() public readonly text?: string\n\n /**\n * Emitted when the icon button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the icon button 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 @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #button?: HTMLAnchorElement | HTMLButtonElement\n\n #tooltip?: HTMLQdsTooltipElement\n\n get #computedSize(): IconButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): IconButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n get #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('href')\n protected hrefChanged(): void {\n this.internals.role = this.href === undefined ? 'button' : 'link'\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('text')\n protected textChanged(): void {\n this.#updateAriaLabel()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('blur')\n protected async onBlur(event: FocusEvent): Promise<void> {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.close()\n }\n }\n\n @Listen('focus')\n protected async onFocus(event: FocusEvent): Promise<void> {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.show()\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n if (this.#button instanceof HTMLAnchorElement) {\n this.#button.click()\n } else this.host.click()\n }\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n public componentWillLoad(): void {\n this.hrefChanged()\n this.textChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.disabledChanged()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n return (\n <div class=\"qds-container\" aria-hidden=\"true\">\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={{\n 'qds-icon-button': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n href={Tag === 'a' ? this.href : undefined}\n target={Tag === 'a' ? this.target : undefined}\n rel={Tag === 'a' ? this.rel : undefined}\n ref={this.#ref}\n disabled={Tag === 'a' ? undefined : this.#computedDisabled}\n download={Tag === 'a' ? this.download : undefined}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n onKeyDown={preventDefault}\n onKeyUp={preventDefault}\n onKeyPress={preventDefault}\n tabIndex={-1}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-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 class=\"qds-indicator\"\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n </Tag>\n <div class=\"qds-focus-ring\" data-size={this.#computedSize} />\n {this.#hasText && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n #updateAriaLabel(): void {\n if (this.badge !== undefined && this.badgeDescription !== undefined) {\n this.internals.ariaLabel = `${this.text} ${\n isIndicator(this.badge) ? '' : this.badge\n } ${this.badgeDescription}`\n return\n }\n\n if (\n this.target !== undefined &&\n this.target === '_blank' &&\n this.href !== undefined\n ) {\n this.internals.ariaLabel = `${this.text} Opens in a new tab`\n return\n }\n this.internals.ariaLabel = this.text ?? ''\n }\n\n readonly #ref = (button?: HTMLAnchorElement | HTMLButtonElement): void => {\n this.#button = button\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip) {\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n this.#tooltip = tooltip\n }\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-CkyaV9az.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.css?tag=qds-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host {\n display: block;\n outline: none;\n}\n\n.qds-focus-ring {\n /* Support control groups where each corner needs to be individually adjusted depending on where these components are placed in the control group (start, middle, end) */\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: icon-button;\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-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) - var(--qds-control-border-width)\n );\n}\n\n:host(:focus-visible) .qds-focus-ring {\n visibility: visible;\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'icon-button';\n}\n\n.qds-icon-button {\n display: flex;\n position: relative;\n\n /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n min-width: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n grid-area: icon-button;\n outline: none;\n border: none;\n appearance: none;\n user-select: none;\n cursor: pointer;\n box-sizing: border-box;\n background-color: initial;\n color: var(--qds-theme-control-text-standard);\n padding-inline: 0;\n line-height: normal;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n min-height: var(--qds-control-small-height);\n width: var(--qds-control-small-height);\n\n &.qds-icon {\n min-height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n min-height: var(--qds-control-standard-height);\n width: var(--qds-control-standard-height);\n\n &.qds-icon {\n min-height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n min-height: var(--qds-control-large-height);\n width: var(--qds-control-large-height);\n\n &.qds-icon {\n min-height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='hero'] {\n min-height: var(--qds-control-hero-height);\n width: var(--qds-control-hero-height);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n );\n\n &.qds-icon {\n min-height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\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[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size, Target } from '../shared'\n\nexport type IconButtonSize = Size | 'hero'\nexport type IconButtonImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\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\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n event.preventDefault()\n}\n/**\n * The `<qds-icon-button>` is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/icon-button\n */\n@Component({\n tag: 'qds-icon-button',\n formAssociated: true,\n styleUrl: 'icon-button.css',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n /**\n * Prevents the icon button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The icon button's size.\n */\n @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n /**\n * The icon button's importance.\n */\n @Prop() public readonly importance?: IconButtonImportance = 'standard'\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 * @webnative\n */\n @Prop() public readonly badge?: number | string | true\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 * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string = 'noopener'\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The icon button's accessible name.\n */\n @Prop() public readonly text?: string\n\n /**\n * Emitted when the icon button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the icon button 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 @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #button?: HTMLAnchorElement | HTMLButtonElement\n\n #tooltip?: HTMLQdsTooltipElement\n\n get #computedSize(): IconButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): IconButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n get #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('href')\n protected hrefChanged(): void {\n this.internals.role = this.href === undefined ? 'button' : 'link'\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('text')\n protected textChanged(): void {\n this.#updateAriaLabel()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('blur')\n protected async onBlur(event: FocusEvent): Promise<void> {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.close()\n }\n }\n\n @Listen('focus')\n protected async onFocus(event: FocusEvent): Promise<void> {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.show()\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n if (this.#button instanceof HTMLAnchorElement) {\n this.#button.click()\n } else this.host.click()\n }\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n public componentWillLoad(): void {\n this.hrefChanged()\n this.textChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.disabledChanged()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n return (\n <div class=\"qds-container\" aria-hidden=\"true\">\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={{\n 'qds-icon-button': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n href={Tag === 'a' ? this.href : undefined}\n target={Tag === 'a' ? this.target : undefined}\n rel={Tag === 'a' ? this.rel : undefined}\n ref={this.#ref}\n disabled={Tag === 'a' ? undefined : this.#computedDisabled}\n download={Tag === 'a' ? this.download : undefined}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n onKeyDown={preventDefault}\n onKeyUp={preventDefault}\n onKeyPress={preventDefault}\n tabIndex={-1}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-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 class=\"qds-indicator\"\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n </Tag>\n <div class=\"qds-focus-ring\" data-size={this.#computedSize} />\n {this.#hasText && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n #updateAriaLabel(): void {\n if (this.badge !== undefined && this.badgeDescription !== undefined) {\n this.internals.ariaLabel = `${this.text} ${\n isIndicator(this.badge) ? '' : this.badge\n } ${this.badgeDescription}`\n return\n }\n\n if (\n this.target !== undefined &&\n this.target === '_blank' &&\n this.href !== undefined\n ) {\n this.internals.ariaLabel = `${this.text} Opens in a new tab`\n return\n }\n this.internals.ariaLabel = this.text ?? ''\n }\n\n readonly #ref = (button?: HTMLAnchorElement | HTMLButtonElement): void => {\n this.#button = button\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip) {\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n this.#tooltip = tooltip\n }\n }\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h, e as Host } from './p-D2489VzR.js';
|
|
7
7
|
import { o as offset, f as flip, s as shift, b as arrow, c as computePosition, a as autoUpdate, l as limitShift } from './p-Bv2vPjgL.js';
|
|
8
|
-
import { g as ignorePromise, h as propertyToPx, i as invariant, r as resolveTarget, l as isTouchDevice } from './p-
|
|
8
|
+
import { g as ignorePromise, h as propertyToPx, i as invariant, r as resolveTarget, l as isTouchDevice } from './p-CURs27Ur.js';
|
|
9
9
|
|
|
10
10
|
const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border:none;border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);inset:unset;margin:0;overflow:initial;padding:0}:host:before{content:\"\";position:absolute}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side=bottom]):before,:host([data-side=top]):before{height:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px));top:100%;width:100%}:host([data-side=bottom]):before{top:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}:host([data-side=left]):before,:host([data-side=right]):before{left:100%;width:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))}:host([data-side=right]):before{left:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}.qds-arrow{height:var(--qds-signature-triangle-pointer-size-height);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow:before{background-color:var(--qds-theme-accessory-background);clip-path:polygon(0 0,100% 0,50% 100%);height:100%}.qds-arrow:after,.qds-arrow:before{content:\"\";position:absolute;width:100%}.qds-arrow:after{background-color:var(--qds-theme-accessory-border);bottom:calc(var(--qds-accessory-border-width)*-1);clip-path:polygon(0 10%,100% 10%,50% 100%);height:calc(100% + var(--qds-accessory-border-width));z-index:-1}.qds-arrow[data-side=bottom]{top:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1);transform:rotate(180deg)}.qds-arrow[data-side=left]{right:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(-90deg)}.qds-arrow[data-side=right]{left:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(90deg)}.qds-arrow[data-side=top]{bottom:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1)}.qds-tooltip{align-items:inherit;border:var(--qds-accessory-border-width) solid var(--qds-theme-accessory-border);border-radius:var(--qds-accessory-border-radius);display:inherit;flex-direction:inherit;flex-wrap:inherit;gap:inherit;justify-content:inherit;max-width:var(--qds-accessory-max-width);padding:var(--qds-accessory-padding-top) var(--qds-accessory-padding-end) var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start)}";
|
|
11
11
|
|
|
@@ -273,7 +273,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
|
273
273
|
__classPrivateFieldGet(this, _Tooltip_referenceElement, "f").removeAttribute('aria-describedby');
|
|
274
274
|
}
|
|
275
275
|
render() {
|
|
276
|
-
return (h(Host, { key: '
|
|
276
|
+
return (h(Host, { key: 'adda0a9e51cad1cca312cb4fb087d960bcb884b8', onKeyDown: __classPrivateFieldGet(this, _Tooltip_boundKeyDown, "f"), onPointerDown: __classPrivateFieldGet(this, _Tooltip_boundTooltipPointerDown, "f") }, h("div", { key: '6f43cad976871e9c203f0e41603c9e58fe754d5f', class: "qds-tooltip" }, h("slot", { key: '05c34d22efbf1369e2ec6b69d6020fb2271b3f48' })), h("div", { key: '282e2413e80dfcd6a1431d2804ac478c59c4699f', class: "qds-arrow", ref: __classPrivateFieldGet(this, _Tooltip_arrowRef, "f") })));
|
|
277
277
|
}
|
|
278
278
|
get host() { return this; }
|
|
279
279
|
static get watchers() { return {
|
|
@@ -388,6 +388,6 @@ function defineCustomElement() {
|
|
|
388
388
|
}
|
|
389
389
|
|
|
390
390
|
export { Tooltip as T, defineCustomElement as d };
|
|
391
|
-
//# sourceMappingURL=p-
|
|
391
|
+
//# sourceMappingURL=p-D82sb4oJ.js.map
|
|
392
392
|
|
|
393
|
-
//# sourceMappingURL=p-
|
|
393
|
+
//# sourceMappingURL=p-D82sb4oJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-B03FWheS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n border: none;\n box-shadow: var(--qds-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n inset: unset;\n margin: 0;\n overflow: initial;\n padding: 0;\n}\n\n:host::before {\n content: '';\n position: absolute;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n width: 100%;\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 *\n (\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n )\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 *\n (\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n )\n );\n}\n\n.qds-arrow {\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n height: var(--qds-signature-triangle-pointer-size-height);\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--qds-theme-accessory-background);\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: calc(100% + var(--qds-accessory-border-width));\n background-color: var(--qds-theme-accessory-border);\n clip-path: polygon(0% 10%, 100% 10%, 50% 100%);\n z-index: -1;\n bottom: calc(-1 * var(--qds-accessory-border-width));\n }\n\n &[data-side='bottom'] {\n top: calc(\n -1 *\n (\n var(--qds-signature-triangle-pointer-size-height) -\n var(--qds-accessory-effect-section-position-y)\n )\n );\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n right: calc(\n (\n -1 *\n (\n var(--qds-accessory-gap-floating) +\n var(--qds-signature-triangle-pointer-size-height)\n )\n ) +\n var(--qds-accessory-effect-section-position-y)\n );\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n left: calc(\n (\n -1 *\n (\n var(--qds-accessory-gap-floating) +\n var(--qds-signature-triangle-pointer-size-height)\n )\n ) +\n var(--qds-accessory-effect-section-position-y)\n );\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n bottom: calc(\n -1 *\n (\n var(--qds-signature-triangle-pointer-size-height) -\n var(--qds-accessory-effect-section-position-y)\n )\n );\n }\n}\n\n.qds-tooltip {\n border: var(--qds-accessory-border-width) solid\n var(--qds-theme-accessory-border);\n border-radius: var(--qds-accessory-border-radius);\n padding: var(--qds-accessory-padding-top) var(--qds-accessory-padding-end)\n var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start);\n display: inherit;\n flex-direction: inherit;\n flex-wrap: inherit;\n justify-content: inherit;\n align-items: inherit;\n gap: inherit;\n max-width: var(--qds-accessory-max-width);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\nimport type { Split } from 'type-fest'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n resolveTarget,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nexport type TriggerEvent = Extract<\n keyof GlobalEventHandlersEventMap,\n 'click' | 'focus' | 'focusin' | 'pointerenter'\n>\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][] or [Virtual Element][]\n * - A function returning a reference to an [`Element`][],\n * [Virtual Element][], or a CSS selector string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Determines the events that cause the tooltip to show. Multiple event names\n * are separated by spaces.\n */\n @Prop() public readonly trigger?: TriggerEvent[] | string =\n 'pointerenter focus'\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #arrow?: HTMLElement\n\n #arrowPadding = 0\n\n #cleanup?: () => void\n\n #clickedTooltip = false\n\n #isTouchDevice = false\n\n #listeners: {\n element: Element\n event: keyof GlobalEventHandlersEventMap\n listener: EventListenerOrEventListenerObject\n }[] = []\n\n #mainAxisDistance = 0\n\n #middleware?: (Middleware | false)[]\n\n #open = false\n\n /**\n * Ensure that `updateArrow()` is called only once internally as this is\n * expensive.\n */\n #opened = false\n\n #referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.#open) return\n\n if (!this.#opened) {\n await this.updateArrow()\n this.#opened = true\n }\n this.startAutoUpdate()\n this.#open = true\n this.#setAriaExpanded()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.#open) return\n\n this.closeEmitter.emit()\n\n if (this.#cleanup) this.#cleanup()\n this.#open = false\n this.#setAriaExpanded()\n this.#clickedTooltip = false\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n const gap = propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0\n const height =\n propertyToPx(this.host, '--qds-signature-triangle-pointer-size-height') ??\n 0\n const padding =\n propertyToPx(this.host, '--qds-accessory-border-radius') ?? 0\n this.#mainAxisDistance = gap + height\n this.#arrowPadding = padding\n\n await this.updateMiddleware()\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n invariant(this.#arrow)\n\n this.#middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.#mainAxisDistance,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.#arrow,\n padding: this.#arrowPadding,\n }),\n ]\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectedCallback()\n\n this.#referenceElement = resolveTarget(this.target)\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.updateEventListeners()\n this.host.id ||= `qds-tooltip-${autoIncrementingId}`\n this.#referenceElement.setAttribute('aria-describedby', this.host.id)\n if (this.host.role === 'dialog')\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n\n @Watch('trigger')\n private updateEventListeners(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n const triggers = Array.isArray(this.trigger)\n ? this.trigger\n : ((this.trigger?.split(' ') as Split<TriggerEvent, ' '> | undefined) ??\n [])\n\n this.#removeEventListeners()\n\n if (this.#isTouchDevice)\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n this.#on(document.documentElement, 'pointerdown', this.#boundPointerdown)\n this.#on(this.#referenceElement, 'keydown', this.#boundKeyDown)\n\n for (const trigger of triggers) {\n switch (trigger) {\n case 'click': {\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n break\n }\n case 'focus':\n case 'focusin': {\n this.#on(this.#referenceElement, trigger, this.#boundFocus)\n this.#on(this.#referenceElement, 'focusout', this.#boundFocusout)\n this.#on(this.host, 'focusout', this.#boundFocusout)\n break\n }\n case 'pointerenter': {\n this.#on(\n this.#referenceElement,\n 'pointerenter',\n this.#boundPointerenter,\n )\n this.#on(\n this.#referenceElement,\n 'pointerleave',\n this.#boundPointerleave,\n )\n this.#on(this.host, 'pointerleave', this.#boundPointerleave)\n break\n }\n default:\n }\n }\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.#referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.#referenceElement,\n this.host,\n {\n middleware: this.#middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n const [side] = placement.split('-') as Split<Placement, '-'>\n\n this.host.dataset.side = side\n Object.assign(this.host.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n })\n\n if (middlewareData.arrow === undefined) return\n\n invariant(this.#arrow)\n\n const { x: aX, y: aY, centerOffset } = middlewareData.arrow\n this.#arrow.dataset.side = side\n Object.assign(this.#arrow.style, {\n display: centerOffset === 0 ? '' : 'none',\n left: aX === undefined ? '' : `${aX}px`,\n top: aY === undefined ? '' : `${aY}px`,\n })\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.#referenceElement)\n\n if (this.#cleanup) this.#cleanup()\n this.#cleanup = autoUpdate(\n this.#referenceElement,\n this.host,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.#isTouchDevice = isTouchDevice()\n this.host.hidden = true\n this.host.popover = 'manual'\n this.internals.role = 'tooltip'\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public disconnectedCallback(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#removeEventListeners()\n this.#referenceElement.removeAttribute('aria-describedby')\n }\n\n public render() {\n return (\n <Host\n onKeyDown={this.#boundKeyDown}\n onPointerDown={this.#boundTooltipPointerDown}\n >\n <div class=\"qds-tooltip\">\n <slot />\n </div>\n\n <div class=\"qds-arrow\" ref={this.#arrowRef} />\n </Host>\n )\n }\n\n readonly #arrowRef = (div?: HTMLElement): void => {\n this.#arrow = div\n }\n\n readonly #boundTooltipPointerDown = (): void => {\n this.#clickedTooltip = true\n }\n\n async #handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundFocus = (): void => {\n ignorePromise(this.#handleFocus())\n }\n\n async #handleKeyDown(event: Event): Promise<void> {\n if (event instanceof KeyboardEvent && event.key === 'Escape')\n await this.close()\n }\n\n readonly #boundKeyDown = (event: Event): void => {\n ignorePromise(this.#handleKeyDown(event))\n }\n\n async #handlePointerenter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundPointerenter = (): void => {\n ignorePromise(this.#handlePointerenter())\n }\n\n async #handlePointerleave(event: Event): Promise<void> {\n if (\n !this.#clickedTooltip &&\n document.activeElement !== this.#referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.host &&\n event instanceof PointerEvent &&\n event.relatedTarget !== this.#referenceElement &&\n event.relatedTarget !== this.host\n )\n await this.close()\n }\n\n readonly #boundPointerleave = (event: Event): void => {\n ignorePromise(this.#handlePointerleave(event))\n }\n\n async #handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.host.contains(relatedTarget) &&\n this.#referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n readonly #boundFocusout = (event: Event): void => {\n ignorePromise(this.#handleFocusOut(event))\n }\n\n async #handlePointerdown(event: Event): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.host) ||\n (this.#referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.#referenceElement))\n if (!withinBounds) await this.close()\n }\n\n readonly #boundPointerdown = (event: Event): void => {\n ignorePromise(this.#handlePointerdown(event))\n }\n\n async #handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.#open ? this.close() : this.show())\n }\n\n readonly #boundReferenceClick = (): void => {\n ignorePromise(this.#handleReferenceClick())\n }\n\n #on(\n element: Element,\n event: keyof GlobalEventHandlersEventMap,\n listener: EventListenerOrEventListenerObject,\n ): void {\n const hasListener = this.#listeners.some(\n (value) => value.element === element && value.event === event,\n )\n if (hasListener) return\n\n element.addEventListener(event, listener)\n this.#listeners.push({ element, event, listener })\n }\n\n #removeEventListeners(): void {\n for (const { element, event, listener } of this.#listeners)\n element.removeEventListener(event, listener)\n this.#listeners = []\n }\n\n #setAriaExpanded(): void {\n this.host.hidden = !this.#open\n if (this.#open) this.host.showPopover()\n else this.host.hidePopover()\n\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n )\n this.#referenceElement.ariaExpanded = String(this.#open)\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-D82sb4oJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n border: none;\n box-shadow: var(--qds-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n inset: unset;\n margin: 0;\n overflow: initial;\n padding: 0;\n}\n\n:host::before {\n content: '';\n position: absolute;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n width: 100%;\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 *\n (\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n )\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 *\n (\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n )\n );\n}\n\n.qds-arrow {\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n height: var(--qds-signature-triangle-pointer-size-height);\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--qds-theme-accessory-background);\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: calc(100% + var(--qds-accessory-border-width));\n background-color: var(--qds-theme-accessory-border);\n clip-path: polygon(0% 10%, 100% 10%, 50% 100%);\n z-index: -1;\n bottom: calc(-1 * var(--qds-accessory-border-width));\n }\n\n &[data-side='bottom'] {\n top: calc(\n -1 *\n (\n var(--qds-signature-triangle-pointer-size-height) -\n var(--qds-accessory-effect-section-position-y)\n )\n );\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n right: calc(\n (\n -1 *\n (\n var(--qds-accessory-gap-floating) +\n var(--qds-signature-triangle-pointer-size-height)\n )\n ) +\n var(--qds-accessory-effect-section-position-y)\n );\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n left: calc(\n (\n -1 *\n (\n var(--qds-accessory-gap-floating) +\n var(--qds-signature-triangle-pointer-size-height)\n )\n ) +\n var(--qds-accessory-effect-section-position-y)\n );\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n bottom: calc(\n -1 *\n (\n var(--qds-signature-triangle-pointer-size-height) -\n var(--qds-accessory-effect-section-position-y)\n )\n );\n }\n}\n\n.qds-tooltip {\n border: var(--qds-accessory-border-width) solid\n var(--qds-theme-accessory-border);\n border-radius: var(--qds-accessory-border-radius);\n padding: var(--qds-accessory-padding-top) var(--qds-accessory-padding-end)\n var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start);\n display: inherit;\n flex-direction: inherit;\n flex-wrap: inherit;\n justify-content: inherit;\n align-items: inherit;\n gap: inherit;\n max-width: var(--qds-accessory-max-width);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\nimport type { Split } from 'type-fest'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n resolveTarget,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nexport type TriggerEvent = Extract<\n keyof GlobalEventHandlersEventMap,\n 'click' | 'focus' | 'focusin' | 'pointerenter'\n>\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][] or [Virtual Element][]\n * - A function returning a reference to an [`Element`][],\n * [Virtual Element][], or a CSS selector string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Determines the events that cause the tooltip to show. Multiple event names\n * are separated by spaces.\n */\n @Prop() public readonly trigger?: TriggerEvent[] | string =\n 'pointerenter focus'\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #arrow?: HTMLElement\n\n #arrowPadding = 0\n\n #cleanup?: () => void\n\n #clickedTooltip = false\n\n #isTouchDevice = false\n\n #listeners: {\n element: Element\n event: keyof GlobalEventHandlersEventMap\n listener: EventListenerOrEventListenerObject\n }[] = []\n\n #mainAxisDistance = 0\n\n #middleware?: (Middleware | false)[]\n\n #open = false\n\n /**\n * Ensure that `updateArrow()` is called only once internally as this is\n * expensive.\n */\n #opened = false\n\n #referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.#open) return\n\n if (!this.#opened) {\n await this.updateArrow()\n this.#opened = true\n }\n this.startAutoUpdate()\n this.#open = true\n this.#setAriaExpanded()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.#open) return\n\n this.closeEmitter.emit()\n\n if (this.#cleanup) this.#cleanup()\n this.#open = false\n this.#setAriaExpanded()\n this.#clickedTooltip = false\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n const gap = propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0\n const height =\n propertyToPx(this.host, '--qds-signature-triangle-pointer-size-height') ??\n 0\n const padding =\n propertyToPx(this.host, '--qds-accessory-border-radius') ?? 0\n this.#mainAxisDistance = gap + height\n this.#arrowPadding = padding\n\n await this.updateMiddleware()\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n invariant(this.#arrow)\n\n this.#middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.#mainAxisDistance,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.#arrow,\n padding: this.#arrowPadding,\n }),\n ]\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectedCallback()\n\n this.#referenceElement = resolveTarget(this.target)\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.updateEventListeners()\n this.host.id ||= `qds-tooltip-${autoIncrementingId}`\n this.#referenceElement.setAttribute('aria-describedby', this.host.id)\n if (this.host.role === 'dialog')\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n\n @Watch('trigger')\n private updateEventListeners(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n const triggers = Array.isArray(this.trigger)\n ? this.trigger\n : ((this.trigger?.split(' ') as Split<TriggerEvent, ' '> | undefined) ??\n [])\n\n this.#removeEventListeners()\n\n if (this.#isTouchDevice)\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n this.#on(document.documentElement, 'pointerdown', this.#boundPointerdown)\n this.#on(this.#referenceElement, 'keydown', this.#boundKeyDown)\n\n for (const trigger of triggers) {\n switch (trigger) {\n case 'click': {\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n break\n }\n case 'focus':\n case 'focusin': {\n this.#on(this.#referenceElement, trigger, this.#boundFocus)\n this.#on(this.#referenceElement, 'focusout', this.#boundFocusout)\n this.#on(this.host, 'focusout', this.#boundFocusout)\n break\n }\n case 'pointerenter': {\n this.#on(\n this.#referenceElement,\n 'pointerenter',\n this.#boundPointerenter,\n )\n this.#on(\n this.#referenceElement,\n 'pointerleave',\n this.#boundPointerleave,\n )\n this.#on(this.host, 'pointerleave', this.#boundPointerleave)\n break\n }\n default:\n }\n }\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.#referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.#referenceElement,\n this.host,\n {\n middleware: this.#middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n const [side] = placement.split('-') as Split<Placement, '-'>\n\n this.host.dataset.side = side\n Object.assign(this.host.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n })\n\n if (middlewareData.arrow === undefined) return\n\n invariant(this.#arrow)\n\n const { x: aX, y: aY, centerOffset } = middlewareData.arrow\n this.#arrow.dataset.side = side\n Object.assign(this.#arrow.style, {\n display: centerOffset === 0 ? '' : 'none',\n left: aX === undefined ? '' : `${aX}px`,\n top: aY === undefined ? '' : `${aY}px`,\n })\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.#referenceElement)\n\n if (this.#cleanup) this.#cleanup()\n this.#cleanup = autoUpdate(\n this.#referenceElement,\n this.host,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.#isTouchDevice = isTouchDevice()\n this.host.hidden = true\n this.host.popover = 'manual'\n this.internals.role = 'tooltip'\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public disconnectedCallback(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#removeEventListeners()\n this.#referenceElement.removeAttribute('aria-describedby')\n }\n\n public render() {\n return (\n <Host\n onKeyDown={this.#boundKeyDown}\n onPointerDown={this.#boundTooltipPointerDown}\n >\n <div class=\"qds-tooltip\">\n <slot />\n </div>\n\n <div class=\"qds-arrow\" ref={this.#arrowRef} />\n </Host>\n )\n }\n\n readonly #arrowRef = (div?: HTMLElement): void => {\n this.#arrow = div\n }\n\n readonly #boundTooltipPointerDown = (): void => {\n this.#clickedTooltip = true\n }\n\n async #handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundFocus = (): void => {\n ignorePromise(this.#handleFocus())\n }\n\n async #handleKeyDown(event: Event): Promise<void> {\n if (event instanceof KeyboardEvent && event.key === 'Escape')\n await this.close()\n }\n\n readonly #boundKeyDown = (event: Event): void => {\n ignorePromise(this.#handleKeyDown(event))\n }\n\n async #handlePointerenter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundPointerenter = (): void => {\n ignorePromise(this.#handlePointerenter())\n }\n\n async #handlePointerleave(event: Event): Promise<void> {\n if (\n !this.#clickedTooltip &&\n document.activeElement !== this.#referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.host &&\n event instanceof PointerEvent &&\n event.relatedTarget !== this.#referenceElement &&\n event.relatedTarget !== this.host\n )\n await this.close()\n }\n\n readonly #boundPointerleave = (event: Event): void => {\n ignorePromise(this.#handlePointerleave(event))\n }\n\n async #handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.host.contains(relatedTarget) &&\n this.#referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n readonly #boundFocusout = (event: Event): void => {\n ignorePromise(this.#handleFocusOut(event))\n }\n\n async #handlePointerdown(event: Event): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.host) ||\n (this.#referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.#referenceElement))\n if (!withinBounds) await this.close()\n }\n\n readonly #boundPointerdown = (event: Event): void => {\n ignorePromise(this.#handlePointerdown(event))\n }\n\n async #handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.#open ? this.close() : this.show())\n }\n\n readonly #boundReferenceClick = (): void => {\n ignorePromise(this.#handleReferenceClick())\n }\n\n #on(\n element: Element,\n event: keyof GlobalEventHandlersEventMap,\n listener: EventListenerOrEventListenerObject,\n ): void {\n const hasListener = this.#listeners.some(\n (value) => value.element === element && value.event === event,\n )\n if (hasListener) return\n\n element.addEventListener(event, listener)\n this.#listeners.push({ element, event, listener })\n }\n\n #removeEventListeners(): void {\n for (const { element, event, listener } of this.#listeners)\n element.removeEventListener(event, listener)\n this.#listeners = []\n }\n\n #setAriaExpanded(): void {\n this.host.hidden = !this.#open\n if (this.#open) this.host.showPopover()\n else this.host.hidePopover()\n\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n )\n this.#referenceElement.ariaExpanded = String(this.#open)\n }\n}\n"],"version":3}
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-D2489VzR.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, i as invariant, c as inheritAriaAttributes } from './p-
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
10
|
-
import { d as defineCustomElement$1 } from './p-
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, c as inheritAriaAttributes } from './p-CURs27Ur.js';
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-DtxwXYGb.js';
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-laE-pGH7.js';
|
|
10
|
+
import { d as defineCustomElement$1 } from './p-D82sb4oJ.js';
|
|
11
11
|
|
|
12
|
-
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:
|
|
12
|
+
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:i;place-self:center}.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-container.sc-qds-radio{display:grid;grid-template-areas:\"i\"}.qds-label.sc-qds-radio{align-items:flex-start;background-color:var(--qds-theme-interactive-background-default);border-radius:var(--qds-control-border-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;width:inherit}.qds-label.sc-qds-radio:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-label.sc-qds-radio:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-label.sc-qds-radio:has(.qds-radio: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-label-inner.sc-qds-radio{flex:1 1 auto;min-width:0;width:100%}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-interactive-background-default);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;padding:var(--qds-control-toggle-padding);-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:none}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{color:var(--qds-theme-control-background-contrast);display:block}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size=small].sc-qds-radio{--qds-form-small-text:var(--qds-control-small-text)}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-small-box-size);width:var(--qds-control-toggle-small-box-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related);min-height:var(--qds-control-toggle-small-height);min-width:var(--qds-control-toggle-small-width);padding-block:var(--qds-control-no-inline-small-padding-vertical)}.qds-inline[data-size=small].sc-qds-radio{min-height:var(--qds-control-small-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}[data-size=standard].sc-qds-radio{--qds-form-standard-text:var(--qds-control-standard-text)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-standard-box-size);width:var(--qds-control-toggle-standard-box-size)}.qds-icon[data-size=standard].sc-qds-radio{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-control-toggle-standard-height);min-width:var(--qds-control-toggle-standard-width);padding-block:var(--qds-control-no-inline-standard-padding-vertical)}.qds-inline[data-size=standard].sc-qds-radio{min-height:var(--qds-control-standard-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}[data-size=large].sc-qds-radio{--qds-form-large-text:var(--qds-control-large-text)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-large-box-size);width:var(--qds-control-toggle-large-box-size)}.qds-icon[data-size=large].sc-qds-radio{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related);min-height:var(--qds-control-toggle-large-height);min-width:var(--qds-control-toggle-large-width);padding-block:var(--qds-control-no-inline-large-padding-vertical)}.qds-inline[data-size=large].sc-qds-radio{min-height:var(--qds-control-large-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -87,12 +87,12 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
|
|
|
87
87
|
render() {
|
|
88
88
|
return (
|
|
89
89
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
90
|
-
h("label", { key: '
|
|
90
|
+
h("label", { key: 'd0c73be3ff0a081eb00a0857c8d4c44757b6db2b', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
|
|
91
91
|
'qds-inline': this.inline,
|
|
92
92
|
'qds-label': true,
|
|
93
|
-
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: '
|
|
93
|
+
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: '1018adbd92399c84791fed4bd449220431f8525f', class: "qds-container" }, h("input", { key: 'f7d1a5bdaf8cc9689b7b4d2257cb360377d8a4b6',
|
|
94
94
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
95
|
-
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), h("qds-icon", { key: '
|
|
95
|
+
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), h("qds-icon", { key: '5d216956b9bc9a9d673f79ef81302f8a085a4f01', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked-radio" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (h("qds-label", { key: '023e5f403ff3299ff37153eb7ee96941f485b308', class: "qds-label-inner", size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
|
|
96
96
|
}
|
|
97
97
|
get host() { return this; }
|
|
98
98
|
static get watchers() { return {
|
|
@@ -159,6 +159,6 @@ function defineCustomElement() {
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
export { Radio as R, defineCustomElement as d };
|
|
162
|
-
//# sourceMappingURL=p-
|
|
162
|
+
//# sourceMappingURL=p-D9pW936J.js.map
|
|
163
163
|
|
|
164
|
-
//# sourceMappingURL=p-
|
|
164
|
+
//# sourceMappingURL=p-D9pW936J.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Bnc7Puxx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.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.qds-radio,\n.qds-icon {\n grid-area: radio;\n place-self: center;\n}\n\n.qds-icon {\n display: none;\n pointer-events: none;\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'radio';\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n width: inherit;\n border-radius: var(--qds-control-border-radius);\n background-color: var(--qds-theme-interactive-background-default);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(.qds-radio:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n }\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n\n.qds-radio {\n appearance: none;\n background-color: var(--qds-theme-interactive-background-default);\n border-radius: var(--qds-control-rounded-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n padding: var(--qds-control-toggle-padding);\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: none;\n }\n\n &:checked {\n & ~ .qds-icon {\n display: block;\n color: var(--qds-theme-control-background-contrast);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n /* override qds-label font design token */\n --qds-form-small-text: var(--qds-control-small-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-small-box-size);\n height: var(--qds-control-toggle-small-box-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n min-height: var(--qds-control-toggle-small-height);\n padding-block: var(--qds-control-no-inline-small-padding-vertical);\n min-width: var(--qds-control-toggle-small-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-small-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\n }\n}\n\n[data-size='standard'] {\n /* override qds-label font design token */\n --qds-form-standard-text: var(--qds-control-standard-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-standard-box-size);\n height: var(--qds-control-toggle-standard-box-size);\n }\n\n &.qds-icon {\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n min-height: var(--qds-control-toggle-standard-height);\n padding-block: var(--qds-control-no-inline-standard-padding-vertical);\n min-width: var(--qds-control-toggle-standard-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-standard-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\n }\n}\n\n[data-size='large'] {\n /* override qds-label font design token */\n --qds-form-large-text: var(--qds-control-large-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-large-box-size);\n height: var(--qds-control-toggle-large-box-size);\n }\n\n &.qds-icon {\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n min-height: var(--qds-control-toggle-large-height);\n padding-block: var(--qds-control-no-inline-large-padding-vertical);\n min-width: var(--qds-control-toggle-large-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-large-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n tag: 'qds-radio',\n scoped: true,\n styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n /**\n * Adds vertical margin to the radio 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 radio button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The radio button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Sets the radio button's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the radio button from being interacted with: it cannot be pressed\n * or 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 radio button 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-radio>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-radio>` 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 @Prop() public readonly form?: string\n\n /**\n * Specify the radio group this radio button belongs to.\n *\n * Once a radio group is established, selecting any radio button in that\n * group automatically deselects any currently-selected radio button in the\n * same group.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Specify the group the radio button belongs to as required.\n *\n * If any radio button in a same-named group of radio buttons has the\n * `required` attribute, a radio button in that group must be checked,\n * although it doesn't have to be the one with the attribute applied.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The value of the radio button, submitted as a name/value pair with form\n * data.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the radio button is checked by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the radio button 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 #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\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 #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n invariant(this.#input)\n\n this.checked = this.#input.checked\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 public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.checked}\n class=\"qds-radio\"\n data-size={this.#computedSize}\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"radio\"\n value={this.value ?? undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked-radio\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n size={this.#computedSize}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\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"],"version":3}
|
|
1
|
+
{"file":"p-D9pW936J.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.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.qds-radio,\n.qds-icon {\n grid-area: radio;\n place-self: center;\n}\n\n.qds-icon {\n display: none;\n pointer-events: none;\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'radio';\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n width: inherit;\n border-radius: var(--qds-control-border-radius);\n background-color: var(--qds-theme-interactive-background-default);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(.qds-radio:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n }\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n\n.qds-radio {\n appearance: none;\n background-color: var(--qds-theme-interactive-background-default);\n border-radius: var(--qds-control-rounded-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n padding: var(--qds-control-toggle-padding);\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: none;\n }\n\n &:checked {\n & ~ .qds-icon {\n display: block;\n color: var(--qds-theme-control-background-contrast);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n /* override qds-label font design token */\n --qds-form-small-text: var(--qds-control-small-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-small-box-size);\n height: var(--qds-control-toggle-small-box-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n min-height: var(--qds-control-toggle-small-height);\n padding-block: var(--qds-control-no-inline-small-padding-vertical);\n min-width: var(--qds-control-toggle-small-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-small-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\n }\n}\n\n[data-size='standard'] {\n /* override qds-label font design token */\n --qds-form-standard-text: var(--qds-control-standard-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-standard-box-size);\n height: var(--qds-control-toggle-standard-box-size);\n }\n\n &.qds-icon {\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n min-height: var(--qds-control-toggle-standard-height);\n padding-block: var(--qds-control-no-inline-standard-padding-vertical);\n min-width: var(--qds-control-toggle-standard-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-standard-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\n }\n}\n\n[data-size='large'] {\n /* override qds-label font design token */\n --qds-form-large-text: var(--qds-control-large-text);\n\n &.qds-radio {\n width: var(--qds-control-toggle-large-box-size);\n height: var(--qds-control-toggle-large-box-size);\n }\n\n &.qds-icon {\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n min-height: var(--qds-control-toggle-large-height);\n padding-block: var(--qds-control-no-inline-large-padding-vertical);\n min-width: var(--qds-control-toggle-large-width);\n }\n\n &.qds-inline {\n min-height: var(--qds-control-large-height);\n padding: var(--qds-control-standard-padding-auto-height)\n var(--qds-control-toggle-standard-padding-horizontal);\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n tag: 'qds-radio',\n scoped: true,\n styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n /**\n * Adds vertical margin to the radio 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 radio button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The radio button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Sets the radio button's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the radio button from being interacted with: it cannot be pressed\n * or 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 radio button 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-radio>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-radio>` 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 @Prop() public readonly form?: string\n\n /**\n * Specify the radio group this radio button belongs to.\n *\n * Once a radio group is established, selecting any radio button in that\n * group automatically deselects any currently-selected radio button in the\n * same group.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Specify the group the radio button belongs to as required.\n *\n * If any radio button in a same-named group of radio buttons has the\n * `required` attribute, a radio button in that group must be checked,\n * although it doesn't have to be the one with the attribute applied.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The value of the radio button, submitted as a name/value pair with form\n * data.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the radio button is checked by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the radio button 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 #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\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 #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n invariant(this.#input)\n\n this.checked = this.#input.checked\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 public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.checked}\n class=\"qds-radio\"\n data-size={this.#computedSize}\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"radio\"\n value={this.value ?? undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked-radio\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n size={this.#computedSize}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\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"],"version":3}
|