@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130
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 +2145 -0
- package/README.md +23 -23
- package/components/index.d.ts +52 -0
- package/components/index.js +63 -28
- package/components/index.js.map +1 -1
- package/components/p-B9xuNEzc.js +438 -0
- package/components/p-B9xuNEzc.js.map +1 -0
- package/components/p-BHBodFuD.js +200 -0
- package/components/p-BHBodFuD.js.map +1 -0
- package/components/p-BLA62eFO.js +513 -0
- package/components/p-BLA62eFO.js.map +1 -0
- package/components/p-Bn9o5Um2.js +91 -0
- package/components/p-Bn9o5Um2.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-C-pZcrGt.js +357 -0
- package/components/p-C-pZcrGt.js.map +1 -0
- package/components/p-CZRW1LV_.js +28 -0
- package/components/p-CZRW1LV_.js.map +1 -0
- package/components/p-Cb4tcewD.js +281 -0
- package/components/p-Cb4tcewD.js.map +1 -0
- package/components/p-Cb5Tgh-o.js +102 -0
- package/components/p-Cb5Tgh-o.js.map +1 -0
- package/components/p-D2489VzR.js +2133 -0
- package/components/p-D2489VzR.js.map +1 -0
- package/components/p-D2BuSQre.js +160 -0
- package/components/p-D2BuSQre.js.map +1 -0
- package/components/p-DL21f4D7.js +149 -0
- package/components/p-DL21f4D7.js.map +1 -0
- package/components/p-DOqfdgQA.js +124 -0
- package/components/p-DOqfdgQA.js.map +1 -0
- package/components/p-Do46q_Gd.js +135 -0
- package/components/p-Do46q_Gd.js.map +1 -0
- package/components/p-XP2CY_fo.js +105 -0
- package/components/p-XP2CY_fo.js.map +1 -0
- package/components/p-eUDNu0SE.js +3561 -0
- package/components/p-eUDNu0SE.js.map +1 -0
- package/components/p-fKK7EmM2.js +256 -0
- package/components/p-fKK7EmM2.js.map +1 -0
- package/components/qds-action-item.d.ts +11 -0
- package/components/qds-action-item.js +204 -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-avatar.d.ts +11 -0
- package/components/qds-avatar.js +120 -0
- package/components/qds-avatar.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 +174 -0
- package/components/qds-breadcrumb-item.js.map +1 -0
- package/components/qds-button.d.ts +2 -2
- package/components/qds-button.js +475 -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 +337 -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 +106 -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 +312 -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 +173 -74
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.d.ts +2 -2
- package/components/qds-input.js +579 -230
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.d.ts +2 -2
- package/components/qds-label.js +156 -3
- package/components/qds-label.js.map +1 -1
- package/components/qds-list-item.d.ts +11 -0
- package/components/qds-list-item.js +430 -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 +263 -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 +377 -0
- package/components/qds-select.js.map +1 -0
- package/components/qds-standalone-link.d.ts +11 -0
- package/components/qds-standalone-link.js +210 -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 +354 -0
- package/components/qds-tab.js.map +1 -0
- package/components/qds-tabbar.d.ts +11 -0
- package/components/qds-tabbar.js +599 -0
- package/components/qds-tabbar.js.map +1 -0
- package/components/qds-table-cell.d.ts +11 -0
- package/components/qds-table-cell.js +109 -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 +115 -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-D6srVOLt.js +3584 -0
- package/dist/cjs/helpers-D6srVOLt.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 +165 -0
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-avatar-media.cjs.entry.js +105 -0
- package/dist/cjs/qds-avatar-media.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-avatar.cjs.entry.js +70 -0
- package/dist/cjs/qds-avatar.entry.cjs.js.map +1 -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 +168 -0
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +134 -0
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-button.cjs.entry.js +402 -93
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-checkbox.qds-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-checkbox_2.cjs.entry.js +456 -0
- package/dist/cjs/qds-chip.cjs.entry.js +285 -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 +291 -0
- package/dist/cjs/qds-dropdown.cjs.entry.js +461 -213
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-form-message.cjs.entry.js +80 -27
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon-tab.cjs.entry.js +244 -0
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +92 -93
- package/dist/cjs/qds-icon.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-inline-link.cjs.entry.js +139 -49
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-input.cjs.entry.js +503 -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 +328 -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 +214 -0
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-mini-button.cjs.entry.js +130 -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 +331 -0
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-standalone-link.cjs.entry.js +171 -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 +280 -0
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tabbar.cjs.entry.js +528 -0
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table-cell.cjs.entry.js +88 -0
- package/dist/cjs/qds-table-cell.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +92 -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 +380 -264
- 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 +13254 -2143
- package/dist/docs.d.ts +344 -240
- package/dist/docs.json +13958 -3308
- 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-BIo9VDPx.js +3561 -0
- package/dist/esm/helpers-BIo9VDPx.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 +163 -0
- package/dist/esm/qds-action-item.entry.js.map +1 -0
- package/dist/esm/qds-avatar-media.entry.js +103 -0
- package/dist/esm/qds-avatar-media.entry.js.map +1 -0
- package/dist/esm/qds-avatar.entry.js +68 -0
- package/dist/esm/qds-avatar.entry.js.map +1 -0
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -0
- package/dist/esm/qds-badge-counter_2.entry.js +165 -0
- package/dist/esm/qds-breadcrumb-item.entry.js +132 -0
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -0
- package/dist/esm/qds-button.entry.js +402 -91
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.qds-radio.entry.js.map +1 -0
- package/dist/esm/qds-checkbox_2.entry.js +453 -0
- package/dist/esm/qds-chip.entry.js +283 -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 +288 -0
- package/dist/esm/qds-dropdown.entry.js +461 -211
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +80 -25
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +242 -0
- package/dist/esm/qds-icon-tab.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +92 -91
- package/dist/esm/qds-icon.entry.js.map +1 -1
- package/dist/esm/qds-inline-link.entry.js +139 -47
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +503 -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 +326 -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 +212 -0
- package/dist/esm/qds-menu-item.entry.js.map +1 -0
- package/dist/esm/qds-mini-button.entry.js +128 -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 +329 -0
- package/dist/esm/qds-select.entry.js.map +1 -0
- package/dist/esm/qds-standalone-link.entry.js +169 -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 +278 -0
- package/dist/esm/qds-tab.entry.js.map +1 -0
- package/dist/esm/qds-tabbar.entry.js +526 -0
- package/dist/esm/qds-tabbar.entry.js.map +1 -0
- package/dist/esm/qds-table-cell.entry.js +86 -0
- package/dist/esm/qds-table-cell.entry.js.map +1 -0
- package/dist/esm/qds-table-head-cell.entry.js +90 -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 +380 -262
- 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 +70 -0
- package/dist/types/components/avatar/avatar.d.ts +61 -0
- package/dist/types/components/avatar-media/avatar-media.d.ts +47 -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 +283 -198
- package/dist/types/components/checkbox/checkbox.d.ts +142 -124
- package/dist/types/components/chip/chip.d.ts +111 -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 +117 -125
- package/dist/types/components/form-message/form-message.d.ts +35 -25
- package/dist/types/components/icon/icon.d.ts +23 -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 +122 -0
- package/dist/types/components/icon-tab/icon-tab.d.ts +112 -0
- package/dist/types/components/inline-link/inline-link.d.ts +209 -191
- package/dist/types/components/input/input.d.ts +441 -368
- package/dist/types/components/label/label.d.ts +37 -24
- package/dist/types/components/list-item/list-item.d.ts +122 -0
- package/dist/types/components/loader/loader.d.ts +32 -0
- package/dist/types/components/menu-item/menu-item.d.ts +75 -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 +94 -95
- package/dist/types/components/select/select.d.ts +209 -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 +157 -0
- package/dist/types/components/tabbar/tabbar.d.ts +91 -0
- package/dist/types/components/table/table.d.ts +14 -0
- package/dist/types/components/table-cell/table-cell.d.ts +39 -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 +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 +4590 -929
- package/dist/types/helpers.d.ts +46 -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 +2543 -426
- package/hydrate/index.d.ts +73 -18
- package/hydrate/index.js +32000 -9062
- package/hydrate/index.mjs +33081 -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 +156 -38
- 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,160 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-D2489VzR.js';
|
|
7
|
+
import { p as pickFocusEventAttributes } from './p-eUDNu0SE.js';
|
|
8
|
+
import { d as defineCustomElement$1 } from './p-fKK7EmM2.js';
|
|
9
|
+
|
|
10
|
+
const miniButtonCss = ":host{border-radius:var(--qds-control-rounded-border-radius);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}:host(:hover){background-color:var(--qds-theme-interactive-background-hover)}:host(:active){background-color:var(--qds-theme-interactive-background-pressed)}.qds-mini-button{align-items:center;background-color:initial;border:none;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:focus-visible{outline:none}.qds-mini-button:disabled{pointer-events:none}.qds-icon{align-content:center;font-size:var(--qds-control-standard-icon-size);line-height:normal}";
|
|
11
|
+
|
|
12
|
+
// SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
13
|
+
//
|
|
14
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
15
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
16
|
+
if (kind === "a" && !f)
|
|
17
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
18
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
19
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
20
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
21
|
+
};
|
|
22
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
23
|
+
if (kind === "m")
|
|
24
|
+
throw new TypeError("Private method is not writable");
|
|
25
|
+
if (kind === "a" && !f)
|
|
26
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
27
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
28
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
29
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
30
|
+
};
|
|
31
|
+
var _MiniButton_instances, _MiniButton_savedTabIndex, _MiniButton_computedDisabled_get;
|
|
32
|
+
const preventDefault = (event) => {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
};
|
|
35
|
+
const MiniButton = /*@__PURE__*/ proxyCustomElement(class MiniButton extends H {
|
|
36
|
+
constructor(registerHost) {
|
|
37
|
+
super();
|
|
38
|
+
if (registerHost !== false) {
|
|
39
|
+
this.__registerHost();
|
|
40
|
+
}
|
|
41
|
+
this.__attachShadow();
|
|
42
|
+
this.blurEmitter = createEvent(this, "qdsBlur", 2);
|
|
43
|
+
this.focusEmitter = createEvent(this, "qdsFocus", 2);
|
|
44
|
+
this.internals = this.attachInternals();
|
|
45
|
+
_MiniButton_instances.add(this);
|
|
46
|
+
/**
|
|
47
|
+
* The name of a registered icon library.
|
|
48
|
+
*/
|
|
49
|
+
this.library = 'default';
|
|
50
|
+
/**
|
|
51
|
+
* When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.
|
|
52
|
+
*
|
|
53
|
+
* @webnative
|
|
54
|
+
*/
|
|
55
|
+
this.rel = 'noopener';
|
|
56
|
+
_MiniButton_savedTabIndex.set(this, 0);
|
|
57
|
+
}
|
|
58
|
+
disabledChanged() {
|
|
59
|
+
this.internals.ariaDisabled = __classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get).toString();
|
|
60
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get))
|
|
61
|
+
this.host.removeAttribute('tabindex');
|
|
62
|
+
else
|
|
63
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _MiniButton_savedTabIndex, "f");
|
|
64
|
+
}
|
|
65
|
+
hrefChanged() {
|
|
66
|
+
this.internals.role = this.href === undefined ? 'button' : 'link';
|
|
67
|
+
}
|
|
68
|
+
tabindexChanged(newValue) {
|
|
69
|
+
if (newValue !== null) {
|
|
70
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
71
|
+
__classPrivateFieldSet(this, _MiniButton_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
|
|
72
|
+
? 0
|
|
73
|
+
: parsedValue, "f");
|
|
74
|
+
}
|
|
75
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get))
|
|
76
|
+
this.host.removeAttribute('tabindex');
|
|
77
|
+
else
|
|
78
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _MiniButton_savedTabIndex, "f");
|
|
79
|
+
}
|
|
80
|
+
textChanged() {
|
|
81
|
+
this.internals.ariaLabel = this.text;
|
|
82
|
+
}
|
|
83
|
+
onClick(event) {
|
|
84
|
+
if (__classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get)) {
|
|
85
|
+
event.stopImmediatePropagation();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
onBlur(event) {
|
|
89
|
+
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
90
|
+
}
|
|
91
|
+
onFocus(event) {
|
|
92
|
+
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
93
|
+
}
|
|
94
|
+
onKeydown(event) {
|
|
95
|
+
if (event.key === 'Enter')
|
|
96
|
+
this.host.click();
|
|
97
|
+
}
|
|
98
|
+
onKeyup(event) {
|
|
99
|
+
if (event.key === ' ')
|
|
100
|
+
this.host.click();
|
|
101
|
+
}
|
|
102
|
+
componentWillLoad() {
|
|
103
|
+
this.hrefChanged();
|
|
104
|
+
this.textChanged();
|
|
105
|
+
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
106
|
+
this.disabledChanged();
|
|
107
|
+
}
|
|
108
|
+
render() {
|
|
109
|
+
const Tag = this.href === undefined ? 'button' : 'a';
|
|
110
|
+
return (h(Tag, { key: '1c1c2344dd8c927be55340feaf199ac8dc1f04b3', 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 }, h("qds-icon", { key: 'e322050630186d8c656d699505ddfe893a47168e', class: "qds-icon", library: this.library, name: this.name })));
|
|
111
|
+
}
|
|
112
|
+
static get formAssociated() { return true; }
|
|
113
|
+
get host() { return this; }
|
|
114
|
+
static get watchers() { return {
|
|
115
|
+
"disabled": ["disabledChanged"],
|
|
116
|
+
"href": ["hrefChanged"],
|
|
117
|
+
"tabindex": ["tabindexChanged"],
|
|
118
|
+
"text": ["textChanged"]
|
|
119
|
+
}; }
|
|
120
|
+
static get style() { return miniButtonCss; }
|
|
121
|
+
}, [321, "qds-mini-button", {
|
|
122
|
+
"disabled": [4],
|
|
123
|
+
"name": [1],
|
|
124
|
+
"library": [1],
|
|
125
|
+
"target": [1],
|
|
126
|
+
"href": [1],
|
|
127
|
+
"rel": [1],
|
|
128
|
+
"text": [1]
|
|
129
|
+
}, [[0, "click", "onClick"], [0, "blur", "onBlur"], [0, "focus", "onFocus"], [0, "keydown", "onKeydown"], [0, "keyup", "onKeyup"]], {
|
|
130
|
+
"disabled": ["disabledChanged"],
|
|
131
|
+
"href": ["hrefChanged"],
|
|
132
|
+
"tabindex": ["tabindexChanged"],
|
|
133
|
+
"text": ["textChanged"]
|
|
134
|
+
}]);
|
|
135
|
+
_MiniButton_savedTabIndex = new WeakMap(), _MiniButton_instances = new WeakSet(), _MiniButton_computedDisabled_get = function _MiniButton_computedDisabled_get() {
|
|
136
|
+
return this.disabled ?? false;
|
|
137
|
+
};
|
|
138
|
+
function defineCustomElement() {
|
|
139
|
+
if (typeof customElements === "undefined") {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
const components = ["qds-mini-button", "qds-icon"];
|
|
143
|
+
components.forEach(tagName => { switch (tagName) {
|
|
144
|
+
case "qds-mini-button":
|
|
145
|
+
if (!customElements.get(tagName)) {
|
|
146
|
+
customElements.define(tagName, MiniButton);
|
|
147
|
+
}
|
|
148
|
+
break;
|
|
149
|
+
case "qds-icon":
|
|
150
|
+
if (!customElements.get(tagName)) {
|
|
151
|
+
defineCustomElement$1();
|
|
152
|
+
}
|
|
153
|
+
break;
|
|
154
|
+
} });
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
export { MiniButton as M, defineCustomElement as d };
|
|
158
|
+
//# sourceMappingURL=p-D2BuSQre.js.map
|
|
159
|
+
|
|
160
|
+
//# sourceMappingURL=p-D2BuSQre.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-D2BuSQre.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 border-radius: var(--qds-control-rounded-border-radius);\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:host(:hover) {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n:host(:active) {\n background-color: var(--qds-theme-interactive-background-pressed);\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: 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 &:focus-visible {\n outline: none;\n }\n}\n\n.qds-mini-button: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 this.disabled ?? false\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"],"version":3}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { p as proxyCustomElement, H, h, F as Fragment } from './p-D2489VzR.js';
|
|
7
|
+
import { g as inheritAriaAttributes } from './p-eUDNu0SE.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-DOqfdgQA.js';
|
|
9
|
+
import { d as defineCustomElement$1 } from './p-fKK7EmM2.js';
|
|
10
|
+
|
|
11
|
+
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-message-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-message-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-message-success);color:var(--qds-theme-feedback-message-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{border-radius:var(--qds-feedback-tag-small-border-radius);font:var(--qds-feedback-tag-small-text);gap:var(--qds-feedback-tag-small-gap-internal);min-height:var(--qds-feedback-tag-small-height)}.qds-padding[data-size=small]{padding:var(--qds-feedback-tag-small-padding-vertical) var(--qds-feedback-tag-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-feedback-tag-small-icon-size);width:var(--qds-feedback-tag-small-icon-size)}.qds-tag[data-size=standard]{border-radius:var(--qds-feedback-tag-standard-border-radius);font:var(--qds-feedback-tag-standard-text);gap:var(--qds-feedback-tag-standard-gap-internal);min-height:var(--qds-feedback-tag-standard-height)}.qds-padding[data-size=standard]{padding:var(--qds-feedback-tag-large-padding-vertical) var(--qds-feedback-tag-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-feedback-tag-standard-icon-size);width:var(--qds-feedback-tag-standard-icon-size)}.qds-tag[data-size=large]{border-radius:var(--qds-feedback-tag-large-border-radius);font:var(--qds-feedback-tag-large-text);gap:var(--qds-feedback-tag-large-gap-internal);min-height:var(--qds-feedback-tag-large-height)}.qds-padding[data-size=large]{padding:var(--qds-feedback-tag-large-padding-vertical) var(--qds-feedback-tag-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-feedback-tag-large-icon-size);width:var(--qds-feedback-tag-large-icon-size)}";
|
|
12
|
+
|
|
13
|
+
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
14
|
+
//
|
|
15
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
16
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
17
|
+
if (kind === "m")
|
|
18
|
+
throw new TypeError("Private method is not writable");
|
|
19
|
+
if (kind === "a" && !f)
|
|
20
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
21
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
22
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
23
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
24
|
+
};
|
|
25
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
26
|
+
if (kind === "a" && !f)
|
|
27
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
28
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
29
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
30
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
31
|
+
};
|
|
32
|
+
var _Tag_instances, _Tag_inheritedAttributes, _Tag_computedImportance_get, _Tag_computedSize_get, _Tag_computedStatus_get, _Tag_hasBadge_get;
|
|
33
|
+
const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
|
|
34
|
+
constructor(registerHost) {
|
|
35
|
+
super();
|
|
36
|
+
if (registerHost !== false) {
|
|
37
|
+
this.__registerHost();
|
|
38
|
+
}
|
|
39
|
+
this.__attachShadow();
|
|
40
|
+
_Tag_instances.add(this);
|
|
41
|
+
/**
|
|
42
|
+
* The name of a registered icon library.
|
|
43
|
+
*/
|
|
44
|
+
this.iconLibrary = 'default';
|
|
45
|
+
/**
|
|
46
|
+
* The tag's importance.
|
|
47
|
+
*/
|
|
48
|
+
this.importance = 'standard';
|
|
49
|
+
/**
|
|
50
|
+
* The tag's status.
|
|
51
|
+
*/
|
|
52
|
+
this.status = 'neutral';
|
|
53
|
+
/**
|
|
54
|
+
* The tag's size.
|
|
55
|
+
*/
|
|
56
|
+
this.size = 'standard';
|
|
57
|
+
/**
|
|
58
|
+
* Displays an indicator if `true`.
|
|
59
|
+
*/
|
|
60
|
+
this.badge = false;
|
|
61
|
+
_Tag_inheritedAttributes.set(this, {});
|
|
62
|
+
}
|
|
63
|
+
componentWillLoad() {
|
|
64
|
+
__classPrivateFieldSet(this, _Tag_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
return (h("span", { key: '88bdc52e4729a80ef0dbf0e6b4e5c085a1d9acb8', class: {
|
|
68
|
+
'qds-tag': true,
|
|
69
|
+
'qds-padding': this.importance !== 'subdued',
|
|
70
|
+
}, "data-importance": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), "data-status": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedStatus_get), ...__classPrivateFieldGet(this, _Tag_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' ? (h(Fragment, null, this.iconDescription !== undefined &&
|
|
71
|
+
this.iconDescription !== '' && (h("span", { class: "qds-sr-only" }, this.iconDescription)), h("qds-icon", { class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), library: this.iconLibrary, name: this.iconName }))) : (__classPrivateFieldGet(this, _Tag_instances, "a", _Tag_hasBadge_get) && (h("qds-badge-indicator", { status: __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedStatus_get), description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), strokeRing: true }))), h("span", { key: 'c070ff3e5308ee34e42209ea1d5638b33ad9c16a', class: "qds-text" }, this.text)));
|
|
72
|
+
}
|
|
73
|
+
get host() { return this; }
|
|
74
|
+
static get style() { return tagCss; }
|
|
75
|
+
}, [257, "qds-tag", {
|
|
76
|
+
"iconName": [1, "icon-name"],
|
|
77
|
+
"iconLibrary": [1, "icon-library"],
|
|
78
|
+
"importance": [1],
|
|
79
|
+
"status": [1],
|
|
80
|
+
"size": [1],
|
|
81
|
+
"text": [1],
|
|
82
|
+
"iconDescription": [1, "icon-description"],
|
|
83
|
+
"badge": [4],
|
|
84
|
+
"badgeDescription": [1, "badge-description"]
|
|
85
|
+
}]);
|
|
86
|
+
_Tag_inheritedAttributes = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_computedImportance_get = function _Tag_computedImportance_get() {
|
|
87
|
+
switch (this.importance) {
|
|
88
|
+
case 'subdued':
|
|
89
|
+
case 'emphasized': {
|
|
90
|
+
return this.importance;
|
|
91
|
+
}
|
|
92
|
+
default: {
|
|
93
|
+
return 'standard';
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}, _Tag_computedSize_get = function _Tag_computedSize_get() {
|
|
97
|
+
switch (this.size) {
|
|
98
|
+
case 'standard':
|
|
99
|
+
case 'small':
|
|
100
|
+
case 'large': {
|
|
101
|
+
return this.size;
|
|
102
|
+
}
|
|
103
|
+
default: {
|
|
104
|
+
return 'standard';
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}, _Tag_computedStatus_get = function _Tag_computedStatus_get() {
|
|
108
|
+
switch (this.status) {
|
|
109
|
+
case 'error':
|
|
110
|
+
case 'info':
|
|
111
|
+
case 'success':
|
|
112
|
+
case 'warning': {
|
|
113
|
+
return this.status;
|
|
114
|
+
}
|
|
115
|
+
default: {
|
|
116
|
+
return 'neutral';
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}, _Tag_hasBadge_get = function _Tag_hasBadge_get() {
|
|
120
|
+
return (this.badge ?? false) && this.importance !== 'emphasized';
|
|
121
|
+
};
|
|
122
|
+
function defineCustomElement() {
|
|
123
|
+
if (typeof customElements === "undefined") {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
const components = ["qds-tag", "qds-badge-indicator", "qds-icon"];
|
|
127
|
+
components.forEach(tagName => { switch (tagName) {
|
|
128
|
+
case "qds-tag":
|
|
129
|
+
if (!customElements.get(tagName)) {
|
|
130
|
+
customElements.define(tagName, Tag);
|
|
131
|
+
}
|
|
132
|
+
break;
|
|
133
|
+
case "qds-badge-indicator":
|
|
134
|
+
if (!customElements.get(tagName)) {
|
|
135
|
+
defineCustomElement$2();
|
|
136
|
+
}
|
|
137
|
+
break;
|
|
138
|
+
case "qds-icon":
|
|
139
|
+
if (!customElements.get(tagName)) {
|
|
140
|
+
defineCustomElement$1();
|
|
141
|
+
}
|
|
142
|
+
break;
|
|
143
|
+
} });
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export { Tag as T, defineCustomElement as d };
|
|
147
|
+
//# sourceMappingURL=p-DL21f4D7.js.map
|
|
148
|
+
|
|
149
|
+
//# sourceMappingURL=p-DL21f4D7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-DL21f4D7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-tag {\n align-items: center;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n max-width: inherit;\n min-width: inherit;\n width: inherit;\n}\n\n.qds-text {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-message-critical);\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-message-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-message-important);\n}\n\n[data-status='info'] {\n color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='neutral'] {\n color: var(--qds-theme-feedback-message-neutral);\n}\n\n[data-importance='subdued'] .qds-text {\n color: var(--qds-theme-text-standard);\n}\n\n[data-importance='standard'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical-dimmed);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success-dimmed);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important-dimmed);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational-dimmed);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral-dimmed);\n }\n}\n\n[data-importance='emphasized'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical);\n color: var(--qds-theme-feedback-message-critical-contrast);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success);\n color: var(--qds-theme-feedback-message-success-contrast);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important);\n color: var(--qds-theme-feedback-message-important-contrast);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-size='small'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-small-text);\n gap: var(--qds-feedback-tag-small-gap-internal);\n min-height: var(--qds-feedback-tag-small-height);\n border-radius: var(--qds-feedback-tag-small-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-small-padding-vertical)\n var(--qds-feedback-tag-small-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-small-icon-size);\n height: var(--qds-feedback-tag-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-standard-text);\n gap: var(--qds-feedback-tag-standard-gap-internal);\n min-height: var(--qds-feedback-tag-standard-height);\n border-radius: var(--qds-feedback-tag-standard-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-large-padding-vertical)\n var(--qds-feedback-tag-standard-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-standard-icon-size);\n height: var(--qds-feedback-tag-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-large-text);\n gap: var(--qds-feedback-tag-large-gap-internal);\n min-height: var(--qds-feedback-tag-large-height);\n border-radius: var(--qds-feedback-tag-large-border-radius);\n }\n\n &.qds-padding {\n padding: var(--qds-feedback-tag-large-padding-vertical)\n var(--qds-feedback-tag-large-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-large-icon-size);\n height: var(--qds-feedback-tag-large-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, Fragment, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type TagStatus = Status | 'neutral'\n\n/**\n * The `<qds-tag>` element is a static descriptor used for items that need to\n * be labeled, categorized, or organized using keywords that describe them.\n *\n * @see https://quartz.se.com/build/components/tag\n */\n@Component({\n tag: 'qds-tag',\n shadow: true,\n styleUrl: 'tag.css',\n})\nexport class Tag implements ComponentInterface {\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 tag's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The tag's status.\n */\n @Prop() public readonly status?: TagStatus = 'neutral'\n\n /**\n * The tag's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The tag's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Provides a text description of the icon for screen readers.\n */\n @Prop() public readonly iconDescription?: string\n\n /**\n * Displays an indicator if `true`.\n */\n @Prop() public readonly badge?: boolean = false\n\n /**\n * The indicator badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): TagStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #hasBadge(): boolean {\n return (this.badge ?? false) && this.importance !== 'emphasized'\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-tag': true,\n 'qds-padding': this.importance !== 'subdued',\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' ? (\n <>\n {this.iconDescription !== undefined &&\n this.iconDescription !== '' && (\n <span class=\"qds-sr-only\">{this.iconDescription}</span>\n )}\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n </>\n ) : (\n this.#hasBadge && (\n <qds-badge-indicator\n status={this.#computedStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )\n )}\n <span class=\"qds-text\">{this.text}</span>\n </span>\n )\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { p as proxyCustomElement, H, h } from './p-D2489VzR.js';
|
|
7
|
+
import { d as defineCustomElement$1 } from './p-fKK7EmM2.js';
|
|
8
|
+
|
|
9
|
+
const badgeIndicatorCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-badge-indicator{align-items:center;border-radius:var(--qds-feedback-rounded-border-radius);display:flex;height:var(--qds-feedback-badge-indicator-standard-size);justify-content:center;width:var(--qds-feedback-badge-indicator-standard-size)}.qds-stroke-ring{border:var(--qds-feedback-badge-border-width) solid var(--qds-theme-feedback-message-neutral-contrast)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.qds-icon{height:100%;width:100%}.qds-badge-indicator[data-status=error]{background-color:var(--qds-theme-feedback-message-critical-contrast)}.qds-icon[data-status=error]{color:var(--qds-theme-feedback-message-critical)}.qds-stroke-ring[data-status=error]{border-color:var(--qds-theme-feedback-message-critical-contrast)}.qds-badge-indicator[data-status=info]{background-color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon[data-status=info]{color:var(--qds-theme-feedback-message-informational)}.qds-stroke-ring[data-status=info]{border-color:var(--qds-theme-feedback-message-informational-contrast)}.qds-badge-indicator[data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral)}.qds-stroke-ring[data-status=neutral]{border-color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-badge-indicator[data-status=unavailable]{background-color:var(--qds-theme-feedback-availability-unavailable)}.qds-icon[data-status=unavailable]{color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-stroke-ring[data-status=unavailable]{border-color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-badge-indicator[data-status=success]{background-color:var(--qds-theme-feedback-message-success-contrast)}.qds-icon[data-status=success]{color:var(--qds-theme-feedback-message-success)}.qds-stroke-ring[data-status=success]{border-color:var(--qds-theme-feedback-message-success-contrast)}.qds-badge-indicator[data-status=warning]{background-color:var(--qds-theme-feedback-message-important-contrast)}.qds-icon[data-status=warning]{color:var(--qds-theme-feedback-message-important)}.qds-stroke-ring[data-status=warning]{border-color:var(--qds-theme-feedback-message-important-contrast)}[data-size=small]{height:var(--qds-feedback-badge-indicator-small-size);width:var(--qds-feedback-badge-indicator-small-size)}[data-size=standard]{height:var(--qds-feedback-badge-indicator-standard-size);width:var(--qds-feedback-badge-indicator-standard-size)}[data-size=large]{height:var(--qds-feedback-badge-indicator-large-size);width:var(--qds-feedback-badge-indicator-large-size)}[data-size=hero]{height:var(--qds-feedback-badge-indicator-hero-size);width:var(--qds-feedback-badge-indicator-hero-size)}";
|
|
10
|
+
|
|
11
|
+
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
12
|
+
//
|
|
13
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
14
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
15
|
+
if (kind === "a" && !f)
|
|
16
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
17
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
18
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
19
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
20
|
+
};
|
|
21
|
+
var _BadgeIndicator_instances, _BadgeIndicator_computedStatus_get, _BadgeIndicator_computedSize_get, _BadgeIndicator_computedIconName_get;
|
|
22
|
+
const BadgeIndicator = /*@__PURE__*/ proxyCustomElement(class BadgeIndicator extends H {
|
|
23
|
+
constructor(registerHost) {
|
|
24
|
+
super();
|
|
25
|
+
if (registerHost !== false) {
|
|
26
|
+
this.__registerHost();
|
|
27
|
+
}
|
|
28
|
+
this.__attachShadow();
|
|
29
|
+
_BadgeIndicator_instances.add(this);
|
|
30
|
+
/**
|
|
31
|
+
* The badge indicator's size.
|
|
32
|
+
*/
|
|
33
|
+
this.size = 'standard';
|
|
34
|
+
/**
|
|
35
|
+
* The badge indicator's status.
|
|
36
|
+
*/
|
|
37
|
+
this.status = 'neutral';
|
|
38
|
+
/**
|
|
39
|
+
* Shows a stroke ring around the badge indicator for better visibility.
|
|
40
|
+
*/
|
|
41
|
+
this.strokeRing = false;
|
|
42
|
+
}
|
|
43
|
+
render() {
|
|
44
|
+
return (h("div", { key: '917e4474d3495841ecbfe7112bf260ba442e4f27', class: {
|
|
45
|
+
'qds-badge-indicator': true,
|
|
46
|
+
'qds-stroke-ring': this.strokeRing,
|
|
47
|
+
}, "data-size": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedSize_get), "data-status": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) }, h("span", { key: '482e95481de34e14c462d46211a75e659114496a', class: "qds-sr-only" }, this.description), __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) !== 'neutral' && (h("qds-icon", { key: 'b73cb4b84f7e0f1957461f5951dc42374ba7f230', library: "core", class: "qds-icon", name: __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedIconName_get), "data-status": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) }))));
|
|
48
|
+
}
|
|
49
|
+
static get style() { return badgeIndicatorCss; }
|
|
50
|
+
}, [257, "qds-badge-indicator", {
|
|
51
|
+
"description": [1],
|
|
52
|
+
"size": [1],
|
|
53
|
+
"status": [1],
|
|
54
|
+
"strokeRing": [4, "stroke-ring"]
|
|
55
|
+
}]);
|
|
56
|
+
_BadgeIndicator_instances = new WeakSet(), _BadgeIndicator_computedStatus_get = function _BadgeIndicator_computedStatus_get() {
|
|
57
|
+
switch (this.status) {
|
|
58
|
+
case 'error':
|
|
59
|
+
case 'info':
|
|
60
|
+
case 'success':
|
|
61
|
+
case 'warning':
|
|
62
|
+
case 'unavailable': {
|
|
63
|
+
return this.status;
|
|
64
|
+
}
|
|
65
|
+
default: {
|
|
66
|
+
return 'neutral';
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, _BadgeIndicator_computedSize_get = function _BadgeIndicator_computedSize_get() {
|
|
70
|
+
switch (this.size) {
|
|
71
|
+
case 'hero':
|
|
72
|
+
case 'large':
|
|
73
|
+
case 'small': {
|
|
74
|
+
return this.size;
|
|
75
|
+
}
|
|
76
|
+
default: {
|
|
77
|
+
return 'standard';
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, _BadgeIndicator_computedIconName_get = function _BadgeIndicator_computedIconName_get() {
|
|
81
|
+
switch (__classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get)) {
|
|
82
|
+
case 'error': {
|
|
83
|
+
return 'status-error-solid';
|
|
84
|
+
}
|
|
85
|
+
case 'info': {
|
|
86
|
+
return 'status-info-solid';
|
|
87
|
+
}
|
|
88
|
+
case 'success': {
|
|
89
|
+
return 'status-success-solid';
|
|
90
|
+
}
|
|
91
|
+
case 'warning': {
|
|
92
|
+
return 'status-warning-solid';
|
|
93
|
+
}
|
|
94
|
+
case 'unavailable': {
|
|
95
|
+
return 'status-unavailable';
|
|
96
|
+
}
|
|
97
|
+
default: {
|
|
98
|
+
return '';
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
function defineCustomElement() {
|
|
103
|
+
if (typeof customElements === "undefined") {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
const components = ["qds-badge-indicator", "qds-icon"];
|
|
107
|
+
components.forEach(tagName => { switch (tagName) {
|
|
108
|
+
case "qds-badge-indicator":
|
|
109
|
+
if (!customElements.get(tagName)) {
|
|
110
|
+
customElements.define(tagName, BadgeIndicator);
|
|
111
|
+
}
|
|
112
|
+
break;
|
|
113
|
+
case "qds-icon":
|
|
114
|
+
if (!customElements.get(tagName)) {
|
|
115
|
+
defineCustomElement$1();
|
|
116
|
+
}
|
|
117
|
+
break;
|
|
118
|
+
} });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export { BadgeIndicator as B, defineCustomElement as d };
|
|
122
|
+
//# sourceMappingURL=p-DOqfdgQA.js.map
|
|
123
|
+
|
|
124
|
+
//# sourceMappingURL=p-DOqfdgQA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-DOqfdgQA.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,uuFAAuuF;;ACAjwF;AACA;AACA;;;;;;;;;MAqBa,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAgBE;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAwB,UAAU;AAE9D;;AAEG;AACqB,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;AAEjE;;AAEG;AACqB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AA2EpD;IAtBQ,MAAM,GAAA;QACX,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,IAAI;gBAC3B,iBAAiB,EAAE,IAAI,CAAC,UAAU;aACnC,EAAA,WAAA,EACU,uBAAA,IAAI,EAAA,yBAAA,EAAA,GAAA,EAAA,gCAAA,CAAc,EAChB,aAAA,EAAA,sBAAA,CAAA,IAAI,EAAgB,yBAAA,EAAA,GAAA,EAAA,kCAAA,CAAA,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,EAClD,sBAAA,CAAA,IAAI,EAAA,yBAAA,EAAA,GAAA,EAAA,kCAAA,CAAgB,KAAK,SAAS,KACjC,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAA,yBAAA,EAAA,GAAA,EAAA,oCAAA,CAAkB,EACf,aAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,yBAAA,EAAA,GAAA,EAAA,kCAAA,CAAgB,EACjC,CAAA,CACH,CACG;;;;;;;;;;AArER,IAAA,QAAQ,IAAI,CAAC,MAAM;AACjB,QAAA,KAAK,OAAO;AACZ,QAAA,KAAK,MAAM;AACX,QAAA,KAAK,SAAS;AACd,QAAA,KAAK,SAAS;QACd,KAAK,aAAa,EAAE;YAClB,OAAO,IAAI,CAAC,MAAM;;QAEpB,SAAS;AACP,YAAA,OAAO,SAAS;;;AAGtB,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,MAAM;AACX,QAAA,KAAK,OAAO;QACZ,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,oCAAA,GAAA,SAAA,oCAAA,GAAA;IAGC,QAAQ,sBAAA,CAAA,IAAI,EAAgB,yBAAA,EAAA,GAAA,EAAA,kCAAA,CAAA;QAC1B,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,oBAAoB;;QAE7B,KAAK,MAAM,EAAE;AACX,YAAA,OAAO,mBAAmB;;QAE5B,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,sBAAsB;;QAE/B,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,sBAAsB;;QAE/B,KAAK,aAAa,EAAE;AAClB,YAAA,OAAO,oBAAoB;;QAE7B,SAAS;AACP,YAAA,OAAO,EAAE;;;AAGf,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/badge-indicator/badge-indicator.css?tag=qds-badge-indicator&encapsulation=shadow","src/components/badge-indicator/badge-indicator.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-badge-indicator {\n align-items: center;\n border-radius: var(--qds-feedback-rounded-border-radius);\n display: flex;\n height: var(--qds-feedback-badge-indicator-standard-size);\n justify-content: center;\n width: var(--qds-feedback-badge-indicator-standard-size);\n}\n\n.qds-stroke-ring {\n border: var(--qds-feedback-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.qds-icon {\n height: 100%;\n width: 100%;\n}\n\n[data-status='error'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-critical);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n}\n\n[data-status='info'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-informational);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n}\n\n[data-status='neutral'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-neutral);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='unavailable'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-availability-unavailable);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='success'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-success-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-success);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-success-contrast);\n }\n}\n\n[data-status='warning'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-important-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-important);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-important-contrast);\n }\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-badge-indicator-small-size);\n width: var(--qds-feedback-badge-indicator-small-size);\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-badge-indicator-standard-size);\n width: var(--qds-feedback-badge-indicator-standard-size);\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-badge-indicator-large-size);\n width: var(--qds-feedback-badge-indicator-large-size);\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-badge-indicator-hero-size);\n width: var(--qds-feedback-badge-indicator-hero-size);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Size, Status } from '../shared'\n\nexport type BadgeIndicatorSize = Size | 'hero'\nexport type BadgeIndicatorStatus = Status | 'neutral' | 'unavailable'\n\n/**\n * The `<qds-badge-indicator>` element is a small, rounded UI element used to\n * display status indicators. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that an event has\n * occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-indicator',\n shadow: true,\n styleUrl: 'badge-indicator.css',\n})\nexport class BadgeIndicator implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-indicator that will be used by\n * screen readers.\n *\n * @example\n * <qds-badge-indicator description=\"success\"></qds-badge-indicator>\n * // This qds-badge-indicator will be read by screen readers as \"success\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge indicator's size.\n */\n @Prop() public readonly size?: BadgeIndicatorSize = 'standard'\n\n /**\n * The badge indicator's status.\n */\n @Prop() public readonly status?: BadgeIndicatorStatus = 'neutral'\n\n /**\n * Shows a stroke ring around the badge indicator for better visibility.\n */\n @Prop() public readonly strokeRing: boolean = false\n\n get #computedStatus(): BadgeIndicatorStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning':\n case 'unavailable': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #computedSize(): BadgeIndicatorSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedIconName(): string {\n switch (this.#computedStatus) {\n case 'error': {\n return 'status-error-solid'\n }\n case 'info': {\n return 'status-info-solid'\n }\n case 'success': {\n return 'status-success-solid'\n }\n case 'warning': {\n return 'status-warning-solid'\n }\n case 'unavailable': {\n return 'status-unavailable'\n }\n default: {\n return ''\n }\n }\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-badge-indicator': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n >\n <span class=\"qds-sr-only\">{this.description}</span>\n {this.#computedStatus !== 'neutral' && (\n <qds-icon\n library=\"core\"\n class=\"qds-icon\"\n name={this.#computedIconName}\n data-status={this.#computedStatus}\n />\n )}\n </div>\n )\n }\n}\n"],"version":3}
|