@quartzds/core 1.0.0-beta.120 → 1.0.0-beta.122
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 +68 -0
- package/components/index.js +1 -1
- package/components/{p-CXP6q9Mr.js → p-BalM52S_.js} +12 -7
- package/components/p-BalM52S_.js.map +1 -0
- package/components/{p-CFVg7I9T.js → p-C0VgKX4J.js} +9 -9
- package/components/p-C0VgKX4J.js.map +1 -0
- package/components/{p-BkgfW_tl.js → p-C9R8N06B.js} +6 -32
- package/components/p-C9R8N06B.js.map +1 -0
- package/components/{p-DnZdwX0l.js → p-CKp062X8.js} +6 -6
- package/components/p-CKp062X8.js.map +1 -0
- package/components/{p-DwxIJEUj.js → p-CVuTVnQo.js} +3 -3
- package/components/{p-DwxIJEUj.js.map → p-CVuTVnQo.js.map} +1 -1
- package/components/{p-DeRqCYmp.js → p-Ck9w5WIb.js} +6 -6
- package/components/p-Ck9w5WIb.js.map +1 -0
- package/components/p-DCAlWquR.js +200 -0
- package/components/p-DCAlWquR.js.map +1 -0
- package/components/{p-BkBJDD6Y.js → p-DRcxeXWE.js} +58 -22
- package/components/p-DRcxeXWE.js.map +1 -0
- package/components/{p-Dsc0-aXK.js → p-DgYrfIr_.js} +4 -4
- package/components/{p-Dsc0-aXK.js.map → p-DgYrfIr_.js.map} +1 -1
- package/components/{p-CDRwHAIT.js → p-XP2CY_fo.js} +3 -3
- package/components/p-XP2CY_fo.js.map +1 -0
- package/components/{p-5RFBIepu.js → p-io1iVgY1.js} +47 -28
- package/components/p-io1iVgY1.js.map +1 -0
- package/components/{p-B03FWheS.js → p-oqmnh-8P.js} +4 -4
- package/components/{p-B03FWheS.js.map → p-oqmnh-8P.js.map} +1 -1
- package/components/{p-eFhV8w2l.js → p-yb0Kv4Y6.js} +24 -6
- package/components/p-yb0Kv4Y6.js.map +1 -0
- package/components/qds-action-item.js +5 -5
- package/components/qds-action-item.js.map +1 -1
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-badge-counter.js +1 -1
- package/components/qds-breadcrumb-item.js +6 -6
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +5 -5
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +10 -10
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +7 -7
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +4 -4
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +9 -9
- package/components/qds-icon-tab.js.map +1 -1
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +3 -3
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +49 -18
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +153 -1
- package/components/qds-label.js.map +1 -1
- package/components/qds-list-item.js +25 -29
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +3 -3
- package/components/qds-loader.js.map +1 -1
- package/components/qds-menu-item.js +6 -6
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +27 -9
- package/components/qds-select.js.map +1 -1
- package/components/qds-standalone-link.js +5 -5
- package/components/qds-standalone-link.js.map +1 -1
- package/components/qds-switch.js +5 -5
- package/components/qds-tab.js +20 -15
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +95 -34
- package/components/qds-tabbar.js.map +1 -1
- package/components/qds-table-cell.js +32 -4
- package/components/qds-table-cell.js.map +1 -1
- package/components/qds-table-head-cell.js +32 -4
- package/components/qds-table-head-cell.js.map +1 -1
- package/components/qds-table-row.js +2 -2
- package/components/qds-table-row.js.map +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +4 -4
- package/components/qds-textarea.js.map +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/{helpers-BIL8yXqA.js → helpers-Qs3cpKiI.js} +11 -6
- package/dist/cjs/{helpers-BIL8yXqA.js.map → helpers-Qs3cpKiI.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +145 -42
- package/dist/cjs/qds-badge-counter.qds-badge-indicator.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +1 -1
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +7 -7
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +3 -3
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +5 -5
- package/dist/cjs/qds-dropdown.cjs.entry.js +22 -4
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +3 -3
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +5 -5
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +10 -30
- package/dist/cjs/qds-icon.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +2 -2
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +46 -16
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +3 -3
- package/dist/cjs/qds-list-item.cjs.entry.js +7 -5
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-loader.cjs.entry.js +2 -2
- package/dist/cjs/qds-loader.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-mini-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +23 -7
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +4 -4
- package/dist/cjs/qds-tab.cjs.entry.js +16 -11
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +84 -28
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table-cell.cjs.entry.js +30 -3
- package/dist/cjs/qds-table-cell.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +30 -3
- package/dist/cjs/qds-table-head-cell.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table-row.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag.cjs.entry.js +3 -3
- package/dist/cjs/qds-tag.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +3 -3
- package/dist/cjs/qds-title.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +460 -33
- package/dist/docs.json +403 -64
- package/dist/esm/{helpers-BgaJNF9u.js → helpers-Fe2AA6uo.js} +12 -7
- package/dist/esm/{helpers-BgaJNF9u.js.map → helpers-Fe2AA6uo.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +3 -3
- package/dist/esm/qds-action-item.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +146 -43
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +1 -1
- package/dist/esm/qds-breadcrumb-item.entry.js +4 -4
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +2 -2
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +7 -7
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +3 -3
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +5 -5
- package/dist/esm/qds-dropdown.entry.js +22 -4
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +3 -3
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +5 -5
- package/dist/esm/qds-icon-tab.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +11 -31
- package/dist/esm/qds-icon.entry.js.map +1 -1
- package/dist/esm/qds-inline-link.entry.js +2 -2
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +46 -16
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +3 -3
- package/dist/esm/qds-list-item.entry.js +7 -5
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-loader.entry.js +2 -2
- package/dist/esm/qds-loader.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +3 -3
- package/dist/esm/qds-mini-button.entry.js +1 -1
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +23 -7
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +4 -4
- package/dist/esm/qds-standalone-link.entry.js.map +1 -1
- package/dist/esm/qds-switch.entry.js +4 -4
- package/dist/esm/qds-tab.entry.js +16 -11
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +84 -28
- package/dist/esm/qds-tabbar.entry.js.map +1 -1
- package/dist/esm/qds-table-cell.entry.js +30 -3
- package/dist/esm/qds-table-cell.entry.js.map +1 -1
- package/dist/esm/qds-table-head-cell.entry.js +30 -3
- package/dist/esm/qds-table-head-cell.entry.js.map +1 -1
- package/dist/esm/qds-table-row.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js.map +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag.entry.js +3 -3
- package/dist/esm/qds-tag.entry.js.map +1 -1
- package/dist/esm/qds-textarea.entry.js +4 -4
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +3 -3
- package/dist/esm/qds-title.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/avatar-media/avatar-media.d.ts +14 -5
- package/dist/types/components/checkbox/checkbox.d.ts +4 -0
- package/dist/types/components/icon/icon.d.ts +1 -2
- package/dist/types/components/input/input.d.ts +10 -0
- package/dist/types/components/radio/radio.d.ts +4 -0
- package/dist/types/components/select/select.d.ts +7 -1
- package/dist/types/components/tab/tab.d.ts +1 -1
- package/dist/types/components/tabbar/tabbar.d.ts +27 -1
- package/dist/types/components/table-cell/table-cell.d.ts +6 -0
- package/dist/types/components/table-head-cell/table-head-cell.d.ts +6 -0
- package/dist/types/components.d.ts +94 -19
- package/dist/vscode.html-custom-data.json +99 -5
- package/hydrate/index.js +1021 -742
- package/hydrate/index.mjs +1021 -742
- package/package.json +1 -1
- package/styles/core.css +24 -22
- package/components/p-5RFBIepu.js.map +0 -1
- package/components/p-BkBJDD6Y.js.map +0 -1
- package/components/p-BkgfW_tl.js.map +0 -1
- package/components/p-Bnc7Puxx.js +0 -164
- package/components/p-Bnc7Puxx.js.map +0 -1
- package/components/p-CDRwHAIT.js.map +0 -1
- package/components/p-CFVg7I9T.js.map +0 -1
- package/components/p-CRVPDKfO.js +0 -163
- package/components/p-CRVPDKfO.js.map +0 -1
- package/components/p-CXP6q9Mr.js.map +0 -1
- package/components/p-DeRqCYmp.js.map +0 -1
- package/components/p-DnZdwX0l.js.map +0 -1
- package/components/p-eFhV8w2l.js.map +0 -1
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, a as readTask, h, H as Host, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, i as invariant, a as isEllipsisActive } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, a as isEllipsisActive } from './helpers-Fe2AA6uo.js';
|
|
8
8
|
|
|
9
|
-
const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;border-radius:var(--qds-control-border-radius);box-sizing:border-box}.qds-indented-content{align-self:stretch;cursor:default;display:flex;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-icon,.qds-main-icon{color:var(--qds-theme-text-standard)}.qds-picture{flex-shrink:0}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-title,.qds-tooltip-title{color:var(--qds-theme-title)}.qds-subtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}.qds-subtitle,.qds-tooltip-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.qds-kicker,.qds-tooltip-kicker{color:var(--qds-theme-kicker)}.qds-draggable{cursor:grab}.qds-cursor-pointer{cursor:pointer}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding:var(--qds-list-item-small-padding-vertical) var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{height:var(--qds-list-item-small-icon-size);width:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker,[data-size=small] .qds-tooltip-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title,[data-size=small] .qds-tooltip-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle,[data-size=small] .qds-tooltip-subtitle{font:var(--qds-list-item-small-subtitle)}[data-size=small] .qds-picture{height:var(--qds-list-item-small-picture-size);width:var(--qds-list-item-small-picture-size)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding:var(--qds-list-item-standard-padding-vertical) var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{height:var(--qds-list-item-standard-icon-size);width:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker,[data-size=standard] .qds-tooltip-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title,[data-size=standard] .qds-tooltip-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle,[data-size=standard] .qds-tooltip-subtitle{font:var(--qds-list-item-standard-subtitle)}[data-size=standard] .qds-picture{height:var(--qds-list-item-standard-picture-size);width:var(--qds-list-item-standard-picture-size)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding:var(--qds-list-item-large-padding-vertical) var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{height:var(--qds-list-item-large-icon-size);width:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker,[data-size=large] .qds-tooltip-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title,[data-size=large] .qds-tooltip-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle,[data-size=large] .qds-tooltip-subtitle{font:var(--qds-list-item-large-subtitle)}[data-size=large] .qds-picture{height:var(--qds-list-item-large-picture-size);width:var(--qds-list-item-large-picture-size)}.qds-list-item{display:block}.qds-list-item:
|
|
9
|
+
const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;border-radius:var(--qds-control-border-radius);box-sizing:border-box}.qds-indented-content{align-self:stretch;cursor:default;display:flex;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-icon,.qds-main-icon{color:var(--qds-theme-text-standard)}.qds-picture{flex-shrink:0}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-texts: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-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-title,.qds-tooltip-title{color:var(--qds-theme-title)}.qds-subtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}.qds-subtitle,.qds-tooltip-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.qds-kicker,.qds-tooltip-kicker{color:var(--qds-theme-kicker)}.qds-draggable{cursor:grab}.qds-cursor-pointer{cursor:pointer}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding:var(--qds-list-item-small-padding-vertical) var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{height:var(--qds-list-item-small-icon-size);width:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker,[data-size=small] .qds-tooltip-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title,[data-size=small] .qds-tooltip-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle,[data-size=small] .qds-tooltip-subtitle{font:var(--qds-list-item-small-subtitle)}[data-size=small] .qds-picture{height:var(--qds-list-item-small-picture-size);width:var(--qds-list-item-small-picture-size)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding:var(--qds-list-item-standard-padding-vertical) var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{height:var(--qds-list-item-standard-icon-size);width:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker,[data-size=standard] .qds-tooltip-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title,[data-size=standard] .qds-tooltip-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle,[data-size=standard] .qds-tooltip-subtitle{font:var(--qds-list-item-standard-subtitle)}[data-size=standard] .qds-picture{height:var(--qds-list-item-standard-picture-size);width:var(--qds-list-item-standard-picture-size)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding:var(--qds-list-item-large-padding-vertical) var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{height:var(--qds-list-item-large-icon-size);width:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker,[data-size=large] .qds-tooltip-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title,[data-size=large] .qds-tooltip-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle,[data-size=large] .qds-tooltip-subtitle{font:var(--qds-list-item-large-subtitle)}[data-size=large] .qds-picture{height:var(--qds-list-item-large-picture-size);width:var(--qds-list-item-large-picture-size)}.qds-list-item{display:block}.qds-list-item:hover:not(.qds-static){background-color:var(--qds-theme-interactive-background-hover)}.qds-list-item:active:not(.qds-static),.qds-list-item:not(.qds-has-submenu):not(.qds-static):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-selected-hover)}.qds-selected.qds-list-item:active{background-color:var(\n --qds-theme-interactive-background-selected-pressed\n )}.qds-selected[data-size=small] .qds-title{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-title{font:var(--qds-list-item-large-title-emphasized)}";
|
|
10
10
|
|
|
11
11
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
12
12
|
//
|
|
@@ -224,16 +224,18 @@ const ListItem = class {
|
|
|
224
224
|
this.subtitleChanged();
|
|
225
225
|
}
|
|
226
226
|
render() {
|
|
227
|
-
return (h(Host, { key: '
|
|
227
|
+
return (h(Host, { key: 'ee0d9edc0e5cdebab2c62a1b0ba5834fb0880205' }, h("div", { key: '27fdefc82869d16f8328614994979edfedf83847', class: {
|
|
228
228
|
'qds-list-item': true,
|
|
229
229
|
'qds-has-submenu': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_hasSubmenu_get),
|
|
230
230
|
'qds-disabled': this.disabled,
|
|
231
231
|
'qds-selected': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSelected_get),
|
|
232
232
|
'qds-static': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'none',
|
|
233
|
-
}, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get) }, h("div", { key: '
|
|
233
|
+
}, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get) }, h("div", { key: '7b2e68fcac4f4ffab6e81e885653999612ed1cb6', class: {
|
|
234
234
|
'qds-indented-content': true,
|
|
235
235
|
'qds-cursor-pointer': !this.disabled && __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) !== 'none',
|
|
236
|
-
} }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: '
|
|
236
|
+
} }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: 'a06bfe133541e0557a9ad0fed6a27b024b9fb44e', checked: this.selected, indeterminate: this.indeterminate, size: this.size, text: this.text, disabled: this.disabled, checkboxOnly: true, onQdsChange: __classPrivateFieldGet(this, _ListItem_onCheck, "f"), ref: __classPrivateFieldGet(this, _ListItem_checkboxRef, "f") })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'radio' && (h("qds-radio", { key: 'd5083877d38ffcc299012d074ad2f1ef8b5de4cb', checked: this.selected, size: this.size, onQdsChange: __classPrivateFieldGet(this, _ListItem_onSelect, "f"), disabled: this.disabled, "aria-label": this.text, ref: __classPrivateFieldGet(this, _ListItem_radioRef, "f") })), this.host.draggable && (h("qds-icon", { key: 'bf588102869dc59bc78a285d42c852226852e219', class: "qds-icon qds-list-action qds-draggable", library: "core", name: "draggable" })), this.imageSrc !== undefined && this.imageSrc !== '' && (h("img", { key: '47f87d7dec2a4756cd6a9c81bfab6fa2a7fc0871', class: "qds-picture", src: this.imageSrc, alt: "" })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '6224ec0568b6930da2a9f4ebeb1c2d8763e06814', class: "qds-main-icon", library: this.iconLibrary, name: this.iconName })), this.avatarSrc !== undefined && this.avatarSrc !== '' && (h("qds-avatar-media", { key: '50aa50b332721712087f71c90128d683464eb357', class: "qds-picture", src: this.avatarSrc })), h("div", { key: '5f1eb25a30de4c5a8c2ba2f177c60772820f780d', class: "qds-texts", role: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'select' ? 'option' : undefined, tabIndex: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'select' && !this.disabled
|
|
237
|
+
? 0
|
|
238
|
+
: undefined, onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f") }, this.kicker !== undefined && this.kicker !== '' && (h("div", { key: 'ad1019304d423631b49c184f8fe063f8244a5522', class: "qds-kicker" }, this.kicker)), h("div", { key: 'e04aee135c90ae30afbe892dc0c93dc1b58d0f6e', class: "qds-title", ref: __classPrivateFieldGet(this, _ListItem_divTitleRef, "f") }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { key: '0878a0bcdbb2a46a6a10a3a337db37fa173ba117', class: "qds-subtitle", ref: __classPrivateFieldGet(this, _ListItem_divSubtitleRef, "f") }, this.subtitle))), this.badge !== undefined && this.badge !== '' && (h("qds-badge-counter", { key: '26c39639c5ff74e527a3c13870357992005d83b9', size: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get), strokeRing: true, value: this.badge, description: this.badgeDescription })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_hasSubmenu_get) && (h("qds-icon-button", { key: '8772f76f5b815cf2416d330127ebf84cc2033cf2', iconName: "dots-3-vertical", importance: "subdued", "aria-label": "more actions", disabled: this.disabled, ref: __classPrivateFieldGet(this, _ListItem_iconButtonRef, "f") })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (h("qds-icon", { key: '93dca44f644c099ef7fdbe2698c9bdb6f7591191', class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_hasSubmenu_get) && (h("qds-dropdown", { key: 'ac7ee2dc31df20870a50f10c2226715c479e9fea', class: "qds-accessory qds-related", placement: "right-start", target: __classPrivateFieldGet(this, _ListItem_iconButtonRef, "f"), role: "group" }, h("slot", { key: '69984f6419363b4e3118a9530c2b7c3aa80058b5', onSlotchange: __classPrivateFieldGet(this, _ListItem_onSlotChange, "f") }))), this.showDivider && h("qds-divider", { key: '8a1af2e9ca9ca2efb7e06cad5be2f520744c9792' }), (this.textTooltip || this.subtitleTooltip) && (h("qds-tooltip", { key: 'fcf807651e2e3d2b6da676447ce68f961ab168ee', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _ListItem_textTooltipRef, "f") }, h("div", { key: 'eacd4ab8814dd82dc61c3c0a1767bae199d3bfa5', class: "qds-tooltip-kicker" }, this.kicker), h("div", { key: '3da43382feaa8e6f6882bab0b30911d4259c4d92', class: "qds-tooltip-title" }, this.text), h("div", { key: 'e6ce033788d3428f83b255d859b69a737f0f4b9c', class: "qds-tooltip-subtitle" }, this.subtitle))))));
|
|
237
239
|
}
|
|
238
240
|
get host() { return getElement(this); }
|
|
239
241
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-list-item.entry.js","sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-indented-content {\n display: flex;\n flex: 1 0;\n align-self: stretch;\n cursor: default;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-icon,\n.qds-main-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-picture {\n flex-shrink: 0;\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n}\n\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-tooltip-title {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n overflow: hidden;\n}\n\n.qds-tooltip-subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n}\n\n.qds-tooltip-kicker {\n color: var(--qds-theme-kicker);\n}\n\n.qds-draggable {\n cursor: grab;\n}\n\n.qds-cursor-pointer {\n cursor: pointer;\n}\n\n[data-size='small'] {\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding: var(--qds-list-item-small-padding-vertical)\n var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-small-icon-size);\n width: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-small-picture-size);\n width: var(--qds-list-item-small-picture-size);\n }\n}\n\n[data-size='standard'] {\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding: var(--qds-list-item-standard-padding-vertical)\n var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-standard-icon-size);\n width: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-standard-picture-size);\n width: var(--qds-list-item-standard-picture-size);\n }\n}\n\n[data-size='large'] {\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding: var(--qds-list-item-large-padding-vertical)\n var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-large-icon-size);\n width: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-large-picture-size);\n width: var(--qds-list-item-large-picture-size);\n }\n}\n\n.qds-list-item {\n display: block;\n\n &:has(input: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 &:hover:not(.qds-static) {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active:not(.qds-static) {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:not(.qds-has-submenu, .qds-static):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(\n --qds-theme-interactive-background-selected-pressed\n );\n }\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\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 Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'none' | 'radio' | 'select'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: false },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is not visible.\n */\n @Prop() public readonly showDivider: 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 URL of the avatar image to display.\n */\n @Prop() public readonly avatarSrc?: string\n\n /**\n * The URL of the picture to display.\n *\n * This is used to display a picture in the list item.\n * It is not used for the avatar image.\n */\n @Prop() public readonly imageSrc?: string\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction: ListAction = 'select'\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Displays a counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string\n\n /**\n * The counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @Element() private readonly host!: HTMLElement\n\n @State() private textTooltip = false\n\n @State() private subtitleTooltip = false\n\n @State() private hasSubmenuSlot = false\n\n #roText?: ResizeObserver\n\n #roSubTitle?: ResizeObserver\n\n #text?: HTMLDivElement\n\n #subtitle?: HTMLDivElement\n\n #iconButton!: HTMLQdsIconButtonElement\n\n #checkbox?: HTMLQdsCheckboxElement\n\n #radio?: HTMLQdsRadioElement\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction {\n switch (this.listAction) {\n case 'radio':\n case 'multiselect':\n case 'select':\n case 'none': {\n return this.listAction\n }\n default: {\n return 'select'\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #hasSubmenu(): boolean {\n return this.hasSubmenuSlot\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled || this.hasSubmenuSlot) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#computedListAction === 'multiselect') {\n invariant(this.#checkbox)\n this.#onCheck(event)\n }\n\n if (this.#computedListAction === 'radio') {\n invariant(this.#radio)\n this.#onSelect(event)\n }\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\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 @Listen('dragstart')\n protected onDragstart(): void {\n if (!this.host.draggable) return\n this.host.setAttribute('aria-grabbed', 'true')\n }\n\n @Listen('dragend')\n protected onDragend(): void {\n if (!this.host.draggable) return\n this.host.removeAttribute('aria-grabbed')\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('listAction')\n protected listActionChanged(newValue: ListAction | undefined): void {\n this.internals.ariaChecked =\n (newValue === 'radio' || newValue === 'multiselect') &&\n this.#computedSelected\n ? 'true'\n : 'false'\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#roText) this.#roText.disconnect()\n\n if (!this.#text || !this.text) return\n\n invariant(this.#text)\n\n const div = this.#text\n readTask(() => {\n this.textTooltip = isEllipsisActive(div)\n })\n this.#roText = new ResizeObserver(([divEntry]) => {\n this.textTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roText.observe(this.#text)\n }\n\n @Watch('subtitle')\n protected subtitleChanged(): void {\n if (this.#roSubTitle) this.#roSubTitle.disconnect()\n\n if (!this.#subtitle || this.subtitle === undefined || this.subtitle === '')\n return\n\n invariant(this.#subtitle)\n const div = this.#subtitle\n readTask(() => {\n this.subtitleTooltip = isEllipsisActive(div)\n })\n this.#roSubTitle = new ResizeObserver(([divEntry]) => {\n this.subtitleTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roSubTitle.observe(this.#subtitle)\n }\n\n public componentWillLoad(): void {\n this.hasSubmenuSlot = this.host.hasChildNodes()\n\n const subtitle =\n this.subtitle === undefined || this.subtitle === ''\n ? ''\n : ` ${this.subtitle}`\n const kicker =\n this.kicker === undefined || this.kicker === '' ? '' : ` ${this.kicker}`\n this.internals.ariaLabel = `${this.text} ${subtitle} ${kicker}`.trim()\n switch (this.listAction) {\n case 'select': {\n this.internals.role = 'generic'\n break\n }\n default: {\n this.internals.role = 'listitem'\n break\n }\n }\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n this.subtitleChanged()\n }\n\n public render() {\n return (\n <Host>\n <div\n class={{\n 'qds-list-item': true,\n 'qds-has-submenu': this.#hasSubmenu,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.#computedSelected,\n 'qds-static': this.#computedListAction === 'none',\n }}\n data-size={this.#computedSize}\n >\n <div\n class={{\n 'qds-indented-content': true,\n 'qds-cursor-pointer':\n !this.disabled && this.#computedListAction !== 'none',\n }}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.selected}\n indeterminate={this.indeterminate}\n size={this.size}\n text={this.text}\n disabled={this.disabled}\n checkboxOnly\n onQdsChange={this.#onCheck}\n ref={this.#checkboxRef}\n />\n )}\n\n {this.#computedListAction === 'radio' && (\n <qds-radio\n checked={this.selected}\n size={this.size}\n onQdsChange={this.#onSelect}\n disabled={this.disabled}\n aria-label={this.text}\n ref={this.#radioRef}\n />\n )}\n\n {this.host.draggable && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-list-action qds-draggable\"\n library=\"core\"\n name=\"draggable\"\n />\n )}\n\n {this.imageSrc !== undefined && this.imageSrc !== '' && (\n <img class=\"qds-picture\" src={this.imageSrc} alt=\"\" />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.avatarSrc !== undefined && this.avatarSrc !== '' && (\n <qds-avatar-media class=\"qds-picture\" src={this.avatarSrc} />\n )}\n\n <div\n class=\"qds-texts\"\n role={\n this.#computedListAction === 'select' ? 'option' : undefined\n }\n tabIndex={this.#computedListAction === 'select' ? 0 : undefined}\n onFocus={this.#onFocus}\n onBlur={this.#onBlur}\n >\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\" ref={this.#divTitleRef}>\n {this.text}\n </div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\" ref={this.#divSubtitleRef}>\n {this.subtitle}\n </div>\n )}\n </div>\n\n {this.badge !== undefined && this.badge !== '' && (\n <qds-badge-counter\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n description={this.badgeDescription}\n />\n )}\n\n {this.#hasSubmenu && (\n <qds-icon-button\n iconName=\"dots-3-vertical\"\n importance=\"subdued\"\n aria-label=\"more actions\"\n disabled={this.disabled}\n ref={this.#iconButtonRef}\n />\n )}\n\n {this.#computedDestination !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-destination\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n {this.#hasSubmenu && (\n <qds-dropdown\n class=\"qds-accessory qds-related\"\n placement=\"right-start\"\n target={this.#iconButtonRef}\n role=\"group\"\n >\n <slot onSlotchange={this.#onSlotChange} />\n </qds-dropdown>\n )}\n {this.showDivider && <qds-divider />}\n {(this.textTooltip || this.subtitleTooltip) && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#textTooltipRef}>\n <div class=\"qds-tooltip-kicker\">{this.kicker}</div>\n <div class=\"qds-tooltip-title\">{this.text}</div>\n <div class=\"qds-tooltip-subtitle\">{this.subtitle}</div>\n </qds-tooltip>\n )}\n </div>\n </Host>\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onCheck = (event: Event): void => {\n event.stopImmediatePropagation()\n this.selected = this.#computedIndeterminate ? true : !this.#computedSelected\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n readonly #onSelect = (event: Event): void => {\n event.stopImmediatePropagation()\n if (!this.#computedSelected) {\n this.selected = !this.#computedSelected\n this.changeEmitter.emit()\n }\n }\n\n readonly #divTitleRef = (div?: HTMLDivElement): void => {\n this.#text = div\n }\n\n readonly #divSubtitleRef = (div?: HTMLDivElement): void => {\n this.#subtitle = div\n }\n\n readonly #textTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.host\n }\n\n readonly #iconButtonRef = (\n iconButton?: HTMLQdsIconButtonElement,\n ): HTMLQdsIconButtonElement => {\n if (iconButton) {\n this.#iconButton = iconButton\n }\n\n return this.#iconButton\n }\n\n readonly #onSlotChange = (event: Event): void => {\n invariant(event.target instanceof HTMLSlotElement)\n const slot = event.target\n this.hasSubmenuSlot = slot.assignedNodes().length > 0\n }\n\n readonly #checkboxRef = (checkbox?: HTMLQdsCheckboxElement): void => {\n this.#checkbox = checkbox\n }\n\n readonly #radioRef = (radio?: HTMLQdsRadioElement): void => {\n this.#radio = radio\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-list-item.entry.js","sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-indented-content {\n display: flex;\n flex: 1 0;\n align-self: stretch;\n cursor: default;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-icon,\n.qds-main-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-picture {\n flex-shrink: 0;\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n\n &: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\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-tooltip-title {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n overflow: hidden;\n}\n\n.qds-tooltip-subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n}\n\n.qds-tooltip-kicker {\n color: var(--qds-theme-kicker);\n}\n\n.qds-draggable {\n cursor: grab;\n}\n\n.qds-cursor-pointer {\n cursor: pointer;\n}\n\n[data-size='small'] {\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding: var(--qds-list-item-small-padding-vertical)\n var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-small-icon-size);\n width: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-small-picture-size);\n width: var(--qds-list-item-small-picture-size);\n }\n}\n\n[data-size='standard'] {\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding: var(--qds-list-item-standard-padding-vertical)\n var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-standard-icon-size);\n width: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-standard-picture-size);\n width: var(--qds-list-item-standard-picture-size);\n }\n}\n\n[data-size='large'] {\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding: var(--qds-list-item-large-padding-vertical)\n var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-large-icon-size);\n width: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker,\n .qds-tooltip-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title,\n .qds-tooltip-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle,\n .qds-tooltip-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-large-picture-size);\n width: var(--qds-list-item-large-picture-size);\n }\n}\n\n.qds-list-item {\n display: block;\n\n &:hover:not(.qds-static) {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active:not(.qds-static) {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:not(.qds-has-submenu, .qds-static):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(\n --qds-theme-interactive-background-selected-pressed\n );\n }\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\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 Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'none' | 'radio' | 'select'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: false },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is not visible.\n */\n @Prop() public readonly showDivider: 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 URL of the avatar image to display.\n */\n @Prop() public readonly avatarSrc?: string\n\n /**\n * The URL of the picture to display.\n *\n * This is used to display a picture in the list item.\n * It is not used for the avatar image.\n */\n @Prop() public readonly imageSrc?: string\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction: ListAction = 'select'\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Displays a counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string\n\n /**\n * The counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @Element() private readonly host!: HTMLElement\n\n @State() private textTooltip = false\n\n @State() private subtitleTooltip = false\n\n @State() private hasSubmenuSlot = false\n\n #roText?: ResizeObserver\n\n #roSubTitle?: ResizeObserver\n\n #text?: HTMLDivElement\n\n #subtitle?: HTMLDivElement\n\n #iconButton!: HTMLQdsIconButtonElement\n\n #checkbox?: HTMLQdsCheckboxElement\n\n #radio?: HTMLQdsRadioElement\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction {\n switch (this.listAction) {\n case 'radio':\n case 'multiselect':\n case 'select':\n case 'none': {\n return this.listAction\n }\n default: {\n return 'select'\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #hasSubmenu(): boolean {\n return this.hasSubmenuSlot\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled || this.hasSubmenuSlot) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#computedListAction === 'multiselect') {\n invariant(this.#checkbox)\n this.#onCheck(event)\n }\n\n if (this.#computedListAction === 'radio') {\n invariant(this.#radio)\n this.#onSelect(event)\n }\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\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 @Listen('dragstart')\n protected onDragstart(): void {\n if (!this.host.draggable) return\n this.host.setAttribute('aria-grabbed', 'true')\n }\n\n @Listen('dragend')\n protected onDragend(): void {\n if (!this.host.draggable) return\n this.host.removeAttribute('aria-grabbed')\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('listAction')\n protected listActionChanged(newValue: ListAction | undefined): void {\n this.internals.ariaChecked =\n (newValue === 'radio' || newValue === 'multiselect') &&\n this.#computedSelected\n ? 'true'\n : 'false'\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#roText) this.#roText.disconnect()\n\n if (!this.#text || !this.text) return\n\n invariant(this.#text)\n\n const div = this.#text\n readTask(() => {\n this.textTooltip = isEllipsisActive(div)\n })\n this.#roText = new ResizeObserver(([divEntry]) => {\n this.textTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roText.observe(this.#text)\n }\n\n @Watch('subtitle')\n protected subtitleChanged(): void {\n if (this.#roSubTitle) this.#roSubTitle.disconnect()\n\n if (!this.#subtitle || this.subtitle === undefined || this.subtitle === '')\n return\n\n invariant(this.#subtitle)\n const div = this.#subtitle\n readTask(() => {\n this.subtitleTooltip = isEllipsisActive(div)\n })\n this.#roSubTitle = new ResizeObserver(([divEntry]) => {\n this.subtitleTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roSubTitle.observe(this.#subtitle)\n }\n\n public componentWillLoad(): void {\n this.hasSubmenuSlot = this.host.hasChildNodes()\n\n const subtitle =\n this.subtitle === undefined || this.subtitle === ''\n ? ''\n : ` ${this.subtitle}`\n const kicker =\n this.kicker === undefined || this.kicker === '' ? '' : ` ${this.kicker}`\n this.internals.ariaLabel = `${this.text} ${subtitle} ${kicker}`.trim()\n switch (this.listAction) {\n case 'select': {\n this.internals.role = 'generic'\n break\n }\n default: {\n this.internals.role = 'listitem'\n break\n }\n }\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n this.subtitleChanged()\n }\n\n public render() {\n return (\n <Host>\n <div\n class={{\n 'qds-list-item': true,\n 'qds-has-submenu': this.#hasSubmenu,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.#computedSelected,\n 'qds-static': this.#computedListAction === 'none',\n }}\n data-size={this.#computedSize}\n >\n <div\n class={{\n 'qds-indented-content': true,\n 'qds-cursor-pointer':\n !this.disabled && this.#computedListAction !== 'none',\n }}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.selected}\n indeterminate={this.indeterminate}\n size={this.size}\n text={this.text}\n disabled={this.disabled}\n checkboxOnly\n onQdsChange={this.#onCheck}\n ref={this.#checkboxRef}\n />\n )}\n\n {this.#computedListAction === 'radio' && (\n <qds-radio\n checked={this.selected}\n size={this.size}\n onQdsChange={this.#onSelect}\n disabled={this.disabled}\n aria-label={this.text}\n ref={this.#radioRef}\n />\n )}\n\n {this.host.draggable && (\n <qds-icon\n class=\"qds-icon qds-list-action qds-draggable\"\n library=\"core\"\n name=\"draggable\"\n />\n )}\n\n {this.imageSrc !== undefined && this.imageSrc !== '' && (\n <img class=\"qds-picture\" src={this.imageSrc} alt=\"\" />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.avatarSrc !== undefined && this.avatarSrc !== '' && (\n <qds-avatar-media class=\"qds-picture\" src={this.avatarSrc} />\n )}\n\n <div\n class=\"qds-texts\"\n role={\n this.#computedListAction === 'select' ? 'option' : undefined\n }\n tabIndex={\n this.#computedListAction === 'select' && !this.disabled\n ? 0\n : undefined\n }\n onFocus={this.#onFocus}\n onBlur={this.#onBlur}\n >\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\" ref={this.#divTitleRef}>\n {this.text}\n </div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\" ref={this.#divSubtitleRef}>\n {this.subtitle}\n </div>\n )}\n </div>\n\n {this.badge !== undefined && this.badge !== '' && (\n <qds-badge-counter\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n description={this.badgeDescription}\n />\n )}\n\n {this.#hasSubmenu && (\n <qds-icon-button\n iconName=\"dots-3-vertical\"\n importance=\"subdued\"\n aria-label=\"more actions\"\n disabled={this.disabled}\n ref={this.#iconButtonRef}\n />\n )}\n\n {this.#computedDestination !== undefined && (\n <qds-icon\n class=\"qds-icon qds-destination\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n {this.#hasSubmenu && (\n <qds-dropdown\n class=\"qds-accessory qds-related\"\n placement=\"right-start\"\n target={this.#iconButtonRef}\n role=\"group\"\n >\n <slot onSlotchange={this.#onSlotChange} />\n </qds-dropdown>\n )}\n {this.showDivider && <qds-divider />}\n {(this.textTooltip || this.subtitleTooltip) && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#textTooltipRef}>\n <div class=\"qds-tooltip-kicker\">{this.kicker}</div>\n <div class=\"qds-tooltip-title\">{this.text}</div>\n <div class=\"qds-tooltip-subtitle\">{this.subtitle}</div>\n </qds-tooltip>\n )}\n </div>\n </Host>\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onCheck = (event: Event): void => {\n event.stopImmediatePropagation()\n this.selected = this.#computedIndeterminate ? true : !this.#computedSelected\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n readonly #onSelect = (event: Event): void => {\n event.stopImmediatePropagation()\n if (!this.#computedSelected) {\n this.selected = !this.#computedSelected\n this.changeEmitter.emit()\n }\n }\n\n readonly #divTitleRef = (div?: HTMLDivElement): void => {\n this.#text = div\n }\n\n readonly #divSubtitleRef = (div?: HTMLDivElement): void => {\n this.#subtitle = div\n }\n\n readonly #textTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.host\n }\n\n readonly #iconButtonRef = (\n iconButton?: HTMLQdsIconButtonElement,\n ): HTMLQdsIconButtonElement => {\n if (iconButton) {\n this.#iconButton = iconButton\n }\n\n return this.#iconButton\n }\n\n readonly #onSlotChange = (event: Event): void => {\n invariant(event.target instanceof HTMLSlotElement)\n const slot = event.target\n this.hasSubmenuSlot = slot.assignedNodes().length > 0\n }\n\n readonly #checkboxRef = (checkbox?: HTMLQdsCheckboxElement): void => {\n this.#checkbox = checkbox\n }\n\n readonly #radioRef = (radio?: HTMLQdsRadioElement): void => {\n this.#radio = radio\n }\n}\n"],"names":[],"mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,m2KAAm2K;;ACAv3K;AACA;AACA;;;;;;;;;;;;;;;;;;MAsCa,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;;;AAWE;;;AAGG;AACqB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjD;;;;AAIG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AASpD;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AAoBvD;;AAEG;AACqB,QAAA,IAAU,CAAA,UAAA,GAAe,QAAQ;AAEzD;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAU,UAAU;AA6D/B,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAEnB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAEvB,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;QAEvC,gBAAwB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAExB,oBAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAE5B,cAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAEtB,kBAA0B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAE1B,oBAAsC,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAEtC,kBAAkC,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAElC,eAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QA8TnB,gBAAU,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACxD,SAAC,CAAA;QAEQ,iBAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAA;QAEQ,iBAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAY,KAAU;YACzC,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,sBAAA,CAAA,IAAI,gEAAuB,GAAG,IAAI,GAAG,CAAC,sBAAA,CAAA,IAAI,2DAAkB;AAC5E,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC5B,SAAC,CAAA;QAEQ,kBAAY,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAY,KAAU;YAC1C,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,8BAAA,CAAkB,EAAE;AAC3B,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,sBAAA,CAAA,IAAI,2DAAkB;AACvC,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;AAE7B,SAAC,CAAA;QAEQ,qBAAe,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,GAAoB,KAAU;YACrD,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAS,GAAG,EAAA,GAAA,CAAA;AAClB,SAAC,CAAA;QAEQ,wBAAkB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,GAAoB,KAAU;YACxD,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAa,GAAG,EAAA,GAAA,CAAA;AACtB,SAAC,CAAA;QAEQ,wBAAkB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,OAA+B,KAAU;AACnE,YAAA,IAAI,OAAO;;AAET,gBAAA,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI;AAC9B,SAAC,CAAA;QAEQ,uBAAiB,CAAA,GAAA,CAAA,IAAA,EAAA,CACxB,UAAqC,KACT;YAC5B,IAAI,UAAU,EAAE;gBACd,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAe,UAAU,EAAA,GAAA,CAAA;;YAG/B,OAAO,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAY;AACzB,SAAC,CAAA;QAEQ,sBAAgB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAY,KAAU;AAC9C,YAAA,SAAS,CAAC,KAAK,CAAC,MAAM,YAAY,eAAe,CAAC;AAClD,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM;YACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AACvD,SAAC,CAAA;QAEQ,qBAAe,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,QAAiC,KAAU;YAClE,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAa,QAAQ,EAAA,GAAA,CAAA;AAC3B,SAAC,CAAA;QAEQ,kBAAY,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAA2B,KAAU;YACzD,sBAAA,CAAA,IAAI,EAAA,eAAA,EAAU,KAAK,EAAA,GAAA,CAAA;AACrB,SAAC,CAAA;AACF;AArUW,IAAA,OAAO,CAAC,KAAiB,EAAA;QACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE;YACxC,KAAK,CAAC,wBAAwB,EAAE;YAChC;;AAGF,QAAA,IAAI,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAoB,KAAK,aAAa,EAAE;YAC9C,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,CAAC;AACzB,YAAA,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAb,IAAI,EAAU,KAAK,CAAC;;AAGtB,QAAA,IAAI,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAoB,KAAK,OAAO,EAAE;YACxC,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,eAAA,EAAA,GAAA,CAAO,CAAC;AACtB,YAAA,sBAAA,CAAA,IAAI,EAAU,kBAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAd,IAAI,EAAW,KAAK,CAAC;;;;;;QAMvB,KAAK,CAAC,cAAc,EAAE;;AAId,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;AAIpC,IAAA,OAAO,CAAC,KAAoB,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;IAIhC,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC;;IAItC,SAAS,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC;;IAIjC,eAAe,GAAA;QACvB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;;AAI9C,IAAA,iBAAiB,CAAC,QAAgC,EAAA;QAC1D,IAAI,CAAC,SAAS,CAAC,WAAW;AACxB,YAAA,CAAC,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,aAAa;gBACnD,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA;AACpB,kBAAE;kBACA,OAAO;;IAIL,WAAW,GAAA;AACnB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAQ,gBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,gBAAA,EAAA,GAAA,CAAQ,CAAC,UAAU,EAAE;AAE3C,QAAA,IAAI,CAAC,uBAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAM,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;QAE/B,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAM,CAAC;QAErB,MAAM,GAAG,GAAG,sBAAA,CAAA,IAAI,sBAAM;QACtB,QAAQ,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,GAAG,CAAC;AAC1C,SAAC,CAAC;AACF,QAAA,sBAAA,CAAA,IAAI,EAAW,gBAAA,EAAA,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAI;YAC/C,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAwB,CAAC;AACxE,SAAC,CAAC,MAAA;AACF,QAAA,sBAAA,CAAA,IAAI,wBAAQ,CAAC,OAAO,CAAC,sBAAA,CAAA,IAAI,EAAM,cAAA,EAAA,GAAA,CAAA,CAAC;;IAIxB,eAAe,GAAA;AACvB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAY,oBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAY,CAAC,UAAU,EAAE;QAEnD,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;YACxE;QAEF,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,CAAC;QACzB,MAAM,GAAG,GAAG,sBAAA,CAAA,IAAI,0BAAU;QAC1B,QAAQ,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC;AAC9C,SAAC,CAAC;AACF,QAAA,sBAAA,CAAA,IAAI,EAAe,oBAAA,EAAA,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAI;YACnD,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAwB,CAAC;AAC5E,SAAC,CAAC,MAAA;AACF,QAAA,sBAAA,CAAA,IAAI,4BAAY,CAAC,OAAO,CAAC,sBAAA,CAAA,IAAI,EAAU,kBAAA,EAAA,GAAA,CAAA,CAAC;;IAGnC,iBAAiB,GAAA;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAE/C,QAAA,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK;AAC/C,cAAE;AACF,cAAE,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,EAAE;QACzB,MAAM,MAAM,GACV,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,GAAG,EAAE,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,CAAA,CAAE;AAC1E,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,QAAQ,CAAI,CAAA,EAAA,MAAM,EAAE,CAAC,IAAI,EAAE;AACtE,QAAA,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,QAAQ,EAAE;AACb,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS;gBAC/B;;YAEF,SAAS;AACP,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU;gBAChC;;;QAGJ,IAAI,CAAC,eAAe,EAAE;;IAGjB,gBAAgB,GAAA;QACrB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,eAAe,EAAE;;IAGjB,MAAM,GAAA;QACX,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,sBAAA,CAAA,IAAI,EAAY,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA;gBACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;gBAC7B,cAAc,EAAE,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA,CAAA;AACtC,gBAAA,YAAY,EAAE,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAoB,KAAK,MAAM;aAClD,EACU,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,mBAAA,EAAA,GAAA,EAAA,0BAAA,CAAA,EAAA,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,IAAI;AAC5B,gBAAA,oBAAoB,EAClB,CAAC,IAAI,CAAC,QAAQ,IAAI,sBAAA,CAAA,IAAI,EAAoB,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,KAAK,MAAM;AACxD,aAAA,EAAA,EAEA,sBAAA,CAAA,IAAI,6DAAoB,KAAK,aAAa,KACzC,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAA,IAAA,EACZ,WAAW,EAAE,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,EAC1B,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAa,qBAAA,EAAA,GAAA,CAAA,EAAA,CACtB,CACH,EAEA,sBAAA,CAAA,IAAI,EAAoB,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,KAAK,OAAO,KACnC,kEACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,sBAAA,CAAA,IAAI,EAAU,kBAAA,EAAA,GAAA,CAAA,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,IAAI,EACrB,GAAG,EAAE,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,GACnB,CACH,EAEA,IAAI,CAAC,IAAI,CAAC,SAAS,KAClB,iEACE,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,WAAW,GAChB,CACH,EAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACvD,EAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE,KACpD,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAA,CAAI,CAC9D,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,IAAI,EACF,sBAAA,CAAA,IAAI,EAAoB,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAE9D,QAAQ,EACN,sBAAA,CAAA,IAAI,EAAoB,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC;AAC7C,kBAAE;kBACA,SAAS,EAEf,OAAO,EAAE,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,EACtB,MAAM,EAAE,sBAAA,CAAA,IAAI,EAAQ,gBAAA,EAAA,GAAA,CAAA,EAAA,EAEnB,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,KAC9C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAO,CAC5C,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAa,qBAAA,EAAA,GAAA,CAAA,EAAA,EAC1C,IAAI,CAAC,IAAI,CACN,EACL,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAA,wBAAA,EAAA,GAAA,CAAgB,EAChD,EAAA,IAAI,CAAC,QAAQ,CACV,CACP,CACG,EAEL,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,KAC5C,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,0BAAA,CAAc,EACxB,UAAU,EACV,IAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GAClC,CACH,EAEA,sBAAA,CAAA,IAAI,EAAY,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,KACf,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAC,iBAAiB,EAC1B,UAAU,EAAC,SAAS,EAAA,YAAA,EACT,cAAc,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAe,uBAAA,EAAA,GAAA,CAAA,EAAA,CACxB,CACH,EAEA,sBAAA,CAAA,IAAI,8DAAqB,KAAK,SAAS,KACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,iCAAA,CAAqB,EAC/B,CAAA,CACH,CACG,EACL,sBAAA,CAAA,IAAI,qDAAY,KACf,qEACE,KAAK,EAAC,2BAA2B,EACjC,SAAS,EAAC,aAAa,EACvB,MAAM,EAAE,sBAAA,CAAA,IAAI,EAAe,uBAAA,EAAA,GAAA,CAAA,EAC3B,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,CAAA,EAAA,CAAI,CAC7B,CAChB,EACA,IAAI,CAAC,WAAW,IAAI,CAAe,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACnC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,MACxC,mFAAyB,MAAM,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAgB,wBAAA,EAAA,GAAA,CAAA,EAAA,EACvD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,MAAM,CAAO,EACnD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAO,EAChD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAO,CAC3C,CACf,CACG,CACD;;;;;;;;;;;AAvTT,IAAA,QAAQ,IAAI,CAAC,WAAW;QACtB,KAAK,YAAY,EAAE;YACjB,OAAO,IAAI,CAAC,WAAW;;QAEzB,SAAS;AACP,YAAA,OAAO,SAAS;;;AAGtB,CAAC,EAAA,mCAAA,GAAA,SAAA,mCAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,aAAa,IAAI,KAAK;AACpC,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,UAAU;AACrB,QAAA,KAAK,OAAO;AACZ,QAAA,KAAK,aAAa;AAClB,QAAA,KAAK,QAAQ;QACb,KAAK,MAAM,EAAE;YACX,OAAO,IAAI,CAAC,UAAU;;QAExB,SAAS;AACP,YAAA,OAAO,QAAQ;;;AAGrB,CAAC,EAAA,8BAAA,GAAA,SAAA,8BAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK;AAC/B,CAAC,EAAA,0BAAA,GAAA,SAAA,0BAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,UAAU;AACf,QAAA,KAAK,OAAO;QACZ,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,wBAAA,GAAA,SAAA,wBAAA,GAAA;IAGC,OAAO,IAAI,CAAC,cAAc;AAC5B,CAAC;;;;;"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
7
|
|
|
8
|
-
const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-feedback-loader-small-size);width:var(--qds-feedback-loader-small-size)}[data-size=small][data-status=loading]{padding:var(--qds-signature-circle-progress-small-border-width)}[data-size=standard]{height:var(--qds-feedback-loader-standard-size);width:var(--qds-feedback-loader-standard-size)}[data-size=standard][data-status=loading]{padding:var(--qds-signature-circle-progress-standard-border-width)}[data-size=large]{height:var(--qds-feedback-loader-large-size);width:var(--qds-feedback-loader-large-size)}[data-size=large][data-status=loading]{padding:var(--qds-signature-circle-progress-large-border-width)}[data-size=jumbo]{height:var(--qds-feedback-loader-jumbo-size);width:var(--qds-feedback-loader-jumbo-size)}[data-size=jumbo][data-status=loading]{padding:var(--qds-signature-circle-progress-jumbo-border-width)}[data-size=hero]{height:var(--qds-feedback-loader-hero-size);width:var(--qds-feedback-loader-hero-size)}[data-size=hero][data-status=loading]{padding:var(--qds-signature-circle-progress-hero-border-width)}[data-status=loading]{animation:
|
|
8
|
+
const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-feedback-loader-small-size);width:var(--qds-feedback-loader-small-size)}[data-size=small][data-status=loading]{padding:var(--qds-signature-circle-progress-small-border-width)}[data-size=standard]{height:var(--qds-feedback-loader-standard-size);width:var(--qds-feedback-loader-standard-size)}[data-size=standard][data-status=loading]{padding:var(--qds-signature-circle-progress-standard-border-width)}[data-size=large]{height:var(--qds-feedback-loader-large-size);width:var(--qds-feedback-loader-large-size)}[data-size=large][data-status=loading]{padding:var(--qds-signature-circle-progress-large-border-width)}[data-size=jumbo]{height:var(--qds-feedback-loader-jumbo-size);width:var(--qds-feedback-loader-jumbo-size)}[data-size=jumbo][data-status=loading]{padding:var(--qds-signature-circle-progress-jumbo-border-width)}[data-size=hero]{height:var(--qds-feedback-loader-hero-size);width:var(--qds-feedback-loader-hero-size)}[data-size=hero][data-status=loading]{padding:var(--qds-signature-circle-progress-hero-border-width)}[data-status=loading]{animation:b 1s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}[data-status=loading][data-importance=standard]{background-image:var(--qds-theme-feedback-loader-standard-indeterminate)}[data-status=loading][data-importance=destructive]{background-image:var(\n --qds-theme-feedback-loader-destructive-indeterminate\n )}[data-status=loading][data-importance=informative]{background-image:var(\n --qds-theme-feedback-loader-informational-indeterminate\n )}[data-status=loading][data-importance=neutral-contrast]{background-image:var(\n --qds-theme-feedback-loader-neutral-contrast-indeterminate\n );border:var(--qds-theme-feedback-loader-neutral-contrast-indeterminate)}[data-status=loading][data-importance=neutral]{background-image:var(--qds-theme-feedback-loader-neutral-indeterminate);border:var(--qds-theme-feedback-loader-neutral-indeterminate)}@keyframes b{to{transform:rotate(1turn)}}[data-status=success]{color:var(--qds-theme-feedback-result-success)}[data-status=warning]{color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{color:var(--qds-theme-feedback-result-failure)}";
|
|
9
9
|
|
|
10
10
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
11
11
|
//
|
|
@@ -71,7 +71,7 @@ const Loader = class {
|
|
|
71
71
|
this.statusChanged();
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
|
-
return __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) ? (h("qds-icon", {
|
|
74
|
+
return __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) ? (h("qds-icon", { class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get), library: "core", name: `status-${this.status}-solid` })) : (h("div", { class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": "loading", "data-importance": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedImportance_get) }));
|
|
75
75
|
}
|
|
76
76
|
static get formAssociated() { return true; }
|
|
77
77
|
get host() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-loader.entry.js","sources":["src/components/loader/loader.css?tag=qds-loader&encapsulation=shadow","src/components/loader/loader.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-loader {\n border-radius: var(--qds-control-rounded-border-radius);\n box-sizing: border-box;\n color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-loader-small-size);\n width: var(--qds-feedback-loader-small-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-small-border-width);\n }\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-loader-standard-size);\n width: var(--qds-feedback-loader-standard-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-standard-border-width);\n }\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-loader-large-size);\n width: var(--qds-feedback-loader-large-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-large-border-width);\n }\n}\n\n[data-size='jumbo'] {\n height: var(--qds-feedback-loader-jumbo-size);\n width: var(--qds-feedback-loader-jumbo-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-jumbo-border-width);\n }\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-loader-hero-size);\n width: var(--qds-feedback-loader-hero-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-hero-border-width);\n }\n}\n\n[data-status='loading'] {\n animation: loading 1s linear infinite;\n /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */\n mask-composite: exclude;\n\n &[data-importance='standard'] {\n background-image: var(--qds-theme-feedback-loader-standard-indeterminate);\n }\n\n &[data-importance='destructive'] {\n background-image: var(\n --qds-theme-feedback-loader-destructive-indeterminate\n );\n }\n\n &[data-importance='informative'] {\n background-image: var(\n --qds-theme-feedback-loader-informational-indeterminate\n );\n }\n\n &[data-importance='neutral-contrast'] {\n background-image: var(\n --qds-theme-feedback-loader-neutral-contrast-indeterminate\n );\n border: var(--qds-theme-feedback-loader-neutral-contrast-indeterminate);\n }\n\n &[data-importance='neutral'] {\n background-image: var(--qds-theme-feedback-loader-neutral-indeterminate);\n border: var(--qds-theme-feedback-loader-neutral-indeterminate);\n }\n}\n\n@keyframes loading {\n to {\n transform: rotate(1turn);\n }\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-result-failure);\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 Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\nexport type LoaderSize = Size | 'hero' | 'jumbo'\nexport type LoaderStatus = 'error' | 'success' | 'warning'\nexport type LoaderImportance =\n | 'destructive'\n | 'informative'\n | 'neutral-contrast'\n | 'neutral'\n | 'standard'\n/**\n * The `<qds-loader>` element displays an indicator showing that content is\n * being loaded or processed.\n *\n * @see https://quartz.se.com/build/components/loader\n */\n@Component({\n tag: 'qds-loader',\n formAssociated: true,\n shadow: true,\n styleUrl: 'loader.css',\n})\nexport class Loader implements ComponentInterface {\n /**\n * The loader's size.\n */\n @Prop() public readonly size?: LoaderSize = 'standard'\n\n /**\n * The loader's status.\n */\n @Prop() public readonly status?: LoaderStatus\n\n /**\n * The loader's importance.\n */\n @Prop() public readonly importance?: LoaderImportance = 'standard'\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #computedSize(): LoaderSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero':\n case 'jumbo': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): LoaderStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedImportance(): LoaderImportance {\n switch (this.importance) {\n case 'destructive':\n case 'informative':\n case 'neutral':\n case 'neutral-contrast':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('status')\n protected statusChanged(): void {\n const status = this.#computedStatus\n\n this.internals.ariaValueNow =\n status === undefined\n ? // eslint-disable-next-line unicorn/no-null\n null\n : this.internals.ariaValueMax\n\n switch (status) {\n case 'error': {\n this.internals.ariaLabel = 'Error'\n break\n }\n case 'success': {\n this.internals.ariaLabel = 'Loaded'\n break\n }\n case 'warning': {\n this.internals.ariaLabel = 'Warning'\n break\n }\n default: {\n this.internals.ariaLabel = 'Loading'\n }\n }\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'progressbar'\n this.internals.ariaValueMin = this.host.ariaValueMin ?? '0'\n this.internals.ariaValueMax = this.host.ariaValueMax ?? '1'\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.statusChanged()\n }\n\n public render() {\n return this.#computedStatus ? (\n <qds-icon\n
|
|
1
|
+
{"version":3,"file":"qds-loader.entry.js","sources":["src/components/loader/loader.css?tag=qds-loader&encapsulation=shadow","src/components/loader/loader.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-loader {\n border-radius: var(--qds-control-rounded-border-radius);\n box-sizing: border-box;\n color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-loader-small-size);\n width: var(--qds-feedback-loader-small-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-small-border-width);\n }\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-loader-standard-size);\n width: var(--qds-feedback-loader-standard-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-standard-border-width);\n }\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-loader-large-size);\n width: var(--qds-feedback-loader-large-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-large-border-width);\n }\n}\n\n[data-size='jumbo'] {\n height: var(--qds-feedback-loader-jumbo-size);\n width: var(--qds-feedback-loader-jumbo-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-jumbo-border-width);\n }\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-loader-hero-size);\n width: var(--qds-feedback-loader-hero-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-hero-border-width);\n }\n}\n\n[data-status='loading'] {\n animation: loading 1s linear infinite;\n /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */\n mask-composite: exclude;\n\n &[data-importance='standard'] {\n background-image: var(--qds-theme-feedback-loader-standard-indeterminate);\n }\n\n &[data-importance='destructive'] {\n background-image: var(\n --qds-theme-feedback-loader-destructive-indeterminate\n );\n }\n\n &[data-importance='informative'] {\n background-image: var(\n --qds-theme-feedback-loader-informational-indeterminate\n );\n }\n\n &[data-importance='neutral-contrast'] {\n background-image: var(\n --qds-theme-feedback-loader-neutral-contrast-indeterminate\n );\n border: var(--qds-theme-feedback-loader-neutral-contrast-indeterminate);\n }\n\n &[data-importance='neutral'] {\n background-image: var(--qds-theme-feedback-loader-neutral-indeterminate);\n border: var(--qds-theme-feedback-loader-neutral-indeterminate);\n }\n}\n\n@keyframes loading {\n to {\n transform: rotate(1turn);\n }\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-result-failure);\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 Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\nexport type LoaderSize = Size | 'hero' | 'jumbo'\nexport type LoaderStatus = 'error' | 'success' | 'warning'\nexport type LoaderImportance =\n | 'destructive'\n | 'informative'\n | 'neutral-contrast'\n | 'neutral'\n | 'standard'\n/**\n * The `<qds-loader>` element displays an indicator showing that content is\n * being loaded or processed.\n *\n * @see https://quartz.se.com/build/components/loader\n */\n@Component({\n tag: 'qds-loader',\n formAssociated: true,\n shadow: true,\n styleUrl: 'loader.css',\n})\nexport class Loader implements ComponentInterface {\n /**\n * The loader's size.\n */\n @Prop() public readonly size?: LoaderSize = 'standard'\n\n /**\n * The loader's status.\n */\n @Prop() public readonly status?: LoaderStatus\n\n /**\n * The loader's importance.\n */\n @Prop() public readonly importance?: LoaderImportance = 'standard'\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #computedSize(): LoaderSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero':\n case 'jumbo': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): LoaderStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedImportance(): LoaderImportance {\n switch (this.importance) {\n case 'destructive':\n case 'informative':\n case 'neutral':\n case 'neutral-contrast':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('status')\n protected statusChanged(): void {\n const status = this.#computedStatus\n\n this.internals.ariaValueNow =\n status === undefined\n ? // eslint-disable-next-line unicorn/no-null\n null\n : this.internals.ariaValueMax\n\n switch (status) {\n case 'error': {\n this.internals.ariaLabel = 'Error'\n break\n }\n case 'success': {\n this.internals.ariaLabel = 'Loaded'\n break\n }\n case 'warning': {\n this.internals.ariaLabel = 'Warning'\n break\n }\n default: {\n this.internals.ariaLabel = 'Loading'\n }\n }\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'progressbar'\n this.internals.ariaValueMin = this.host.ariaValueMin ?? '0'\n this.internals.ariaValueMax = this.host.ariaValueMax ?? '1'\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.statusChanged()\n }\n\n public render() {\n return this.#computedStatus ? (\n <qds-icon\n class=\"qds-loader\"\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n library=\"core\"\n name={`status-${this.status}-solid`}\n />\n ) : (\n <div\n class=\"qds-loader\"\n data-size={this.#computedSize}\n data-status=\"loading\"\n data-importance={this.#computedImportance}\n />\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, a as readTask, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, i as invariant, a as isEllipsisActive } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, a as isEllipsisActive } from './helpers-Fe2AA6uo.js';
|
|
8
8
|
|
|
9
9
|
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)}";
|
|
10
10
|
|
|
@@ -116,11 +116,11 @@ const MenuItem = class {
|
|
|
116
116
|
this.disabledChanged();
|
|
117
117
|
}
|
|
118
118
|
render() {
|
|
119
|
-
return (h("div", { key: '
|
|
119
|
+
return (h("div", { key: '7d0ba7c11661174f646a8b69012645224bda21fe', class: {
|
|
120
120
|
'qds-menu-item': true,
|
|
121
121
|
'qds-disabled': __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedDisabled_get),
|
|
122
122
|
'qds-has-submenu': __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get),
|
|
123
|
-
}, ref: __classPrivateFieldGet(this, _MenuItem_menuitemDivRef, "f"), "data-size": __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedSize_get), "aria-hidden": "true" }, h("div", { key: '
|
|
123
|
+
}, ref: __classPrivateFieldGet(this, _MenuItem_menuitemDivRef, "f"), "data-size": __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedSize_get), "aria-hidden": "true" }, h("div", { key: 'ddc9c1614161a68acce64d7b055a4f98ad46c8ea', class: "qds-menu-item-container" }, __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedCheckable_get) && !__classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get) && (h("span", { key: '2976f946bbafda1f8878fe63dab984acb3a7022a', class: "menu-item-checkable" })), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_computedChecked_get) && (h("qds-icon", { key: 'badd5434f8857f8819aeefdff6d81d8206ff4c26', class: "qds-icon", library: "core", name: "checked" })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '6ba121d5c02d93f061fe6e4563a840c3e3ed248b', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("span", { key: 'e6d352056093d513259bf307d57a2bf6594ef51c', class: "qds-text", ref: __classPrivateFieldGet(this, _MenuItem_spanRef, "f") }, this.text), this.shortcut !== undefined && this.shortcut !== '' && (h("span", { key: '57e519dcacdd6df02e57cabedf6be273ca2fe6d6', class: "qds-shortcut" }, this.shortcut)), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get) && (h("qds-icon", { key: 'd42b375a3db82416e4897046f8158475e5ae8cae', class: "qds-icon", library: "core", name: "navigation" }))), __classPrivateFieldGet(this, _MenuItem_instances, "a", _MenuItem_hasSubmenu_get) && (h("qds-dropdown", { key: '051eac52674daeba3a8818f56e8bcc313c281a0b', class: "qds-accessory qds-related", placement: "right-start", target: __classPrivateFieldGet(this, _MenuItem_menuitemDivRef, "f") }, h("slot", { key: 'c8f84041f9369ab6d2bd8e2978db851e2fc89c2e' }))), this.tooltip && (h("qds-tooltip", { key: 'dde1e377a56eaa598351c119d190fa77c001deb6', ref: __classPrivateFieldGet(this, _MenuItem_tooltipRef, "f") }, this.text))));
|
|
124
124
|
}
|
|
125
125
|
get host() { return getElement(this); }
|
|
126
126
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes } from './helpers-Fe2AA6uo.js';
|
|
8
8
|
|
|
9
9
|
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}";
|
|
10
10
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
7
|
|
|
8
|
-
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:
|
|
8
|
+
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:a 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes a{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)}";
|
|
9
9
|
|
|
10
10
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
11
11
|
//
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { i as invariant, p as pickFocusEventAttributes, e as pickInputEventAttributes, c as inheritAriaAttributes } from './helpers-
|
|
7
|
+
import { i as invariant, p as pickFocusEventAttributes, e as pickInputEventAttributes, c as inheritAriaAttributes } from './helpers-Fe2AA6uo.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
|
-
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"
|
|
10
|
+
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"f\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-form-input-text-placeholder);grid-area:f}.qds-icon{place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-form-input-background-default);border-color:var(--qds-theme-form-input-border-default);border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-form-input-border-radius)\n );border-style:solid;border-width:var(--qds-form-input-border-width-default) var(\n --qds-form-input-border-width-inline-end,var(--qds-form-input-border-width-default)\n ) var(\n --qds-form-input-border-width-block-end,var(--qds-form-input-border-width-default)\n ) var(--qds-form-input-border-width-default);margin:0;outline:0;padding-block:0;text-overflow:ellipsis}.qds-select:enabled:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-select:enabled:active{background-color:var(--qds-theme-form-input-background-active);color:var(--qds-theme-form-input-text-active)}.qds-select:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-select[data-status]{border-width:var(--qds-form-input-border-width-status) var(\n --qds-form-input-border-width-inline-end,var(--qds-form-input-border-width-status)\n ) var(\n --qds-form-input-border-width-block-end,var(--qds-form-input-border-width-status)\n ) var(--qds-form-input-border-width-status)}.qds-select[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-select[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-select :not(:focus):user-invalid,.qds-select[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-form-small-text);padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}.qds-select[data-size=small]:not([multiple]){min-height:var(--qds-form-input-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-form-input-small-gap-internal) + var(--qds-form-input-small-padding-end))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);margin-inline-end:calc(var(--qds-form-input-small-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-form-standard-text);padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}.qds-select[data-size=standard]:not([multiple]){min-height:var(--qds-form-input-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-form-input-standard-gap-internal) + var(--qds-form-input-standard-padding-end))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);margin-inline-end:calc(var(--qds-form-input-standard-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-form-large-text);padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}.qds-select[data-size=large]:not([multiple]){min-height:var(--qds-form-input-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-form-input-large-gap-internal) + var(--qds-form-input-large-padding-end))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);margin-inline-end:calc(var(--qds-form-input-large-padding-end) + var(--qds-form-input-border-width-default));width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-form-input-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:f;height:calc(100% + var(--qds-form-input-border-width-default) - var(\n --qds-form-input-border-width-block-end,\n var(--qds-form-input-border-width-default)\n ));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-form-input-border-width-default) - var(\n --qds-form-input-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -28,7 +28,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
|
|
|
28
28
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
29
29
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
30
30
|
};
|
|
31
|
-
var _Select_instances, _Select_inheritedAttributes, _Select_select, _Select_computedDisabled_get, _Select_computedOptions_get, _Select_computedSize_get, _Select_computedType_get, _Select_computedValue_get, _Select_computedSelectedOptions_get, _Select_ref, _Select_onBlur, _Select_onChange, _Select_onFocus, _Select_onInput, _Select_onSlotchange, _Select_defineGetter;
|
|
31
|
+
var _Select_instances, _Select_inheritedAttributes, _Select_select, _Select_computedDisabled_get, _Select_computedOptions_get, _Select_computedStatus_get, _Select_computedSize_get, _Select_computedType_get, _Select_computedValue_get, _Select_computedSelectedOptions_get, _Select_ref, _Select_onBlur, _Select_onChange, _Select_onFocus, _Select_onInput, _Select_onSlotchange, _Select_defineGetter;
|
|
32
32
|
const throwError = () => {
|
|
33
33
|
invariant(false);
|
|
34
34
|
};
|
|
@@ -247,6 +247,9 @@ const Select = class {
|
|
|
247
247
|
else
|
|
248
248
|
this.internals.setValidity(__classPrivateFieldGet(this, _Select_select, "f").validity, __classPrivateFieldGet(this, _Select_select, "f").validationMessage, __classPrivateFieldGet(this, _Select_select, "f"));
|
|
249
249
|
}
|
|
250
|
+
statusChanged() {
|
|
251
|
+
this.internals.ariaInvalid = (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedStatus_get) === 'error').toString();
|
|
252
|
+
}
|
|
250
253
|
componentWillLoad() {
|
|
251
254
|
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'form', () => this.internals.form);
|
|
252
255
|
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
|
|
@@ -258,6 +261,7 @@ const Select = class {
|
|
|
258
261
|
__classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'selectedOptions', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSelectedOptions_get));
|
|
259
262
|
__classPrivateFieldSet(this, _Select_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
260
263
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
264
|
+
this.statusChanged();
|
|
261
265
|
}
|
|
262
266
|
componentDidLoad() {
|
|
263
267
|
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
@@ -265,12 +269,12 @@ const Select = class {
|
|
|
265
269
|
this.selectedIndex = __classPrivateFieldGet(this, _Select_select, "f").selectedIndex;
|
|
266
270
|
}
|
|
267
271
|
render() {
|
|
268
|
-
return (h("div", { key: '
|
|
272
|
+
return (h("div", { key: '26c702cd3ae186b45a53bd51196f425b101fd1c9', class: {
|
|
269
273
|
'qds-container': true,
|
|
270
274
|
'qds-multiple': this.multiple ?? false,
|
|
271
|
-
}, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: '
|
|
275
|
+
}, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: 'c42974f545c679f3ac6e91178a4891199c374695', autoComplete: this.autoComplete,
|
|
272
276
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
273
|
-
autoFocus: this.host.autofocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: '
|
|
277
|
+
autoFocus: this.host.autofocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), "data-status": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedStatus_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: 'aa8e1e662d3fbe6763c15db02a7461cb5fc8b427', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), library: "core", name: "dropdown" })), h("slot", { key: 'b72253181babf15b30131d300e531a412cb23623', onSlotchange: __classPrivateFieldGet(this, _Select_onSlotchange, "f") }), h("div", { key: 'b7302af05bf0d6169ab86cca521b3a208fc39e9f', class: "qds-focus-ring" })));
|
|
274
278
|
}
|
|
275
279
|
static get delegatesFocus() { return true; }
|
|
276
280
|
static get formAssociated() { return true; }
|
|
@@ -280,7 +284,8 @@ const Select = class {
|
|
|
280
284
|
"selectedIndex": ["selectedIndexChanged"],
|
|
281
285
|
"tabindex": ["tabindexChanged"],
|
|
282
286
|
"required": ["validationChanged"],
|
|
283
|
-
"value": ["validationChanged"]
|
|
287
|
+
"value": ["validationChanged"],
|
|
288
|
+
"status": ["statusChanged"]
|
|
284
289
|
}; }
|
|
285
290
|
};
|
|
286
291
|
_Select_inheritedAttributes = new WeakMap(), _Select_select = new WeakMap(), _Select_ref = new WeakMap(), _Select_onBlur = new WeakMap(), _Select_onChange = new WeakMap(), _Select_onFocus = new WeakMap(), _Select_onInput = new WeakMap(), _Select_onSlotchange = new WeakMap(), _Select_instances = new WeakSet(), _Select_computedDisabled_get = function _Select_computedDisabled_get() {
|
|
@@ -289,6 +294,17 @@ _Select_inheritedAttributes = new WeakMap(), _Select_select = new WeakMap(), _Se
|
|
|
289
294
|
}, _Select_computedOptions_get = function _Select_computedOptions_get() {
|
|
290
295
|
invariant(__classPrivateFieldGet(this, _Select_select, "f"));
|
|
291
296
|
return __classPrivateFieldGet(this, _Select_select, "f").options;
|
|
297
|
+
}, _Select_computedStatus_get = function _Select_computedStatus_get() {
|
|
298
|
+
switch (this.status) {
|
|
299
|
+
case 'error':
|
|
300
|
+
case 'success':
|
|
301
|
+
case 'warning': {
|
|
302
|
+
return this.status;
|
|
303
|
+
}
|
|
304
|
+
default: {
|
|
305
|
+
return undefined;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
292
308
|
}, _Select_computedSize_get = function _Select_computedSize_get() {
|
|
293
309
|
switch (this.size) {
|
|
294
310
|
case 'standard':
|