@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.90
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/README.md +5 -5
- package/components/index.d.ts +48 -0
- package/components/index.js +60 -28
- package/components/index.js.map +1 -1
- package/components/p-2806fee1.js +1887 -0
- package/components/p-2806fee1.js.map +1 -0
- package/components/p-3c48ff53.js +103 -0
- package/components/p-3c48ff53.js.map +1 -0
- package/components/p-688c90f6.js +267 -0
- package/components/p-688c90f6.js.map +1 -0
- package/components/p-8abba29b.js +204 -0
- package/components/p-8abba29b.js.map +1 -0
- package/components/p-a020ece3.js +142 -0
- package/components/p-a020ece3.js.map +1 -0
- package/components/p-a6310886.js +144 -0
- package/components/p-a6310886.js.map +1 -0
- package/components/p-adefd438.js +404 -0
- package/components/p-adefd438.js.map +1 -0
- package/components/p-b4c302d4.js +91 -0
- package/components/p-b4c302d4.js.map +1 -0
- package/components/p-ba880369.js +256 -0
- package/components/p-ba880369.js.map +1 -0
- package/components/p-c80f112a.js +408 -0
- package/components/p-c80f112a.js.map +1 -0
- package/components/p-d107c90c.js +27 -0
- package/components/p-d107c90c.js.map +1 -0
- package/components/p-fac26e20.js +111 -0
- package/components/p-fac26e20.js.map +1 -0
- package/components/{floating-ui.dom.esm.js → p-fdd0abae.js} +468 -416
- package/components/p-fdd0abae.js.map +1 -0
- package/components/p-fed0d11f.js +94 -0
- package/components/p-fed0d11f.js.map +1 -0
- package/components/qds-badge-counter.d.ts +11 -0
- package/components/qds-badge-counter.js +13 -0
- package/components/qds-badge-counter.js.map +1 -0
- package/components/qds-badge-indicator.d.ts +11 -0
- package/components/qds-badge-indicator.js +13 -0
- package/components/qds-badge-indicator.js.map +1 -0
- package/components/qds-breadcrumb-item.d.ts +11 -0
- package/components/qds-breadcrumb-item.js +126 -0
- package/components/qds-breadcrumb-item.js.map +1 -0
- package/components/qds-button.d.ts +2 -2
- package/components/qds-button.js +3 -138
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.d.ts +2 -2
- package/components/qds-checkbox.js +3 -146
- package/components/qds-checkbox.js.map +1 -1
- package/components/qds-chip.d.ts +11 -0
- package/components/qds-chip.js +296 -0
- package/components/qds-chip.js.map +1 -0
- package/components/qds-dialog.d.ts +11 -0
- package/components/qds-dialog.js +126 -0
- package/components/qds-dialog.js.map +1 -0
- package/components/qds-divider.d.ts +2 -2
- package/components/qds-divider.js +3 -39
- package/components/qds-divider.js.map +1 -1
- package/components/qds-dropdown.d.ts +2 -2
- package/components/qds-dropdown.js +273 -239
- package/components/qds-dropdown.js.map +1 -1
- package/components/qds-form-message.d.ts +11 -0
- package/components/qds-form-message.js +112 -0
- package/components/qds-form-message.js.map +1 -0
- package/components/qds-icon.d.ts +2 -2
- package/components/qds-icon.js +3 -3
- package/components/qds-inline-link.d.ts +2 -2
- package/components/qds-inline-link.js +136 -73
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.d.ts +2 -2
- package/components/qds-input.js +489 -230
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.d.ts +2 -2
- package/components/qds-label.js +3 -3
- package/components/qds-list-item.d.ts +11 -0
- package/components/qds-list-item.js +212 -0
- package/components/qds-list-item.js.map +1 -0
- package/components/qds-loader.d.ts +11 -0
- package/components/qds-loader.js +113 -0
- package/components/qds-loader.js.map +1 -0
- package/components/qds-nav-list-item.d.ts +11 -0
- package/components/qds-nav-list-item.js +162 -0
- package/components/qds-nav-list-item.js.map +1 -0
- package/components/qds-progress-bar.d.ts +11 -0
- package/components/qds-progress-bar.js +153 -0
- package/components/qds-progress-bar.js.map +1 -0
- package/components/qds-radio.d.ts +2 -2
- package/components/qds-radio.js +147 -93
- package/components/qds-radio.js.map +1 -1
- package/components/qds-select.d.ts +11 -0
- package/components/qds-select.js +361 -0
- package/components/qds-select.js.map +1 -0
- package/components/qds-standalone-link.d.ts +11 -0
- package/components/qds-standalone-link.js +174 -0
- package/components/qds-standalone-link.js.map +1 -0
- package/components/qds-switch.d.ts +2 -2
- package/components/qds-switch.js +221 -105
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.d.ts +11 -0
- package/components/qds-tab.js +379 -0
- package/components/qds-tab.js.map +1 -0
- package/components/qds-tabbar.d.ts +11 -0
- package/components/qds-tabbar.js +407 -0
- package/components/qds-tabbar.js.map +1 -0
- package/components/qds-table-body.d.ts +11 -0
- package/components/qds-table-body.js +68 -0
- package/components/qds-table-body.js.map +1 -0
- package/components/qds-table-cell.d.ts +11 -0
- package/components/qds-table-cell.js +71 -0
- package/components/qds-table-cell.js.map +1 -0
- package/components/qds-table-head-cell.d.ts +11 -0
- package/components/qds-table-head-cell.js +73 -0
- package/components/qds-table-head-cell.js.map +1 -0
- package/components/qds-table-head.d.ts +11 -0
- package/components/qds-table-head.js +68 -0
- package/components/qds-table-head.js.map +1 -0
- package/components/qds-table-row.d.ts +11 -0
- package/components/qds-table-row.js +68 -0
- package/components/qds-table-row.js.map +1 -0
- package/components/qds-table.d.ts +11 -0
- package/components/qds-table.js +68 -0
- package/components/qds-table.js.map +1 -0
- package/components/qds-tag.d.ts +11 -0
- package/components/qds-tag.js +13 -0
- package/components/qds-tag.js.map +1 -0
- package/components/qds-textarea.d.ts +2 -2
- package/components/qds-textarea.js +331 -193
- package/components/qds-textarea.js.map +1 -1
- package/components/qds-title.d.ts +2 -2
- package/components/qds-title.js +3 -84
- package/components/qds-title.js.map +1 -1
- package/components/qds-tooltip.d.ts +2 -2
- package/components/qds-tooltip.js +3 -315
- package/components/qds-tooltip.js.map +1 -1
- package/dist/cjs/app-globals-c4cf08df.js +12 -0
- package/dist/cjs/app-globals-c4cf08df.js.map +1 -0
- package/dist/cjs/controls-ee3d2ec8.js +31 -0
- package/dist/cjs/controls-ee3d2ec8.js.map +1 -0
- package/dist/cjs/{floating-ui.dom.esm-71fa96af.js → floating-ui.dom.esm-19b2b933.js} +468 -416
- package/dist/cjs/floating-ui.dom.esm-19b2b933.js.map +1 -0
- package/dist/cjs/helpers-10154521.js +217 -0
- package/dist/cjs/helpers-10154521.js.map +1 -0
- package/dist/cjs/index-523dd2e0.js +2149 -0
- package/dist/cjs/index-523dd2e0.js.map +1 -0
- package/dist/cjs/index.cjs.js +39 -27
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/library-41b19b9e.js +117 -0
- package/dist/cjs/library-41b19b9e.js.map +1 -0
- package/dist/cjs/loader.cjs.js +8 -6
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +151 -0
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +96 -0
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-button.cjs.entry.js +321 -90
- package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +207 -99
- package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +256 -0
- package/dist/cjs/qds-chip.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-dialog.cjs.entry.js +108 -0
- package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-divider.cjs.entry.js +60 -18
- package/dist/cjs/qds-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js +232 -206
- package/dist/cjs/qds-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +86 -0
- package/dist/cjs/qds-form-message.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +113 -90
- package/dist/cjs/qds-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +99 -46
- package/dist/cjs/qds-inline-link.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +404 -185
- package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +102 -24
- package/dist/cjs/qds-label.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +157 -0
- package/dist/cjs/qds-list-item.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-loader.cjs.entry.js +94 -0
- package/dist/cjs/qds-loader.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +124 -0
- package/dist/cjs/qds-nav-list-item.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-progress-bar.cjs.entry.js +135 -0
- package/dist/cjs/qds-progress-bar.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-radio.cjs.entry.js +102 -57
- package/dist/cjs/qds-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +323 -0
- package/dist/cjs/qds-select.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-standalone-link.cjs.entry.js +134 -0
- package/dist/cjs/qds-standalone-link.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-switch.cjs.entry.js +193 -64
- package/dist/cjs/qds-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +299 -0
- package/dist/cjs/qds-tab.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-tabbar.cjs.entry.js +349 -0
- package/dist/cjs/qds-tabbar.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table-body.cjs.entry.js +54 -0
- package/dist/cjs/qds-table-body.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table-cell.cjs.entry.js +54 -0
- package/dist/cjs/qds-table-cell.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +54 -0
- package/dist/cjs/qds-table-head-cell.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table-head.cjs.entry.js +54 -0
- package/dist/cjs/qds-table-head.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table-row.cjs.entry.js +54 -0
- package/dist/cjs/qds-table-row.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-table.cjs.entry.js +54 -0
- package/dist/cjs/qds-table.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-tag_2.cjs.entry.js +181 -0
- package/dist/cjs/qds-tag_2.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-textarea.cjs.entry.js +288 -153
- package/dist/cjs/qds-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +332 -260
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/qds.cjs.js +15 -13
- package/dist/cjs/qds.cjs.js.map +1 -1
- package/dist/custom-elements.json +8707 -2149
- package/dist/docs.d.ts +344 -240
- package/dist/docs.json +9494 -3054
- package/dist/esm/app-globals-8ced3a41.js +10 -0
- package/dist/esm/app-globals-8ced3a41.js.map +1 -0
- package/dist/esm/controls-a4768aaf.js +27 -0
- package/dist/esm/controls-a4768aaf.js.map +1 -0
- package/dist/esm/{floating-ui.dom.esm-f96ac766.js → floating-ui.dom.esm-61986f35.js} +468 -416
- package/dist/esm/floating-ui.dom.esm-61986f35.js.map +1 -0
- package/dist/esm/helpers-2e4ca34d.js +204 -0
- package/dist/esm/helpers-2e4ca34d.js.map +1 -0
- package/dist/esm/index-b1d6acd2.js +2118 -0
- package/dist/esm/index-b1d6acd2.js.map +1 -0
- package/dist/esm/index.js +39 -28
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/library-2e5458af.js +113 -0
- package/dist/esm/library-2e5458af.js.map +1 -0
- package/dist/esm/loader.js +9 -7
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +146 -0
- package/dist/esm/qds-badge-counter_2.entry.js.map +1 -0
- package/dist/esm/qds-breadcrumb-item.entry.js +92 -0
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -0
- package/dist/esm/qds-button.entry.js +321 -90
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.entry.js +207 -99
- package/dist/esm/qds-checkbox.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +252 -0
- package/dist/esm/qds-chip.entry.js.map +1 -0
- package/dist/esm/qds-dialog.entry.js +104 -0
- package/dist/esm/qds-dialog.entry.js.map +1 -0
- package/dist/esm/qds-divider.entry.js +60 -18
- package/dist/esm/qds-divider.entry.js.map +1 -1
- package/dist/esm/qds-dropdown.entry.js +232 -206
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +82 -0
- package/dist/esm/qds-form-message.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +113 -90
- package/dist/esm/qds-icon.entry.js.map +1 -1
- package/dist/esm/qds-inline-link.entry.js +99 -46
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +404 -185
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +102 -24
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +153 -0
- package/dist/esm/qds-list-item.entry.js.map +1 -0
- package/dist/esm/qds-loader.entry.js +90 -0
- package/dist/esm/qds-loader.entry.js.map +1 -0
- package/dist/esm/qds-nav-list-item.entry.js +120 -0
- package/dist/esm/qds-nav-list-item.entry.js.map +1 -0
- package/dist/esm/qds-progress-bar.entry.js +131 -0
- package/dist/esm/qds-progress-bar.entry.js.map +1 -0
- package/dist/esm/qds-radio.entry.js +102 -57
- package/dist/esm/qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-select.entry.js +319 -0
- package/dist/esm/qds-select.entry.js.map +1 -0
- package/dist/esm/qds-standalone-link.entry.js +130 -0
- package/dist/esm/qds-standalone-link.entry.js.map +1 -0
- package/dist/esm/qds-switch.entry.js +193 -64
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +295 -0
- package/dist/esm/qds-tab.entry.js.map +1 -0
- package/dist/esm/qds-tabbar.entry.js +345 -0
- package/dist/esm/qds-tabbar.entry.js.map +1 -0
- package/dist/esm/qds-table-body.entry.js +50 -0
- package/dist/esm/qds-table-body.entry.js.map +1 -0
- package/dist/esm/qds-table-cell.entry.js +50 -0
- package/dist/esm/qds-table-cell.entry.js.map +1 -0
- package/dist/esm/qds-table-head-cell.entry.js +50 -0
- package/dist/esm/qds-table-head-cell.entry.js.map +1 -0
- package/dist/esm/qds-table-head.entry.js +50 -0
- package/dist/esm/qds-table-head.entry.js.map +1 -0
- package/dist/esm/qds-table-row.entry.js +50 -0
- package/dist/esm/qds-table-row.entry.js.map +1 -0
- package/dist/esm/qds-table.entry.js +50 -0
- package/dist/esm/qds-table.entry.js.map +1 -0
- package/dist/esm/qds-tag_2.entry.js +176 -0
- package/dist/esm/qds-tag_2.entry.js.map +1 -0
- package/dist/esm/qds-textarea.entry.js +288 -153
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +332 -260
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +16 -14
- package/dist/esm/qds.js.map +1 -1
- package/dist/types/components/badge-counter/badge-counter.d.ts +40 -0
- package/dist/types/components/badge-indicator/badge-indicator.d.ts +36 -0
- package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts +160 -0
- package/dist/types/components/button/button.d.ts +272 -194
- package/dist/types/components/checkbox/checkbox.d.ts +130 -124
- package/dist/types/components/chip/chip.d.ts +109 -0
- package/dist/types/components/controls.d.ts +4 -1
- package/dist/types/components/dialog/dialog.d.ts +35 -0
- package/dist/types/components/divider/divider.d.ts +13 -9
- package/dist/types/components/dropdown/dropdown.d.ts +107 -125
- package/dist/types/components/form-message/form-message.d.ts +42 -0
- package/dist/types/components/icon/icon.d.ts +24 -24
- package/dist/types/components/icon/library.d.ts +3 -3
- package/dist/types/components/icon/request.d.ts +5 -9
- package/dist/types/components/inline-link/inline-link.d.ts +208 -191
- package/dist/types/components/input/input.d.ts +415 -368
- package/dist/types/components/label/label.d.ts +26 -24
- package/dist/types/components/list-item/list-item.d.ts +100 -0
- package/dist/types/components/loader/loader.d.ts +27 -0
- package/dist/types/components/nav-list-item/nav-list-item.d.ts +67 -0
- package/dist/types/components/progress-bar/progress-bar.d.ts +60 -0
- package/dist/types/components/radio/radio.d.ts +90 -95
- package/dist/types/components/select/select.d.ts +203 -0
- package/dist/types/components/shared.d.ts +6 -0
- package/dist/types/components/standalone-link/standalone-link.d.ts +233 -0
- package/dist/types/components/switch/switch.d.ts +114 -107
- package/dist/types/components/tab/tab.d.ts +160 -0
- package/dist/types/components/tabbar/tabbar.d.ts +47 -0
- package/dist/types/components/table/table.d.ts +15 -0
- package/dist/types/components/table-body/table-body.d.ts +15 -0
- package/dist/types/components/table-cell/table-cell.d.ts +32 -0
- package/dist/types/components/table-head/table-head.d.ts +15 -0
- package/dist/types/components/table-head-cell/table-head-cell.d.ts +56 -0
- package/dist/types/components/table-row/table-row.d.ts +15 -0
- package/dist/types/components/tag/tag.d.ts +55 -0
- package/dist/types/components/textarea/textarea.d.ts +285 -300
- package/dist/types/components/title/title.d.ts +39 -32
- package/dist/types/components/tooltip/tooltip.d.ts +123 -137
- package/dist/types/components.d.ts +3928 -820
- package/dist/types/helpers.d.ts +15 -16
- package/dist/types/index.d.ts +2 -1
- package/dist/types/interface-overrides.d.ts +211 -0
- package/dist/types/qds-test.d.ts +22 -11
- package/dist/types/stencil-public-runtime.d.ts +55 -15
- package/dist/types/utils.d.ts +11 -4
- package/dist/vscode.html-custom-data.json +1523 -209
- package/hydrate/index.d.ts +59 -18
- package/hydrate/index.js +25682 -8977
- package/hydrate/index.mjs +26622 -0
- package/hydrate/package.json +7 -1
- package/loader/cdn.js +3 -4
- package/loader/index.cjs.js +3 -4
- package/loader/index.d.ts +4 -1
- package/loader/index.es2017.js +3 -4
- package/loader/index.js +3 -4
- package/package.json +53 -89
- package/styles/core.css +137 -14
- package/components/floating-ui.dom.esm.js.map +0 -1
- package/components/helpers.js +0 -175
- package/components/helpers.js.map +0 -1
- package/components/icon.js +0 -175
- package/components/icon.js.map +0 -1
- package/components/label.js +0 -55
- package/components/label.js.map +0 -1
- package/dist/cjs/floating-ui.dom.esm-71fa96af.js.map +0 -1
- package/dist/cjs/helpers-452256e8.js +0 -185
- package/dist/cjs/helpers-452256e8.js.map +0 -1
- package/dist/cjs/index-d181f952.js +0 -2039
- package/dist/cjs/index-d181f952.js.map +0 -1
- package/dist/cjs/library-0a619eeb.js +0 -62
- package/dist/cjs/library-0a619eeb.js.map +0 -1
- package/dist/cjs/qds-title.cjs.entry.js +0 -66
- package/dist/cjs/qds-title.cjs.entry.js.map +0 -1
- package/dist/esm/floating-ui.dom.esm-f96ac766.js.map +0 -1
- package/dist/esm/helpers-76b84f45.js +0 -175
- package/dist/esm/helpers-76b84f45.js.map +0 -1
- package/dist/esm/index-d7183092.js +0 -2009
- package/dist/esm/index-d7183092.js.map +0 -1
- package/dist/esm/library-021aca11.js +0 -58
- package/dist/esm/library-021aca11.js.map +0 -1
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/qds-title.entry.js +0 -62
- package/dist/esm/qds-title.entry.js.map +0 -1
- package/dist/types/components/create-story.d.ts +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-radio.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,q0FAAq0F;;MCiCz0F,KAAK;;;;;;IAoGR,wBAAmB,GAAe,EAAE,CAAA;IAkE3B,QAAG,GAAG,CAAC,KAAwB;MAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;KACnB,CAAA;IAEgB,WAAM,GAAG,CAAC,KAAiB;MAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACvD,CAAA;IAEgB,aAAQ,GAAG;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;KAC1B,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;kBA7KyC,KAAK;gBAKY,UAAU;;;;;;;;;EA4FrE,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;GAC9B;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;GACnD;EAGS,OAAO;IACf,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAErB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;GAClC;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG;MACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;MACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;KACjD,CAAA;GACF;EAEM,MAAM;IACX;;IAEE,8BACiB,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,OAAO,EACvD,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI;OACZ,eACU,IAAI,CAAC,IAAI,IAEpB,aACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,eACF,IAAI,CAAC,IAAI,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,KAE1B,IAAI,CAAC,mBAAmB,GAC5B,EACF,+BACc,MAAM,EAClB,KAAK,EAAC,MAAM,eACD,IAAI,CAAC,IAAI,EACpB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,GACd,EACD,IAAI,CAAC,OAAO,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC1D,EACT;GACF;;;;;;;","names":[],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.icon {\n display: none;\n color: var(--qds-theme-signature-color-contrast);\n inset-inline-start: 0;\n pointer-events: none;\n position: absolute;\n}\n\n.label {\n cursor: pointer;\n display: inline-flex;\n position: relative;\n}\n\n.radio {\n align-items: center;\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\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 display: flex;\n flex-shrink: 0;\n justify-content: center;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &::before {\n border-radius: var(--qds-control-rounded-border-radius);\n content: '';\n height: 10px;\n position: absolute;\n width: 10px;\n }\n\n &:hover::before {\n box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n }\n\n &:active::before {\n box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n }\n\n &:checked {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n & ~ .icon {\n display: inline-block;\n }\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &:is(.icon, .radio) {\n width: var(--qds-control-small-icon-size);\n height: var(--qds-control-small-icon-size);\n }\n\n &.inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &:is(.icon, .radio) {\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n\n &.inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &:is(.icon, .radio) {\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n\n &.inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\n\nexport type RadioSize = 'large' | 'small' | 'standard'\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({ reflect: true }) public readonly size: RadioSize = 'standard'\n\n /**\n * The radio button's text.\n */\n @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n /**\n * Sets the radio button's state.\n *\n * @webnative\n */\n @Prop({ mutable: true, reflect: 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({ mutable: true, reflect: true }) public 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 element!: HTMLQdsRadioElement\n\n private inheritedAttributes: Attributes = {}\n\n private input?: HTMLInputElement\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Listen('click')\n protected onClick(): void {\n invariant(this.input)\n\n this.checked = this.input.checked\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\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' : 'false'}\n class={{\n inline: this.inline,\n label: true,\n }}\n data-size={this.size}\n >\n <input\n checked={this.checked}\n class=\"radio\"\n data-size={this.size}\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 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=\"icon\"\n data-size={this.size}\n library=\"core\"\n name=\"checked\"\n />\n {this.hasText && <qds-label size={this.size} text={this.text} />}\n </label>\n )\n }\n\n private readonly ref = (input?: HTMLInputElement): void => {\n this.input = input\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-radio.entry.js","mappings":"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","names":[],"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-box,\n.qds-icon {\n grid-area: radio;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'radio';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n}\n\n.qds-radio {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\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 print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n & ~ .qds-icon {\n display: block;\n }\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\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 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 <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n </div>\n {this.#hasText && (\n <qds-label size={this.#computedSize} text={this.text} />\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}
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
|
|
7
|
+
import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
|
|
8
|
+
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
|
|
9
|
+
|
|
10
|
+
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"h\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:h}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);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 );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal);text-overflow:ellipsis}.qds-select:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.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 ));grid-area:h;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);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 ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
|
|
11
|
+
const QdsSelectStyle0 = selectCss;
|
|
12
|
+
|
|
13
|
+
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
14
|
+
//
|
|
15
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
16
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
17
|
+
if (kind === "a" && !f)
|
|
18
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
19
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
20
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
21
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
22
|
+
};
|
|
23
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
24
|
+
if (kind === "m")
|
|
25
|
+
throw new TypeError("Private method is not writable");
|
|
26
|
+
if (kind === "a" && !f)
|
|
27
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
28
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
29
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
30
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
31
|
+
};
|
|
32
|
+
var _Select_instances, _Select_inheritedAttributes, _Select_select, _Select_computedDisabled_get, _Select_computedOptions_get, _Select_computedSize_get, _Select_computedType_get, _Select_computedValue_get, _Select_computedSelectedOptions_get, _Select_ref, _Select_onBlur, _Select_onChange, _Select_onFocus, _Select_onInput, _Select_onSlotchange, _Select_defineGetter;
|
|
33
|
+
const throwError = () => {
|
|
34
|
+
invariant(false);
|
|
35
|
+
};
|
|
36
|
+
const EMPTY_OPTIONS_COLLECTION = {
|
|
37
|
+
length: 0,
|
|
38
|
+
selectedIndex: -1,
|
|
39
|
+
add: throwError,
|
|
40
|
+
remove: throwError,
|
|
41
|
+
item: throwError,
|
|
42
|
+
namedItem: throwError,
|
|
43
|
+
[Symbol.iterator]: throwError,
|
|
44
|
+
};
|
|
45
|
+
const Select = class {
|
|
46
|
+
constructor(hostRef) {
|
|
47
|
+
registerInstance(this, hostRef);
|
|
48
|
+
this.blurEmitter = createEvent(this, "qdsBlur", 2);
|
|
49
|
+
this.changeEmitter = createEvent(this, "qdsChange", 6);
|
|
50
|
+
this.focusEmitter = createEvent(this, "qdsFocus", 2);
|
|
51
|
+
this.inputEmitter = createEvent(this, "qdsInput", 6);
|
|
52
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
53
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
57
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
58
|
+
}
|
|
59
|
+
_Select_instances.add(this);
|
|
60
|
+
/**
|
|
61
|
+
* The select's size.
|
|
62
|
+
*
|
|
63
|
+
* > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS
|
|
64
|
+
* `height` should be used instead if this functionality is needed.
|
|
65
|
+
*
|
|
66
|
+
* [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size
|
|
67
|
+
*/
|
|
68
|
+
this.size = 'standard';
|
|
69
|
+
/**
|
|
70
|
+
* The [`<form>`][] element to associate the select with (its form owner).
|
|
71
|
+
*
|
|
72
|
+
* The value of this attribute must be the id of a `<form>` in the same
|
|
73
|
+
* document. If this attribute is not set, the `<qds-select>` is associated
|
|
74
|
+
* with its ancestor `<form>` element, if any.
|
|
75
|
+
*
|
|
76
|
+
* This attribute lets you associate `<qds-select>` elements to `<form>`s
|
|
77
|
+
* anywhere in the document, not just inside a `<form>`. It can also override
|
|
78
|
+
* an ancestor `<form>` element.
|
|
79
|
+
*
|
|
80
|
+
* [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
|
|
81
|
+
*
|
|
82
|
+
* @readonly
|
|
83
|
+
* @webnative
|
|
84
|
+
*/
|
|
85
|
+
// eslint-disable-next-line unicorn/no-null
|
|
86
|
+
this.form = null;
|
|
87
|
+
/**
|
|
88
|
+
* Returns the number of elements in the [`<option>`s collection][].
|
|
89
|
+
*
|
|
90
|
+
* [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
|
|
91
|
+
*
|
|
92
|
+
* @readonly
|
|
93
|
+
* @webnative
|
|
94
|
+
*/
|
|
95
|
+
this.length = 0;
|
|
96
|
+
/**
|
|
97
|
+
* An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by
|
|
98
|
+
* the `<qds-select>` element.
|
|
99
|
+
*
|
|
100
|
+
* [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
|
|
101
|
+
* [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
|
|
102
|
+
*
|
|
103
|
+
* @readonly
|
|
104
|
+
* @webnative
|
|
105
|
+
*/
|
|
106
|
+
this.options = EMPTY_OPTIONS_COLLECTION;
|
|
107
|
+
/**
|
|
108
|
+
* The index of the first or last selected [`<option>`][] element, depending
|
|
109
|
+
* on the value of `multiple`. The value `-1` indicates that no element is
|
|
110
|
+
* selected.
|
|
111
|
+
*
|
|
112
|
+
* [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
|
|
113
|
+
*
|
|
114
|
+
* @webnative
|
|
115
|
+
*/
|
|
116
|
+
this.selectedIndex = -1;
|
|
117
|
+
/**
|
|
118
|
+
* Collection of the [`<option>`][] elements contained within the
|
|
119
|
+
* `<qds-select>` element that are currently selected.
|
|
120
|
+
*
|
|
121
|
+
* [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
|
|
122
|
+
*
|
|
123
|
+
* @readonly
|
|
124
|
+
* @webnative
|
|
125
|
+
*/
|
|
126
|
+
this.selectedOptions = EMPTY_OPTIONS_COLLECTION;
|
|
127
|
+
/**
|
|
128
|
+
* Returns `select-multiple` if the `multiple` attribute is true;
|
|
129
|
+
* `select-one` otherwise.
|
|
130
|
+
*
|
|
131
|
+
* @readonly
|
|
132
|
+
* @webnative
|
|
133
|
+
*/
|
|
134
|
+
this.type = 'select-one';
|
|
135
|
+
/**
|
|
136
|
+
* The error message that would be shown to the user if the `<qds-select>`
|
|
137
|
+
* was to be checked for validity.
|
|
138
|
+
*
|
|
139
|
+
* @readonly
|
|
140
|
+
* @webnative
|
|
141
|
+
*/
|
|
142
|
+
this.validationMessage = '';
|
|
143
|
+
/**
|
|
144
|
+
* The [`ValidityState`][] object for this `<qds-select>`.
|
|
145
|
+
*
|
|
146
|
+
* [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
|
|
147
|
+
*
|
|
148
|
+
* @readonly
|
|
149
|
+
* @webnative
|
|
150
|
+
*/
|
|
151
|
+
this.validity = VALID_STATE;
|
|
152
|
+
/**
|
|
153
|
+
* The `value` property of the first selected [`<option>`][] element, or the
|
|
154
|
+
* empty string if no options are selected.
|
|
155
|
+
*
|
|
156
|
+
* [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
|
|
157
|
+
*
|
|
158
|
+
* @webnative
|
|
159
|
+
*/
|
|
160
|
+
this.value = '';
|
|
161
|
+
/**
|
|
162
|
+
* True if `<qds-select>` will be validated when the form is submitted;
|
|
163
|
+
* false otherwise.
|
|
164
|
+
*
|
|
165
|
+
* @readonly
|
|
166
|
+
* @webnative
|
|
167
|
+
*/
|
|
168
|
+
this.willValidate = false;
|
|
169
|
+
_Select_inheritedAttributes.set(this, {});
|
|
170
|
+
_Select_select.set(this, void 0);
|
|
171
|
+
this.checkValidity = () => this.internals.checkValidity();
|
|
172
|
+
this.reportValidity = () => this.internals.reportValidity();
|
|
173
|
+
this.setCustomValidity = (error) => {
|
|
174
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
175
|
+
__classPrivateFieldGet(this, _Select_select, "f").setCustomValidity(error);
|
|
176
|
+
if (error)
|
|
177
|
+
this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, __classPrivateFieldGet(this, _Select_select, "f"));
|
|
178
|
+
else
|
|
179
|
+
this.internals.setValidity(NO_ERROR_FLAGS);
|
|
180
|
+
};
|
|
181
|
+
this.addItem = (element, before) => {
|
|
182
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
183
|
+
__classPrivateFieldGet(this, _Select_select, "f").add(element, before);
|
|
184
|
+
};
|
|
185
|
+
this.removeItem = (index) => {
|
|
186
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
187
|
+
__classPrivateFieldGet(this, _Select_select, "f").remove(index);
|
|
188
|
+
};
|
|
189
|
+
this.item = (index) => {
|
|
190
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
191
|
+
return __classPrivateFieldGet(this, _Select_select, "f").item(index);
|
|
192
|
+
};
|
|
193
|
+
this.namedItem = (name) => {
|
|
194
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
195
|
+
return __classPrivateFieldGet(this, _Select_select, "f").namedItem(name);
|
|
196
|
+
};
|
|
197
|
+
_Select_ref.set(this, (select) => {
|
|
198
|
+
__classPrivateFieldSet(this, _Select_select, select, "f");
|
|
199
|
+
});
|
|
200
|
+
_Select_onBlur.set(this, (event) => {
|
|
201
|
+
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
202
|
+
});
|
|
203
|
+
_Select_onChange.set(this, () => {
|
|
204
|
+
this.changeEmitter.emit();
|
|
205
|
+
});
|
|
206
|
+
_Select_onFocus.set(this, (event) => {
|
|
207
|
+
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
208
|
+
});
|
|
209
|
+
_Select_onInput.set(this, (event) => {
|
|
210
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
211
|
+
this.value = __classPrivateFieldGet(this, _Select_select, "f").value;
|
|
212
|
+
this.inputEmitter.emit(pickInputEventAttributes(event));
|
|
213
|
+
});
|
|
214
|
+
_Select_onSlotchange.set(this, (event) => {
|
|
215
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
216
|
+
const { currentTarget } = event;
|
|
217
|
+
invariant(currentTarget instanceof HTMLSlotElement);
|
|
218
|
+
__classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
onClick(event) {
|
|
222
|
+
if (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get))
|
|
223
|
+
event.stopImmediatePropagation();
|
|
224
|
+
}
|
|
225
|
+
disabledChanged() {
|
|
226
|
+
if (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get))
|
|
227
|
+
// eslint-disable-next-line unicorn/no-null
|
|
228
|
+
this.internals.setFormValue(null);
|
|
229
|
+
else
|
|
230
|
+
this.internals.setFormValue(__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedValue_get));
|
|
231
|
+
}
|
|
232
|
+
selectedIndexChanged() {
|
|
233
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
234
|
+
__classPrivateFieldGet(this, _Select_select, "f").selectedIndex = this.selectedIndex;
|
|
235
|
+
}
|
|
236
|
+
tabindexChanged(newValue) {
|
|
237
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
238
|
+
this.tabIndex =
|
|
239
|
+
parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
|
|
240
|
+
}
|
|
241
|
+
validationChanged() {
|
|
242
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
243
|
+
__classPrivateFieldGet(this, _Select_select, "f").value = __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedValue_get);
|
|
244
|
+
__classPrivateFieldGet(this, _Select_select, "f").required = this.required ?? false;
|
|
245
|
+
const { valid } = __classPrivateFieldGet(this, _Select_select, "f").validity;
|
|
246
|
+
if (valid)
|
|
247
|
+
this.internals.setValidity(NO_ERROR_FLAGS, undefined, __classPrivateFieldGet(this, _Select_select, "f"));
|
|
248
|
+
else
|
|
249
|
+
this.internals.setValidity(__classPrivateFieldGet(this, _Select_select, "f").validity, __classPrivateFieldGet(this, _Select_select, "f").validationMessage, __classPrivateFieldGet(this, _Select_select, "f"));
|
|
250
|
+
}
|
|
251
|
+
componentWillLoad() {
|
|
252
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'form', () => this.internals.form);
|
|
253
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
|
|
254
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'validity', () => this.internals.validity);
|
|
255
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
|
|
256
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'type', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedType_get));
|
|
257
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'options', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedOptions_get));
|
|
258
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'length', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedOptions_get).length);
|
|
259
|
+
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'selectedOptions', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSelectedOptions_get));
|
|
260
|
+
__classPrivateFieldSet(this, _Select_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
261
|
+
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
262
|
+
}
|
|
263
|
+
componentDidLoad() {
|
|
264
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
265
|
+
this.validationChanged();
|
|
266
|
+
this.selectedIndex = __classPrivateFieldGet(this, _Select_select, "f").selectedIndex;
|
|
267
|
+
}
|
|
268
|
+
render() {
|
|
269
|
+
return (h("div", { key: '775cc10b64f353ffcc54654212005cd41f319767', class: {
|
|
270
|
+
'qds-container': true,
|
|
271
|
+
'qds-multiple': this.multiple ?? false,
|
|
272
|
+
}, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: '3eb930f8ee0360a9091c22eabede009ed7ea50cf', autoComplete: this.autoComplete,
|
|
273
|
+
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
274
|
+
autoFocus: this.host.autofocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: 'b83e1c50f43271e69446bf115dec6dccce389b59', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), library: "core", name: "dropdown" })), h("slot", { key: '24fb8877a33d393dde6d2e40b09c7d59a9096818', onSlotchange: __classPrivateFieldGet(this, _Select_onSlotchange, "f") }), h("div", { key: '9cd40db31ea7703639bf5bcdeba2279bd45c50d8', class: "qds-focus-ring" })));
|
|
275
|
+
}
|
|
276
|
+
static get delegatesFocus() { return true; }
|
|
277
|
+
static get formAssociated() { return true; }
|
|
278
|
+
get host() { return getElement(this); }
|
|
279
|
+
static get watchers() { return {
|
|
280
|
+
"disabled": ["disabledChanged"],
|
|
281
|
+
"selectedIndex": ["selectedIndexChanged"],
|
|
282
|
+
"tabindex": ["tabindexChanged"],
|
|
283
|
+
"required": ["validationChanged"],
|
|
284
|
+
"value": ["validationChanged"]
|
|
285
|
+
}; }
|
|
286
|
+
};
|
|
287
|
+
_Select_inheritedAttributes = new WeakMap(), _Select_select = new WeakMap(), _Select_ref = new WeakMap(), _Select_onBlur = new WeakMap(), _Select_onChange = new WeakMap(), _Select_onFocus = new WeakMap(), _Select_onInput = new WeakMap(), _Select_onSlotchange = new WeakMap(), _Select_instances = new WeakSet(), _Select_computedDisabled_get = function _Select_computedDisabled_get() {
|
|
288
|
+
return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
|
|
289
|
+
this.host.getAttribute('disabled') !== 'false');
|
|
290
|
+
}, _Select_computedOptions_get = function _Select_computedOptions_get() {
|
|
291
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
292
|
+
return __classPrivateFieldGet(this, _Select_select, "f").options;
|
|
293
|
+
}, _Select_computedSize_get = function _Select_computedSize_get() {
|
|
294
|
+
switch (this.size) {
|
|
295
|
+
case 'standard':
|
|
296
|
+
case 'small':
|
|
297
|
+
case 'large': {
|
|
298
|
+
return this.size;
|
|
299
|
+
}
|
|
300
|
+
default: {
|
|
301
|
+
return 'standard';
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}, _Select_computedType_get = function _Select_computedType_get() {
|
|
305
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
306
|
+
return __classPrivateFieldGet(this, _Select_select, "f").type;
|
|
307
|
+
}, _Select_computedValue_get = function _Select_computedValue_get() {
|
|
308
|
+
return this.value ?? '';
|
|
309
|
+
}, _Select_computedSelectedOptions_get = function _Select_computedSelectedOptions_get() {
|
|
310
|
+
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
311
|
+
return __classPrivateFieldGet(this, _Select_select, "f").selectedOptions;
|
|
312
|
+
}, _Select_defineGetter = function _Select_defineGetter(p, get) {
|
|
313
|
+
Object.defineProperty(this.host, p, { enumerable: true, get });
|
|
314
|
+
};
|
|
315
|
+
Select.style = QdsSelectStyle0;
|
|
316
|
+
|
|
317
|
+
export { Select as qds_select };
|
|
318
|
+
|
|
319
|
+
//# sourceMappingURL=qds-select.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"qds-select.entry.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n}\n\n.qds-container,\n.qds-select {\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\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 border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n text-overflow: ellipsis;\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-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: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\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) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the select with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-select>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The `value` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLSelectElement['setCustomValidity'] = (\n error,\n ) => {\n invariant(this.#select)\n\n this.#select.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
|
|
7
|
+
import { a as attachInternals, p as pickFocusEventAttributes, g as determineLinkIcon } from './helpers-2e4ca34d.js';
|
|
8
|
+
|
|
9
|
+
const standaloneLinkCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-icon-crop{align-items:center;display:flex;justify-content:center}.qds-icon{flex-shrink:0;transform:scaleX(var(--qds-direction-factor,1))}.qds-standalone-link{border-radius:var(--qds-focus-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-text-decoration:none;text-decoration:none;width:100%}.qds-standalone-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-standalone-link:active,.qds-standalone-link:hover{-webkit-text-decoration:underline;text-decoration:underline}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}.qds-visitable[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}.qds-visitable[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}.qds-visitable[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}.qds-visitable[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}.qds-visitable[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}.qds-visitable[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-standalone-link[data-size=small]{font:var(--qds-control-small-link);gap:var(--qds-control-small-gap-internal);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=small][data-importance=subdued]{font:var(--qds-control-small-text)}.qds-icon-crop[data-size=small]{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-standalone-link[data-size=standard]{font:var(--qds-control-standard-link);gap:var(--qds-control-standard-gap-internal);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=standard][data-importance=subdued]{font:var(--qds-control-standard-text)}.qds-icon-crop[data-size=standard]{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-standalone-link[data-size=large]{font:var(--qds-control-large-link);gap:var(--qds-control-large-gap-internal);padding-block:var(--qds-control-large-padding-auto-height)}[data-size=large][data-importance=subdued]{font:var(--qds-control-large-text)}.qds-icon-crop[data-size=large]{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
|
|
10
|
+
const QdsStandaloneLinkStyle0 = standaloneLinkCss;
|
|
11
|
+
|
|
12
|
+
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
|
+
//
|
|
14
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
15
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
16
|
+
if (kind === "a" && !f)
|
|
17
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
18
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
19
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
20
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
21
|
+
};
|
|
22
|
+
var _StandaloneLink_instances, _StandaloneLink_internals, _StandaloneLink_computedImportance_get, _StandaloneLink_computedSize_get, _StandaloneLink_onBlur, _StandaloneLink_onFocus, _StandaloneLink_onSlotchange;
|
|
23
|
+
const StandaloneLink = class {
|
|
24
|
+
constructor(hostRef) {
|
|
25
|
+
registerInstance(this, hostRef);
|
|
26
|
+
this.blurEmitter = createEvent(this, "qdsBlur", 2);
|
|
27
|
+
this.focusEmitter = createEvent(this, "qdsFocus", 2);
|
|
28
|
+
_StandaloneLink_instances.add(this);
|
|
29
|
+
/**
|
|
30
|
+
* Prevents the standalone link from being interacted with: it cannot be pressed
|
|
31
|
+
* or focused.
|
|
32
|
+
*/
|
|
33
|
+
this.disabled = false;
|
|
34
|
+
/**
|
|
35
|
+
* The name of a registered icon library.
|
|
36
|
+
*/
|
|
37
|
+
this.iconLibrary = 'default';
|
|
38
|
+
/**
|
|
39
|
+
* The standalone link's importance.
|
|
40
|
+
*/
|
|
41
|
+
this.importance = 'standard';
|
|
42
|
+
/**
|
|
43
|
+
* The standalone link's size.
|
|
44
|
+
*/
|
|
45
|
+
this.size = 'standard';
|
|
46
|
+
/**
|
|
47
|
+
* Defines if the standalone link will display the visited state.
|
|
48
|
+
*/
|
|
49
|
+
this.visitable = false;
|
|
50
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
51
|
+
_StandaloneLink_internals.set(this, attachInternals.call(this));
|
|
52
|
+
_StandaloneLink_onBlur.set(this, (event) => {
|
|
53
|
+
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
54
|
+
});
|
|
55
|
+
_StandaloneLink_onFocus.set(this, (event) => {
|
|
56
|
+
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
57
|
+
});
|
|
58
|
+
_StandaloneLink_onSlotchange.set(this, () => {
|
|
59
|
+
__classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
onClick(event) {
|
|
63
|
+
if (this.disabled)
|
|
64
|
+
event.stopImmediatePropagation();
|
|
65
|
+
}
|
|
66
|
+
disabledChanged() {
|
|
67
|
+
__classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaDisabled = this.disabled.toString();
|
|
68
|
+
}
|
|
69
|
+
tabindexChanged(newValue) {
|
|
70
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
71
|
+
// FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests
|
|
72
|
+
// to fail, but it's not clear why this is the case since it works for
|
|
73
|
+
// other components.
|
|
74
|
+
this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
|
|
75
|
+
}
|
|
76
|
+
hrefTargetChanged() {
|
|
77
|
+
this.linkIcon = determineLinkIcon(this.href, this.target);
|
|
78
|
+
}
|
|
79
|
+
componentWillLoad() {
|
|
80
|
+
__classPrivateFieldGet(this, _StandaloneLink_internals, "f").role = 'link';
|
|
81
|
+
this.disabledChanged();
|
|
82
|
+
this.hrefTargetChanged();
|
|
83
|
+
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
84
|
+
}
|
|
85
|
+
componentDidLoad() {
|
|
86
|
+
__classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
return (h("a", { key: 'abab380cd9a22d00a0b504e0ed7cb5d5f1ca7ae2', "aria-hidden": "true", class: {
|
|
90
|
+
'qds-standalone-link': true,
|
|
91
|
+
'qds-disabled': this.disabled,
|
|
92
|
+
'qds-visitable': this.visitable,
|
|
93
|
+
}, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: '733f3a24a1755bfb7433e755b86694bbc57832a0', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '99cf41fd72607d2b8c426b6aa249fe848d0650c4', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName }))), h("span", { key: '6a3d73fd1ddd338c7bf4de18828ed7c960cd86ea', class: "qds-text" }, h("slot", { key: '1e451614590865d9aa2bfe6175d0d82771e887c7', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("span", { key: '8c340596a69219ef6378083141ff3febe0d26f4d', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '9034e9e1265e04d53a3f8ed0c9c0756c1d94a673', class: "qds-icon", library: "core", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), name: this.linkIcon }))), this.importance === 'emphasized' && (h("span", { key: '6b6aa6b82742965e1357422dbb78e022a28183bc', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '239fe0a496827fe27d7b34a57e217b764e02407c', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: "core", name: "next" })))));
|
|
94
|
+
}
|
|
95
|
+
static get delegatesFocus() { return true; }
|
|
96
|
+
get host() { return getElement(this); }
|
|
97
|
+
static get watchers() { return {
|
|
98
|
+
"disabled": ["disabledChanged"],
|
|
99
|
+
"tabindex": ["tabindexChanged"],
|
|
100
|
+
"href": ["hrefTargetChanged"],
|
|
101
|
+
"target": ["hrefTargetChanged"]
|
|
102
|
+
}; }
|
|
103
|
+
};
|
|
104
|
+
_StandaloneLink_internals = new WeakMap(), _StandaloneLink_onBlur = new WeakMap(), _StandaloneLink_onFocus = new WeakMap(), _StandaloneLink_onSlotchange = new WeakMap(), _StandaloneLink_instances = new WeakSet(), _StandaloneLink_computedImportance_get = function _StandaloneLink_computedImportance_get() {
|
|
105
|
+
switch (this.importance) {
|
|
106
|
+
case 'subdued':
|
|
107
|
+
case 'emphasized': {
|
|
108
|
+
return this.importance;
|
|
109
|
+
}
|
|
110
|
+
default: {
|
|
111
|
+
return 'standard';
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}, _StandaloneLink_computedSize_get = function _StandaloneLink_computedSize_get() {
|
|
115
|
+
switch (this.size) {
|
|
116
|
+
case 'standard':
|
|
117
|
+
case 'small':
|
|
118
|
+
case 'large': {
|
|
119
|
+
return this.size;
|
|
120
|
+
}
|
|
121
|
+
default: {
|
|
122
|
+
return 'standard';
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
StandaloneLink.style = QdsStandaloneLinkStyle0;
|
|
127
|
+
|
|
128
|
+
export { StandaloneLink as qds_standalone_link };
|
|
129
|
+
|
|
130
|
+
//# sourceMappingURL=qds-standalone-link.entry.js.map
|