@quartzds/core 1.0.0-beta.127 → 1.0.0-beta.129
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 +56 -0
- package/components/index.js +1 -1
- package/components/{p--fUtCWTJ.js → p-BJEvSqqL.js} +6 -6
- package/components/{p--fUtCWTJ.js.map → p-BJEvSqqL.js.map} +1 -1
- package/components/{p-CeqWiFUg.js → p-Bn9o5Um2.js} +3 -3
- package/components/{p-CeqWiFUg.js.map → p-Bn9o5Um2.js.map} +1 -1
- package/components/{p-CaibVX_2.js → p-BoqB4ddF.js} +29 -7
- package/components/p-BoqB4ddF.js.map +1 -0
- package/components/{p-B2794xy3.js → p-CQ-Ilm5d.js} +5 -5
- package/components/p-CQ-Ilm5d.js.map +1 -0
- package/components/{p-CVa_aaUh.js → p-Cevyg51v.js} +46 -20
- package/components/p-Cevyg51v.js.map +1 -0
- package/components/{p-CgD-5rh_.js → p-CnWdHgve.js} +12 -22
- package/components/p-CnWdHgve.js.map +1 -0
- package/components/{p-D03cCQ_7.js → p-CrzaI1TQ.js} +6 -6
- package/components/p-CrzaI1TQ.js.map +1 -0
- package/components/{p-CIoYTw7w.js → p-DEa0r_EV.js} +6 -6
- package/components/p-DEa0r_EV.js.map +1 -0
- package/components/{p-CHINI0hi.js → p-DOqfdgQA.js} +6 -6
- package/components/p-DOqfdgQA.js.map +1 -0
- package/components/{p-BIt0dDIJ.js → p-DjZ2J7fQ.js} +4 -4
- package/components/{p-BIt0dDIJ.js.map → p-DjZ2J7fQ.js.map} +1 -1
- package/components/{p-epc3kt-8.js → p-Do46q_Gd.js} +5 -5
- package/components/p-Do46q_Gd.js.map +1 -0
- package/components/{p-CS-MebAm.js → p-cw45QxUT.js} +7 -7
- package/components/{p-CS-MebAm.js.map → p-cw45QxUT.js.map} +1 -1
- package/components/{p-CtPHn4AQ.js → p-fKK7EmM2.js} +3 -3
- package/components/{p-CtPHn4AQ.js.map → p-fKK7EmM2.js.map} +1 -1
- package/components/qds-action-item.js +3 -3
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-avatar.js +5 -5
- package/components/qds-avatar.js.map +1 -1
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +5 -5
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +12 -20
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +62 -29
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +6 -6
- 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-icon-button.js +1 -1
- package/components/qds-icon-tab.js +68 -34
- package/components/qds-icon-tab.js.map +1 -1
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +4 -4
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +6 -6
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +4 -4
- package/components/qds-list-item.js +14 -14
- package/components/qds-loader.js +2 -2
- package/components/qds-menu-item.js +49 -16
- 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-standalone-link.js +2 -2
- package/components/qds-switch.js +2 -2
- package/components/qds-tab.js +39 -29
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +140 -33
- package/components/qds-tabbar.js.map +1 -1
- package/components/qds-table-head-cell.js +2 -2
- 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-DjUgyTKn.js → helpers-D6srVOLt.js} +31 -6
- package/dist/{esm/helpers-mPQzhx-O.js.map → cjs/helpers-D6srVOLt.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +1 -1
- package/dist/cjs/qds-avatar-media.cjs.entry.js +2 -2
- package/dist/cjs/qds-avatar-media.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar.cjs.entry.js +2 -2
- package/dist/cjs/qds-avatar.entry.cjs.js.map +1 -1
- 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 +3 -3
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +9 -17
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-checkbox_2.cjs.entry.js +3 -3
- package/dist/cjs/qds-chip.cjs.entry.js +56 -23
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +2 -2
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +8 -18
- package/dist/cjs/qds-dropdown.cjs.entry.js +44 -18
- 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-icon-tab.cjs.entry.js +59 -29
- package/dist/cjs/qds-icon-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +4 -4
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +3 -3
- package/dist/cjs/qds-list-item.cjs.entry.js +5 -5
- package/dist/cjs/qds-loader.cjs.entry.js +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +42 -12
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +5 -5
- package/dist/cjs/qds-standalone-link.cjs.entry.js +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +34 -24
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +130 -26
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-tag.cjs.entry.js +3 -3
- package/dist/cjs/qds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +379 -47
- package/dist/docs.json +47 -1
- package/dist/esm/{helpers-mPQzhx-O.js → helpers-_a9kqEyo.js} +29 -7
- package/dist/{cjs/helpers-DjUgyTKn.js.map → esm/helpers-_a9kqEyo.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +1 -1
- package/dist/esm/qds-avatar-media.entry.js +2 -2
- package/dist/esm/qds-avatar-media.entry.js.map +1 -1
- package/dist/esm/qds-avatar.entry.js +2 -2
- package/dist/esm/qds-avatar.entry.js.map +1 -1
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +3 -3
- package/dist/esm/qds-breadcrumb-item.entry.js +3 -3
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +9 -17
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-checkbox_2.entry.js +3 -3
- package/dist/esm/qds-chip.entry.js +56 -23
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +2 -2
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +8 -18
- package/dist/esm/qds-dropdown.entry.js +44 -18
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-icon-tab.entry.js +59 -29
- package/dist/esm/qds-icon-tab.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +3 -3
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +4 -4
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +3 -3
- package/dist/esm/qds-list-item.entry.js +5 -5
- package/dist/esm/qds-loader.entry.js +1 -1
- package/dist/esm/qds-menu-item.entry.js +42 -12
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +1 -1
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +5 -5
- package/dist/esm/qds-standalone-link.entry.js +1 -1
- package/dist/esm/qds-switch.entry.js +1 -1
- package/dist/esm/qds-tab.entry.js +34 -24
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +130 -26
- package/dist/esm/qds-tabbar.entry.js.map +1 -1
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-tag.entry.js +3 -3
- package/dist/esm/qds-textarea.entry.js +4 -4
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/chip/chip.d.ts +4 -2
- package/dist/types/components/icon-tab/icon-tab.d.ts +2 -0
- package/dist/types/components/menu-item/menu-item.d.ts +3 -0
- package/dist/types/components/tab/tab.d.ts +2 -0
- package/dist/types/components/tabbar/tabbar.d.ts +7 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/types/helpers.d.ts +4 -1
- package/dist/vscode.html-custom-data.json +4 -0
- package/hydrate/index.js +450 -212
- package/hydrate/index.mjs +450 -212
- package/package.json +1 -1
- package/components/p-B2794xy3.js.map +0 -1
- package/components/p-CHINI0hi.js.map +0 -1
- package/components/p-CIoYTw7w.js.map +0 -1
- package/components/p-CVa_aaUh.js.map +0 -1
- package/components/p-CaibVX_2.js.map +0 -1
- package/components/p-CgD-5rh_.js.map +0 -1
- package/components/p-D03cCQ_7.js.map +0 -1
- package/components/p-epc3kt-8.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tab.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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 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-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-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected {\n &::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\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 &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n.qds-tab {\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-closable-tab {\n width: 100%;\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 }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\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\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } 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, Status } from '../shared'\nimport type { TabbarImportance, TabbarSize } from '../tabbar/tabbar'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'> | undefined\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n | 'block-end'\n | 'block-start'\n | 'inline-end'\n | 'inline-start'\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-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/tab\n */\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\n\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?: TabImportance = 'standard'\n\n /**\n * The tab's indicator position.\n */\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-start'\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 * The tag icon's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly tagIconDescription?: string\n\n /**\n * The name of the tab's tag icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly tagIconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /**\n * The tab's tag importance.\n */\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /**\n * The tab's tag size.\n */\n @Prop() public readonly tagSize?: Size = 'small'\n\n /**\n * The tab's tag status.\n */\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /**\n * The tab's tag text.\n */\n @Prop() public readonly tagText?: 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 * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Primary text to display.\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 is closed.\n */\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\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 #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action | undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n if (this.#parentSize !== undefined) return this.#parentSize\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(): TabImportance {\n if (this.#parentImportance !== undefined) return this.#parentImportance\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentImportance(): TabbarImportance {\n return this.host.closest('qds-tabbar')?.importance ?? undefined\n }\n\n get #parentSize(): TabbarSize {\n return this.host.closest('qds-tabbar')?.size ?? undefined\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 #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number | undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : this.tabIndex\n }\n return -1\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 @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id ||= `qds-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 = this.href !== undefined && this.#computedAction === undefined\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={\n !isLink && this.#computedAction !== 'expandable' ? 'tab' : undefined\n }\n aria-current={isLink && this.selected ? 'true' : undefined}\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') ||\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <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 description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n class={{ 'qds-target-icon': true, 'qds-chevron': this.selected }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabIndex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\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 if (this.#computedAction === 'closable') {\n this.#defineGetter('tab', () => this.#tab)\n } else {\n this.internals.role = 'tab'\n this.#defineGetter('tab', () => this.host)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-tab.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tab/tab.css?tag=qds-tab&encapsulation=shadow","src/components/tab/tab.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 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-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-chevron {\n transform: rotate(180deg);\n}\n\n.qds-selected {\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-selected-pressed);\n }\n}\n\n.qds-closable-wrapper,\n.qds-tab,\n.qds-closable-tab,\n.qds-texts {\n display: flex;\n letter-spacing: inherit;\n word-spacing: inherit;\n}\n\n.qds-texts {\n flex: 1 0;\n flex-direction: column;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n font: var(--qds-nav-element-standard-subtitle);\n}\n\n[data-size='small'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-small-height);\n gap: var(--qds-nav-element-small-gap-internal);\n padding-inline: var(--qds-nav-element-small-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-small-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-small-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-small-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-standard-height);\n gap: var(--qds-nav-element-standard-gap-internal);\n padding-inline: var(--qds-nav-element-standard-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-standard-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-standard-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-nav-element-standard-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tab,\n &.qds-closable-wrapper {\n min-height: var(--qds-nav-element-large-height);\n gap: var(--qds-nav-element-large-gap-internal);\n padding-inline: var(--qds-nav-element-large-padding-horizontal);\n }\n\n &.qds-closable-tab {\n gap: var(--qds-nav-element-large-gap-internal);\n }\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 & > .qds-texts {\n gap: var(--qds-nav-element-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-nav-element-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-nav-element-large-subtitle);\n }\n\n &.qds-target-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'] {\n .qds-selected .qds-icon {\n color: var(--qds-theme-title);\n }\n\n &.qds-selected {\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n }\n }\n}\n\n[data-importance='subdued'] {\n &.qds-selected {\n &::after {\n background-color: var(\n --qds-theme-nav-element-selection-indicator-background-subdued\n );\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 &[data-size='standard'] .qds-text {\n font: var(--qds-nav-element-standard-title-emphasized);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-nav-element-small-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-nav-element-large-title-emphasized);\n }\n }\n}\n\n.qds-tab {\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-closable-tab {\n width: 100%;\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 }\n}\n\n.qds-closable-wrapper {\n align-items: center;\n justify-content: center;\n}\n\n.qds-tab,\n.qds-closable-tab {\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\n.qds-tab,\n.qds-closable-wrapper {\n position: relative;\n\n &:not(.qds-selected):hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:not(.qds-selected):active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } 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 {\n isCounter,\n isIndicator,\n pickFocusEventAttributes,\n resolveTarget,\n} from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\nimport type { TabbarImportance, TabbarSize } from '../tabbar/tabbar'\n\nexport type Action = 'closable' | 'expandable'\n\nexport type TabImportance = Exclude<Importance, 'emphasized'> | undefined\n\nexport type TagStatus = Status | 'neutral'\n\nexport type IndicatorPosition =\n | 'block-end'\n | 'block-start'\n | 'inline-end'\n | 'inline-start'\n\nlet autoIncrementingId = 1\n\n/**\n * <qds-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/tab\n */\n@Component({\n tag: 'qds-tab',\n shadow: true,\n styleUrl: 'tab.css',\n})\nexport class Tab implements ComponentInterface {\n /**\n * The name of the action icon to render.\n */\n @Prop() public readonly action?: Action\n\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?: TabImportance = 'standard'\n\n /**\n * The tab's indicator position.\n */\n @Prop() public readonly indicatorPosition?: IndicatorPosition = 'block-start'\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 * The tag icon's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly tagIconDescription?: string\n\n /**\n * The name of the tab's tag icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly tagIconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly tagIconLibrary: string = 'default'\n\n /**\n * The tab's tag importance.\n */\n @Prop() public readonly tagImportance?: HTMLQdsTagElement['importance'] =\n 'emphasized'\n\n /**\n * The tab's tag size.\n */\n @Prop() public readonly tagSize?: Size = 'small'\n\n /**\n * The tab's tag status.\n */\n @Prop() public readonly tagStatus?: Status = 'info'\n\n /**\n * The tab's tag text.\n */\n @Prop() public readonly tagText?: 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 * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Primary text to display.\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 is closed.\n */\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\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 #panel?: Element\n\n #tab?: HTMLElement\n\n get #computedAction(): Action | undefined {\n switch (this.action) {\n case 'closable':\n case 'expandable': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n if (this.#parentSize !== undefined) return this.#parentSize\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(): TabImportance {\n if (this.#parentImportance !== undefined) return this.#parentImportance\n switch (this.importance) {\n case 'subdued':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #parentImportance(): TabbarImportance {\n return this.host.closest('qds-tabbar')?.importance ?? undefined\n }\n\n get #parentSize(): TabbarSize {\n return this.host.closest('qds-tabbar')?.size ?? undefined\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 #ariaLabel(): string {\n return `Close ${this.text}`\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computeCloseButtonTabIndex(): number | undefined {\n if (this.selected) {\n return this.#computedDisabled ? undefined : (this.tabIndex ?? 0)\n }\n return -1\n }\n\n @Watch('panel')\n protected panelChanged(): void {\n this.disconnectedCallback()\n\n const panel = resolveTarget(this.panel, 'qds-tab')\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 @Listen('blur')\n protected onBlur(event: FocusEvent): void {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @Listen('focus')\n protected onFocus(event: FocusEvent): void {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n @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 @Watch('action')\n protected actionChanged(): void {\n this.#defineTab()\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.host.id ||= `qds-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 = this.href !== undefined && this.#computedAction === undefined\n const Tag = isLink\n ? 'a'\n : this.#computedAction === 'expandable'\n ? 'button'\n : 'div'\n return (\n <div\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-closable-wrapper': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction === 'closable',\n }}\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n >\n <Tag\n ref={this.#tabRef}\n disabled={isLink ? undefined : this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n class={{\n 'qds-tab': this.#computedAction !== 'closable',\n 'qds-closable-tab': this.#computedAction === 'closable',\n 'qds-selected': this.selected,\n [`qds-indicator-${this.indicatorPosition}`]:\n this.#computedAction !== 'closable',\n }}\n role={this.#computedAction === 'expandable' ? undefined : 'tab'}\n aria-selected={\n this.#computedAction === 'expandable'\n ? undefined\n : this.selected\n ? 'true'\n : 'false'\n }\n aria-expanded={\n this.#computedAction === 'expandable' && !isLink\n ? this.selected\n ? 'true'\n : 'false'\n : undefined\n }\n data-importance={this.#computedImportance}\n data-action={this.#computedAction}\n data-size={this.#computedSize}\n href={isLink ? this.href : undefined}\n >\n {((this.tagText !== undefined && this.tagText !== '') ||\n (this.tagIconName !== undefined && this.tagIconName !== '')) && (\n <qds-tag\n text={this.tagText}\n status={this.tagStatus}\n size={this.#computedSize}\n importance={this.tagImportance}\n icon-library={this.tagIconLibrary}\n icon-name={this.tagIconName}\n icon-description={this.tagIconDescription}\n />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text && this.#renderText()}\n {isIndicator(this.badge) && (\n <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 description={this.badgeDescription}\n importance={this.badgeCounterImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedAction === 'expandable' && (\n <qds-icon\n class={{\n 'qds-target-icon': true,\n 'qds-chevron': this.selected,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </Tag>\n {this.#computedAction === 'closable' && (\n <qds-mini-button\n name=\"close\"\n library=\"core\"\n text={this.#ariaLabel}\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n onClick={this.#onIconClick}\n tabindex={this.#computeCloseButtonTabIndex}\n />\n )}\n </div>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </div>\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #tabRef = (tab?: HTMLElement): void => {\n this.#tab = tab\n }\n\n readonly #close = (): void => {\n this.closeEmitter.emit()\n }\n\n readonly #onIconClick = (event: MouseEvent): void => {\n event.stopPropagation()\n this.#close()\n }\n\n readonly #defineTab = (): void => {\n if (this.#computedAction === 'expandable') {\n this.internals.role = 'tab'\n this.internals.ariaSelected = this.selected ? 'true' : 'false'\n this.#defineGetter('tab', () => this.host)\n } else {\n this.#defineGetter('tab', () => this.#tab)\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
package/components/qds-tabbar.js
CHANGED
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-D2489VzR.js';
|
|
7
|
-
import { i as invariant, V as VERTICAL_MOVE_KEYS, H as HORIZONTAL_MOVE_KEYS,
|
|
7
|
+
import { i as invariant, V as VERTICAL_MOVE_KEYS, H as HORIZONTAL_MOVE_KEYS, q as resolvePanelElement, s as componentOnReady } from './p-BoqB4ddF.js';
|
|
8
8
|
import { d as defineCustomElement$7 } from './p-XP2CY_fo.js';
|
|
9
|
-
import { d as defineCustomElement$6 } from './p-
|
|
10
|
-
import { d as defineCustomElement$5 } from './p-
|
|
11
|
-
import { d as defineCustomElement$4 } from './p-
|
|
12
|
-
import { d as defineCustomElement$3 } from './p-
|
|
13
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
+
import { d as defineCustomElement$6 } from './p-DOqfdgQA.js';
|
|
10
|
+
import { d as defineCustomElement$5 } from './p-Bn9o5Um2.js';
|
|
11
|
+
import { d as defineCustomElement$4 } from './p-fKK7EmM2.js';
|
|
12
|
+
import { d as defineCustomElement$3 } from './p-CnWdHgve.js';
|
|
13
|
+
import { d as defineCustomElement$2 } from './p-CQ-Ilm5d.js';
|
|
14
14
|
|
|
15
|
-
const tabbarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-tabbar,.qds-tabs,.qds-vertical,.qds-vertical-divider{display:flex}.qds-tabbar,.qds-vertical-divider{width:inherit}.qds-arrow-start{transform:scaleX(var(--qds-direction-factor,1)) rotate(180deg)}.qds-align-center{align-content:center}.qds-hidden{display:none}.qds-centered{justify-content:center}.qds-tabs{flex:1;margin-block:0;overflow:auto;padding-inline-start:0;scroll-behavior:smooth;scrollbar-width:none}.qds-vertical{flex-direction:column}.qds-vertical-divider{flex-direction:row}[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=root] .qds-tabs,[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}[data-layer=main][data-level=section] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=subsection] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}[data-layer=popup][data-level=root] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=popup][data-level=section] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}:is([data-layer=panel],[data-layer=accessory])[data-level=root] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}";
|
|
15
|
+
const tabbarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-tabbar,.qds-tabs,.qds-vertical,.qds-vertical-divider{display:flex}.qds-tabbar,.qds-vertical-divider{width:inherit}.qds-arrow-start{transform:scaleX(var(--qds-direction-factor,1)) rotate(180deg)}.qds-align-center{align-content:center}.qds-hidden{display:none}.qds-centered{justify-content:center}.qds-tabs{flex:1;margin-block:0;overflow:auto;padding-inline-start:0;scroll-behavior:smooth;scrollbar-width:none}.qds-vertical{flex-direction:column}.qds-vertical-divider{flex-direction:row}[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=root] .qds-tabs,[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}[data-layer=main][data-level=section] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=subsection] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}[data-layer=popup][data-level=root] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=popup][data-level=section] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}:is([data-layer=panel],[data-layer=accessory])[data-level=root] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
16
16
|
|
|
17
17
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
18
18
|
//
|
|
@@ -33,7 +33,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
|
|
|
33
33
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
34
34
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
35
35
|
};
|
|
36
|
-
var _Tabbar_instances, _Tabbar_tabs, _Tabbar_ro, _Tabbar_tabbar, _Tabbar_computedImportance_get, _Tabbar_computedSize_get, _Tabbar_computedPlacement_get, _Tabbar_computeDividerVisible_get, _Tabbar_computedAriaOrientation_get, _Tabbar_getTabItems, _Tabbar_scrollToStart, _Tabbar_scrollToEnd, _Tabbar_setActiveTab,
|
|
36
|
+
var _Tabbar_instances, _Tabbar_tabs, _Tabbar_ro, _Tabbar_mutationObserver, _Tabbar_tabbar, _Tabbar_toggleAnnouncement, _Tabbar_scrollStartButton, _Tabbar_scrollEndButton, _Tabbar_pendingArrowFocus, _Tabbar_isInternallySettingActive, _Tabbar_computedImportance_get, _Tabbar_computedSize_get, _Tabbar_computedPlacement_get, _Tabbar_computeDividerVisible_get, _Tabbar_computedAriaOrientation_get, _Tabbar_getTabItems, _Tabbar_announceScroll, _Tabbar_scrollToStart, _Tabbar_scrollToEnd, _Tabbar_setActiveTab, _Tabbar_handleTabMutation, _Tabbar_activateTab, _Tabbar_switchTabPanel, _Tabbar_getCurrentTab, _Tabbar_setCurrentTab, _Tabbar_isVerticalPlacement, _Tabbar_isHorizontalPlacement, _Tabbar_isEndOrBottomPlacement, _Tabbar_onClick, _Tabbar_onKeyDown, _Tabbar_onMouseDown, _Tabbar_onScroll, _Tabbar_onViewportCrop, _Tabbar_syncInternalsAccessibility, _Tabbar_updateTabsCache, _Tabbar_setTabSettings, _Tabbar_onSlotchange, _Tabbar_scrollEndButtonRef, _Tabbar_scrollStartButtonRef;
|
|
37
37
|
const TAB_ITEM_SELECTOR = 'qds-icon-tab, qds-tab';
|
|
38
38
|
const TAB_SETTINGS = {
|
|
39
39
|
'main-root': {
|
|
@@ -79,7 +79,12 @@ const isTabItem = (item) => {
|
|
|
79
79
|
return tagName === 'qds-tab' || tagName === 'qds-icon-tab';
|
|
80
80
|
};
|
|
81
81
|
const isEnabledTabItem = (item) => isTabItem(item) && !item.inert && item.disabled !== true;
|
|
82
|
+
const isTabActive = (tab) => tab.selected;
|
|
82
83
|
const getTabTrigger = (tab) => tab.tab;
|
|
84
|
+
const getPanelId = (tab) => {
|
|
85
|
+
const panelElement = resolvePanelElement(tab);
|
|
86
|
+
return panelElement?.id ?? '';
|
|
87
|
+
};
|
|
83
88
|
const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
84
89
|
constructor(registerHost) {
|
|
85
90
|
super();
|
|
@@ -130,26 +135,37 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
130
135
|
this.alignment = 'start';
|
|
131
136
|
this.disableEndArrow = false;
|
|
132
137
|
this.disableStartArrow = false;
|
|
138
|
+
this.scrollAnnouncement = '';
|
|
133
139
|
_Tabbar_tabs.set(this, []);
|
|
134
140
|
_Tabbar_ro.set(this, void 0);
|
|
141
|
+
_Tabbar_mutationObserver.set(this, void 0);
|
|
135
142
|
_Tabbar_tabbar.set(this, void 0);
|
|
143
|
+
_Tabbar_toggleAnnouncement.set(this, false);
|
|
144
|
+
_Tabbar_scrollStartButton.set(this, void 0);
|
|
145
|
+
_Tabbar_scrollEndButton.set(this, void 0);
|
|
146
|
+
_Tabbar_pendingArrowFocus.set(this, void 0);
|
|
147
|
+
_Tabbar_isInternallySettingActive.set(this, false);
|
|
136
148
|
_Tabbar_scrollToStart.set(this, () => {
|
|
137
149
|
invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
|
|
138
150
|
const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
|
|
151
|
+
__classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, 'end', "f");
|
|
139
152
|
__classPrivateFieldGet(this, _Tabbar_tabbar, "f").scroll({
|
|
140
153
|
left: isRTL
|
|
141
154
|
? __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft + __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth
|
|
142
155
|
: __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft - __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth,
|
|
143
156
|
});
|
|
157
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_announceScroll).call(this, 'previous');
|
|
144
158
|
});
|
|
145
159
|
_Tabbar_scrollToEnd.set(this, () => {
|
|
146
160
|
invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
|
|
147
161
|
const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
|
|
162
|
+
__classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, 'start', "f");
|
|
148
163
|
__classPrivateFieldGet(this, _Tabbar_tabbar, "f").scroll({
|
|
149
164
|
left: isRTL
|
|
150
165
|
? __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft - __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth
|
|
151
166
|
: __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft + __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth,
|
|
152
167
|
});
|
|
168
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_announceScroll).call(this, 'next');
|
|
153
169
|
});
|
|
154
170
|
_Tabbar_isVerticalPlacement.set(this, () => this.placement === 'start' || this.placement === 'end');
|
|
155
171
|
_Tabbar_isHorizontalPlacement.set(this, () => this.placement === 'top' || this.placement === 'bottom');
|
|
@@ -161,8 +177,7 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
161
177
|
const tab = target.closest(TAB_ITEM_SELECTOR);
|
|
162
178
|
if (!isEnabledTabItem(tab))
|
|
163
179
|
return;
|
|
164
|
-
__classPrivateFieldGet(this, _Tabbar_instances, "m",
|
|
165
|
-
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, tab);
|
|
180
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, tab);
|
|
166
181
|
});
|
|
167
182
|
_Tabbar_onKeyDown.set(this, (event) => {
|
|
168
183
|
const isVertical = this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this);
|
|
@@ -216,8 +231,7 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
216
231
|
target.focus({ preventScroll: true });
|
|
217
232
|
if (!isVertical)
|
|
218
233
|
target.scrollIntoView();
|
|
219
|
-
__classPrivateFieldGet(this, _Tabbar_instances, "m",
|
|
220
|
-
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, nextTab);
|
|
234
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, nextTab);
|
|
221
235
|
});
|
|
222
236
|
_Tabbar_onMouseDown.set(this, (event) => {
|
|
223
237
|
const { target } = event;
|
|
@@ -249,6 +263,13 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
249
263
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_updateTabsCache).call(this);
|
|
250
264
|
if (__classPrivateFieldGet(this, _Tabbar_tabs, "f").length > 0)
|
|
251
265
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, __classPrivateFieldGet(this, _Tabbar_tabs, "f")[0]);
|
|
266
|
+
__classPrivateFieldGet(this, _Tabbar_onViewportCrop, "f").call(this);
|
|
267
|
+
});
|
|
268
|
+
_Tabbar_scrollEndButtonRef.set(this, (button) => {
|
|
269
|
+
__classPrivateFieldSet(this, _Tabbar_scrollEndButton, button, "f");
|
|
270
|
+
});
|
|
271
|
+
_Tabbar_scrollStartButtonRef.set(this, (button) => {
|
|
272
|
+
__classPrivateFieldSet(this, _Tabbar_scrollStartButton, button, "f");
|
|
252
273
|
});
|
|
253
274
|
}
|
|
254
275
|
settingChanged() {
|
|
@@ -260,12 +281,46 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
260
281
|
windowResize() {
|
|
261
282
|
__classPrivateFieldGet(this, _Tabbar_onViewportCrop, "f").call(this);
|
|
262
283
|
}
|
|
284
|
+
activeChanged() {
|
|
285
|
+
if (__classPrivateFieldGet(this, _Tabbar_isInternallySettingActive, "f"))
|
|
286
|
+
return;
|
|
287
|
+
if (this.active === undefined || this.active === '')
|
|
288
|
+
return;
|
|
289
|
+
const tabs = __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this);
|
|
290
|
+
const nextTab = tabs.find((tab) => {
|
|
291
|
+
const panelId = getPanelId(tab);
|
|
292
|
+
return panelId === this.active;
|
|
293
|
+
});
|
|
294
|
+
if (!nextTab || nextTab.disabled === true)
|
|
295
|
+
return;
|
|
296
|
+
const previousTab = this.activeTab;
|
|
297
|
+
if (previousTab === nextTab && this.active === getPanelId(nextTab))
|
|
298
|
+
return;
|
|
299
|
+
this.activeTab = nextTab;
|
|
300
|
+
if (previousTab && previousTab !== nextTab) {
|
|
301
|
+
this.hideEmitter.emit(previousTab);
|
|
302
|
+
}
|
|
303
|
+
if (previousTab !== nextTab) {
|
|
304
|
+
this.showEmitter.emit(nextTab);
|
|
305
|
+
}
|
|
306
|
+
// Update tab states without triggering mutation observer
|
|
307
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
|
|
308
|
+
for (const t of tabs) {
|
|
309
|
+
const target = getTabTrigger(t);
|
|
310
|
+
const isSelected = t === nextTab;
|
|
311
|
+
t.selected = isSelected;
|
|
312
|
+
if (target instanceof globalThis.Element)
|
|
313
|
+
target.ariaSelected = isSelected.toString();
|
|
314
|
+
}
|
|
315
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
|
|
316
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, nextTab);
|
|
317
|
+
}
|
|
263
318
|
componentWillLoad() {
|
|
264
319
|
this.settingChanged();
|
|
265
320
|
this.internals.role = 'tablist';
|
|
266
321
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_syncInternalsAccessibility).call(this);
|
|
267
322
|
const tabs = __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this);
|
|
268
|
-
const preselectedTab = tabs.find((tab) => tab
|
|
323
|
+
const preselectedTab = tabs.find((tab) => isTabActive(tab));
|
|
269
324
|
if (preselectedTab)
|
|
270
325
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, preselectedTab);
|
|
271
326
|
else if (tabs.length > 0)
|
|
@@ -274,26 +329,43 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
274
329
|
componentDidRender() {
|
|
275
330
|
if (this.activeTab)
|
|
276
331
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, this.activeTab);
|
|
332
|
+
if (__classPrivateFieldGet(this, _Tabbar_pendingArrowFocus, "f") === 'start' && this.disableEndArrow) {
|
|
333
|
+
__classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, undefined, "f");
|
|
334
|
+
__classPrivateFieldGet(this, _Tabbar_scrollStartButton, "f")?.focus();
|
|
335
|
+
}
|
|
336
|
+
else if (__classPrivateFieldGet(this, _Tabbar_pendingArrowFocus, "f") === 'end' && this.disableStartArrow) {
|
|
337
|
+
__classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, undefined, "f");
|
|
338
|
+
__classPrivateFieldGet(this, _Tabbar_scrollEndButton, "f")?.focus();
|
|
339
|
+
}
|
|
277
340
|
this.settingChanged();
|
|
278
341
|
}
|
|
279
342
|
componentDidLoad() {
|
|
280
343
|
invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
|
|
281
344
|
__classPrivateFieldSet(this, _Tabbar_ro, new ResizeObserver(__classPrivateFieldGet(this, _Tabbar_onScroll, "f")), "f");
|
|
282
345
|
__classPrivateFieldGet(this, _Tabbar_ro, "f").observe(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
|
|
346
|
+
__classPrivateFieldSet(this, _Tabbar_mutationObserver, new MutationObserver((mutations) => {
|
|
347
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_handleTabMutation).call(this, mutations);
|
|
348
|
+
}), "f");
|
|
349
|
+
__classPrivateFieldGet(this, _Tabbar_mutationObserver, "f").observe(this.host, {
|
|
350
|
+
attributes: true,
|
|
351
|
+
attributeFilter: ['active'],
|
|
352
|
+
childList: true,
|
|
353
|
+
subtree: true,
|
|
354
|
+
});
|
|
283
355
|
}
|
|
284
356
|
disconnectedCallback() {
|
|
285
|
-
|
|
286
|
-
|
|
357
|
+
__classPrivateFieldGet(this, _Tabbar_ro, "f")?.disconnect();
|
|
358
|
+
__classPrivateFieldGet(this, _Tabbar_mutationObserver, "f")?.disconnect();
|
|
287
359
|
}
|
|
288
360
|
render() {
|
|
289
|
-
return (h("div", { key: '
|
|
361
|
+
return (h("div", { key: '43a1bae6bd980854ec8cbc786be30d3c4dae4ae9', class: {
|
|
290
362
|
'qds-vertical-divider': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
|
|
291
|
-
}, "data-layer": this.layer, "data-level": this.level, "data-importance": __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) }, __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && __classPrivateFieldGet(this, _Tabbar_isEndOrBottomPlacement, "f").call(this) && (h("qds-divider", { key: '
|
|
363
|
+
}, "data-layer": this.layer, "data-level": this.level, "data-importance": __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) }, h("span", { key: '6c81132bbb30f3c5813186bd9a2e6c4715b208c5', class: "qds-sr-only", "aria-live": "polite" }, this.scrollAnnouncement), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && __classPrivateFieldGet(this, _Tabbar_isEndOrBottomPlacement, "f").call(this) && (h("qds-divider", { key: '147475632fc9fd2d8f859240dfa71e45058c4d78', vertical: this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this) })), h("div", { key: '51a0179675663618453b54d25bda6054e3f91321', class: "qds-tabbar" }, h("div", { key: '44f0167da0d5b5d682f86c57a0a7b347e51e0fca', class: {
|
|
292
364
|
'qds-align-center': true,
|
|
293
365
|
'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
|
|
294
366
|
this.orientation === 'vertical' ||
|
|
295
367
|
__classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
|
|
296
|
-
} }, h("qds-icon-button", { key: '
|
|
368
|
+
} }, h("qds-icon-button", { key: '22a512257855b48e1b50f9b48d06017c756a58ea', "aria-label": "show previous tab", importance: "subdued", iconName: "next", iconLibrary: "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow, ref: __classPrivateFieldGet(this, _Tabbar_scrollStartButtonRef, "f") })), h("div", { key: '4e1a36aaf66917a57bf64618fa675e91db34e555', class: {
|
|
297
369
|
'qds-tabs': true,
|
|
298
370
|
'qds-vertical': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
|
|
299
371
|
'qds-centered': this.alignment === 'center' &&
|
|
@@ -303,12 +375,12 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
303
375
|
this.disableStartArrow,
|
|
304
376
|
}, ref: (element) => {
|
|
305
377
|
__classPrivateFieldSet(this, _Tabbar_tabbar, element, "f");
|
|
306
|
-
}, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f") }, h("slot", { key: '
|
|
378
|
+
}, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f") }, h("slot", { key: '0ae4c49fd815426bd78962526f5fce946d0688a1', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: 'c4fc6997f1430efe4975c8ed1ad723fa6d906d79', class: {
|
|
307
379
|
'qds-align-center': true,
|
|
308
380
|
'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
|
|
309
381
|
this.orientation === 'vertical' ||
|
|
310
382
|
__classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
|
|
311
|
-
} }, h("qds-icon-button", { key: '
|
|
383
|
+
} }, h("qds-icon-button", { key: '87973e92e8ad9e40a2ba6a2a7ade1040c6e46fde', "aria-label": "show next tab", iconName: "next", iconLibrary: "core", importance: "subdued", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow, ref: __classPrivateFieldGet(this, _Tabbar_scrollEndButtonRef, "f") }))), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && !__classPrivateFieldGet(this, _Tabbar_isEndOrBottomPlacement, "f").call(this) && (h("qds-divider", { key: '9c7748c515f2f86c4065b90929dbe7d8f19b377b', vertical: this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this) }))));
|
|
312
384
|
}
|
|
313
385
|
static get delegatesFocus() { return true; }
|
|
314
386
|
get host() { return this; }
|
|
@@ -316,7 +388,8 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
316
388
|
"importance": ["settingChanged"],
|
|
317
389
|
"orientation": ["accessibilityChanged"],
|
|
318
390
|
"placement": ["accessibilityChanged"],
|
|
319
|
-
"tablistDescription": ["accessibilityChanged"]
|
|
391
|
+
"tablistDescription": ["accessibilityChanged"],
|
|
392
|
+
"active": ["activeChanged"]
|
|
320
393
|
}; }
|
|
321
394
|
static get style() { return tabbarCss; }
|
|
322
395
|
}, [273, "qds-tabbar", {
|
|
@@ -329,16 +402,19 @@ const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
|
|
|
329
402
|
"showDivider": [4, "show-divider"],
|
|
330
403
|
"alignment": [1],
|
|
331
404
|
"importance": [1],
|
|
405
|
+
"active": [1],
|
|
332
406
|
"disableEndArrow": [32],
|
|
333
407
|
"disableStartArrow": [32],
|
|
334
|
-
"activeTab": [32]
|
|
408
|
+
"activeTab": [32],
|
|
409
|
+
"scrollAnnouncement": [32]
|
|
335
410
|
}, [[9, "resize", "windowResize"]], {
|
|
336
411
|
"importance": ["settingChanged"],
|
|
337
412
|
"orientation": ["accessibilityChanged"],
|
|
338
413
|
"placement": ["accessibilityChanged"],
|
|
339
|
-
"tablistDescription": ["accessibilityChanged"]
|
|
414
|
+
"tablistDescription": ["accessibilityChanged"],
|
|
415
|
+
"active": ["activeChanged"]
|
|
340
416
|
}]);
|
|
341
|
-
_Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new WeakMap(), _Tabbar_scrollToStart = new WeakMap(), _Tabbar_scrollToEnd = new WeakMap(), _Tabbar_isVerticalPlacement = new WeakMap(), _Tabbar_isHorizontalPlacement = new WeakMap(), _Tabbar_isEndOrBottomPlacement = new WeakMap(), _Tabbar_onClick = new WeakMap(), _Tabbar_onKeyDown = new WeakMap(), _Tabbar_onMouseDown = new WeakMap(), _Tabbar_onScroll = new WeakMap(), _Tabbar_onViewportCrop = new WeakMap(), _Tabbar_onSlotchange = new WeakMap(), _Tabbar_instances = new WeakSet(), _Tabbar_computedImportance_get = function _Tabbar_computedImportance_get() {
|
|
417
|
+
_Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_mutationObserver = new WeakMap(), _Tabbar_tabbar = new WeakMap(), _Tabbar_toggleAnnouncement = new WeakMap(), _Tabbar_scrollStartButton = new WeakMap(), _Tabbar_scrollEndButton = new WeakMap(), _Tabbar_pendingArrowFocus = new WeakMap(), _Tabbar_isInternallySettingActive = new WeakMap(), _Tabbar_scrollToStart = new WeakMap(), _Tabbar_scrollToEnd = new WeakMap(), _Tabbar_isVerticalPlacement = new WeakMap(), _Tabbar_isHorizontalPlacement = new WeakMap(), _Tabbar_isEndOrBottomPlacement = new WeakMap(), _Tabbar_onClick = new WeakMap(), _Tabbar_onKeyDown = new WeakMap(), _Tabbar_onMouseDown = new WeakMap(), _Tabbar_onScroll = new WeakMap(), _Tabbar_onViewportCrop = new WeakMap(), _Tabbar_onSlotchange = new WeakMap(), _Tabbar_scrollEndButtonRef = new WeakMap(), _Tabbar_scrollStartButtonRef = new WeakMap(), _Tabbar_instances = new WeakSet(), _Tabbar_computedImportance_get = function _Tabbar_computedImportance_get() {
|
|
342
418
|
return this.importance;
|
|
343
419
|
}, _Tabbar_computedSize_get = function _Tabbar_computedSize_get() {
|
|
344
420
|
return this.size ?? undefined;
|
|
@@ -376,8 +452,15 @@ _Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new W
|
|
|
376
452
|
return [
|
|
377
453
|
...this.host.querySelectorAll(TAB_ITEM_SELECTOR),
|
|
378
454
|
].filter((element) => isTabItem(element));
|
|
455
|
+
}, _Tabbar_announceScroll = function _Tabbar_announceScroll(direction) {
|
|
456
|
+
const text = direction === 'next' ? 'Next tabs showed' : 'Previous tabs showed';
|
|
457
|
+
__classPrivateFieldSet(this, _Tabbar_toggleAnnouncement, !__classPrivateFieldGet(this, _Tabbar_toggleAnnouncement, "f"), "f");
|
|
458
|
+
this.scrollAnnouncement = text + (__classPrivateFieldGet(this, _Tabbar_toggleAnnouncement, "f") ? '' : '.');
|
|
379
459
|
}, _Tabbar_setActiveTab = function _Tabbar_setActiveTab(tab) {
|
|
380
460
|
this.activeTab = tab;
|
|
461
|
+
const panelId = getPanelId(tab);
|
|
462
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
|
|
463
|
+
this.active = panelId;
|
|
381
464
|
for (const t of __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this)) {
|
|
382
465
|
const target = getTabTrigger(t);
|
|
383
466
|
const isSelected = t === tab;
|
|
@@ -385,22 +468,46 @@ _Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new W
|
|
|
385
468
|
if (target instanceof globalThis.Element)
|
|
386
469
|
target.ariaSelected = isSelected.toString();
|
|
387
470
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
471
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
|
|
472
|
+
}, _Tabbar_handleTabMutation = function _Tabbar_handleTabMutation(mutations) {
|
|
473
|
+
if (__classPrivateFieldGet(this, _Tabbar_isInternallySettingActive, "f"))
|
|
474
|
+
return;
|
|
475
|
+
const activeTab = mutations
|
|
476
|
+
.map((m) => m.target)
|
|
477
|
+
.find((target) => target instanceof H && isTabItem(target) && target.selected);
|
|
478
|
+
if (activeTab) {
|
|
479
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, activeTab);
|
|
394
480
|
}
|
|
395
|
-
},
|
|
481
|
+
}, _Tabbar_activateTab = function _Tabbar_activateTab(tab) {
|
|
396
482
|
const previousTab = this.activeTab;
|
|
397
483
|
if (previousTab === tab)
|
|
398
484
|
return;
|
|
399
485
|
this.activeTab = tab;
|
|
400
|
-
|
|
486
|
+
const panelId = getPanelId(tab);
|
|
487
|
+
if (previousTab) {
|
|
488
|
+
this.hideEmitter.emit(previousTab);
|
|
489
|
+
}
|
|
401
490
|
this.showEmitter.emit(tab);
|
|
402
491
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, tab);
|
|
403
492
|
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, tab);
|
|
493
|
+
// Set active property without triggering watcher events again
|
|
494
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
|
|
495
|
+
this.active = panelId;
|
|
496
|
+
__classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
|
|
497
|
+
for (const t of __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this)) {
|
|
498
|
+
const target = getTabTrigger(t);
|
|
499
|
+
const isSelected = t === tab;
|
|
500
|
+
t.selected = isSelected;
|
|
501
|
+
if (target instanceof globalThis.Element)
|
|
502
|
+
target.ariaSelected = isSelected.toString();
|
|
503
|
+
}
|
|
504
|
+
}, _Tabbar_switchTabPanel = function _Tabbar_switchTabPanel(activeTab) {
|
|
505
|
+
for (const tab of __classPrivateFieldGet(this, _Tabbar_tabs, "f")) {
|
|
506
|
+
const panel = resolvePanelElement(tab);
|
|
507
|
+
if (panel) {
|
|
508
|
+
panel.hidden = tab !== activeTab;
|
|
509
|
+
}
|
|
510
|
+
}
|
|
404
511
|
}, _Tabbar_getCurrentTab = function _Tabbar_getCurrentTab() {
|
|
405
512
|
return __classPrivateFieldGet(this, _Tabbar_tabs, "f").find((tab) => getTabTrigger(tab).getAttribute('tabindex') === '0');
|
|
406
513
|
}, _Tabbar_setCurrentTab = function _Tabbar_setCurrentTab(tab) {
|
|
@@ -415,7 +522,7 @@ _Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_tabbar = new W
|
|
|
415
522
|
const tabindex = shouldActivateTab ? '0' : '-1';
|
|
416
523
|
target.setAttribute('tabindex', tabindex);
|
|
417
524
|
if (shouldActivateTab)
|
|
418
|
-
__classPrivateFieldGet(this, _Tabbar_instances, "m",
|
|
525
|
+
__classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, t);
|
|
419
526
|
});
|
|
420
527
|
}
|
|
421
528
|
}, _Tabbar_syncInternalsAccessibility = function _Tabbar_syncInternalsAccessibility() {
|