@quartzds/core 1.0.0-beta.12 → 1.0.0-beta.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1895 -0
- package/README.md +23 -23
- package/components/index.d.ts +50 -0
- package/components/index.js +62 -28
- package/components/index.js.map +1 -1
- package/components/p-5RFBIepu.js +112 -0
- package/components/p-5RFBIepu.js.map +1 -0
- package/components/p-B03FWheS.js +393 -0
- package/components/p-B03FWheS.js.map +1 -0
- package/components/p-BkBJDD6Y.js +274 -0
- package/components/p-BkBJDD6Y.js.map +1 -0
- package/components/p-BkgfW_tl.js +282 -0
- package/components/p-BkgfW_tl.js.map +1 -0
- package/components/p-Bnc7Puxx.js +164 -0
- package/components/p-Bnc7Puxx.js.map +1 -0
- package/components/{floating-ui.dom.esm.js → p-Bv2vPjgL.js} +557 -345
- package/components/p-Bv2vPjgL.js.map +1 -0
- package/components/p-CDRwHAIT.js +105 -0
- package/components/p-CDRwHAIT.js.map +1 -0
- package/components/p-CFVg7I9T.js +269 -0
- package/components/p-CFVg7I9T.js.map +1 -0
- package/components/p-CRVPDKfO.js +163 -0
- package/components/p-CRVPDKfO.js.map +1 -0
- package/components/p-CXP6q9Mr.js +286 -0
- package/components/p-CXP6q9Mr.js.map +1 -0
- package/components/p-CZRW1LV_.js +28 -0
- package/components/p-CZRW1LV_.js.map +1 -0
- package/components/p-D2489VzR.js +2133 -0
- package/components/p-D2489VzR.js.map +1 -0
- package/components/p-DeRqCYmp.js +102 -0
- package/components/p-DeRqCYmp.js.map +1 -0
- package/components/p-DnZdwX0l.js +149 -0
- package/components/p-DnZdwX0l.js.map +1 -0
- package/components/p-Dsc0-aXK.js +162 -0
- package/components/p-Dsc0-aXK.js.map +1 -0
- package/components/p-DwxIJEUj.js +91 -0
- package/components/p-DwxIJEUj.js.map +1 -0
- package/components/p-U2Q0vF-d.js +96 -0
- package/components/p-U2Q0vF-d.js.map +1 -0
- package/components/p-eFhV8w2l.js +428 -0
- package/components/p-eFhV8w2l.js.map +1 -0
- package/components/qds-action-item.d.ts +11 -0
- package/components/qds-action-item.js +183 -0
- package/components/qds-action-item.js.map +1 -0
- package/components/qds-avatar-media.d.ts +11 -0
- package/components/qds-avatar-media.js +14 -0
- package/components/qds-avatar-media.js.map +1 -0
- package/components/qds-badge-counter.d.ts +11 -0
- package/components/qds-badge-counter.js +14 -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 +14 -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 +169 -0
- package/components/qds-breadcrumb-item.js.map +1 -0
- package/components/qds-button.d.ts +2 -2
- package/components/qds-button.js +457 -129
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.d.ts +2 -2
- package/components/qds-checkbox.js +4 -146
- package/components/qds-checkbox.js.map +1 -1
- package/components/qds-chip.d.ts +11 -0
- package/components/qds-chip.js +304 -0
- package/components/qds-chip.js.map +1 -0
- package/components/qds-dialog.d.ts +2 -2
- package/components/qds-dialog.js +179 -93
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.d.ts +2 -2
- package/components/qds-divider.js +4 -39
- package/components/qds-divider.js.map +1 -1
- package/components/qds-dropdown.d.ts +2 -2
- package/components/qds-dropdown.js +4 -249
- package/components/qds-dropdown.js.map +1 -1
- package/components/qds-form-message.d.ts +2 -2
- package/components/qds-form-message.js +100 -50
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.d.ts +11 -0
- package/components/qds-icon-button.js +14 -0
- package/components/qds-icon-button.js.map +1 -0
- package/components/qds-icon-tab.d.ts +11 -0
- package/components/qds-icon-tab.js +278 -0
- package/components/qds-icon-tab.js.map +1 -0
- package/components/qds-icon.d.ts +2 -2
- package/components/qds-icon.js +4 -3
- package/components/qds-inline-link.d.ts +2 -2
- package/components/qds-inline-link.js +171 -74
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.d.ts +2 -2
- package/components/qds-input.js +548 -230
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.d.ts +2 -2
- package/components/qds-label.js +4 -3
- package/components/qds-list-item.d.ts +11 -0
- package/components/qds-list-item.js +395 -0
- package/components/qds-list-item.js.map +1 -0
- package/components/qds-loader.d.ts +11 -0
- package/components/qds-loader.js +152 -0
- package/components/qds-loader.js.map +1 -0
- package/components/qds-menu-item.d.ts +11 -0
- package/components/qds-menu-item.js +204 -0
- package/components/qds-menu-item.js.map +1 -0
- package/components/qds-mini-button.d.ts +11 -0
- package/components/qds-mini-button.js +14 -0
- package/components/qds-mini-button.js.map +1 -0
- package/components/qds-progress-bar.d.ts +11 -0
- package/components/qds-progress-bar.js +155 -0
- package/components/qds-progress-bar.js.map +1 -0
- package/components/qds-radio.d.ts +2 -2
- package/components/qds-radio.js +4 -99
- package/components/qds-radio.js.map +1 -1
- package/components/qds-select.d.ts +11 -0
- package/components/qds-select.js +363 -0
- package/components/qds-select.js.map +1 -0
- package/components/qds-standalone-link.d.ts +11 -0
- package/components/qds-standalone-link.js +208 -0
- package/components/qds-standalone-link.js.map +1 -0
- package/components/qds-switch.d.ts +2 -2
- package/components/qds-switch.js +257 -105
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.d.ts +11 -0
- package/components/qds-tab.js +339 -0
- package/components/qds-tab.js.map +1 -0
- package/components/qds-tabbar.d.ts +11 -0
- package/components/qds-tabbar.js +410 -0
- package/components/qds-tabbar.js.map +1 -0
- package/components/qds-table-cell.d.ts +11 -0
- package/components/qds-table-cell.js +81 -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 +87 -0
- package/components/qds-table-head-cell.js.map +1 -0
- package/components/qds-table-row.d.ts +11 -0
- package/components/qds-table-row.js +48 -0
- package/components/qds-table-row.js.map +1 -0
- package/components/qds-table.d.ts +11 -0
- package/components/qds-table.js +48 -0
- package/components/qds-table.js.map +1 -0
- package/components/qds-tag.d.ts +11 -0
- package/components/qds-tag.js +14 -0
- package/components/qds-tag.js.map +1 -0
- package/components/qds-textarea.d.ts +2 -2
- package/components/qds-textarea.js +352 -193
- package/components/qds-textarea.js.map +1 -1
- package/components/qds-title.d.ts +2 -2
- package/components/qds-title.js +4 -84
- package/components/qds-title.js.map +1 -1
- package/components/qds-tooltip.d.ts +2 -2
- package/components/qds-tooltip.js +4 -315
- package/components/qds-tooltip.js.map +1 -1
- package/dist/cjs/app-globals-CLoao1by.js +13 -0
- package/dist/cjs/app-globals-CLoao1by.js.map +1 -0
- package/dist/cjs/controls-DKGeNyr5.js +32 -0
- package/dist/cjs/controls-DKGeNyr5.js.map +1 -0
- package/dist/cjs/{floating-ui.dom.esm-7f1cac3e.js → floating-ui.dom-Bvzubd50.js} +557 -345
- package/dist/cjs/floating-ui.dom-Bvzubd50.js.map +1 -0
- package/dist/cjs/helpers-BIL8yXqA.js +303 -0
- package/dist/cjs/helpers-BIL8yXqA.js.map +1 -0
- package/dist/cjs/index-DIY7gpXM.js +2376 -0
- package/dist/cjs/index-DIY7gpXM.js.map +1 -0
- package/dist/cjs/index.cjs.js +40 -31
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/library-CeKRI2f2.js +142 -0
- package/dist/cjs/library-CeKRI2f2.js.map +1 -0
- package/dist/cjs/loader.cjs.js +9 -10
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +145 -0
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +399 -0
- package/dist/cjs/qds-badge-counter.qds-badge-indicator.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +146 -0
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +129 -0
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-button.cjs.entry.js +385 -93
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-chip.cjs.entry.js +252 -0
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-dialog.cjs.entry.js +124 -77
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-divider_2.cjs.entry.js +280 -0
- package/dist/cjs/qds-dropdown.cjs.entry.js +373 -209
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-form-message.cjs.entry.js +70 -27
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon-tab.cjs.entry.js +214 -0
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +112 -93
- package/dist/cjs/qds-icon.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-inline-link.cjs.entry.js +137 -49
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-input.cjs.entry.js +473 -188
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-label.cjs.entry.js +118 -27
- package/dist/cjs/qds-label.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-list-item.cjs.entry.js +290 -0
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-loader.cjs.entry.js +126 -0
- package/dist/cjs/qds-loader.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-menu-item.cjs.entry.js +158 -0
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-mini-button.cjs.entry.js +132 -0
- package/dist/cjs/qds-mini-button.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-progress-bar.cjs.entry.js +131 -0
- package/dist/cjs/qds-progress-bar.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-select.cjs.entry.js +319 -0
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-standalone-link.cjs.entry.js +169 -0
- package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-switch.cjs.entry.js +221 -67
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tab.cjs.entry.js +265 -0
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tabbar.cjs.entry.js +344 -0
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table-cell.cjs.entry.js +61 -0
- package/dist/cjs/qds-table-cell.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +65 -0
- package/dist/cjs/qds-table-head-cell.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table-row.cjs.entry.js +34 -0
- package/dist/cjs/qds-table-row.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table.cjs.entry.js +34 -0
- package/dist/cjs/qds-table.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tag.cjs.entry.js +110 -0
- package/dist/cjs/qds-tag.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-textarea.cjs.entry.js +303 -156
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-title.cjs.entry.js +61 -52
- package/dist/cjs/qds-title.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tooltip.cjs.entry.js +334 -263
- package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -0
- package/dist/cjs/qds.cjs.js +18 -17
- package/dist/cjs/qds.cjs.js.map +1 -1
- package/dist/custom-elements.json +12056 -2304
- package/dist/docs.d.ts +344 -240
- package/dist/docs.json +13125 -3360
- package/dist/esm/app-globals-WylVyaRG.js +11 -0
- package/dist/esm/app-globals-WylVyaRG.js.map +1 -0
- package/dist/esm/controls-CZRW1LV_.js +28 -0
- package/dist/esm/controls-CZRW1LV_.js.map +1 -0
- package/dist/esm/{floating-ui.dom.esm-c2f3e549.js → floating-ui.dom-Bv2vPjgL.js} +557 -345
- package/dist/esm/floating-ui.dom-Bv2vPjgL.js.map +1 -0
- package/dist/esm/helpers-BgaJNF9u.js +286 -0
- package/dist/esm/helpers-BgaJNF9u.js.map +1 -0
- package/dist/esm/index-Hg1Liloy.js +2364 -0
- package/dist/esm/index-Hg1Liloy.js.map +1 -0
- package/dist/esm/index.js +40 -30
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/library-CBfntPWH.js +138 -0
- package/dist/esm/library-CBfntPWH.js.map +1 -0
- package/dist/esm/loader.js +10 -9
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/qds-action-item.entry.js +143 -0
- package/dist/esm/qds-action-item.entry.js.map +1 -0
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -0
- package/dist/esm/qds-avatar-media_3.entry.js +395 -0
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -0
- package/dist/esm/qds-badge-counter_2.entry.js +143 -0
- package/dist/esm/qds-breadcrumb-item.entry.js +127 -0
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -0
- package/dist/esm/qds-button.entry.js +385 -91
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +250 -0
- package/dist/esm/qds-chip.entry.js.map +1 -0
- package/dist/esm/qds-dialog.entry.js +124 -75
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -0
- package/dist/esm/qds-divider_2.entry.js +277 -0
- package/dist/esm/qds-dropdown.entry.js +373 -207
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +70 -25
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +212 -0
- package/dist/esm/qds-icon-tab.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +112 -91
- package/dist/esm/qds-icon.entry.js.map +1 -1
- package/dist/esm/qds-inline-link.entry.js +137 -47
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +473 -186
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +118 -25
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +288 -0
- package/dist/esm/qds-list-item.entry.js.map +1 -0
- package/dist/esm/qds-loader.entry.js +124 -0
- package/dist/esm/qds-loader.entry.js.map +1 -0
- package/dist/esm/qds-menu-item.entry.js +156 -0
- package/dist/esm/qds-menu-item.entry.js.map +1 -0
- package/dist/esm/qds-mini-button.entry.js +130 -0
- package/dist/esm/qds-mini-button.entry.js.map +1 -0
- package/dist/esm/qds-progress-bar.entry.js +129 -0
- package/dist/esm/qds-progress-bar.entry.js.map +1 -0
- package/dist/esm/qds-select.entry.js +317 -0
- package/dist/esm/qds-select.entry.js.map +1 -0
- package/dist/esm/qds-standalone-link.entry.js +167 -0
- package/dist/esm/qds-standalone-link.entry.js.map +1 -0
- package/dist/esm/qds-switch.entry.js +221 -65
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +263 -0
- package/dist/esm/qds-tab.entry.js.map +1 -0
- package/dist/esm/qds-tabbar.entry.js +342 -0
- package/dist/esm/qds-tabbar.entry.js.map +1 -0
- package/dist/esm/qds-table-cell.entry.js +59 -0
- package/dist/esm/qds-table-cell.entry.js.map +1 -0
- package/dist/esm/qds-table-head-cell.entry.js +63 -0
- package/dist/esm/qds-table-head-cell.entry.js.map +1 -0
- package/dist/esm/qds-table-row.entry.js +32 -0
- package/dist/esm/qds-table-row.entry.js.map +1 -0
- package/dist/esm/qds-table.entry.js +32 -0
- package/dist/esm/qds-table.entry.js.map +1 -0
- package/dist/esm/qds-tag.entry.js +108 -0
- package/dist/esm/qds-tag.entry.js.map +1 -0
- package/dist/esm/qds-textarea.entry.js +303 -154
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +61 -50
- package/dist/esm/qds-title.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +334 -261
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +18 -16
- package/dist/esm/qds.js.map +1 -1
- package/dist/types/components/action-item/action-item.d.ts +67 -0
- package/dist/types/components/avatar-media/avatar-media.d.ts +39 -0
- 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 +178 -0
- package/dist/types/components/button/button.d.ts +282 -198
- package/dist/types/components/checkbox/checkbox.d.ts +137 -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 +32 -41
- package/dist/types/components/divider/divider.d.ts +14 -9
- package/dist/types/components/dropdown/dropdown.d.ts +116 -125
- package/dist/types/components/form-message/form-message.d.ts +33 -25
- 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/icon-button/icon-button.d.ts +121 -0
- package/dist/types/components/icon-tab/icon-tab.d.ts +110 -0
- package/dist/types/components/inline-link/inline-link.d.ts +209 -191
- package/dist/types/components/input/input.d.ts +431 -368
- package/dist/types/components/label/label.d.ts +37 -24
- package/dist/types/components/list-item/list-item.d.ts +121 -0
- package/dist/types/components/loader/loader.d.ts +32 -0
- package/dist/types/components/menu-item/menu-item.d.ts +71 -0
- package/dist/types/components/mini-button/mini-button.d.ts +82 -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 +234 -0
- package/dist/types/components/switch/switch.d.ts +122 -107
- package/dist/types/components/tab/tab.d.ts +155 -0
- package/dist/types/components/tabbar/tabbar.d.ts +56 -0
- package/dist/types/components/table/table.d.ts +14 -0
- package/dist/types/components/table-cell/table-cell.d.ts +33 -0
- package/dist/types/components/table-head-cell/table-head-cell.d.ts +50 -0
- package/dist/types/components/table-row/table-row.d.ts +14 -0
- package/dist/types/components/tag/tag.d.ts +55 -0
- package/dist/types/components/textarea/textarea.d.ts +295 -300
- package/dist/types/components/title/title.d.ts +39 -32
- package/dist/types/components/tooltip/tooltip.d.ts +111 -136
- package/dist/types/components.d.ts +4403 -959
- package/dist/types/helpers.d.ts +38 -19
- package/dist/types/index.d.ts +2 -1
- package/dist/types/interface-overrides.d.ts +215 -0
- package/dist/types/qds-test.d.ts +22 -11
- package/dist/types/stencil-public-runtime.d.ts +109 -17
- package/dist/types/utils.d.ts +11 -4
- package/dist/vscode.html-custom-data.json +2365 -445
- package/hydrate/index.d.ts +73 -18
- package/hydrate/index.js +28020 -9256
- package/hydrate/index.mjs +28907 -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 +23 -180
- package/styles/core.css +147 -19
- 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 -185
- 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-7f1cac3e.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-ad8d9466.js +0 -72
- package/dist/cjs/library-ad8d9466.js.map +0 -1
- package/dist/cjs/qds-button.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +0 -116
- package/dist/cjs/qds-checkbox.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-dialog.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-divider.cjs.entry.js +0 -33
- package/dist/cjs/qds-divider.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-form-message.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-icon.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-input.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-label.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-radio.cjs.entry.js +0 -74
- package/dist/cjs/qds-radio.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-switch.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-textarea.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-title.cjs.entry.js.map +0 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +0 -1
- package/dist/esm/floating-ui.dom.esm-c2f3e549.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-f36d7d09.js +0 -68
- package/dist/esm/library-f36d7d09.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-checkbox.entry.js +0 -112
- package/dist/esm/qds-checkbox.entry.js.map +0 -1
- package/dist/esm/qds-divider.entry.js +0 -29
- package/dist/esm/qds-divider.entry.js.map +0 -1
- package/dist/esm/qds-radio.entry.js +0 -70
- package/dist/esm/qds-radio.entry.js.map +0 -1
- package/dist/types/components/create-story.d.ts +0 -5
- package/loader/package.json +0 -11
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
var index = require('./index-DIY7gpXM.js');
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
|
+
|
|
11
|
+
const menuItemCss = ":host([hidden]){display:none!important}:host{display:block}:host(:focus-visible){border-radius:var(--qds-control-border-radius);box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-menu-item-container{align-items:center;display:flex;flex-grow:1}.qds-disabled{cursor:not-allowed;opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{color:var(--qds-theme-text-standard)}.qds-text{color:var(--qds-theme-title);flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-shortcut{color:var(--qds-theme-text-subdued)}[data-size=small] .qds-menu-item-container{gap:var(--qds-list-item-small-gap-internal);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .menu-item-checkable,[data-size=small] .qds-icon{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-text{font:var(--qds-list-item-small-title)}[data-size=standard] .qds-menu-item-container{gap:var(--qds-list-item-standard-gap-internal);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .menu-item-checkable,[data-size=standard] .qds-icon{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title)}[data-size=large] .qds-menu-item-container{gap:var(--qds-list-item-large-gap-internal);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .menu-item-checkable,[data-size=large] .qds-icon{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-text{font:var(--qds-list-item-large-title)}.qds-menu-item{align-items:center;-webkit-appearance:none;appearance:none;border:none;border-radius:var(--qds-control-border-radius);box-sizing:border-box;color:var(--qds-theme-text-standard);cursor:pointer;display:flex;flex-grow:1;text-align:initial;-webkit-text-decoration:none;text-decoration:none}.qds-menu-item:not(.qds-selected):not(.qds-disabled):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-menu-item:not(.qds-selected):not(.qds-disabled):active{background-color:var(--qds-theme-interactive-background-pressed)}";
|
|
12
|
+
|
|
13
|
+
// SPDX-FileCopyrightText: © 2025 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 _MenuItem_instances, _MenuItem_ro, _MenuItem_menuItem, _MenuItem_span, _MenuItem_computedSize_get, _MenuItem_computedType_get, _MenuItem_computedCheckable_get, _MenuItem_computedChecked_get, _MenuItem_computedDisabled_get, _MenuItem_hasSubmenu_get, _MenuItem_menuitemDivRef, _MenuItem_spanRef, _MenuItem_tooltipRef;
|
|
33
|
+
const MenuItem = class {
|
|
34
|
+
constructor(hostRef) {
|
|
35
|
+
index.registerInstance(this, hostRef);
|
|
36
|
+
this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
|
|
37
|
+
this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
|
|
38
|
+
this.selectEmitter = index.createEvent(this, "qdsSelect", 6);
|
|
39
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
40
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
44
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
45
|
+
}
|
|
46
|
+
_MenuItem_instances.add(this);
|
|
47
|
+
/**
|
|
48
|
+
* Prevents the menu item from being interacted with: it cannot be clicked
|
|
49
|
+
* or focused.
|
|
50
|
+
*/
|
|
51
|
+
this.disabled = false;
|
|
52
|
+
/**
|
|
53
|
+
* The name of a registered icon library.
|
|
54
|
+
*/
|
|
55
|
+
this.iconLibrary = 'default';
|
|
56
|
+
/**
|
|
57
|
+
* The menu item's size.
|
|
58
|
+
*/
|
|
59
|
+
this.size = 'standard';
|
|
60
|
+
this.hasSubmenuSlot = false;
|
|
61
|
+
this.tooltip = false;
|
|
62
|
+
_MenuItem_ro.set(this, void 0);
|
|
63
|
+
_MenuItem_menuItem.set(this, void 0);
|
|
64
|
+
_MenuItem_span.set(this, void 0);
|
|
65
|
+
_MenuItem_menuitemDivRef.set(this, (menuItem) => {
|
|
66
|
+
if (menuItem) {
|
|
67
|
+
__classPrivateFieldSet(this, _MenuItem_menuItem, menuItem, "f");
|
|
68
|
+
}
|
|
69
|
+
return __classPrivateFieldGet(this, _MenuItem_menuItem, "f");
|
|
70
|
+
});
|
|
71
|
+
_MenuItem_spanRef.set(this, (span) => {
|
|
72
|
+
__classPrivateFieldSet(this, _MenuItem_span, span, "f");
|
|
73
|
+
});
|
|
74
|
+
_MenuItem_tooltipRef.set(this, (tooltip) => {
|
|
75
|
+
if (tooltip)
|
|
76
|
+
// eslint-disable-next-line no-param-reassign
|
|
77
|
+
tooltip.target = __classPrivateFieldGet(this, _MenuItem_menuItem, "f");
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
onBlur(event) {
|
|
81
|
+
this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
82
|
+
}
|
|
83
|
+
onFocus(event) {
|
|
84
|
+
this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
85
|
+
}
|
|
86
|
+
onClick(event) {
|
|
87
|
+
if (__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedDisabled_get)) {
|
|
88
|
+
event.stopImmediatePropagation();
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
if (__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedCheckable_get)) {
|
|
92
|
+
this.checked = !__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get);
|
|
93
|
+
this.selectEmitter.emit();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
disabledChanged() {
|
|
97
|
+
this.internals.ariaDisabled = __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedDisabled_get).toString();
|
|
98
|
+
}
|
|
99
|
+
checkedChanged() {
|
|
100
|
+
this.internals.ariaChecked = __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get).toString();
|
|
101
|
+
}
|
|
102
|
+
componentDidLoad() {
|
|
103
|
+
this.checkedChanged();
|
|
104
|
+
helpers.invariant(__classPrivateFieldGet(this, _MenuItem_span, "f"));
|
|
105
|
+
const span = __classPrivateFieldGet(this, _MenuItem_span, "f");
|
|
106
|
+
index.readTask(() => {
|
|
107
|
+
this.tooltip = helpers.isEllipsisActive(span);
|
|
108
|
+
});
|
|
109
|
+
__classPrivateFieldSet(this, _MenuItem_ro, new ResizeObserver(([spanEntry]) => {
|
|
110
|
+
this.tooltip = helpers.isEllipsisActive(spanEntry.target);
|
|
111
|
+
}), "f");
|
|
112
|
+
__classPrivateFieldGet(this, _MenuItem_ro, "f").observe(__classPrivateFieldGet(this, _MenuItem_span, "f"));
|
|
113
|
+
}
|
|
114
|
+
componentWillLoad() {
|
|
115
|
+
this.hasSubmenuSlot = this.host.hasChildNodes();
|
|
116
|
+
this.internals.role =
|
|
117
|
+
this.type === 'checkbox' ? 'menuitemcheckbox' : 'menuitem';
|
|
118
|
+
this.disabledChanged();
|
|
119
|
+
}
|
|
120
|
+
render() {
|
|
121
|
+
return (index.h("div", { key: 'e54aff263b4a16ab0813f0e4a40c4bc6bc87c01e', class: {
|
|
122
|
+
'qds-menu-item': true,
|
|
123
|
+
'qds-disabled': __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedDisabled_get),
|
|
124
|
+
'qds-has-submenu': __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get),
|
|
125
|
+
}, ref: __classPrivateFieldGet(this, _MenuItem_menuitemDivRef, "f"), "data-size": __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedSize_get), "aria-hidden": "true" }, index.h("div", { key: 'f1ca639c4d2e9385f4d5ba503ca13413c24251ce', class: "qds-menu-item-container" }, __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedCheckable_get) && !__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get) && (index.h("span", { key: 'dba849a7a6d9062244d19ccb3dfac13d12195876', class: "menu-item-checkable" })), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get) && (index.h("qds-icon", { key: 'fc847ff5705ea1bb6a7b384b590b6ce4c76175ae', class: "qds-icon", library: "core", name: "checked" })), this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '7a1cd69109e3c3837df64272bd4b72d249d5866b', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), index.h("span", { key: 'c3add5ddbc75e2bb2eec84b641e0a02580c89cd0', class: "qds-text", ref: __classPrivateFieldGet(this, _MenuItem_spanRef, "f") }, this.text), this.shortcut !== undefined && this.shortcut !== '' && (index.h("span", { key: '430a3a0832821451a080136b5213cb47eb41ba95', class: "qds-shortcut" }, this.shortcut)), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get) && (index.h("qds-icon", { key: 'bc39a7cf4dbd978f8e18804fd251edeaa4c7edce', class: "qds-icon", library: "core", name: "navigation" }))), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get) && (index.h("qds-dropdown", { key: '5cc32a9271a5d1b22fb23f029537ebf44586e935', class: "qds-accessory qds-related", placement: "right-start", target: __classPrivateFieldGet(this, _MenuItem_menuitemDivRef, "f") }, index.h("slot", { key: '1d410d3ed04ef79c17983e190ed1f76899d19d6f' }))), this.tooltip && (index.h("qds-tooltip", { key: '2058e63dd15bceb524f3b76b1ec8a5c9f547c6e9', ref: __classPrivateFieldGet(this, _MenuItem_tooltipRef, "f") }, this.text))));
|
|
126
|
+
}
|
|
127
|
+
get host() { return index.getElement(this); }
|
|
128
|
+
static get watchers() { return {
|
|
129
|
+
"disabled": ["disabledChanged"],
|
|
130
|
+
"checked": ["checkedChanged"]
|
|
131
|
+
}; }
|
|
132
|
+
};
|
|
133
|
+
_MenuItem_ro = new WeakMap(), _MenuItem_menuItem = new WeakMap(), _MenuItem_span = new WeakMap(), _MenuItem_menuitemDivRef = new WeakMap(), _MenuItem_spanRef = new WeakMap(), _MenuItem_tooltipRef = new WeakMap(), _MenuItem_instances = new WeakSet(), _MenuItem_computedSize_get = function _MenuItem_computedSize_get() {
|
|
134
|
+
switch (this.size) {
|
|
135
|
+
case 'standard':
|
|
136
|
+
case 'small':
|
|
137
|
+
case 'large': {
|
|
138
|
+
return this.size;
|
|
139
|
+
}
|
|
140
|
+
default: {
|
|
141
|
+
return 'standard';
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}, _MenuItem_computedType_get = function _MenuItem_computedType_get() {
|
|
145
|
+
return this.type ?? undefined;
|
|
146
|
+
}, _MenuItem_computedCheckable_get = function _MenuItem_computedCheckable_get() {
|
|
147
|
+
return __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedType_get) === 'checkbox';
|
|
148
|
+
}, _MenuItem_computedChecked_get = function _MenuItem_computedChecked_get() {
|
|
149
|
+
return ((__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedCheckable_get) && !__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get) && this.checked) ?? false);
|
|
150
|
+
}, _MenuItem_computedDisabled_get = function _MenuItem_computedDisabled_get() {
|
|
151
|
+
return this.disabled ?? false;
|
|
152
|
+
}, _MenuItem_hasSubmenu_get = function _MenuItem_hasSubmenu_get() {
|
|
153
|
+
return this.hasSubmenuSlot;
|
|
154
|
+
};
|
|
155
|
+
MenuItem.style = menuItemCss;
|
|
156
|
+
|
|
157
|
+
exports.qds_menu_item = MenuItem;
|
|
158
|
+
//# sourceMappingURL=qds-menu-item.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-menu-item.entry.cjs.js","sources":["src/components/menu-item/menu-item.css?tag=qds-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-menu-item-container {\n display: flex;\n align-items: center;\n flex-grow: 1;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--qds-theme-title);\n flex-grow: 1;\n}\n\n.qds-shortcut {\n color: var(--qds-theme-text-subdued);\n}\n\n[data-size='small'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-small-gap-internal);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n padding-block: var(--qds-list-item-small-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-small-title);\n }\n}\n\n[data-size='standard'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-standard-gap-internal);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n}\n\n[data-size='large'] {\n .qds-menu-item-container {\n gap: var(--qds-list-item-large-gap-internal);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n padding-block: var(--qds-list-item-large-padding-vertical);\n }\n\n .menu-item-checkable,\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-text {\n font: var(--qds-list-item-large-title);\n }\n}\n\n.qds-menu-item {\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n align-items: center;\n appearance: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n cursor: pointer;\n text-align: initial;\n text-decoration: none;\n color: var(--qds-theme-text-standard);\n\n &:not(.qds-selected, .qds-disabled) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n invariant,\n isEllipsisActive,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Type = 'checkbox' | undefined\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/menu-item\n */\n@Component({\n tag: 'qds-menu-item',\n shadow: true,\n styleUrl: 'menu-item.css',\n})\nexport class MenuItem implements ComponentInterface {\n /**\n * Prevents the menu item from being interacted with: it cannot be clicked\n * or focused.\n */\n @Prop() public readonly disabled?: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The menu item's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the menu item should be selectable.\n */\n @Prop() public type: Type\n\n /**\n * Whether or not the menu item is checked.\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * The menu item's text\n */\n @Prop() public readonly text!: string\n\n /**\n * The shortcut of the action.\n */\n @Prop() public readonly shortcut?: string\n\n @State() private hasSubmenuSlot = false\n\n @State() private tooltip = false\n\n /**\n * Emitted when the menu item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the menu item is checked.\n */\n @Event({ eventName: 'qdsSelect', cancelable: false })\n private readonly selectEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #ro?: ResizeObserver\n\n #menuItem!: HTMLDivElement\n\n #span?: HTMLSpanElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedType(): Type {\n return this.type ?? undefined\n }\n\n get #computedCheckable(): boolean {\n return this.#computedType === 'checkbox'\n }\n\n get #computedChecked(): boolean {\n return (\n (this.#computedCheckable && !this.#hasSubmenu && this.checked) ?? false\n )\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #hasSubmenu(): boolean {\n return this.hasSubmenuSlot\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#computedCheckable) {\n this.checked = !this.#computedChecked\n this.selectEmitter.emit()\n }\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.ariaChecked = this.#computedChecked.toString()\n }\n\n public componentDidLoad(): void {\n this.checkedChanged()\n invariant(this.#span)\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isEllipsisActive(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.hasSubmenuSlot = this.host.hasChildNodes()\n this.internals.role =\n this.type === 'checkbox' ? 'menuitemcheckbox' : 'menuitem'\n this.disabledChanged()\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-menu-item': true,\n 'qds-disabled': this.#computedDisabled,\n 'qds-has-submenu': this.#hasSubmenu,\n }}\n ref={this.#menuitemDivRef}\n data-size={this.#computedSize}\n aria-hidden=\"true\"\n >\n <div class=\"qds-menu-item-container\">\n {this.#computedCheckable && !this.#computedChecked && (\n <span class=\"menu-item-checkable\" />\n )}\n {this.#computedChecked && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"checked\" />\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.shortcut !== undefined && this.shortcut !== '' && (\n <span class=\"qds-shortcut\">{this.shortcut}</span>\n )}\n {this.#hasSubmenu && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"navigation\" />\n )}\n </div>\n {this.#hasSubmenu && (\n <qds-dropdown\n class=\"qds-accessory qds-related\"\n placement=\"right-start\"\n target={this.#menuitemDivRef}\n >\n <slot />\n </qds-dropdown>\n )}\n {this.tooltip && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n readonly #menuitemDivRef = (menuItem?: HTMLDivElement): HTMLDivElement => {\n if (menuItem) {\n this.#menuItem = menuItem\n }\n\n return this.#menuItem\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#menuItem\n }\n}\n"],"names":["pickFocusEventAttributes","invariant","readTask","isEllipsisActive","h"],"mappings":"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"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
var index = require('./index-DIY7gpXM.js');
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
|
+
|
|
11
|
+
const miniButtonCss = ":host{display:block}:host(:focus-visible){box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-mini-button{align-items:center;background-color:initial;border:none;border-radius:var(--qds-control-rounded-border-radius);color:var(--qds-theme-control-text-standard);cursor:pointer;display:flex;justify-content:center;min-height:var(--qds-control-mini-button-standard-size);padding:0;width:var(--qds-control-mini-button-standard-size)}.qds-mini-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-mini-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-mini-button:focus-visible{outline:none}.qds-mini-button:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{align-content:center;font-size:var(--qds-control-standard-icon-size);line-height:normal}";
|
|
12
|
+
|
|
13
|
+
// SPDX-FileCopyrightText: © 2025 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 _MiniButton_instances, _MiniButton_savedTabIndex, _MiniButton_computedDisabled_get;
|
|
33
|
+
const preventDefault = (event) => {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
};
|
|
36
|
+
const MiniButton = class {
|
|
37
|
+
constructor(hostRef) {
|
|
38
|
+
index.registerInstance(this, hostRef);
|
|
39
|
+
this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
|
|
40
|
+
this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
|
|
41
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
42
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
46
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
47
|
+
}
|
|
48
|
+
_MiniButton_instances.add(this);
|
|
49
|
+
/**
|
|
50
|
+
* The name of a registered icon library.
|
|
51
|
+
*/
|
|
52
|
+
this.library = 'default';
|
|
53
|
+
/**
|
|
54
|
+
* When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.
|
|
55
|
+
*
|
|
56
|
+
* @webnative
|
|
57
|
+
*/
|
|
58
|
+
this.rel = 'noopener';
|
|
59
|
+
_MiniButton_savedTabIndex.set(this, 0);
|
|
60
|
+
}
|
|
61
|
+
disabledChanged() {
|
|
62
|
+
this.internals.ariaDisabled = __classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get).toString();
|
|
63
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get))
|
|
64
|
+
this.host.removeAttribute('tabindex');
|
|
65
|
+
else
|
|
66
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _MiniButton_savedTabIndex, "f");
|
|
67
|
+
}
|
|
68
|
+
hrefChanged() {
|
|
69
|
+
this.internals.role = this.href === undefined ? 'button' : 'link';
|
|
70
|
+
}
|
|
71
|
+
tabindexChanged(newValue) {
|
|
72
|
+
if (newValue !== null) {
|
|
73
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
74
|
+
__classPrivateFieldSet(this, _MiniButton_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
|
|
75
|
+
? 0
|
|
76
|
+
: parsedValue, "f");
|
|
77
|
+
}
|
|
78
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get))
|
|
79
|
+
this.host.removeAttribute('tabindex');
|
|
80
|
+
else
|
|
81
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _MiniButton_savedTabIndex, "f");
|
|
82
|
+
}
|
|
83
|
+
textChanged() {
|
|
84
|
+
this.internals.ariaLabel = this.text;
|
|
85
|
+
}
|
|
86
|
+
onClick(event) {
|
|
87
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get)) {
|
|
88
|
+
event.stopImmediatePropagation();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
onBlur(event) {
|
|
92
|
+
this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
93
|
+
}
|
|
94
|
+
onFocus(event) {
|
|
95
|
+
this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
96
|
+
}
|
|
97
|
+
onKeydown(event) {
|
|
98
|
+
if (event.key === 'Enter')
|
|
99
|
+
this.host.click();
|
|
100
|
+
}
|
|
101
|
+
onKeyup(event) {
|
|
102
|
+
if (event.key === ' ')
|
|
103
|
+
this.host.click();
|
|
104
|
+
}
|
|
105
|
+
componentWillLoad() {
|
|
106
|
+
this.hrefChanged();
|
|
107
|
+
this.textChanged();
|
|
108
|
+
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
109
|
+
this.disabledChanged();
|
|
110
|
+
}
|
|
111
|
+
render() {
|
|
112
|
+
const Tag = this.href === undefined ? 'button' : 'a';
|
|
113
|
+
return (index.h(Tag, { key: '670347ad3f469e3b7d8d8cc30774c3c208c4dd08', type: Tag === 'a' ? undefined : 'button', class: "qds-mini-button", href: Tag === 'a' ? this.href : undefined, rel: Tag === 'a' ? this.rel : undefined, disabled: __classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get), "aria-hidden": "true", onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, tabIndex: -1 }, index.h("qds-icon", { key: 'd3ab0776386fa553ee0a1582261a6724c6c5ef3a', class: "qds-icon", library: this.library, name: this.name })));
|
|
114
|
+
}
|
|
115
|
+
static get formAssociated() { return true; }
|
|
116
|
+
get host() { return index.getElement(this); }
|
|
117
|
+
static get watchers() { return {
|
|
118
|
+
"disabled": ["disabledChanged"],
|
|
119
|
+
"href": ["hrefChanged"],
|
|
120
|
+
"tabindex": ["tabindexChanged"],
|
|
121
|
+
"text": ["textChanged"]
|
|
122
|
+
}; }
|
|
123
|
+
};
|
|
124
|
+
_MiniButton_savedTabIndex = new WeakMap(), _MiniButton_instances = new WeakSet(), _MiniButton_computedDisabled_get = function _MiniButton_computedDisabled_get() {
|
|
125
|
+
return (this.host.matches(':disabled') ||
|
|
126
|
+
(this.host.hasAttribute('disabled') &&
|
|
127
|
+
this.host.getAttribute('disabled') !== 'false'));
|
|
128
|
+
};
|
|
129
|
+
MiniButton.style = miniButtonCss;
|
|
130
|
+
|
|
131
|
+
exports.qds_mini_button = MiniButton;
|
|
132
|
+
//# sourceMappingURL=qds-mini-button.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-mini-button.entry.cjs.js","sources":["src/components/mini-button/mini-button.css?tag=qds-mini-button&encapsulation=shadow","src/components/mini-button/mini-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n}\n\n.qds-mini-button {\n display: flex;\n width: var(--qds-control-mini-button-standard-size);\n min-height: var(--qds-control-mini-button-standard-size);\n align-items: center;\n border-radius: var(--qds-control-rounded-border-radius);\n border: none;\n justify-content: center;\n color: var(--qds-theme-control-text-standard);\n background-color: transparent;\n padding: 0;\n cursor: pointer;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:focus-visible {\n outline: none;\n }\n}\n\n.qds-mini-button:disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n align-content: center;\n line-height: normal;\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { Target } from '../shared'\n\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n event.preventDefault()\n}\n\n/**\n * @experimental\n */\n@Component({\n tag: 'qds-mini-button',\n formAssociated: true,\n styleUrl: 'mini-button.css',\n shadow: true,\n})\nexport class MiniButton implements ComponentInterface {\n /**\n * Prevents the mini button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled?: boolean\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly name!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly library: string = 'default'\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string = 'noopener'\n\n /**\n * The mini button's accessible name.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n get #computedDisabled(): boolean {\n return (\n this.host.matches(':disabled') ||\n (this.host.hasAttribute('disabled') &&\n this.host.getAttribute('disabled') !== 'false')\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('href')\n protected hrefChanged(): void {\n this.internals.role = this.href === undefined ? 'button' : 'link'\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string | null): void {\n if (newValue !== null) {\n const parsedValue = Number.parseInt(newValue, 10)\n this.#savedTabIndex =\n Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n ? 0\n : parsedValue\n }\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('text')\n protected textChanged(): void {\n this.internals.ariaLabel = this.text\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n }\n }\n\n @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') this.host.click()\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n public componentWillLoad(): void {\n this.hrefChanged()\n this.textChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.disabledChanged()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class=\"qds-mini-button\"\n href={Tag === 'a' ? this.href : undefined}\n rel={Tag === 'a' ? this.rel : undefined}\n disabled={this.#computedDisabled}\n aria-hidden=\"true\"\n onKeyDown={preventDefault}\n onKeyUp={preventDefault}\n onKeyPress={preventDefault}\n tabIndex={-1}\n >\n <qds-icon class=\"qds-icon\" library={this.library} name={this.name} />\n </Tag>\n )\n }\n}\n"],"names":["pickFocusEventAttributes","h"],"mappings":"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"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
var index = require('./index-DIY7gpXM.js');
|
|
9
|
+
|
|
10
|
+
const progressBarCss = ":host([hidden]){display:none!important}:host{display:block;width:100%}.qds-bar,.qds-track{overflow:hidden}.qds-track{background-color:var(--qds-theme-control-slider-track-background)}.qds-bar,.qds-track{border-radius:var(--qds-signature-line-progress-cap-radius)}.qds-bar{background-color:var(--qds-theme-signature-line-progress-determinate);transition:width .6s cubic-bezier(.83,0,.17,1)}@media (prefers-reduced-motion){.qds-bar{transition:none}}.qds-indeterminate{animation:b 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes b{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}[data-size=small]{height:var(--qds-signature-line-progress-small-height)}[data-size=standard]{height:var(--qds-signature-line-progress-standard-height)}[data-size=large]{height:var(--qds-signature-line-progress-large-height)}";
|
|
11
|
+
|
|
12
|
+
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
|
+
//
|
|
14
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
15
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
16
|
+
if (kind === "m")
|
|
17
|
+
throw new TypeError("Private method is not writable");
|
|
18
|
+
if (kind === "a" && !f)
|
|
19
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
20
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
21
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
22
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
23
|
+
};
|
|
24
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
25
|
+
if (kind === "a" && !f)
|
|
26
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
27
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
28
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
29
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
30
|
+
};
|
|
31
|
+
var _ProgressBar_instances, _ProgressBar_localMax, _ProgressBar_localValue, _ProgressBar_position, _ProgressBar_computedSize_get, _ProgressBar_positionChanged, _ProgressBar_defineGetter;
|
|
32
|
+
const ProgressBar = class {
|
|
33
|
+
constructor(hostRef) {
|
|
34
|
+
index.registerInstance(this, hostRef);
|
|
35
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
36
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
40
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
41
|
+
}
|
|
42
|
+
_ProgressBar_instances.add(this);
|
|
43
|
+
/**
|
|
44
|
+
* The progress bar's size.
|
|
45
|
+
*/
|
|
46
|
+
this.size = 'standard';
|
|
47
|
+
/**
|
|
48
|
+
* Returns a list of the [`<label>`][] elements associated with the
|
|
49
|
+
* `qds-progress-bar` element.
|
|
50
|
+
*
|
|
51
|
+
* [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
|
|
52
|
+
*
|
|
53
|
+
* @readonly
|
|
54
|
+
* @webnative
|
|
55
|
+
*/
|
|
56
|
+
this.labels = {};
|
|
57
|
+
/**
|
|
58
|
+
* Returns the result of dividing the current value (`value`) by the maximum
|
|
59
|
+
* value (`max`); if the progress bar is an indeterminate progress bar, it
|
|
60
|
+
* returns `-1`.
|
|
61
|
+
*
|
|
62
|
+
* @readonly
|
|
63
|
+
* @webnative
|
|
64
|
+
*/
|
|
65
|
+
this.position = -1;
|
|
66
|
+
this.width = '0%';
|
|
67
|
+
_ProgressBar_localMax.set(this, 1);
|
|
68
|
+
_ProgressBar_localValue.set(this, 0);
|
|
69
|
+
_ProgressBar_position.set(this, -1);
|
|
70
|
+
}
|
|
71
|
+
maxChanged() {
|
|
72
|
+
const max = typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max;
|
|
73
|
+
__classPrivateFieldSet(this, _ProgressBar_localMax, max === undefined || Number.isNaN(max) || max < 0 ? 1 : max, "f");
|
|
74
|
+
this.internals.ariaValueMax = __classPrivateFieldGet(this, _ProgressBar_localMax, "f").toString();
|
|
75
|
+
__classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_positionChanged).call(this);
|
|
76
|
+
}
|
|
77
|
+
valueChanged() {
|
|
78
|
+
const value = typeof this.value === 'string'
|
|
79
|
+
? Number.parseFloat(this.value)
|
|
80
|
+
: this.value;
|
|
81
|
+
__classPrivateFieldSet(this, _ProgressBar_localValue, value === undefined || Number.isNaN(value) || value < 0 ? 0 : value, "f");
|
|
82
|
+
this.internals.ariaValueNow =
|
|
83
|
+
// eslint-disable-next-line unicorn/no-null
|
|
84
|
+
this.value === undefined ? null : __classPrivateFieldGet(this, _ProgressBar_localValue, "f").toString();
|
|
85
|
+
__classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_positionChanged).call(this);
|
|
86
|
+
}
|
|
87
|
+
componentWillLoad() {
|
|
88
|
+
this.internals.role = 'progressbar';
|
|
89
|
+
__classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_defineGetter).call(this, 'labels', () => this.internals.labels);
|
|
90
|
+
__classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_defineGetter).call(this, 'position', () => __classPrivateFieldGet(this, _ProgressBar_position, "f"));
|
|
91
|
+
this.maxChanged();
|
|
92
|
+
this.valueChanged();
|
|
93
|
+
}
|
|
94
|
+
render() {
|
|
95
|
+
return (index.h("div", { key: '1f594b08dadc74c480d08f43bd9351225871990b', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, index.h("div", { key: '5bcba1c692dde87d29f842ab572d3b36b58dbe43', class: {
|
|
96
|
+
'qds-bar': true,
|
|
97
|
+
'qds-indeterminate': __classPrivateFieldGet(this, _ProgressBar_position, "f") === -1,
|
|
98
|
+
}, "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get), style: { width: this.width } })));
|
|
99
|
+
}
|
|
100
|
+
static get formAssociated() { return true; }
|
|
101
|
+
get host() { return index.getElement(this); }
|
|
102
|
+
static get watchers() { return {
|
|
103
|
+
"max": ["maxChanged"],
|
|
104
|
+
"value": ["valueChanged"]
|
|
105
|
+
}; }
|
|
106
|
+
};
|
|
107
|
+
_ProgressBar_localMax = new WeakMap(), _ProgressBar_localValue = new WeakMap(), _ProgressBar_position = new WeakMap(), _ProgressBar_instances = new WeakSet(), _ProgressBar_computedSize_get = function _ProgressBar_computedSize_get() {
|
|
108
|
+
switch (this.size) {
|
|
109
|
+
case 'small':
|
|
110
|
+
case 'large': {
|
|
111
|
+
return this.size;
|
|
112
|
+
}
|
|
113
|
+
default: {
|
|
114
|
+
return 'standard';
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}, _ProgressBar_positionChanged = function _ProgressBar_positionChanged() {
|
|
118
|
+
if (this.value === undefined) {
|
|
119
|
+
__classPrivateFieldSet(this, _ProgressBar_position, -1, "f");
|
|
120
|
+
this.width = '50%';
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
__classPrivateFieldSet(this, _ProgressBar_position, __classPrivateFieldGet(this, _ProgressBar_localValue, "f") / __classPrivateFieldGet(this, _ProgressBar_localMax, "f"), "f");
|
|
124
|
+
this.width = `${Math.min(__classPrivateFieldGet(this, _ProgressBar_position, "f") * 100, 100)}%`;
|
|
125
|
+
}, _ProgressBar_defineGetter = function _ProgressBar_defineGetter(p, get) {
|
|
126
|
+
Object.defineProperty(this.host, p, { enumerable: true, get });
|
|
127
|
+
};
|
|
128
|
+
ProgressBar.style = progressBarCss;
|
|
129
|
+
|
|
130
|
+
exports.qds_progress_bar = ProgressBar;
|
|
131
|
+
//# sourceMappingURL=qds-progress-bar.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-progress-bar.entry.cjs.js","sources":["src/components/progress-bar/progress-bar.css?tag=qds-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n width: 100%;\n}\n\n.qds-track,\n.qds-bar {\n overflow: hidden;\n}\n\n.qds-track {\n background-color: var(--qds-theme-control-slider-track-background);\n border-radius: var(--qds-signature-line-progress-cap-radius);\n}\n\n.qds-bar {\n background-color: var(--qds-theme-signature-line-progress-determinate);\n border-radius: var(--qds-signature-line-progress-cap-radius);\n transition: width 0.6s cubic-bezier(0.83, 0, 0.17, 1);\n}\n\n@media (prefers-reduced-motion) {\n .qds-bar {\n transition: none;\n }\n}\n\n.qds-indeterminate {\n animation: indeterminate 2s linear infinite;\n background-color: transparent;\n background-image: var(--qds-theme-signature-line-progress-indeterminate);\n}\n\n@keyframes indeterminate {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(200%);\n }\n}\n\n[data-size='small'] {\n height: var(--qds-signature-line-progress-small-height);\n}\n\n[data-size='standard'] {\n height: var(--qds-signature-line-progress-standard-height);\n}\n\n[data-size='large'] {\n height: var(--qds-signature-line-progress-large-height);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\n/**\n * The `<qds-progress-bar>` element displays an indicator showing the\n * completion progress of a task.\n *\n * @see https://quartz.se.com/build/components/progress-bar\n */\n@Component({\n tag: 'qds-progress-bar',\n formAssociated: true,\n shadow: true,\n styleUrl: 'progress-bar.css',\n})\nexport class ProgressBar implements ComponentInterface {\n /**\n * The progress bar's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-progress-bar` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /**\n * Specifies how much work the task indicated by the progress bar requires.\n * `max` must have a value greater than 0 and be a valid floating point\n * number.\n *\n * @webnative\n */\n @Prop() public readonly max?: number | string\n\n /**\n * Returns the result of dividing the current value (`value`) by the maximum\n * value (`max`); if the progress bar is an indeterminate progress bar, it\n * returns `-1`.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly position: number = -1\n\n /**\n * Specifies how much of the task has been completed. It must be a valid\n * floating point number between `0` and `max`, or between `0` and `1` if\n * `max` is omitted. If this attribute is not specified, the progress bar is\n * indeterminate; this indicates that an activity is ongoing with no\n * indication of how long it is expected to take.\n *\n * @webnative\n */\n @Prop() public readonly value?: number | string\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private width = '0%'\n\n #localMax = 1\n\n #localValue = 0\n\n #position = -1\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('max')\n protected maxChanged(): void {\n const max =\n typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max\n this.#localMax = max === undefined || Number.isNaN(max) || max < 0 ? 1 : max\n\n this.internals.ariaValueMax = this.#localMax.toString()\n\n this.#positionChanged()\n }\n\n @Watch('value')\n protected valueChanged(): void {\n const value =\n typeof this.value === 'string'\n ? Number.parseFloat(this.value)\n : this.value\n this.#localValue =\n value === undefined || Number.isNaN(value) || value < 0 ? 0 : value\n\n this.internals.ariaValueNow =\n // eslint-disable-next-line unicorn/no-null\n this.value === undefined ? null : this.#localValue.toString()\n\n this.#positionChanged()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'progressbar'\n this.#defineGetter('labels', () => this.internals.labels)\n this.#defineGetter('position', () => this.#position)\n\n this.maxChanged()\n this.valueChanged()\n }\n\n public render() {\n return (\n <div aria-hidden=\"true\" class=\"qds-track\" data-size={this.#computedSize}>\n <div\n class={{\n 'qds-bar': true,\n 'qds-indeterminate': this.#position === -1,\n }}\n data-size={this.#computedSize}\n style={{ width: this.width }}\n />\n </div>\n )\n }\n\n #positionChanged(): void {\n if (this.value === undefined) {\n this.#position = -1\n this.width = '50%'\n return\n }\n\n this.#position = this.#localValue / this.#localMax\n this.width = `${Math.min(this.#position * 100, 100)}%`\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["h"],"mappings":"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"}
|