@quartzds/core 1.0.0-beta.119 → 1.0.0-beta.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +50 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -1
- package/components/index.js.map +1 -1
- package/components/{p--RtuuN-f.js → p-5RFBIepu.js} +4 -4
- package/components/{p--RtuuN-f.js.map → p-5RFBIepu.js.map} +1 -1
- package/components/{p-BcuDZbUA.js → p-B03FWheS.js} +23 -27
- package/components/p-B03FWheS.js.map +1 -0
- package/components/{p-Bv_uu0s1.js → p-BkBJDD6Y.js} +7 -7
- package/components/p-BkBJDD6Y.js.map +1 -0
- package/components/{p-B_6Kulw9.js → p-BkgfW_tl.js} +4 -4
- package/components/{p-B_6Kulw9.js.map → p-BkgfW_tl.js.map} +1 -1
- package/components/{p-DdqipBK9.js → p-Bnc7Puxx.js} +10 -10
- package/components/p-Bnc7Puxx.js.map +1 -0
- package/components/{p-CXI7fTbm.js → p-CFVg7I9T.js} +6 -6
- package/components/p-CFVg7I9T.js.map +1 -0
- package/components/{p-kI1bxLGk.js → p-CRVPDKfO.js} +7 -7
- package/components/p-CRVPDKfO.js.map +1 -0
- package/{dist/esm/helpers-BVuIKvSk.js → components/p-CXP6q9Mr.js} +13 -11
- package/components/p-CXP6q9Mr.js.map +1 -0
- package/components/{p-CndRvQiV.js → p-DeRqCYmp.js} +5 -5
- package/components/{p-CndRvQiV.js.map → p-DeRqCYmp.js.map} +1 -1
- package/components/{p-aWJYkykh.js → p-DnZdwX0l.js} +7 -7
- package/components/{p-aWJYkykh.js.map → p-DnZdwX0l.js.map} +1 -1
- package/components/{p-BWYKuRRD.js → p-Dsc0-aXK.js} +5 -5
- package/components/{p-BWYKuRRD.js.map → p-Dsc0-aXK.js.map} +1 -1
- package/components/{p-C80aM3BN.js → p-DwxIJEUj.js} +3 -3
- package/components/{p-C80aM3BN.js.map → p-DwxIJEUj.js.map} +1 -1
- package/components/{p-FsslOC0B.js → p-U2Q0vF-d.js} +3 -3
- package/components/p-U2Q0vF-d.js.map +1 -0
- package/components/{p-D4vlGPhk.js → p-eFhV8w2l.js} +6 -4
- package/components/p-eFhV8w2l.js.map +1 -0
- package/components/qds-action-item.js +4 -4
- package/components/qds-action-item.js.map +1 -1
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +13 -7
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +39 -10
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +4 -4
- 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 +3 -3
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.d.ts +11 -0
- package/components/qds-icon-tab.js +278 -0
- package/components/qds-icon-tab.js.map +1 -0
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +5 -5
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +27 -8
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +24 -19
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +1 -1
- package/components/qds-menu-item.js +7 -7
- package/components/qds-menu-item.js.map +1 -1
- 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 +6 -6
- 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 +6 -6
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +20 -87
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +10 -10
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +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-wsiRak3m.js → helpers-BIL8yXqA.js} +13 -11
- package/dist/cjs/helpers-BIL8yXqA.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +2 -2
- 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 +7 -7
- 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 +11 -5
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +33 -6
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +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 +2 -2
- package/dist/cjs/qds-dropdown.cjs.entry.js +3 -2
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +214 -0
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +2 -2
- package/dist/cjs/qds-inline-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +22 -6
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +4 -4
- package/dist/cjs/qds-label.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +14 -9
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +5 -5
- 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 +5 -5
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +10 -70
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +5 -5
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag.cjs.entry.js +110 -0
- package/dist/cjs/qds-tag.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/{qds-tag_2.cjs.entry.js → qds-title.cjs.entry.js} +3 -103
- package/dist/cjs/qds-title.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-tooltip.cjs.entry.js +21 -24
- package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +717 -157
- package/dist/docs.json +841 -131
- package/{components/p--gmRsVWR.js → dist/esm/helpers-BgaJNF9u.js} +13 -11
- package/dist/esm/helpers-BgaJNF9u.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +2 -2
- 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 +7 -7
- 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 +11 -5
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +33 -6
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +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 +2 -2
- package/dist/esm/qds-dropdown.entry.js +3 -2
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +212 -0
- package/dist/esm/qds-icon-tab.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +2 -2
- package/dist/esm/qds-inline-link.entry.js +4 -4
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +22 -6
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +4 -4
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +14 -9
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +4 -4
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +2 -2
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +5 -5
- 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 +5 -5
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +10 -70
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +5 -5
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag.entry.js +108 -0
- package/dist/esm/qds-tag.entry.js.map +1 -0
- package/dist/esm/qds-textarea.entry.js +4 -4
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/{qds-tag_2.entry.js → qds-title.entry.js} +5 -104
- package/dist/esm/qds-title.entry.js.map +1 -0
- package/dist/esm/qds-tooltip.entry.js +21 -24
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/button/button.d.ts +7 -0
- package/dist/types/components/dropdown/dropdown.d.ts +4 -4
- package/dist/types/components/icon-tab/icon-tab.d.ts +110 -0
- package/dist/types/components/input/input.d.ts +13 -1
- package/dist/types/components/list-item/list-item.d.ts +2 -2
- package/dist/types/components/tab/tab.d.ts +2 -9
- package/dist/types/components/tooltip/tooltip.d.ts +1 -2
- package/dist/types/components.d.ts +232 -21
- package/dist/types/helpers.d.ts +4 -9
- package/dist/vscode.html-custom-data.json +158 -7
- package/hydrate/index.js +631 -400
- package/hydrate/index.mjs +631 -400
- package/package.json +1 -1
- package/components/p--gmRsVWR.js.map +0 -1
- package/components/p-BcuDZbUA.js.map +0 -1
- package/components/p-Bv_uu0s1.js.map +0 -1
- package/components/p-CXI7fTbm.js.map +0 -1
- package/components/p-D4vlGPhk.js.map +0 -1
- package/components/p-DdqipBK9.js.map +0 -1
- package/components/p-FsslOC0B.js.map +0 -1
- package/components/p-kI1bxLGk.js.map +0 -1
- package/dist/cjs/helpers-wsiRak3m.js.map +0 -1
- package/dist/cjs/qds-tag.qds-title.entry.cjs.js.map +0 -1
- package/dist/esm/helpers-BVuIKvSk.js.map +0 -1
- package/dist/esm/qds-tag.qds-title.entry.js.map +0 -1
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
var index = require('./index-DIY7gpXM.js');
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
|
+
|
|
11
|
+
const iconTabCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-target{-webkit-appearance:none;appearance:none;background-color:initial;border:none;cursor:pointer;padding:0;pointer-events:auto}.qds-target:disabled{pointer-events:none}.qds-target:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-icon-container{align-items:center;display:flex;justify-content:center;position:relative}.qds-icon:hover{background-color:initial}.qds-target-icon{color:var(--qds-theme-control-text-standard)}.qds-icon,.qds-target-icon{flex-shrink:0}.qds-selected:active{background-color:var(--qds-theme-interactive-background-selected-pressed)}.qds-icon-tab,.qds-target{display:flex}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-badge-indicator{inset-block-start:0;inset-inline-end:0;position:absolute}.qds-badge-counter{inset-block-start:-2px;inset-inline-end:-2px;position:absolute}.qds-icon-tab[data-size=small]{gap:var(--qds-nav-element-small-gap-internal);min-height:var(--qds-nav-element-small-height);min-width:var(--qds-nav-element-small-height)}.qds-target-icon[data-size=small]{--qds-experimental-icon-click-target-size:var(--qds-control-small-height);height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-icon-container{height:var(--qds-control-small-height);width:var(--qds-control-small-height)}[data-size=small] .qds-icon-container>.qds-icon{height:var(--qds-nav-element-small-icon-size);width:var(--qds-nav-element-small-icon-size)}.qds-icon-tab[data-size=standard]{gap:var(--qds-nav-element-standard-gap-internal);min-height:var(--qds-nav-element-standard-height);min-width:var(--qds-nav-element-standard-height)}.qds-target-icon[data-size=standard]{--qds-experimental-icon-click-target-size:var(\n --qds-control-standard-height\n );height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-icon-container{height:var(--qds-control-standard-height);width:var(--qds-control-standard-height)}[data-size=standard] .qds-icon-container>.qds-icon{height:var(--qds-nav-element-standard-icon-size);width:var(--qds-nav-element-standard-icon-size)}.qds-icon-tab[data-size=large]{gap:var(--qds-nav-element-large-gap-internal);min-height:var(--qds-nav-element-large-height);min-width:var(--qds-nav-element-large-height)}.qds-target-icon[data-size=large]{--qds-experimental-icon-click-target-size:var(--qds-control-large-height);height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-icon-container{height:var(--qds-control-large-height);width:var(--qds-control-large-height)}[data-size=large] .qds-icon-container>.qds-icon{height:var(--qds-nav-element-large-icon-size);width:var(--qds-nav-element-large-icon-size)}.qds-selected[data-importance=standard]:after,.qds-selected[data-importance=subdued]:after{border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";display:block;position:absolute}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after,.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{height:100%;width:var(--qds-signature-line-connection-width)}.qds-selected.qds-indicator-inline-end[data-importance=standard]:after,.qds-selected.qds-indicator-inline-end[data-importance=subdued]:after{inset-inline-end:0}.qds-selected.qds-indicator-inline-start[data-importance=standard]:after,.qds-selected.qds-indicator-inline-start[data-importance=subdued]:after{inset-inline-start:0}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after,.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{height:var(--qds-signature-line-connection-width);width:100%}.qds-selected.qds-indicator-block-end[data-importance=standard]:after,.qds-selected.qds-indicator-block-end[data-importance=subdued]:after{bottom:0}.qds-selected.qds-indicator-block-start[data-importance=standard]:after,.qds-selected.qds-indicator-block-start[data-importance=subdued]:after{top:0}[data-importance=standard]:hover:after{background-color:var(--qds-theme-signature-color-hover)}[data-importance=standard]:active:after{background-color:var(--qds-theme-signature-color-pressed)}.qds-selected[data-importance=standard]:after{background-color:var(--qds-theme-signature-color-default)}[data-importance=standard] .qds-selected .qds-icon{color:var(--qds-theme-title)}.qds-selected[data-importance=subdued]:after,[data-importance=subdued] :active:after{background-color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:hover:after{background-color:var(--qds-theme-link-subdued-hover)}.qds-selected[data-importance=subdued]:after{background-color:var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n )}.qds-icon-tab{align-items:center;background-color:initial;border:none;cursor:pointer;justify-content:center;position:relative;text-align:initial}.qds-icon-tab:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-icon-tab:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-icon-tab:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-icon-tab:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:calc(var(--qds-focus-border-width)*-1 - var(--qds-focus-border-offset))}.qds-hidden{display:none}";
|
|
12
|
+
|
|
13
|
+
// SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
14
|
+
//
|
|
15
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
16
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
17
|
+
if (kind === "m")
|
|
18
|
+
throw new TypeError("Private method is not writable");
|
|
19
|
+
if (kind === "a" && !f)
|
|
20
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
21
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
22
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
23
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
24
|
+
};
|
|
25
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
26
|
+
if (kind === "a" && !f)
|
|
27
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
28
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
29
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
30
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
31
|
+
};
|
|
32
|
+
var _IconTab_instances, _IconTab_div, _IconTab_panel, _IconTab_iconTab, _IconTab_computedSize_get, _IconTab_computedImportance_get, _IconTab_parentLayer_get, _IconTab_parentLevel_get, _IconTab_computedDisabled_get, _IconTab_placement_get, _IconTab_ref, _IconTab_iconTabRef, _IconTab_tooltipRef, _IconTab_onBlur, _IconTab_onFocus, _IconTab_defineTab, _IconTab_defineGetter;
|
|
33
|
+
const isCounter = (value) => typeof value === 'string'
|
|
34
|
+
? !Number.isNaN(Number.parseFloat(value))
|
|
35
|
+
: typeof value === 'number';
|
|
36
|
+
const isIndicator = (value) => value === '' || value === true;
|
|
37
|
+
let autoIncrementingId = 1;
|
|
38
|
+
const IconTab = class {
|
|
39
|
+
constructor(hostRef) {
|
|
40
|
+
index.registerInstance(this, hostRef);
|
|
41
|
+
this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
|
|
42
|
+
this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
|
|
43
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
44
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
48
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
49
|
+
}
|
|
50
|
+
_IconTab_instances.add(this);
|
|
51
|
+
/**
|
|
52
|
+
* The tab's counter importance.
|
|
53
|
+
*/
|
|
54
|
+
this.badgeCounterImportance = 'standard';
|
|
55
|
+
/**
|
|
56
|
+
* The indicator's status.
|
|
57
|
+
*/
|
|
58
|
+
this.badgeIndicatorStatus = 'neutral';
|
|
59
|
+
/**
|
|
60
|
+
* The name of a registered icon library.
|
|
61
|
+
*/
|
|
62
|
+
this.iconLibrary = 'default';
|
|
63
|
+
/**
|
|
64
|
+
* The tab's importance.
|
|
65
|
+
*/
|
|
66
|
+
this.importance = 'standard';
|
|
67
|
+
/**
|
|
68
|
+
* The tab's indicator position.
|
|
69
|
+
*/
|
|
70
|
+
this.indicatorPosition = 'block-end';
|
|
71
|
+
/**
|
|
72
|
+
* Whether or not the tab is selected.
|
|
73
|
+
*/
|
|
74
|
+
this.selected = false;
|
|
75
|
+
/**
|
|
76
|
+
* The tab's size.
|
|
77
|
+
*/
|
|
78
|
+
this.size = 'standard';
|
|
79
|
+
this.isIndicatorOnTop = false;
|
|
80
|
+
_IconTab_div.set(this, void 0);
|
|
81
|
+
_IconTab_panel.set(this, void 0);
|
|
82
|
+
_IconTab_iconTab.set(this, void 0);
|
|
83
|
+
_IconTab_ref.set(this, (div) => {
|
|
84
|
+
__classPrivateFieldSet(this, _IconTab_div, div, "f");
|
|
85
|
+
});
|
|
86
|
+
_IconTab_iconTabRef.set(this, (tab) => {
|
|
87
|
+
__classPrivateFieldSet(this, _IconTab_iconTab, tab, "f");
|
|
88
|
+
});
|
|
89
|
+
_IconTab_tooltipRef.set(this, (tooltip) => {
|
|
90
|
+
if (tooltip)
|
|
91
|
+
// eslint-disable-next-line no-param-reassign
|
|
92
|
+
tooltip.target = __classPrivateFieldGet(this, _IconTab_div, "f");
|
|
93
|
+
});
|
|
94
|
+
_IconTab_onBlur.set(this, (event) => {
|
|
95
|
+
this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
96
|
+
});
|
|
97
|
+
_IconTab_onFocus.set(this, (event) => {
|
|
98
|
+
this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
99
|
+
});
|
|
100
|
+
_IconTab_defineTab.set(this, () => {
|
|
101
|
+
this.internals.role = 'tab';
|
|
102
|
+
__classPrivateFieldGet(this, _IconTab_instances, "m", _IconTab_defineGetter).call(this, 'tab', () => __classPrivateFieldGet(this, _IconTab_iconTab, "f"));
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
panelChanged() {
|
|
106
|
+
this.disconnectedCallback();
|
|
107
|
+
const panel = helpers.resolveTarget(this.panel);
|
|
108
|
+
if (!(panel instanceof globalThis.Element))
|
|
109
|
+
return;
|
|
110
|
+
__classPrivateFieldSet(this, _IconTab_panel, panel, "f");
|
|
111
|
+
const tab = this.host.shadowRoot?.querySelector('[role="tab"]');
|
|
112
|
+
if (tab)
|
|
113
|
+
tab.setAttribute('aria-controls', __classPrivateFieldGet(this, _IconTab_panel, "f").id);
|
|
114
|
+
if (__classPrivateFieldGet(this, _IconTab_panel, "f").role === null)
|
|
115
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").role = 'tabpanel';
|
|
116
|
+
if (__classPrivateFieldGet(this, _IconTab_panel, "f").getAttribute('aria-labelledby') === null)
|
|
117
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").setAttribute('aria-labelledby', this.host.id);
|
|
118
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").setAttribute('tabindex', __classPrivateFieldGet(this, _IconTab_panel, "f").getAttribute('tabindex') ?? '0');
|
|
119
|
+
}
|
|
120
|
+
onClick(event) {
|
|
121
|
+
if (__classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedDisabled_get))
|
|
122
|
+
event.stopImmediatePropagation();
|
|
123
|
+
}
|
|
124
|
+
tabindexChanged(newValue) {
|
|
125
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
126
|
+
this.tabIndex =
|
|
127
|
+
parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
|
|
128
|
+
}
|
|
129
|
+
componentWillLoad() {
|
|
130
|
+
var _a;
|
|
131
|
+
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
132
|
+
(_a = this.host).id || (_a.id = `qds-icon-tab-${autoIncrementingId}`);
|
|
133
|
+
autoIncrementingId += 1;
|
|
134
|
+
__classPrivateFieldGet(this, _IconTab_defineTab, "f").call(this);
|
|
135
|
+
}
|
|
136
|
+
componentWillRender() {
|
|
137
|
+
const isPanelRoot = __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_parentLayer_get) === 'panel' && __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_parentLevel_get) === 'root';
|
|
138
|
+
const isMainSubsection = __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_parentLayer_get) === 'main' && __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_parentLevel_get) === 'subsection';
|
|
139
|
+
this.isIndicatorOnTop = isPanelRoot || isMainSubsection;
|
|
140
|
+
}
|
|
141
|
+
componentDidLoad() {
|
|
142
|
+
this.panelChanged();
|
|
143
|
+
}
|
|
144
|
+
disconnectedCallback() {
|
|
145
|
+
if (!__classPrivateFieldGet(this, _IconTab_panel, "f"))
|
|
146
|
+
return;
|
|
147
|
+
const tab = this.host.shadowRoot?.querySelector('[role="tab"]');
|
|
148
|
+
if (tab)
|
|
149
|
+
tab.removeAttribute('aria-controls');
|
|
150
|
+
if (__classPrivateFieldGet(this, _IconTab_panel, "f").role === 'tabpanel')
|
|
151
|
+
// eslint-disable-next-line unicorn/no-null
|
|
152
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").role = null;
|
|
153
|
+
if (__classPrivateFieldGet(this, _IconTab_panel, "f").getAttribute('aria-labelledby') === this.host.id)
|
|
154
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").removeAttribute('aria-labelledby');
|
|
155
|
+
__classPrivateFieldGet(this, _IconTab_panel, "f").removeAttribute('tabindex');
|
|
156
|
+
}
|
|
157
|
+
render() {
|
|
158
|
+
const isLink = this.href === undefined ? this.indicatorPosition : 'block-start';
|
|
159
|
+
const Tag = isLink ? 'a' : 'div';
|
|
160
|
+
return (index.h("div", { key: 'ee55c8edcad6ea16123e32591e073638dfda985a', "aria-disabled": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedDisabled_get) ? 'true' : undefined, class: {
|
|
161
|
+
'qds-selected': this.selected,
|
|
162
|
+
}, "data-size": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedSize_get), "data-importance": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedImportance_get), ref: __classPrivateFieldGet(this, _IconTab_ref, "f") }, index.h(Tag, { key: '7c535857b7b2856437596c2df0099919dc99c1b6', ref: __classPrivateFieldGet(this, _IconTab_iconTabRef, "f"), "aria-disabled": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedDisabled_get) ? 'true' : undefined, ...(isLink ? undefined : { disabled: this.disabled }), onBlur: __classPrivateFieldGet(this, _IconTab_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _IconTab_onFocus, "f"), class: {
|
|
163
|
+
'qds-icon-tab': true,
|
|
164
|
+
'qds-selected': this.selected,
|
|
165
|
+
[`qds-indicator-${this.indicatorPosition}`]: true,
|
|
166
|
+
}, role: isLink ? undefined : 'tab', "aria-current": isLink && this.selected ? 'true' : undefined, "aria-expanded": isLink ? undefined : this.selected ? 'true' : 'false', "data-importance": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedImportance_get), "data-size": __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedSize_get), href: isLink ? this.href : undefined }, index.h("div", { key: '0e5c9c975cd7839003dc6227e692974905165abe', class: "qds-icon-container" }, index.h("qds-icon", { key: 'e400c4a9249fcd4a6e436e196302961ff1f430d1', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName }), isIndicator(this.badge) && (index.h("qds-badge-indicator", { key: 'def25454ebe3e3ac6bc21b3618db347a016e2ad8', class: "qds-badge-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedSize_get), strokeRing: true })), isCounter(this.badge) && (index.h("qds-badge-counter", { key: '3ee1b82b6d97c1e3aeac1347333f2487c922a6f7', class: "qds-badge-counter", description: this.badgeDescription, importance: this.badgeCounterImportance, size: __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_computedSize_get), strokeRing: true, value: this.badge })))), index.h("qds-tooltip", { key: 'f292fc171e186c67537ac0159376fb3e9618d54c', placement: __classPrivateFieldGet(this, _IconTab_instances, "a", _IconTab_placement_get), ref: __classPrivateFieldGet(this, _IconTab_tooltipRef, "f") }, index.h("qds-title", { key: 'f4e85471c2f320db20e75ae24d5c08f5a29d8a17', layer: "accessory", level: "root" }, this.text))));
|
|
167
|
+
}
|
|
168
|
+
get host() { return index.getElement(this); }
|
|
169
|
+
static get watchers() { return {
|
|
170
|
+
"panel": ["panelChanged"],
|
|
171
|
+
"tabindex": ["tabindexChanged"]
|
|
172
|
+
}; }
|
|
173
|
+
};
|
|
174
|
+
_IconTab_div = new WeakMap(), _IconTab_panel = new WeakMap(), _IconTab_iconTab = new WeakMap(), _IconTab_ref = new WeakMap(), _IconTab_iconTabRef = new WeakMap(), _IconTab_tooltipRef = new WeakMap(), _IconTab_onBlur = new WeakMap(), _IconTab_onFocus = new WeakMap(), _IconTab_defineTab = new WeakMap(), _IconTab_instances = new WeakSet(), _IconTab_computedSize_get = function _IconTab_computedSize_get() {
|
|
175
|
+
switch (this.size) {
|
|
176
|
+
case 'standard':
|
|
177
|
+
case 'small':
|
|
178
|
+
case 'large': {
|
|
179
|
+
return this.size;
|
|
180
|
+
}
|
|
181
|
+
default: {
|
|
182
|
+
return 'standard';
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}, _IconTab_computedImportance_get = function _IconTab_computedImportance_get() {
|
|
186
|
+
return this.importance ?? 'standard';
|
|
187
|
+
}, _IconTab_parentLayer_get = function _IconTab_parentLayer_get() {
|
|
188
|
+
return this.host.closest('qds-tabbar')?.layer ?? 'main';
|
|
189
|
+
}, _IconTab_parentLevel_get = function _IconTab_parentLevel_get() {
|
|
190
|
+
return this.host.closest('qds-tabbar')?.level ?? 'root';
|
|
191
|
+
}, _IconTab_computedDisabled_get = function _IconTab_computedDisabled_get() {
|
|
192
|
+
return this.disabled ?? false;
|
|
193
|
+
}, _IconTab_placement_get = function _IconTab_placement_get() {
|
|
194
|
+
switch (this.indicatorPosition) {
|
|
195
|
+
case 'inline-start': {
|
|
196
|
+
return 'left';
|
|
197
|
+
}
|
|
198
|
+
case 'inline-end': {
|
|
199
|
+
return 'right';
|
|
200
|
+
}
|
|
201
|
+
case 'block-start': {
|
|
202
|
+
return 'top';
|
|
203
|
+
}
|
|
204
|
+
default: {
|
|
205
|
+
return 'bottom';
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}, _IconTab_defineGetter = function _IconTab_defineGetter(p, get) {
|
|
209
|
+
Object.defineProperty(this.host, p, { enumerable: true, get });
|
|
210
|
+
};
|
|
211
|
+
IconTab.style = iconTabCss;
|
|
212
|
+
|
|
213
|
+
exports.qds_icon_tab = IconTab;
|
|
214
|
+
//# sourceMappingURL=qds-icon-tab.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-icon-tab.entry.cjs.js","sources":["src/components/icon-tab/icon-tab.css?tag=qds-icon-tab&encapsulation=shadow","src/components/icon-tab/icon-tab.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2026 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n}\n\n.qds-target {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n pointer-events: auto;\n background-color: transparent;\n\n &:disabled {\n pointer-events: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-icon-container {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.qds-icon:hover {\n background-color: transparent;\n}\n\n.qds-target-icon {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-target-icon {\n flex-shrink: 0;\n}\n\n.qds-selected {\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-target,\n.qds-icon-tab {\n display: flex;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-badge-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n}\n\n.qds-badge-counter {\n position: absolute;\n inset-block-start: -2px;\n inset-inline-end: -2px;\n}\n\n[data-size='small'] {\n &.qds-icon-tab {\n min-height: var(--qds-nav-element-small-height);\n min-width: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n }\n\n &.qds-target-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-icon-container {\n height: var(--qds-control-small-height);\n width: var(--qds-control-small-height);\n\n & > .qds-icon {\n height: var(--qds-nav-element-small-icon-size);\n width: var(--qds-nav-element-small-icon-size);\n }\n }\n}\n\n[data-size='standard'] {\n &.qds-icon-tab {\n min-height: var(--qds-nav-element-standard-height);\n min-width: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n }\n\n &.qds-target-icon {\n --qds-experimental-icon-click-target-size: var(\n --qds-control-standard-height\n );\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-icon-container {\n height: var(--qds-control-standard-height);\n width: var(--qds-control-standard-height);\n\n & > .qds-icon {\n height: var(--qds-nav-element-standard-icon-size);\n width: var(--qds-nav-element-standard-icon-size);\n }\n }\n}\n\n[data-size='large'] {\n &.qds-icon-tab {\n min-height: var(--qds-nav-element-large-height);\n min-width: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n }\n\n &.qds-target-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-icon-container {\n height: var(--qds-control-large-height);\n width: var(--qds-control-large-height);\n\n & > .qds-icon {\n height: var(--qds-nav-element-large-icon-size);\n width: var(--qds-nav-element-large-icon-size);\n }\n }\n}\n\n[data-importance='subdued'],\n[data-importance='standard'] {\n &.qds-selected {\n &::after {\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n display: block;\n position: absolute;\n }\n\n &.qds-indicator-inline-end::after,\n &.qds-indicator-inline-start::after {\n width: var(--qds-signature-line-connection-width);\n height: 100%;\n }\n\n &.qds-indicator-inline-end::after {\n inset-inline-end: 0;\n }\n\n &.qds-indicator-inline-start::after {\n inset-inline-start: 0;\n }\n\n &.qds-indicator-block-end::after,\n &.qds-indicator-block-start::after {\n width: 100%;\n height: var(--qds-signature-line-connection-width);\n }\n\n &.qds-indicator-block-end::after {\n bottom: 0;\n }\n\n &.qds-indicator-block-start::after {\n top: 0;\n }\n }\n}\n\n[data-importance='standard'] {\n &:hover {\n &::after {\n background-color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n &::after {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected,\n :active {\n &::after {\n background-color: var(--qds-theme-link-subdued-pressed);\n }\n }\n\n &:hover {\n &::after {\n background-color: var(--qds-theme-link-subdued-hover);\n }\n }\n\n &.qds-selected::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\n }\n}\n\n.qds-icon-tab {\n position: relative;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n text-align: initial;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n outline-offset: calc(\n -1 * var(--qds-focus-border-width) - var(--qds-focus-border-offset)\n );\n }\n}\n\n.qds-hidden {\n display: none;\n}\n","// SPDX-FileCopyrightText: © 2026 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes, resolveTarget } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Placement = 'bottom' | 'left' | 'right' | 'top'\n\nexport type IndicatorPosition =\n | 'block-end'\n | 'block-start'\n | 'inline-end'\n | 'inline-start'\n\nexport type IconTabImportance = Exclude<Importance, 'emphasized'>\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n value === '' || value === true\n\nlet autoIncrementingId = 1\n\n/**\n * <qds-icon-tab> is a navigational element that is used in different horizontal or vertical navigation bars\n * (Main Navigation, secondary navigation, Tab bar, etc.)\n * as trigger points for opening a menu list or switching content in Tab bar.\n *\n * @see https://quartz.se.com/build/components/icon-tab\n */\n@Component({\n tag: 'qds-icon-tab',\n shadow: true,\n styleUrl: 'icon-tab.css',\n})\nexport class IconTab implements ComponentInterface {\n /**\n * Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n */\n @Prop() public readonly badge?: number | string | true\n\n /**\n * The tab's counter importance.\n */\n @Prop()\n public readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'] =\n 'standard'\n\n /**\n * The indicator or counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /**\n * Prevents the tab from being interacted with: it cannot be\n * selected or focused.\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\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 tab's importance.\n */\n @Prop() public readonly importance?: IconTabImportance = 'standard'\n\n /**\n * The tab's indicator position.\n */\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-end'\n\n /**\n * The tab panel element associated with this tab. The `panel` specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][]\n * - A function returning a reference to an [`Element`][] or a CSS selector\n * string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n */\n @Prop() public readonly panel!: Element | string | (() => Element | string)\n\n /**\n * Whether or not the tab is selected.\n */\n @Prop() public selected = false\n\n /**\n * The tab's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Icon tab's accessible name.\n */\n @Prop() public readonly text?: string\n\n /**\n * When set, the underlying tab will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * This property has no effect if the tab has an `action`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Emitted when the tab loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the tab gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private isIndicatorOnTop = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #div?: HTMLDivElement\n\n #panel?: Element\n\n #iconTab?: HTMLElement\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 #computedImportance(): IconTabImportance {\n return this.importance ?? 'standard'\n }\n\n get #parentLayer(): string {\n return this.host.closest('qds-tabbar')?.layer ?? 'main'\n }\n\n get #parentLevel(): string {\n return this.host.closest('qds-tabbar')?.level ?? 'root'\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #placement(): Placement {\n switch (this.indicatorPosition) {\n case 'inline-start': {\n return 'left'\n }\n case 'inline-end': {\n return 'right'\n }\n case 'block-start': {\n return 'top'\n }\n default: {\n return 'bottom'\n }\n }\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel)\n if (!(panel instanceof globalThis.Element)) return\n this.#panel = panel\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.setAttribute('aria-controls', this.#panel.id)\n\n if (this.#panel.role === null) this.#panel.role = 'tabpanel'\n if (this.#panel.getAttribute('aria-labelledby') === null)\n this.#panel.setAttribute('aria-labelledby', this.host.id)\n this.#panel.setAttribute(\n 'tabindex',\n this.#panel.getAttribute('tabindex') ?? '0',\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id ||= `qds-icon-tab-${autoIncrementingId}`\n autoIncrementingId += 1\n\n this.#defineTab()\n }\n\n public componentWillRender(): void {\n const isPanelRoot =\n this.#parentLayer === 'panel' && this.#parentLevel === 'root'\n const isMainSubsection =\n this.#parentLayer === 'main' && this.#parentLevel === 'subsection'\n\n this.isIndicatorOnTop = isPanelRoot || isMainSubsection\n }\n\n public componentDidLoad(): void {\n this.panelChanged()\n }\n\n public disconnectedCallback(): void {\n if (!this.#panel) return\n\n const tab = this.host.shadowRoot?.querySelector('[role=\"tab\"]')\n if (tab) tab.removeAttribute('aria-controls')\n\n if (this.#panel.role === 'tabpanel')\n // eslint-disable-next-line unicorn/no-null\n this.#panel.role = null\n if (this.#panel.getAttribute('aria-labelledby') === this.host.id)\n this.#panel.removeAttribute('aria-labelledby')\n this.#panel.removeAttribute('tabindex')\n }\n\n public render() {\n const isLink =\n this.href === undefined ? this.indicatorPosition : 'block-start'\n const Tag = isLink ? 'a' : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-selected': this.selected,\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n ref={this.#ref}\n >\n <Tag\n ref={this.#iconTabRef}\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(isLink ? undefined : { disabled: this.disabled })}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-icon-tab': true,\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]: true,\n }}\n role={isLink ? undefined : 'tab'}\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={isLink ? undefined : this.selected ? 'true' : 'false'}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n <div class=\"qds-icon-container\">\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-badge-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n class=\"qds-badge-counter\"\n description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n </div>\n </Tag>\n <qds-tooltip placement={this.#placement} ref={this.#tooltipRef}>\n <qds-title layer=\"accessory\" level=\"root\">\n {this.text}\n </qds-title>\n </qds-tooltip>\n </div>\n )\n }\n\n readonly #ref = (div?: HTMLDivElement): void => {\n this.#div = div\n }\n\n readonly #iconTabRef = (tab?: HTMLElement): void => {\n this.#iconTab = tab\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#div\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 #defineTab = (): void => {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.#iconTab)\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"names":["pickFocusEventAttributes","resolveTarget","h"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
10
|
var library = require('./library-CeKRI2f2.js');
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -117,7 +117,7 @@ const Icon = class {
|
|
|
117
117
|
await this.setIcon();
|
|
118
118
|
}
|
|
119
119
|
render() {
|
|
120
|
-
return (index.h("div", { key: '
|
|
120
|
+
return (index.h("div", { key: 'fec63ded24fe49475d789744e32175930bfaaf45', class: "qds-container" }, index.h("span", { key: 'f70431d887b27792ecc3184004286ed0583689e5', class: "qds-icon-wrapper", innerHTML: this.svg }), index.h("div", { key: '2f6d366099a1a644da8d27e95be8ea2ff4af8e64', class: "qds-click-target" })));
|
|
121
121
|
}
|
|
122
122
|
get host() { return index.getElement(this); }
|
|
123
123
|
static get watchers() { return {
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
10
|
|
|
11
|
-
const inlineLinkCss = ":host([hidden]){display:none!important}:host{
|
|
11
|
+
const inlineLinkCss = ":host([hidden]){display:none!important}:host{display:inline-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-icon{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}.qds-inline-link{align-items:center;display:flex;gap:var(--qds-text-icon-gap)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}";
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
14
14
|
//
|
|
@@ -117,10 +117,10 @@ const InlineLink = class {
|
|
|
117
117
|
__classPrivateFieldGet(this, _InlineLink_updateAriaLabelElements, "f").call(this);
|
|
118
118
|
}
|
|
119
119
|
render() {
|
|
120
|
-
return (index.h("a", { key: '
|
|
120
|
+
return (index.h("a", { key: '0a4e02f5a4ccd184c3b2fdc72d39b437cb951799', "aria-hidden": "true", class: {
|
|
121
121
|
'qds-inline-link': true,
|
|
122
122
|
'qds-disabled': this.disabled,
|
|
123
|
-
}, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: -1, target: this.target, ref: __classPrivateFieldGet(this, _InlineLink_linkRef, "f") }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '
|
|
123
|
+
}, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: -1, target: this.target, ref: __classPrivateFieldGet(this, _InlineLink_linkRef, "f") }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '832fca80e8ce0a64ea284ed4a04b0212300c82ff', class: "qds-icon", "aria-hidden": "true", library: this.iconLibrary, name: this.iconName })), index.h("slot", { key: 'b2686e6f0991f97113d86db97e85048ccbf06efa', onSlotchange: __classPrivateFieldGet(this, _InlineLink_onSlotchange, "f") }), this.linkIcon && (index.h("qds-icon", { key: '0fbe27eaff58285c8e18953404aab1eb751b2ced', "aria-hidden": "true", class: "qds-icon", library: "core", name: this.linkIcon }))));
|
|
124
124
|
}
|
|
125
125
|
get host() { return index.getElement(this); }
|
|
126
126
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-inline-link.entry.cjs.js","sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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 border-radius: var(--qds-focus-border-radius);\n}\n\n:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-focus-border-radius);\n}\n\n.qds-icon {\n height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n}\n\n.qds-inline-link {\n display: flex;\n gap: var(--qds-text-icon-gap);\n align-items: center;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\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 Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n determineLinkIcon,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Target } from '../shared'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: true,\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: URL | string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private linkIcon?: LinkIcon\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #link?: HTMLAnchorElement\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #openInNewTab(): boolean {\n return this.target === '_blank'\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n invariant(this.#link)\n if (this.disabled) return\n if (event.key === 'Enter') this.#link.click()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests\n // to fail, but it's not clear why this is the case since it works for\n // other components.\n this.#savedTabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('rel')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.target, this.rel)\n this.#updateAriaLabelElements()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'link'\n this.disabledChanged()\n this.hrefTargetChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.#updateAriaLabelElements()\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-inline-link': true,\n 'qds-disabled': this.disabled,\n }}\n data-importance={this.#computedImportance}\n download={this.download}\n href={this.href?.toString()}\n hrefLang={this.hreflang}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n tabIndex={-1}\n target={this.target}\n ref={this.#linkRef}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n aria-hidden=\"true\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n {this.linkIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library=\"core\"\n name={this.linkIcon}\n />\n )}\n </a>\n )\n }\n\n readonly #linkRef = (link?: HTMLAnchorElement): void => {\n this.#link = link\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 #updateAriaLabelElements = (): void => {\n this.internals.ariaLabel = `${this.host.textContent} ${\n this.#openInNewTab ? 'Opens in a new tab' : ''\n }`.trim()\n }\n\n readonly #onSlotchange = (): void => {\n this.#updateAriaLabelElements()\n }\n}\n"],"names":["pickFocusEventAttributes","invariant","determineLinkIcon","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-inline-link.entry.cjs.js","sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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:host(:focus-visible) {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-icon {\n height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n}\n\n.qds-inline-link {\n display: flex;\n gap: var(--qds-text-icon-gap);\n align-items: center;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\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 Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n determineLinkIcon,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Target } from '../shared'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: true,\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: URL | string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private linkIcon?: LinkIcon\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #link?: HTMLAnchorElement\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #openInNewTab(): boolean {\n return this.target === '_blank'\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n invariant(this.#link)\n if (this.disabled) return\n if (event.key === 'Enter') this.#link.click()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests\n // to fail, but it's not clear why this is the case since it works for\n // other components.\n this.#savedTabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('rel')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.target, this.rel)\n this.#updateAriaLabelElements()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'link'\n this.disabledChanged()\n this.hrefTargetChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.#updateAriaLabelElements()\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-inline-link': true,\n 'qds-disabled': this.disabled,\n }}\n data-importance={this.#computedImportance}\n download={this.download}\n href={this.href?.toString()}\n hrefLang={this.hreflang}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n tabIndex={-1}\n target={this.target}\n ref={this.#linkRef}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n aria-hidden=\"true\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n {this.linkIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library=\"core\"\n name={this.linkIcon}\n />\n )}\n </a>\n )\n }\n\n readonly #linkRef = (link?: HTMLAnchorElement): void => {\n this.#link = link\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 #updateAriaLabelElements = (): void => {\n this.internals.ariaLabel = `${this.host.textContent} ${\n this.#openInNewTab ? 'Opens in a new tab' : ''\n }`.trim()\n }\n\n readonly #onSlotchange = (): void => {\n this.#updateAriaLabelElements()\n }\n}\n"],"names":["pickFocusEventAttributes","invariant","determineLinkIcon","h"],"mappings":"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"}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-BIL8yXqA.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
const inputCss = ":host([hidden]){display:none!important}:host{display:inline-block}@-moz-document url-prefix(){[type=date]~.qds-icon-container,[type=datetime-local]~.qds-icon-container,[type=month]~.qds-icon-container,[type=time]~.qds-icon-container,[type=week]~.qds-icon-container{display:none}}input[type=password]::-ms-reveal{display:none}.qds-container,.qds-input{max-width:inherit;width:inherit}.qds-container{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:\"d\"}.qds-icon-container,.qds-input{grid-area:d}.qds-icon-container{align-items:center;display:flex;justify-content:center;justify-self:end;padding-inline-end:var(--qds-control-input-padding-horizontal)}.qds-icon-container.no-padding{padding-inline-end:0}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:d;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n ))}[data-size=small]{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.qds-password-padding[data-size=small],[data-size=small][type=date],[data-size=small][type=datetime-local],[data-size=small][type=month],[data-size=small][type=time],[data-size=small][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-small-height))}[data-size=small][type=file]::file-selector-button{font:var(--qds-control-small-text);height:var(--qds-control-small-height);margin-inline-end:var(--qds-control-small-gap-siblings-related);padding-inline:var(--qds-control-button-small-padding-horizontal)}[data-size=small][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-small-gap-internal))}[data-size=small][type=search]~.qds-icon-container{gap:var(--qds-control-small-gap-internal)}[data-size=standard]{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.qds-password-padding[data-size=standard],[data-size=standard][type=date],[data-size=standard][type=datetime-local],[data-size=standard][type=month],[data-size=standard][type=time],[data-size=standard][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-height))}[data-size=standard][type=file]::file-selector-button{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height);margin-inline-end:var(--qds-control-standard-gap-siblings-related);padding-inline:var(--qds-control-button-standard-padding-horizontal)}[data-size=standard][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-gap-internal))}[data-size=standard][type=search]~.qds-icon-container{gap:var(--qds-control-standard-gap-internal)}[data-size=large]{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.qds-password-padding[data-size=large],[data-size=large][type=date],[data-size=large][type=datetime-local],[data-size=large][type=month],[data-size=large][type=time],[data-size=large][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-large-height))}[data-size=large][type=file]::file-selector-button{font:var(--qds-control-large-text);height:var(--qds-control-large-height);margin-inline-end:var(--qds-control-large-gap-siblings-related);padding-inline:var(--qds-control-button-large-padding-horizontal)}[data-size=large][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-large-gap-internal))}[data-size=large][type=search]~.qds-icon-container{gap:var(--qds-control-large-gap-internal)}.qds-input{-webkit-appearance:textfield;appearance:textfield;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);box-sizing:border-box;color:var(--qds-theme-control-text-standard);grid-area:d;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input.qds-hide~.qds-icon-container{display:none}.qds-input:disabled,.qds-input:disabled~.qds-icon-container{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input:focus-visible{outline:none}.qds-input:focus-visible~.qds-focus-ring{visibility:visible}.qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-input:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-input::-webkit-search-cancel-button,.qds-input:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week])::-webkit-calendar-picker-indicator{display:none}.qds-input[type=file]{padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=file]::file-selector-button{background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard)}.qds-input[type=file]::file-selector-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=file]::file-selector-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input[type=color],.qds-input[type=number]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]{-webkit-appearance:none;appearance:none;cursor:pointer;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qds-input[type=color]::-webkit-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]::-moz-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=color]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.qds-search-padding[data-size=large],.qds-input.qds-search-padding[data-size=small],.qds-input.qds-search-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-input-padding-horizontal))}.qds-input[data-size=large][type=file],.qds-input[data-size=small][type=file],.qds-input[data-size=standard][type=file]{height:auto}.qds-input.qds-padding[data-size=large],.qds-input.qds-padding[data-size=small],.qds-input.qds-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[data-size=large],.qds-input[data-size=small],.qds-input[data-size=standard]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline-end:var(--qds-control-input-padding-horizontal)}}}.qds-input{@-moz-document url-prefix(){&[type=number]{appearance:none}}}";
|
|
12
|
+
const inputCss = ":host([hidden]){display:none!important}:host{display:inline-block}@-moz-document url-prefix(){[type=date]~.qds-icon-container,[type=datetime-local]~.qds-icon-container,[type=month]~.qds-icon-container,[type=time]~.qds-icon-container,[type=week]~.qds-icon-container{display:none}}input[type=password]::-ms-reveal{display:none}.qds-container,.qds-input{max-width:inherit;width:inherit}.qds-container{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:\"d\"}.qds-icon-container,.qds-input{grid-area:d}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-form-input-border-radius)\n )) max(1px,var(\n --qds-control-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:d;height:calc(100% + var(--qds-form-input-border-width-default) - var(\n --qds-control-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-control-border-width-inline-end,\n var(--qds-form-input-border-width-default)\n ))}[data-size=large]{font:var(--qds-form-large-text);min-height:var(--qds-form-input-large-height);padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}.qds-password-padding[data-size=large],[data-size=large][type=date],[data-size=large][type=datetime-local],[data-size=large][type=month],[data-size=large][type=time],[data-size=large][type=week]{padding-inline:var(--qds-form-input-large-padding-end) calc(var(--qds-form-input-large-padding-end) + var(--qds-form-input-large-height))}[data-size=large]~.qds-icon-container{padding-inline-end:var(--qds-form-input-large-padding-end)}[data-size=large][type=number]{padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}[data-size=large][type=file]{padding-block:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}[data-size=large][type=file]::file-selector-button{font:var(--qds-form-large-text);margin-inline-end:var(--qds-control-large-gap-siblings-related);min-height:var(--qds-form-input-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}[data-size=large][type=search]{padding-inline:var(--qds-form-input-large-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-form-input-large-padding-end) + var(--qds-form-input-large-gap-internal))}[data-size=large][type=search]~.qds-icon-container{gap:var(--qds-form-input-large-gap-internal)}.qds-padding[data-size=large]{padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}[data-size=large]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline:var(--qds-form-input-large-padding-start) var(--qds-form-input-large-padding-end)}}}[data-size=standard]{font:var(--qds-form-standard-text);min-height:var(--qds-form-input-standard-height);padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}.qds-password-padding[data-size=standard],[data-size=standard][type=date],[data-size=standard][type=datetime-local],[data-size=standard][type=month],[data-size=standard][type=time],[data-size=standard][type=week]{padding-inline:var(--qds-form-input-standard-padding-start) calc(var(--qds-form-input-standard-padding-end) + var(--qds-form-input-standard-height))}[data-size=standard]~.qds-icon-container{padding-inline-end:var(--qds-form-input-standard-padding-end)}[data-size=standard][type=number]{padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}[data-size=standard][type=file]{padding-block:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}[data-size=standard][type=file]::file-selector-button{font:var(--qds-form-standard-text);margin-inline-end:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-form-input-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}[data-size=standard][type=search]{padding-inline:var(--qds-form-input-standard-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-form-input-standard-padding-end) + var(--qds-form-input-standard-gap-internal))}[data-size=standard][type=search]~.qds-icon-container{gap:var(--qds-form-input-standard-gap-internal)}.qds-padding[data-size=standard]{padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}[data-size=standard]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline:var(--qds-form-input-standard-padding-start) var(--qds-form-input-standard-padding-end)}}}[data-size=small]{font:var(--qds-form-small-text);min-height:var(--qds-form-input-small-height);padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}.qds-password-padding[data-size=small],[data-size=small][type=date],[data-size=small][type=datetime-local],[data-size=small][type=month],[data-size=small][type=time],[data-size=small][type=week]{padding-inline:var(--qds-form-input-small-padding-end) calc(var(--qds-form-input-small-padding-end) + var(--qds-form-input-small-height))}[data-size=small]~.qds-icon-container{padding-inline-end:var(--qds-form-input-small-padding-end)}[data-size=small][type=number]{padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}[data-size=small][type=file]{padding-block:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}[data-size=small][type=file]::file-selector-button{font:var(--qds-form-small-text);margin-inline-end:var(--qds-control-small-gap-siblings-related);min-height:var(--qds-form-input-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}[data-size=small][type=search]{padding-inline:var(--qds-form-input-small-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-form-input-small-padding-end) + var(--qds-form-input-small-gap-internal))}[data-size=small][type=search]~.qds-icon-container{gap:var(--qds-form-input-small-gap-internal)}.qds-padding[data-size=small]{padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}[data-size=small]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline:var(--qds-form-input-small-padding-start) var(--qds-form-input-small-padding-end)}}}.qds-input{-webkit-appearance:textfield;appearance:textfield;background-color:var(--qds-theme-form-input-background-default);border-color:var(--qds-theme-form-input-border-default);border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-form-input-border-radius)\n ) var(\n --qds-control-border-radius-top-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-control-border-radius-bottom-right,var(--qds-form-input-border-radius)\n ) var(\n --qds-control-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-control-border-width-inline-end,var(--qds-form-input-border-width-default)\n ) var(\n --qds-control-border-width-block-end,var(--qds-form-input-border-width-default)\n ) var(--qds-form-input-border-width-default);box-sizing:border-box;color:var(--qds-theme-form-input-text-active);grid-area:d;padding-block:0}.qds-input.qds-hide~.qds-icon-container{display:none}.qds-input:disabled,.qds-input:disabled~.qds-icon-container{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input:focus-visible{outline:none}.qds-input:focus-visible~.qds-focus-ring{visibility:visible}.qds-input:read-only{background-color:var(--qds-theme-form-input-background-read-only);border-color:var(--qds-theme-form-input-border-disabled)}.qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-input:hover{background-color:var(--qds-theme-form-input-background-hover);border-color:var(--qds-theme-form-input-border-hover)}.qds-input:active{background-color:var(--qds-theme-form-input-background-active);color:var(--qds-theme-form-input-text-active)}.qds-input::-webkit-search-cancel-button,.qds-input:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week])::-webkit-calendar-picker-indicator{display:none}.qds-input[type=file]::file-selector-button{background-color:initial;border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-form-input-text-active)}.qds-input[type=file]::file-selector-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=file]::file-selector-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input[type=color]{-webkit-appearance:none;appearance:none;cursor:pointer;min-width:50px;padding-block:var(--qds-form-input-standard-padding-end);padding-inline:var(--qds-form-input-standard-padding-end)}.qds-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qds-input[type=color]::-webkit-color-swatch{border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]::-moz-color-swatch{border:var(--qds-form-input-border-width-default) solid var(--qds-theme-form-input-border-default);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=color]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.qds-search-padding[data-size=standard]{padding-inline:var(--qds-form-input-standard-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-form-input-standard-padding-end))}.qds-input[data-size=standard][type=file]{height:auto}.qds-input.qds-search-padding[data-size=large]{padding-inline:var(--qds-form-input-large-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-form-input-large-padding-end))}.qds-input[data-size=large][type=file]{height:auto}.qds-input.qds-search-padding[data-size=small]{padding-inline:var(--qds-form-input-small-padding-end) calc(var(--qds-form-input-small-height) + var(--qds-form-input-small-padding-end))}.qds-input[data-size=small][type=file]{height:auto}.qds-input{@-moz-document url-prefix(){&[type=number]{appearance:none}}}.qds-input[data-status=success]{border-color:var(--qds-theme-form-input-border-success)}.qds-input[data-status=warning]{border-color:var(--qds-theme-form-input-border-warning)}.qds-input:not(:focus):user-invalid,.qds-input[data-status=error]{border-color:var(--qds-theme-form-input-border-error)}.qds-icon-container{align-items:center;display:flex;justify-content:center;justify-self:end}.qds-icon-container.no-padding{padding-inline-end:0}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -30,7 +30,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
|
|
|
30
30
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
31
31
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
32
32
|
};
|
|
33
|
-
var _Input_instances, _Input_inheritedAttributes, _Input_input, _Input_computedDisabled_get, _Input_computedIconName_get, _Input_computedSize_get, _Input_computedValue_get, _Input_hasInteractiveIcon_get, _Input_iconClickHandler_get, _Input_computedType_get, _Input_computedInteractiveIconAriaLabel_get, _Input_togglePasswordVisibility, _Input_ref, _Input_getFiles, _Input_onBlur, _Input_onCancel, _Input_onSearch, _Input_onChange, _Input_onClear, _Input_onFocus, _Input_onInput, _Input_defineGetter, _Input_clearValue;
|
|
33
|
+
var _Input_instances, _Input_inheritedAttributes, _Input_input, _Input_computedDisabled_get, _Input_computedIconName_get, _Input_computedSize_get, _Input_computedValue_get, _Input_computedStatus_get, _Input_hasInteractiveIcon_get, _Input_iconClickHandler_get, _Input_computedType_get, _Input_computedInteractiveIconAriaLabel_get, _Input_togglePasswordVisibility, _Input_ref, _Input_getFiles, _Input_onBlur, _Input_onCancel, _Input_onSearch, _Input_onChange, _Input_onClear, _Input_onFocus, _Input_onInput, _Input_defineGetter, _Input_clearValue;
|
|
34
34
|
const stopImmediatePropagation = (event) => {
|
|
35
35
|
event.stopImmediatePropagation();
|
|
36
36
|
};
|
|
@@ -280,6 +280,9 @@ const Input = class {
|
|
|
280
280
|
: node.textContent?.trim())
|
|
281
281
|
.join(' ');
|
|
282
282
|
}
|
|
283
|
+
statusChanged() {
|
|
284
|
+
this.internals.ariaInvalid = (__classPrivateFieldGet(this, _Input_instances, "a", _Input_computedStatus_get) === 'error').toString();
|
|
285
|
+
}
|
|
283
286
|
disabledChanged() {
|
|
284
287
|
if (__classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get))
|
|
285
288
|
// eslint-disable-next-line unicorn/no-null
|
|
@@ -344,6 +347,7 @@ const Input = class {
|
|
|
344
347
|
__classPrivateFieldGet(this, _Input_instances, "m", _Input_defineGetter).call(this, 'labels', () => this.internals.labels);
|
|
345
348
|
__classPrivateFieldSet(this, _Input_inheritedAttributes, helpers.inheritAriaAttributes(this.host), "f");
|
|
346
349
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
350
|
+
this.statusChanged();
|
|
347
351
|
}
|
|
348
352
|
componentDidLoad() {
|
|
349
353
|
helpers.invariant(__classPrivateFieldGet(this, _Input_input, "f"));
|
|
@@ -369,7 +373,7 @@ const Input = class {
|
|
|
369
373
|
const shouldShowSearchButton = isSearchType && this.noIcon === false;
|
|
370
374
|
const shouldHideIcon = !isSearchType && this.noIcon === true;
|
|
371
375
|
const shouldRemoveSearchPadding = isSearchType && this.noIcon === true;
|
|
372
|
-
return (index.h("div", { key: '
|
|
376
|
+
return (index.h("div", { key: 'db31ec02c256f64f5a4d946331405b7ba349784d', class: "qds-container" }, index.h("input", { key: '9e91aadb684a260ea63dfa7a64a1bffdcbe1f3a2', accept: this.accept, autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
|
|
373
377
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
374
378
|
autoFocus: this.host.autofocus, capture: this.capture, class: {
|
|
375
379
|
'qds-search-padding': shouldRemoveSearchPadding,
|
|
@@ -378,16 +382,17 @@ const Input = class {
|
|
|
378
382
|
'qds-padding': shouldHideIcon,
|
|
379
383
|
'qds-password-padding': this.type === 'password' ||
|
|
380
384
|
(this.isPasswordVisible && this.type === 'text'),
|
|
381
|
-
}, "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get), value: this.value ?? '', ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), index.h("div", { key: '
|
|
385
|
+
}, "data-status": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedStatus_get), "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, readOnly: this.readonly, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get), value: this.value ?? '', ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), index.h("div", { key: '1a70a9546cbb333975fb5ddc3e3d6f4e2ea28769', class: "qds-focus-ring" }), __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) && (index.h("div", { key: 'afcfdac0375d089869ace600729d8381df262107', class: {
|
|
382
386
|
'qds-icon-container': true,
|
|
383
387
|
'no-padding': shouldRemoveSearchPadding,
|
|
384
|
-
} }, shouldShowClearButton && (index.h("qds-mini-button", { key: '
|
|
388
|
+
} }, shouldShowClearButton && (index.h("qds-mini-button", { key: 'a19339646b5e2fda9d544fae4830a68536c7bd3f', class: "qds-hide", text: "clear input", library: "core", name: "clear", disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_onClear, "f"), tabindex: -1, onQdsFocus: stopImmediatePropagation })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasInteractiveIcon_get) && (index.h("qds-mini-button", { key: 'eeedd9c8d2a3269d09da86fec16459ec82be8b03', disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_instances, "a", _Input_iconClickHandler_get), text: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedInteractiveIconAriaLabel_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), tabindex: -1, onQdsFocus: stopImmediatePropagation })), shouldShowSearchButton ? (index.h("qds-mini-button", { text: "search", library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_onSearch, "f"), tabindex: -1, onQdsFocus: stopImmediatePropagation })) : (index.h("div", null))))));
|
|
385
389
|
}
|
|
386
390
|
static get delegatesFocus() { return true; }
|
|
387
391
|
static get formAssociated() { return true; }
|
|
388
392
|
get host() { return index.getElement(this); }
|
|
389
393
|
static get watchers() { return {
|
|
390
394
|
"aria-label": ["ariaLabelChanged"],
|
|
395
|
+
"status": ["statusChanged"],
|
|
391
396
|
"disabled": ["disabledChanged"],
|
|
392
397
|
"selectionDirection": ["selectionDirectionChanged"],
|
|
393
398
|
"selectionEnd": ["selectionEndChanged"],
|
|
@@ -440,6 +445,17 @@ _Input_inheritedAttributes = new WeakMap(), _Input_input = new WeakMap(), _Input
|
|
|
440
445
|
return this.value.toString();
|
|
441
446
|
// eslint-disable-next-line unicorn/no-null
|
|
442
447
|
return this.value === undefined ? null : this.value;
|
|
448
|
+
}, _Input_computedStatus_get = function _Input_computedStatus_get() {
|
|
449
|
+
switch (this.status) {
|
|
450
|
+
case 'error':
|
|
451
|
+
case 'success':
|
|
452
|
+
case 'warning': {
|
|
453
|
+
return this.status;
|
|
454
|
+
}
|
|
455
|
+
default: {
|
|
456
|
+
return undefined;
|
|
457
|
+
}
|
|
458
|
+
}
|
|
443
459
|
}, _Input_hasInteractiveIcon_get = function _Input_hasInteractiveIcon_get() {
|
|
444
460
|
return (typeof this.type === 'string' &&
|
|
445
461
|
['month', 'time', 'date', 'datetime-local', 'week', 'password'].includes(this.type));
|