@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,222 +1,248 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* SPDX-FileCopyrightText: ©
|
|
2
|
+
* SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
3
3
|
*
|
|
4
|
-
* SPDX-License-Identifier:
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-
|
|
7
|
-
import { o as offset, f as flip, s as shift,
|
|
8
|
-
import {
|
|
6
|
+
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b1d6acd2.js';
|
|
7
|
+
import { o as offset, f as flip, s as shift, l as limitShift, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-61986f35.js';
|
|
8
|
+
import { r as resolveTarget, d as propertyToPx, e as roundByDPR, f as ignorePromise } from './helpers-2e4ca34d.js';
|
|
9
9
|
|
|
10
|
-
const dropdownCss = ":host
|
|
10
|
+
const dropdownCss = ":host([hidden]){display:none!important}:host{background:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;display:inline-block;left:0;top:0}";
|
|
11
|
+
const QdsDropdownStyle0 = dropdownCss;
|
|
11
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 _Dropdown_instances, _Dropdown_cleanup, _Dropdown_middleware, _Dropdown_referenceElement, _Dropdown_open, _Dropdown_onFocusout, _Dropdown_onKeydown, _Dropdown_onReferenceClick, _Dropdown_disconnectReferenceElement;
|
|
12
33
|
let autoIncrementingId = 1;
|
|
34
|
+
const isQdsButton = (element) => element.tagName.toLowerCase() === 'qds-button';
|
|
13
35
|
const Dropdown = class {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
constructor(hostRef) {
|
|
37
|
+
registerInstance(this, hostRef);
|
|
38
|
+
this.cancelEmitter = createEvent(this, "qdsCancel", 3);
|
|
39
|
+
this.closeEmitter = createEvent(this, "qdsClose", 2);
|
|
40
|
+
_Dropdown_instances.add(this);
|
|
41
|
+
/**
|
|
42
|
+
* Prevents the dropdown from being shown by user interaction. The dropdown
|
|
43
|
+
* can still be displayed by calling the `show()` method.
|
|
44
|
+
*/
|
|
45
|
+
this.disabled = false;
|
|
46
|
+
/**
|
|
47
|
+
* Disable Floating UI's
|
|
48
|
+
* [`flip` middleware](https://floating-ui.com/docs/flip).
|
|
49
|
+
*/
|
|
50
|
+
this.noFlip = false;
|
|
51
|
+
/**
|
|
52
|
+
* Disable Floating UI's
|
|
53
|
+
* [`shift` middleware](https://floating-ui.com/docs/shift).
|
|
54
|
+
*/
|
|
55
|
+
this.noShift = false;
|
|
56
|
+
/**
|
|
57
|
+
* Where to place the dropdown relative to the `target`.
|
|
58
|
+
*
|
|
59
|
+
* @see https://floating-ui.com/docs/tutorial#placements
|
|
60
|
+
*/
|
|
61
|
+
this.placement = 'bottom-start';
|
|
62
|
+
_Dropdown_cleanup.set(this, void 0);
|
|
63
|
+
_Dropdown_middleware.set(this, void 0);
|
|
64
|
+
_Dropdown_referenceElement.set(this, void 0);
|
|
65
|
+
_Dropdown_open.set(this, false
|
|
66
|
+
/**
|
|
67
|
+
* Update the dropdown's middleware and position.
|
|
68
|
+
*/
|
|
69
|
+
);
|
|
70
|
+
_Dropdown_onFocusout.set(this, (event) => {
|
|
71
|
+
if (!(event instanceof FocusEvent))
|
|
72
|
+
return;
|
|
73
|
+
const { relatedTarget } = event;
|
|
74
|
+
if (relatedTarget instanceof globalThis.Element &&
|
|
75
|
+
!this.host.contains(relatedTarget) &&
|
|
76
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") !== relatedTarget)
|
|
77
|
+
this.close();
|
|
78
|
+
});
|
|
79
|
+
_Dropdown_onKeydown.set(this, (event) => {
|
|
80
|
+
if (!(event instanceof KeyboardEvent) ||
|
|
81
|
+
event.key !== 'Escape' ||
|
|
82
|
+
(event.target !== __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") &&
|
|
83
|
+
event.target instanceof globalThis.Element &&
|
|
84
|
+
event.target.closest('qds-dropdown') !== this.host))
|
|
85
|
+
return;
|
|
86
|
+
const cancelEvent = this.cancelEmitter.emit();
|
|
87
|
+
if (cancelEvent.defaultPrevented)
|
|
88
|
+
return;
|
|
89
|
+
this.close();
|
|
90
|
+
if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.HTMLElement ||
|
|
91
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.SVGElement)
|
|
92
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").focus();
|
|
93
|
+
});
|
|
94
|
+
_Dropdown_onReferenceClick.set(this, () => {
|
|
95
|
+
if (this.disabled)
|
|
96
|
+
return;
|
|
97
|
+
if (__classPrivateFieldGet(this, _Dropdown_open, "f"))
|
|
98
|
+
this.close();
|
|
99
|
+
else
|
|
100
|
+
this.show();
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Update the dropdown's middleware and position.
|
|
105
|
+
*/
|
|
106
|
+
async update() {
|
|
107
|
+
await this.updateMiddleware();
|
|
108
|
+
}
|
|
109
|
+
handleMouseDown(event) {
|
|
110
|
+
if (!__classPrivateFieldGet(this, _Dropdown_open, "f"))
|
|
111
|
+
return;
|
|
112
|
+
const composedPath = event.composedPath();
|
|
113
|
+
const withinBounds = composedPath.includes(this.host) ||
|
|
114
|
+
(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element &&
|
|
115
|
+
composedPath.includes(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")));
|
|
116
|
+
if (!withinBounds)
|
|
117
|
+
this.close();
|
|
118
|
+
}
|
|
119
|
+
async updateReferenceElement() {
|
|
120
|
+
var _a;
|
|
121
|
+
__classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
|
|
122
|
+
__classPrivateFieldSet(this, _Dropdown_referenceElement, resolveTarget(this.target), "f");
|
|
123
|
+
if (!(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element))
|
|
124
|
+
return;
|
|
125
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'false');
|
|
126
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('click', __classPrivateFieldGet(this, _Dropdown_onReferenceClick, "f"));
|
|
127
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"));
|
|
128
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"));
|
|
129
|
+
if (this.host.role === 'menu') {
|
|
130
|
+
(_a = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f")).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
|
|
131
|
+
this.hostAriaLabelledBy = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").id;
|
|
132
|
+
}
|
|
133
|
+
await this.updatePosition();
|
|
52
134
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
135
|
+
async updateMiddleware() {
|
|
136
|
+
__classPrivateFieldSet(this, _Dropdown_middleware, [
|
|
137
|
+
offset({
|
|
138
|
+
...this.offsetOptions,
|
|
139
|
+
mainAxis: propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0,
|
|
140
|
+
}),
|
|
141
|
+
!this.noFlip &&
|
|
142
|
+
flip({
|
|
143
|
+
crossAxis: this.noShift,
|
|
144
|
+
...this.flipOptions,
|
|
145
|
+
}),
|
|
146
|
+
!this.noShift &&
|
|
147
|
+
shift({
|
|
148
|
+
limiter: limitShift(),
|
|
149
|
+
...this.shiftOptions,
|
|
150
|
+
}),
|
|
151
|
+
].filter((middleware) => middleware !== false), "f");
|
|
152
|
+
await this.updatePosition();
|
|
66
153
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
await this.updateMiddleware();
|
|
78
|
-
}
|
|
79
|
-
async handleMouseDown(event) {
|
|
80
|
-
if (!this.open)
|
|
81
|
-
return;
|
|
82
|
-
const composedPath = event.composedPath();
|
|
83
|
-
const withinBounds = composedPath.includes(this.element) ||
|
|
84
|
-
(this.referenceElement instanceof globalThis.Element &&
|
|
85
|
-
composedPath.includes(this.referenceElement));
|
|
86
|
-
if (!withinBounds)
|
|
87
|
-
await this.close();
|
|
88
|
-
}
|
|
89
|
-
async updateReferenceElement() {
|
|
90
|
-
var _a;
|
|
91
|
-
this.disconnectReferenceElement();
|
|
92
|
-
const resolvedTarget = typeof this.target === 'function' ? this.target() : this.target;
|
|
93
|
-
if (typeof resolvedTarget === 'string') {
|
|
94
|
-
const element = document.querySelector(resolvedTarget);
|
|
95
|
-
if (element === null)
|
|
96
|
-
throw new Error('String `target` must resolve to an Element.');
|
|
97
|
-
this.referenceElement = element;
|
|
154
|
+
async updatePosition() {
|
|
155
|
+
if (!__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"))
|
|
156
|
+
return;
|
|
157
|
+
const { x, y, strategy } = await computePosition(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, {
|
|
158
|
+
middleware: __classPrivateFieldGet(this, _Dropdown_middleware, "f"),
|
|
159
|
+
placement: this.placement,
|
|
160
|
+
strategy: this.strategy,
|
|
161
|
+
});
|
|
162
|
+
this.hostPosition = strategy;
|
|
163
|
+
this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
|
|
98
164
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
if (this.element.role === 'menu') {
|
|
108
|
-
(_a = this.referenceElement).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
|
|
109
|
-
this.hostAriaLabelledBy = this.referenceElement.id;
|
|
165
|
+
startAutoUpdate() {
|
|
166
|
+
if (!__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"))
|
|
167
|
+
return;
|
|
168
|
+
if (__classPrivateFieldGet(this, _Dropdown_cleanup, "f"))
|
|
169
|
+
__classPrivateFieldGet(this, _Dropdown_cleanup, "f").call(this);
|
|
170
|
+
__classPrivateFieldSet(this, _Dropdown_cleanup, autoUpdate(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, () => {
|
|
171
|
+
ignorePromise(this.updatePosition());
|
|
172
|
+
}, this.autoUpdateOptions), "f");
|
|
110
173
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
this.referenceElement !== relatedTarget)
|
|
175
|
-
await this.close();
|
|
176
|
-
}
|
|
177
|
-
async handleEscape(event) {
|
|
178
|
-
if (!(event instanceof KeyboardEvent) ||
|
|
179
|
-
event.key !== 'Escape' ||
|
|
180
|
-
(event.target !== this.referenceElement &&
|
|
181
|
-
event.target instanceof globalThis.Element &&
|
|
182
|
-
event.target.closest('qds-dropdown') !== this.element))
|
|
183
|
-
return;
|
|
184
|
-
const cancelEvent = this.cancelEmitter.emit();
|
|
185
|
-
if (cancelEvent.defaultPrevented)
|
|
186
|
-
return;
|
|
187
|
-
await this.close();
|
|
188
|
-
if (this.referenceElement instanceof globalThis.HTMLElement ||
|
|
189
|
-
this.referenceElement instanceof globalThis.SVGElement)
|
|
190
|
-
this.referenceElement.focus();
|
|
191
|
-
}
|
|
192
|
-
async handleReferenceClick() {
|
|
193
|
-
if (!this.disabled)
|
|
194
|
-
await (this.open ? this.close() : this.show());
|
|
195
|
-
}
|
|
196
|
-
disconnectReferenceElement() {
|
|
174
|
+
async componentWillLoad() {
|
|
175
|
+
var _a, _b;
|
|
176
|
+
this.hostDisplay = 'none';
|
|
177
|
+
(_a = this.host).role ?? (_a.role = 'menu');
|
|
178
|
+
(_b = this.host).id || (_b.id = `qds-dropdown-${autoIncrementingId}`);
|
|
179
|
+
await this.updateReferenceElement();
|
|
180
|
+
autoIncrementingId += 1;
|
|
181
|
+
await this.updateMiddleware();
|
|
182
|
+
}
|
|
183
|
+
disconnectedCallback() {
|
|
184
|
+
__classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
|
|
185
|
+
}
|
|
186
|
+
render() {
|
|
187
|
+
return (h(Host, { key: 'c192187f4fbe9fa2e166cb86b435c45c9d6d2a26', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"), onFocusout: __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"), style: {
|
|
188
|
+
display: this.hostDisplay,
|
|
189
|
+
position: this.hostPosition,
|
|
190
|
+
transform: this.hostTransform,
|
|
191
|
+
} }, h("slot", { key: '41a6332566fe8e7e935f8f638367c3f0d9571cbe' })));
|
|
192
|
+
}
|
|
193
|
+
show() {
|
|
194
|
+
if (__classPrivateFieldGet(this, _Dropdown_open, "f"))
|
|
195
|
+
return;
|
|
196
|
+
if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element) {
|
|
197
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'true');
|
|
198
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-controls', this.host.id);
|
|
199
|
+
if (isQdsButton(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")) &&
|
|
200
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action === 'dropdown')
|
|
201
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action = 'dropdown-close';
|
|
202
|
+
}
|
|
203
|
+
__classPrivateFieldSet(this, _Dropdown_open, true, "f");
|
|
204
|
+
this.hostDisplay = undefined;
|
|
205
|
+
this.startAutoUpdate();
|
|
206
|
+
}
|
|
207
|
+
close() {
|
|
208
|
+
if (!__classPrivateFieldGet(this, _Dropdown_open, "f"))
|
|
209
|
+
return;
|
|
210
|
+
if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element) {
|
|
211
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'false');
|
|
212
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-controls');
|
|
213
|
+
if (isQdsButton(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")) &&
|
|
214
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action === 'dropdown-close')
|
|
215
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action = 'dropdown';
|
|
216
|
+
}
|
|
217
|
+
__classPrivateFieldSet(this, _Dropdown_open, false, "f");
|
|
218
|
+
this.hostDisplay = 'none';
|
|
219
|
+
if (__classPrivateFieldGet(this, _Dropdown_cleanup, "f"))
|
|
220
|
+
__classPrivateFieldGet(this, _Dropdown_cleanup, "f").call(this);
|
|
221
|
+
this.closeEmitter.emit();
|
|
222
|
+
}
|
|
223
|
+
get host() { return getElement(this); }
|
|
224
|
+
static get watchers() { return {
|
|
225
|
+
"target": ["updateReferenceElement"],
|
|
226
|
+
"flipOptions": ["updateMiddleware"],
|
|
227
|
+
"noFlip": ["updateMiddleware"],
|
|
228
|
+
"noShift": ["updateMiddleware"],
|
|
229
|
+
"offsetOptions": ["updateMiddleware"],
|
|
230
|
+
"shiftOptions": ["updateMiddleware"],
|
|
231
|
+
"placement": ["updatePosition"],
|
|
232
|
+
"strategy": ["updatePosition"],
|
|
233
|
+
"autoUpdateOptions": ["startAutoUpdate"]
|
|
234
|
+
}; }
|
|
235
|
+
};
|
|
236
|
+
_Dropdown_cleanup = new WeakMap(), _Dropdown_middleware = new WeakMap(), _Dropdown_referenceElement = new WeakMap(), _Dropdown_open = new WeakMap(), _Dropdown_onFocusout = new WeakMap(), _Dropdown_onKeydown = new WeakMap(), _Dropdown_onReferenceClick = new WeakMap(), _Dropdown_instances = new WeakSet(), _Dropdown_disconnectReferenceElement = function _Dropdown_disconnectReferenceElement() {
|
|
197
237
|
this.hostAriaLabelledBy = undefined;
|
|
198
|
-
if (!(this
|
|
199
|
-
|
|
200
|
-
this.
|
|
201
|
-
this.
|
|
202
|
-
this.
|
|
203
|
-
this.
|
|
204
|
-
this.referenceElement.removeAttribute('aria-controls');
|
|
205
|
-
}
|
|
206
|
-
get element() { return getElement(this); }
|
|
207
|
-
static get watchers() { return {
|
|
208
|
-
"target": ["updateReferenceElement"],
|
|
209
|
-
"flipOptions": ["updateMiddleware"],
|
|
210
|
-
"noFlip": ["updateMiddleware"],
|
|
211
|
-
"noShift": ["updateMiddleware"],
|
|
212
|
-
"offsetOptions": ["updateMiddleware"],
|
|
213
|
-
"shiftOptions": ["updateMiddleware"],
|
|
214
|
-
"placement": ["updatePosition"],
|
|
215
|
-
"strategy": ["updatePosition"],
|
|
216
|
-
"autoUpdateOptions": ["startAutoUpdate"]
|
|
217
|
-
}; }
|
|
238
|
+
if (!(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element))
|
|
239
|
+
return;
|
|
240
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"));
|
|
241
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"));
|
|
242
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-expanded');
|
|
243
|
+
__classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-controls');
|
|
218
244
|
};
|
|
219
|
-
Dropdown.style =
|
|
245
|
+
Dropdown.style = QdsDropdownStyle0;
|
|
220
246
|
|
|
221
247
|
export { Dropdown as qds_dropdown };
|
|
222
248
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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 background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n */\n @Prop({ mutable: true }) public disabled = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the dropdown relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target!:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n *\n * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n */\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /**\n * Show the dropdown.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /**\n * Close the dropdown.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /**\n * Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id ||= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) ||\n event.key !== 'Escape' ||\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement ||\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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 background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n propertyToPx,\n resolveTarget,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nconst isQdsButton = (\n element: globalThis.Element,\n): element is HTMLQdsButtonElement =>\n element.tagName.toLowerCase() === 'qds-button'\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the dropdown relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the dropdown. The target specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][] or [Virtual Element][]\n * - A function returning a reference to an [`Element`][],\n * [Virtual Element][], or a CSS selector string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n */\n @Prop() public readonly target!:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n *\n * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n */\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n #cleanup?: () => void\n\n #middleware?: Middleware[]\n\n #referenceElement?: ReferenceElement\n\n #open = false\n\n /**\n * Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected handleMouseDown(event: MouseEvent): void {\n if (!this.#open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.host) ||\n (this.#referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.#referenceElement))\n if (!withinBounds) this.close()\n }\n\n @Watch('target')\n protected async updateReferenceElement(): Promise<void> {\n this.#disconnectReferenceElement()\n\n this.#referenceElement = resolveTarget(this.target)\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#referenceElement.setAttribute('aria-expanded', 'false')\n this.#referenceElement.addEventListener('click', this.#onReferenceClick)\n this.#referenceElement.addEventListener('focusout', this.#onFocusout)\n this.#referenceElement.addEventListener('keydown', this.#onKeydown)\n\n if (this.host.role === 'menu') {\n this.#referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.#referenceElement.id\n }\n await this.updatePosition()\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n this.#middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n protected async updatePosition(): Promise<void> {\n if (!this.#referenceElement) return\n\n const { x, y, strategy } = await computePosition(\n this.#referenceElement,\n this.host,\n {\n middleware: this.#middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n protected startAutoUpdate(): void {\n if (!this.#referenceElement) return\n\n if (this.#cleanup) this.#cleanup()\n this.#cleanup = autoUpdate(\n this.#referenceElement,\n this.host,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.host.role ??= 'menu'\n this.host.id ||= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.#disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.#onKeydown}\n onFocusout={this.#onFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n public show(): void {\n if (this.#open) return\n\n if (this.#referenceElement instanceof globalThis.Element) {\n this.#referenceElement.setAttribute('aria-expanded', 'true')\n this.#referenceElement.setAttribute('aria-controls', this.host.id)\n\n if (\n isQdsButton(this.#referenceElement) &&\n this.#referenceElement.action === 'dropdown'\n )\n this.#referenceElement.action = 'dropdown-close'\n }\n\n this.#open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n public close(): void {\n if (!this.#open) return\n\n if (this.#referenceElement instanceof globalThis.Element) {\n this.#referenceElement.setAttribute('aria-expanded', 'false')\n this.#referenceElement.removeAttribute('aria-controls')\n\n if (\n isQdsButton(this.#referenceElement) &&\n this.#referenceElement.action === 'dropdown-close'\n )\n this.#referenceElement.action = 'dropdown'\n }\n\n this.#open = false\n this.hostDisplay = 'none'\n if (this.#cleanup) this.#cleanup()\n\n this.closeEmitter.emit()\n }\n\n readonly #onFocusout = (event: Event): void => {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.host.contains(relatedTarget) &&\n this.#referenceElement !== relatedTarget\n )\n this.close()\n }\n\n readonly #onKeydown = (event: Event): void => {\n if (\n !(event instanceof KeyboardEvent) ||\n event.key !== 'Escape' ||\n (event.target !== this.#referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.host)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n this.close()\n if (\n this.#referenceElement instanceof globalThis.HTMLElement ||\n this.#referenceElement instanceof globalThis.SVGElement\n )\n this.#referenceElement.focus()\n }\n\n readonly #onReferenceClick = (): void => {\n if (this.disabled) return\n\n if (this.#open) this.close()\n else this.show()\n }\n\n #disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#referenceElement.removeEventListener('focusout', this.#onFocusout)\n this.#referenceElement.removeEventListener('keydown', this.#onKeydown)\n this.#referenceElement.removeAttribute('aria-expanded')\n this.#referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}
|