@scania/tegel 1.27.0 → 1.28.0
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/dist/cjs/index-ca8040ad.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +8 -8
- package/dist/cjs/tds-footer-group.cjs.entry.js +27 -5
- package/dist/cjs/tds-footer-item.cjs.entry.js +2 -2
- package/dist/cjs/tds-footer.cjs.entry.js +1 -1
- package/dist/cjs/tds-header-brand-symbol.cjs.entry.js +6 -2
- package/dist/cjs/tds-header-dropdown.cjs.entry.js +26 -3
- package/dist/cjs/tds-header-hamburger.cjs.entry.js +7 -1
- package/dist/cjs/tds-header-launcher-button.cjs.entry.js +2 -1
- package/dist/cjs/tds-header-launcher.cjs.entry.js +23 -2
- package/dist/cjs/tds-icon.cjs.entry.js +3 -2
- package/dist/cjs/tds-inline-tabs.cjs.entry.js +1 -1
- package/dist/cjs/tds-modal.cjs.entry.js +75 -3
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +1 -1
- package/dist/cjs/tds-popover-canvas.cjs.entry.js +3 -2
- package/dist/cjs/tds-popover-core.cjs.entry.js +55 -11
- package/dist/cjs/tds-popover-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/tds-popover-menu.cjs.entry.js +1 -1
- package/dist/cjs/tds-radio-button.cjs.entry.js +3 -1
- package/dist/cjs/tds-spinner.cjs.entry.js +1 -1
- package/dist/cjs/tds-step.cjs.entry.js +2 -1
- package/dist/cjs/tds-stepper.cjs.entry.js +2 -1
- package/dist/cjs/tds-text-field.cjs.entry.js +31 -16
- package/dist/cjs/tds-textarea.cjs.entry.js +27 -9
- package/dist/cjs/tds-toast.cjs.entry.js +10 -3
- package/dist/cjs/tds-toggle.cjs.entry.js +2 -2
- package/dist/cjs/tds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/dropdown/dropdown.js +8 -8
- package/dist/collection/components/footer/footer-group/footer-group.css +23 -21
- package/dist/collection/components/footer/footer-group/footer-group.js +55 -5
- package/dist/collection/components/footer/footer-item/footer-item.css +17 -17
- package/dist/collection/components/footer/footer-item/footer-item.js +2 -2
- package/dist/collection/components/footer/footer.css +1 -1
- package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css +1 -1
- package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js +6 -2
- package/dist/collection/components/header/header-dropdown/header-dropdown.js +49 -3
- package/dist/collection/components/header/header-hamburger/header-hamburger.js +30 -1
- package/dist/collection/components/header/header-launcher/header-launcher.js +50 -2
- package/dist/collection/components/header/header-launcher-button/header-launcher-button.js +19 -1
- package/dist/collection/components/icon/icon.js +21 -2
- package/dist/collection/components/modal/modal.css +48 -43
- package/dist/collection/components/modal/modal.js +103 -3
- package/dist/collection/components/popover-canvas/popover-canvas.js +21 -2
- package/dist/collection/components/popover-core/popover-core.js +63 -10
- package/dist/collection/components/popover-core/tds-popover-core.css +123 -66
- package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.js +2 -2
- package/dist/collection/components/popover-menu/popover-menu.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +37 -1
- package/dist/collection/components/spinner/spinner.css +62 -39
- package/dist/collection/components/stepper/step/step.js +19 -1
- package/dist/collection/components/stepper/stepper.js +20 -1
- package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +0 -1
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +2 -3
- package/dist/collection/components/text-field/text-field.css +21 -9
- package/dist/collection/components/text-field/text-field.js +48 -15
- package/dist/collection/components/textarea/textarea.css +11 -6
- package/dist/collection/components/textarea/textarea.js +61 -8
- package/dist/collection/components/toast/toast.js +45 -3
- package/dist/collection/components/toggle/toggle.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/components/{p-2d93a742.js → p-1c606f82.js} +1 -1
- package/dist/components/p-252f3d4d.js +2098 -0
- package/dist/components/p-3dcfe1f4.js +115 -0
- package/dist/components/{p-53e4cdcf.js → p-789bb453.js} +5 -3
- package/dist/components/{p-4487c541.js → p-92fb75a7.js} +4 -2
- package/dist/components/{p-663b8e51.js → p-c0b84c59.js} +9 -9
- package/dist/components/{p-83db8b35.js → p-f8a36676.js} +5 -3
- package/dist/components/tds-accordion-item.js +1 -1
- package/dist/components/tds-banner.js +1 -1
- package/dist/components/tds-datetime.js +1 -1
- package/dist/components/tds-dropdown-option.js +1 -1
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-folder-tabs.js +1 -1
- package/dist/components/tds-footer-group.js +32 -8
- package/dist/components/tds-footer-item.js +3 -3
- package/dist/components/tds-footer.js +1 -1
- package/dist/components/tds-header-brand-symbol.js +6 -2
- package/dist/components/tds-header-cell.js +1 -1
- package/dist/components/tds-header-dropdown.js +31 -7
- package/dist/components/tds-header-hamburger.js +11 -3
- package/dist/components/tds-header-launcher-button.js +1 -1
- package/dist/components/tds-header-launcher.js +29 -7
- package/dist/components/tds-icon.js +1 -1
- package/dist/components/tds-inline-tabs.js +2 -2
- package/dist/components/tds-message.js +1 -1
- package/dist/components/tds-modal.js +79 -5
- package/dist/components/tds-navigation-tabs.js +2 -2
- package/dist/components/tds-popover-canvas.js +1 -1
- package/dist/components/tds-popover-core.js +1 -1
- package/dist/components/tds-popover-menu-item.js +2 -2
- package/dist/components/tds-popover-menu.js +2 -2
- package/dist/components/tds-radio-button.js +6 -2
- package/dist/components/tds-side-menu-close-button.js +1 -1
- package/dist/components/tds-side-menu-dropdown.js +1 -1
- package/dist/components/tds-slider.js +1 -1
- package/dist/components/tds-spinner.js +1 -1
- package/dist/components/tds-step.js +4 -2
- package/dist/components/tds-stepper.js +4 -2
- package/dist/components/tds-table-body-input-wrapper.js +1 -1
- package/dist/components/tds-table-footer.js +3 -3
- package/dist/components/tds-table-header-input-wrapper.js +1 -1
- package/dist/components/tds-table-toolbar.js +1 -1
- package/dist/components/tds-text-field.js +33 -17
- package/dist/components/tds-textarea.js +43 -11
- package/dist/components/tds-toast.js +13 -4
- package/dist/components/tds-toggle.js +2 -2
- package/dist/components/tds-tooltip.js +1 -113
- package/dist/esm/index-51d04e39.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-dropdown_2.entry.js +8 -8
- package/dist/esm/tds-footer-group.entry.js +27 -5
- package/dist/esm/tds-footer-item.entry.js +3 -3
- package/dist/esm/tds-footer.entry.js +1 -1
- package/dist/esm/tds-header-brand-symbol.entry.js +6 -2
- package/dist/esm/tds-header-dropdown.entry.js +26 -3
- package/dist/esm/tds-header-hamburger.entry.js +7 -1
- package/dist/esm/tds-header-launcher-button.entry.js +2 -1
- package/dist/esm/tds-header-launcher.entry.js +23 -2
- package/dist/esm/tds-icon.entry.js +3 -2
- package/dist/esm/tds-inline-tabs.entry.js +1 -1
- package/dist/esm/tds-modal.entry.js +75 -3
- package/dist/esm/tds-navigation-tabs.entry.js +1 -1
- package/dist/esm/tds-popover-canvas.entry.js +3 -2
- package/dist/esm/tds-popover-core.entry.js +55 -11
- package/dist/esm/tds-popover-menu-item.entry.js +2 -2
- package/dist/esm/tds-popover-menu.entry.js +1 -1
- package/dist/esm/tds-radio-button.entry.js +3 -1
- package/dist/esm/tds-spinner.entry.js +1 -1
- package/dist/esm/tds-step.entry.js +2 -1
- package/dist/esm/tds-stepper.entry.js +2 -1
- package/dist/esm/tds-text-field.entry.js +31 -16
- package/dist/esm/tds-textarea.entry.js +27 -9
- package/dist/esm/tds-toast.entry.js +10 -3
- package/dist/esm/tds-toggle.entry.js +2 -2
- package/dist/esm/tds-tooltip.entry.js +2 -2
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-033d991e.entry.js +1 -0
- package/dist/tegel/p-24db6b5b.entry.js +1 -0
- package/dist/tegel/p-27a4a7d0.entry.js +1 -0
- package/dist/tegel/p-28cf7204.entry.js +1 -0
- package/dist/tegel/p-302fea99.entry.js +1 -0
- package/dist/tegel/p-31bc440c.entry.js +1 -0
- package/dist/tegel/p-3e9ca19a.entry.js +1 -0
- package/dist/tegel/p-44ac6a20.entry.js +1 -0
- package/dist/tegel/{p-769d0503.entry.js → p-46205cfb.entry.js} +1 -1
- package/dist/tegel/p-54a20280.entry.js +1 -0
- package/dist/tegel/p-5a3ff0d3.entry.js +1 -0
- package/dist/tegel/p-660176d6.entry.js +1 -0
- package/dist/tegel/{p-eaa279dd.entry.js → p-81111221.entry.js} +1 -1
- package/dist/tegel/{p-668b7662.entry.js → p-8d7bf652.entry.js} +1 -1
- package/dist/tegel/p-b58f68f0.entry.js +1 -0
- package/dist/tegel/{p-5ba254ee.entry.js → p-c10be10e.entry.js} +1 -1
- package/dist/tegel/p-c71acb02.entry.js +1 -0
- package/dist/tegel/p-ceab8f75.entry.js +1 -0
- package/dist/tegel/p-e1abd593.entry.js +1 -0
- package/dist/tegel/p-e3c3bdac.entry.js +1 -0
- package/dist/tegel/p-e46744bc.entry.js +1 -0
- package/dist/tegel/p-ea9e7345.entry.js +1 -0
- package/dist/tegel/{p-97f10223.entry.js → p-eec22b6b.entry.js} +1 -1
- package/dist/tegel/p-f034fc0c.entry.js +1 -0
- package/dist/tegel/p-fa342278.entry.js +1 -0
- package/dist/tegel/{p-b9f81e53.entry.js → p-fc6196c4.entry.js} +1 -1
- package/dist/tegel/tegel.css +4 -4
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/footer/footer-group/footer-group.d.ts +7 -0
- package/dist/types/components/header/header-brand-symbol/header-brand-symbol.d.ts +1 -1
- package/dist/types/components/header/header-dropdown/header-dropdown.d.ts +4 -0
- package/dist/types/components/header/header-hamburger/header-hamburger.d.ts +3 -0
- package/dist/types/components/header/header-launcher/header-launcher.d.ts +4 -0
- package/dist/types/components/header/header-launcher-button/header-launcher-button.d.ts +2 -0
- package/dist/types/components/icon/icon.d.ts +2 -0
- package/dist/types/components/modal/modal.d.ts +6 -0
- package/dist/types/components/popover-canvas/popover-canvas.d.ts +2 -0
- package/dist/types/components/popover-core/popover-core.d.ts +4 -0
- package/dist/types/components/radio-button/radio-button.d.ts +4 -0
- package/dist/types/components/stepper/step/step.d.ts +1 -0
- package/dist/types/components/stepper/stepper.d.ts +2 -0
- package/dist/types/components/text-field/text-field.d.ts +6 -4
- package/dist/types/components/textarea/textarea.d.ts +10 -4
- package/dist/types/components/toast/toast.d.ts +5 -0
- package/dist/types/components.d.ts +130 -0
- package/package.json +1 -1
- package/dist/components/p-90dbeab3.js +0 -2052
- package/dist/tegel/p-035e58e6.entry.js +0 -1
- package/dist/tegel/p-22c592eb.entry.js +0 -1
- package/dist/tegel/p-288a09ef.entry.js +0 -1
- package/dist/tegel/p-4f5f152a.entry.js +0 -1
- package/dist/tegel/p-542d7b3e.entry.js +0 -1
- package/dist/tegel/p-5a7110b8.entry.js +0 -1
- package/dist/tegel/p-5db5c8f4.entry.js +0 -1
- package/dist/tegel/p-654785d2.entry.js +0 -1
- package/dist/tegel/p-66f394a2.entry.js +0 -1
- package/dist/tegel/p-727f873f.entry.js +0 -1
- package/dist/tegel/p-746e2927.entry.js +0 -1
- package/dist/tegel/p-754a4921.entry.js +0 -1
- package/dist/tegel/p-aef6b130.entry.js +0 -1
- package/dist/tegel/p-b114ec3d.entry.js +0 -1
- package/dist/tegel/p-b39ffad4.entry.js +0 -1
- package/dist/tegel/p-b686f1ad.entry.js +0 -1
- package/dist/tegel/p-c56be8d1.entry.js +0 -1
- package/dist/tegel/p-dfbbaefd.entry.js +0 -1
- package/dist/tegel/p-ea3e071f.entry.js +0 -1
- package/dist/tegel/p-ee7f07ae.entry.js +0 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
+
import { h as hasSlot } from './p-ae110fc2.js';
|
|
3
4
|
import { d as defineCustomElement$6 } from './p-e49a0ceb.js';
|
|
4
5
|
import { d as defineCustomElement$5 } from './p-d61bd22e.js';
|
|
5
|
-
import { d as defineCustomElement$4 } from './p-
|
|
6
|
-
import { d as defineCustomElement$3 } from './p-
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
+
import { d as defineCustomElement$4 } from './p-92fb75a7.js';
|
|
7
|
+
import { d as defineCustomElement$3 } from './p-789bb453.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-252f3d4d.js';
|
|
8
9
|
|
|
9
10
|
const headerDropdownCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}";
|
|
10
11
|
const TdsHeaderDropdownStyle0 = headerDropdownCss;
|
|
@@ -24,6 +25,7 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
|
|
|
24
25
|
this.label = undefined;
|
|
25
26
|
this.noDropdownIcon = false;
|
|
26
27
|
this.selected = false;
|
|
28
|
+
this.tdsAriaLabel = undefined;
|
|
27
29
|
this.open = false;
|
|
28
30
|
this.buttonEl = undefined;
|
|
29
31
|
}
|
|
@@ -34,17 +36,38 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
|
|
|
34
36
|
this.open = false;
|
|
35
37
|
}
|
|
36
38
|
}
|
|
39
|
+
handleKeyDown(event) {
|
|
40
|
+
if (event.key === 'Escape' && this.open) {
|
|
41
|
+
this.open = false;
|
|
42
|
+
this.buttonEl.focus();
|
|
43
|
+
}
|
|
44
|
+
}
|
|
37
45
|
toggleDropdown() {
|
|
38
46
|
this.open = !this.open;
|
|
47
|
+
if (this.open) {
|
|
48
|
+
requestAnimationFrame(() => {
|
|
49
|
+
const selectors = "a, [tabindex='0']";
|
|
50
|
+
const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
|
|
51
|
+
if (firstFocusableElement instanceof H) {
|
|
52
|
+
firstFocusableElement.focus();
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
connectedCallback() {
|
|
58
|
+
const hasLabelSlot = hasSlot('label', this.host);
|
|
59
|
+
if (!this.tdsAriaLabel && !hasLabelSlot) {
|
|
60
|
+
console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
|
|
61
|
+
}
|
|
39
62
|
}
|
|
40
63
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: '1bbf8ce73b5f0067b2ffe8d634ba0a3efd6f4fdb' }, h("div", { key: 'd2c548b3989a81a74c2b2985bae4a0afb10bbe06', class: {
|
|
42
65
|
'state-open': this.open,
|
|
43
|
-
} }, h("tds-header-item", { key: '
|
|
66
|
+
} }, h("tds-header-item", { key: '2300d57edbebbc66ed1b27a60a9fcb235ddb4b88', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'da6f8271968491b092b18bc835b815e1796af935', ref: (el) => {
|
|
44
67
|
this.buttonEl = el;
|
|
45
68
|
}, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
|
|
46
69
|
this.toggleDropdown();
|
|
47
|
-
} }, h("slot", { key: '
|
|
70
|
+
}, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'a9c1c657944cdbd826672e53ffce819df1b261de', name: "icon" }), this.label, h("slot", { key: 'a47173535a91f2a5b94060b6745b7ff60e380b19', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4e2d7e29d2775ef65b636faf0eb16739575f0bed', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67ec32703a4fe306ac8b1a5b3e7ed4d48c257161', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
|
|
48
71
|
{
|
|
49
72
|
name: 'flip',
|
|
50
73
|
options: {
|
|
@@ -59,9 +82,10 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
|
|
|
59
82
|
"label": [1],
|
|
60
83
|
"noDropdownIcon": [4, "no-dropdown-icon"],
|
|
61
84
|
"selected": [4],
|
|
85
|
+
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
62
86
|
"open": [32],
|
|
63
87
|
"buttonEl": [32]
|
|
64
|
-
}, [[4, "click", "onAnyClick"]]]);
|
|
88
|
+
}, [[4, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
|
|
65
89
|
function defineCustomElement$1() {
|
|
66
90
|
if (typeof customElements === "undefined") {
|
|
67
91
|
return;
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
|
2
2
|
import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-e49a0ceb.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-d61bd22e.js';
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
6
6
|
|
|
7
7
|
const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
|
|
8
8
|
const TdsHeaderHamburgerStyle0 = headerHamburgerCss;
|
|
@@ -12,14 +12,22 @@ const TdsHeaderHamburger$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderHam
|
|
|
12
12
|
super();
|
|
13
13
|
this.__registerHost();
|
|
14
14
|
this.__attachShadow();
|
|
15
|
+
this.tdsAriaLabel = undefined;
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
if (!this.tdsAriaLabel) {
|
|
19
|
+
console.warn('Tegel Header Hamburger component: missing tdsAriaLabel prop');
|
|
20
|
+
}
|
|
15
21
|
}
|
|
16
22
|
render() {
|
|
17
23
|
const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
|
|
18
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '774d1727624bfe4f8606d2efea75236532f2e9b2' }, h("tds-header-item", { key: '70cbf14a6b7ea638465d56780780ef3e9b5e0f4e' }, h("button", Object.assign({ key: 'af50f354dca1b518b13216ae0ce6cc85488f7df3' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '7978cd71ad41001dee4dbdb12894e22e716f3164', class: "icon", name: "burger", size: "20px" })))));
|
|
19
25
|
}
|
|
20
26
|
get host() { return this; }
|
|
21
27
|
static get style() { return TdsHeaderHamburgerStyle0; }
|
|
22
|
-
}, [1, "tds-header-hamburger"
|
|
28
|
+
}, [1, "tds-header-hamburger", {
|
|
29
|
+
"tdsAriaLabel": [1, "tds-aria-label"]
|
|
30
|
+
}]);
|
|
23
31
|
function defineCustomElement$1() {
|
|
24
32
|
if (typeof customElements === "undefined") {
|
|
25
33
|
return;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-f8a36676.js';
|
|
2
2
|
|
|
3
3
|
const TdsHeaderLauncherButton = TdsHeaderLauncherButton$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -3,10 +3,10 @@ import { g as generateUniqueId } from './p-11648030.js';
|
|
|
3
3
|
import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
|
|
4
4
|
import { d as defineCustomElement$7 } from './p-e49a0ceb.js';
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-d61bd22e.js';
|
|
6
|
-
import { d as defineCustomElement$5 } from './p-
|
|
7
|
-
import { d as defineCustomElement$4 } from './p-
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
+
import { d as defineCustomElement$5 } from './p-f8a36676.js';
|
|
7
|
+
import { d as defineCustomElement$4 } from './p-92fb75a7.js';
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-789bb453.js';
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-252f3d4d.js';
|
|
10
10
|
|
|
11
11
|
const headerLauncherCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
|
|
12
12
|
const TdsHeaderLauncherStyle0 = headerLauncherCss;
|
|
@@ -20,6 +20,7 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
|
|
|
20
20
|
this.open = false;
|
|
21
21
|
this.buttonEl = undefined;
|
|
22
22
|
this.hasListTypeMenu = false;
|
|
23
|
+
this.tdsAriaLabel = undefined;
|
|
23
24
|
}
|
|
24
25
|
onAnyClick(event) {
|
|
25
26
|
// Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
|
|
@@ -28,12 +29,32 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
|
|
|
28
29
|
this.open = false;
|
|
29
30
|
}
|
|
30
31
|
}
|
|
32
|
+
handleKeyDown(event) {
|
|
33
|
+
if (event.key === 'Escape' && this.open) {
|
|
34
|
+
this.open = false;
|
|
35
|
+
this.buttonEl.shadowRoot.querySelector('button').focus();
|
|
36
|
+
}
|
|
37
|
+
}
|
|
31
38
|
componentDidLoad() {
|
|
32
39
|
const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
|
|
33
40
|
this.hasListTypeMenu = hasListTypeMenu;
|
|
34
41
|
}
|
|
35
42
|
toggleLauncher() {
|
|
36
43
|
this.open = !this.open;
|
|
44
|
+
if (this.open) {
|
|
45
|
+
requestAnimationFrame(() => {
|
|
46
|
+
const selectors = "a, [tabindex='0']";
|
|
47
|
+
const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
|
|
48
|
+
if (firstFocusableElement instanceof H) {
|
|
49
|
+
firstFocusableElement.focus();
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
connectedCallback() {
|
|
55
|
+
if (!this.tdsAriaLabel) {
|
|
56
|
+
console.warn('Tegel Header Launcher component: missing tdsAriaLabel prop');
|
|
57
|
+
}
|
|
37
58
|
}
|
|
38
59
|
render() {
|
|
39
60
|
this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
|
|
@@ -42,11 +63,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
|
|
|
42
63
|
}, 'ref': (el) => {
|
|
43
64
|
this.buttonEl = el;
|
|
44
65
|
} });
|
|
45
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: '3a0100f1429a1e09a5745c6b74835bddb6ba5157' }, h("div", { key: '50220e92372ac5496a4b589441e4920375169e79', class: {
|
|
46
67
|
'wrapper': true,
|
|
47
68
|
'state-open': this.open,
|
|
48
69
|
'state-list-type-menu': this.hasListTypeMenu,
|
|
49
|
-
} }, h("tds-header-launcher-button", Object.assign({ key: '
|
|
70
|
+
} }, h("tds-header-launcher-button", Object.assign({ key: 'd58c3ba5f08809487eeca1e6ce8a31879f0c52d9' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '4806b02e07aef32a640eedc1f0f76285950ec384', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
|
|
50
71
|
{
|
|
51
72
|
name: 'flip',
|
|
52
73
|
options: {
|
|
@@ -58,10 +79,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
|
|
|
58
79
|
get host() { return this; }
|
|
59
80
|
static get style() { return TdsHeaderLauncherStyle0; }
|
|
60
81
|
}, [1, "tds-header-launcher", {
|
|
82
|
+
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
61
83
|
"open": [32],
|
|
62
84
|
"buttonEl": [32],
|
|
63
85
|
"hasListTypeMenu": [32]
|
|
64
|
-
}, [[8, "click", "onAnyClick"]]]);
|
|
86
|
+
}, [[8, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
|
|
65
87
|
function defineCustomElement$1() {
|
|
66
88
|
if (typeof customElements === "undefined") {
|
|
67
89
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
3
3
|
|
|
4
|
-
const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);
|
|
4
|
+
const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
5
5
|
const TdsInlineTabsStyle0 = inlineTabsCss;
|
|
6
6
|
|
|
7
7
|
const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends H {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
4
4
|
|
|
5
5
|
const messageCss = ":host{--tds-message-background:var(--background-elevation-layer-03);}:host .tds-mode-variant-primary{--tds-message-background:var(--background-elevation-layer-03)}:host .tds-mode-variant-secondary{--tds-message-background:var(--background-elevation-layer-02)}:host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--system-danger-subtle);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
|
|
6
6
|
const TdsMessageStyle0 = messageCss;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { h as hasSlot } from './p-ae110fc2.js';
|
|
3
|
-
import {
|
|
3
|
+
import { g as generateUniqueId } from './p-11648030.js';
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
4
5
|
|
|
5
|
-
const modalCss = ".tds-modal{box-sizing:border-box;background-color:var(--
|
|
6
|
+
const modalCss = ".tds-modal{box-sizing:border-box;background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:6px;background-color:transparent}.tds-modal::-webkit-scrollbar-track{background-color:transparent}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body::-webkit-scrollbar{width:6px;background-color:transparent}.body::-webkit-scrollbar-track{background-color:transparent}.body::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--background-elevation-scrim);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
|
|
6
7
|
const TdsModalStyle0 = modalCss;
|
|
7
8
|
|
|
8
9
|
const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
@@ -13,6 +14,7 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
|
13
14
|
this.tdsClose = createEvent(this, "tdsClose", 7);
|
|
14
15
|
this.handleClose = (event) => {
|
|
15
16
|
const closeEvent = this.tdsClose.emit(event);
|
|
17
|
+
this.returnFocusOnClose();
|
|
16
18
|
if (!closeEvent.defaultPrevented) {
|
|
17
19
|
this.isShown = false;
|
|
18
20
|
}
|
|
@@ -61,15 +63,26 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
|
61
63
|
this.referenceEl = undefined;
|
|
62
64
|
this.show = undefined;
|
|
63
65
|
this.closable = true;
|
|
66
|
+
this.tdsAlertDialog = 'dialog';
|
|
64
67
|
this.isShown = false;
|
|
68
|
+
this.activeElementIndex = 0;
|
|
65
69
|
}
|
|
66
70
|
/** Shows the Modal. */
|
|
67
71
|
async showModal() {
|
|
68
72
|
this.isShown = true;
|
|
73
|
+
// Set focus on first element when opened
|
|
74
|
+
requestAnimationFrame(() => {
|
|
75
|
+
const focusableElements = this.getFocusableElements();
|
|
76
|
+
if (focusableElements.length > 0) {
|
|
77
|
+
focusableElements[0].focus();
|
|
78
|
+
this.activeElementIndex = 0;
|
|
79
|
+
}
|
|
80
|
+
});
|
|
69
81
|
}
|
|
70
82
|
/** Closes the Modal. */
|
|
71
83
|
async closeModal() {
|
|
72
84
|
this.isShown = false;
|
|
85
|
+
this.returnFocusOnClose();
|
|
73
86
|
}
|
|
74
87
|
connectedCallback() {
|
|
75
88
|
if (this.closable === undefined) {
|
|
@@ -107,6 +120,63 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
|
107
120
|
dismissButton.removeEventListener('click', this.handleClose);
|
|
108
121
|
});
|
|
109
122
|
}
|
|
123
|
+
returnFocusOnClose() {
|
|
124
|
+
var _a;
|
|
125
|
+
let referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
|
|
126
|
+
const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
|
|
127
|
+
// If referenced element is a custom element eg: tds-button we find the interactive element inside
|
|
128
|
+
if (potentialReferenceElements.indexOf(referenceEl.tagName) < 0) {
|
|
129
|
+
referenceEl = referenceEl.querySelectorAll(potentialReferenceElements.join(','))[0];
|
|
130
|
+
}
|
|
131
|
+
referenceEl.focus();
|
|
132
|
+
}
|
|
133
|
+
getFocusableElements() {
|
|
134
|
+
const focusableSelectors = [
|
|
135
|
+
'a[href]',
|
|
136
|
+
'button:not([disabled])',
|
|
137
|
+
'textarea:not([disabled])',
|
|
138
|
+
'input:not([disabled])',
|
|
139
|
+
'select:not([disabled])',
|
|
140
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
141
|
+
].join(',');
|
|
142
|
+
const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
|
|
143
|
+
const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
|
|
144
|
+
/** Focusable elements */
|
|
145
|
+
return [...focusableInShadowRoot, ...focusableInSlots];
|
|
146
|
+
}
|
|
147
|
+
handleFocusTrap(event) {
|
|
148
|
+
if (event.key === 'Escape' && this.isShown && !this.prevent) {
|
|
149
|
+
this.handleClose(event);
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
// Only trap focus if the modal is open
|
|
153
|
+
if (!this.isShown)
|
|
154
|
+
return;
|
|
155
|
+
// We care only about the Tab key
|
|
156
|
+
if (event.key !== 'Tab')
|
|
157
|
+
return;
|
|
158
|
+
const focusableElements = this.getFocusableElements();
|
|
159
|
+
// If there are no focusable elements
|
|
160
|
+
if (focusableElements.length === 0)
|
|
161
|
+
return;
|
|
162
|
+
event.preventDefault();
|
|
163
|
+
// Going backwards (Shift + Tab) on the first element => move to last
|
|
164
|
+
if (event.shiftKey) {
|
|
165
|
+
this.activeElementIndex -= 1;
|
|
166
|
+
if (this.activeElementIndex === -1) {
|
|
167
|
+
this.activeElementIndex = focusableElements.length - 1;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
// // Going forwards (Tab) on the last element => move to first
|
|
171
|
+
if (!event.shiftKey) {
|
|
172
|
+
this.activeElementIndex += 1;
|
|
173
|
+
if (this.activeElementIndex === focusableElements.length) {
|
|
174
|
+
this.activeElementIndex = 0;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
const nextElement = focusableElements[this.activeElementIndex];
|
|
178
|
+
nextElement.focus();
|
|
179
|
+
}
|
|
110
180
|
/** Adds an event listener to the dismiss buttons that closes the Modal. */
|
|
111
181
|
setDismissButtons() {
|
|
112
182
|
this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
|
|
@@ -116,10 +186,12 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
|
116
186
|
render() {
|
|
117
187
|
const usesHeaderSlot = hasSlot('header', this.host);
|
|
118
188
|
const usesActionsSlot = hasSlot('actions', this.host);
|
|
119
|
-
|
|
189
|
+
const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
|
|
190
|
+
const bodyId = `tds-modal-body-${generateUniqueId()}`;
|
|
191
|
+
return (h(Host, { key: '398809ea45126dd70b95422f2f7a08a481a22d53', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
|
|
120
192
|
show: this.isShown,
|
|
121
193
|
hide: !this.isShown,
|
|
122
|
-
}, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '
|
|
194
|
+
}, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '96e964cc4f3c6d9613fb53e340e0aa5dcd8b6d81', class: "tds-modal-backdrop" }), h("div", { key: 'af7ddc896ef35b6116ae70524d10c4b7b952e20a', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '9dfcf95fcc8925cd5c97f10f29edc6cef183a0ca', id: headerId, class: "header" }, this.header && h("div", { key: '42533c25b07e696a0c61504556150018f8d3583a', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'd9855a20e1763ad17d6c8b80df85796d8f6027a8', name: "header" }), this.closable && (h("button", { key: '3e99b76da7bcf39eaecbe2906e0674fd20ebe9a6', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'f6463437fb98ae280afe358d50a2f960914014ea', name: "cross", size: "20px" })))), h("div", { key: 'ba8ca2e65f5eac8103e6f3c431e3ae9aab2b5f72', id: bodyId, class: "body" }, h("slot", { key: '9e08cbdd00e1a60826588b15cb6ed23fc4b5b0d7', name: "body" })), usesActionsSlot && h("slot", { key: 'aeb50dfcbf6c12e80a8904d149bb15892c691d88', name: "actions" }))));
|
|
123
195
|
}
|
|
124
196
|
get host() { return this; }
|
|
125
197
|
static get style() { return TdsModalStyle0; }
|
|
@@ -132,12 +204,14 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
|
|
|
132
204
|
"referenceEl": [16],
|
|
133
205
|
"show": [4],
|
|
134
206
|
"closable": [4],
|
|
207
|
+
"tdsAlertDialog": [1, "tds-alert-dialog"],
|
|
135
208
|
"isShown": [32],
|
|
209
|
+
"activeElementIndex": [32],
|
|
136
210
|
"showModal": [64],
|
|
137
211
|
"closeModal": [64],
|
|
138
212
|
"initializeModal": [64],
|
|
139
213
|
"cleanupModal": [64]
|
|
140
|
-
}]);
|
|
214
|
+
}, [[10, "keydown", "handleFocusTrap"]]]);
|
|
141
215
|
function defineCustomElement$1() {
|
|
142
216
|
if (typeof customElements === "undefined") {
|
|
143
217
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
3
3
|
|
|
4
|
-
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-
|
|
4
|
+
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
5
5
|
const TdsNavigationTabsStyle0 = navigationTabsCss;
|
|
6
6
|
|
|
7
7
|
const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-789bb453.js';
|
|
2
2
|
|
|
3
3
|
const TdsPopoverCanvas = TdsPopoverCanvas$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -11,10 +11,10 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
|
|
|
11
11
|
this.disabled = false;
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'e8b4cebbe7ddcda36aab323b783e506b9e3b0e68', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'e963177a2784af572bdeaf6e1ac8e889e51a82ae', class: {
|
|
15
15
|
wrapper: true,
|
|
16
16
|
disabled: this.disabled,
|
|
17
|
-
} }, h("slot", { key: '
|
|
17
|
+
} }, h("slot", { key: 'f56208065089cbc0d33ad101e760b2c4c51c2368' }))));
|
|
18
18
|
}
|
|
19
19
|
static get style() { return TdsPopoverMenuItemStyle0; }
|
|
20
20
|
}, [1, "tds-popover-menu-item", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { i as inheritAttributes } from './p-3fe9cbbf.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-252f3d4d.js';
|
|
4
4
|
|
|
5
5
|
const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
|
|
6
6
|
const TdsPopoverMenuStyle0 = popoverMenuCss;
|
|
@@ -37,7 +37,7 @@ const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu e
|
|
|
37
37
|
'fluid-width': this.fluidWidth,
|
|
38
38
|
}, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
|
|
39
39
|
this.childRef = el;
|
|
40
|
-
}, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "
|
|
40
|
+
}, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "menu" }, h("slot", { key: 'c07aec34795f83fa2d0d18b63bac458ed7044f9a' })))));
|
|
41
41
|
}
|
|
42
42
|
get host() { return this; }
|
|
43
43
|
static get style() { return TdsPopoverMenuStyle0; }
|
|
@@ -21,9 +21,11 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
|
|
|
21
21
|
this.checked = false;
|
|
22
22
|
this.required = false;
|
|
23
23
|
this.disabled = false;
|
|
24
|
+
this.tdsAriaLabel = undefined;
|
|
25
|
+
this.tdsTabIndex = undefined;
|
|
24
26
|
}
|
|
25
27
|
render() {
|
|
26
|
-
return (h("div", { key: '
|
|
28
|
+
return (h("div", { key: '4fbbd82a09e16551774b0b81eefa4f8e54ea3650', class: "tds-radio-button" }, h("input", { key: 'c7da40a753c5c7116810918e6349076bd9fdbb53', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '869ccd92f5b77a5475d409ae6b2f6d20df37c72d', htmlFor: this.radioId }, h("slot", { key: 'bdeabd6fe808498a0b2b08edb4a7ec33e6953ffe', name: "label" }))));
|
|
27
29
|
}
|
|
28
30
|
get host() { return this; }
|
|
29
31
|
static get style() { return TdsRadioButtonStyle0; }
|
|
@@ -33,7 +35,9 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
|
|
|
33
35
|
"radioId": [1, "radio-id"],
|
|
34
36
|
"checked": [516],
|
|
35
37
|
"required": [4],
|
|
36
|
-
"disabled": [4]
|
|
38
|
+
"disabled": [4],
|
|
39
|
+
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
40
|
+
"tdsTabIndex": [2, "tds-tab-index"]
|
|
37
41
|
}]);
|
|
38
42
|
function defineCustomElement$1() {
|
|
39
43
|
if (typeof customElements === "undefined") {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
4
4
|
|
|
5
5
|
const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
|
|
6
6
|
const TdsSideMenuCloseButtonStyle0 = sideMenuCloseButtonCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-92fb75a7.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-0e6efec9.js';
|
|
4
4
|
|
|
5
5
|
const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
4
4
|
|
|
5
5
|
const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
|
|
6
6
|
const TdsSliderStyle0 = sliderCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
|
|
2
2
|
|
|
3
|
-
const spinnerCss = ":root{--tds-spinner-background:
|
|
3
|
+
const spinnerCss = ":root{--spinner-background-inverted:rgba(255, 255, 255, 1)}:root,.scania,.scania .tds-mode-light{--spinner-background:rgba(43, 112, 211, 1)}.scania .tds-mode-dark{--spinner-background:rgba(74, 137, 243, 1)}.traton,.traton .tds-mode-light{--spinner-background:rgba(0, 72, 82, 1)}.traton .tds-mode-dark{--spinner-background:rgba(194, 191, 182, 1)}:root{--spinner-speed:1.8s;--spinner-speed-lg:2s;--spinner-radius-xs:8px;--spinner-radius-sm:12px;--spinner-radius-md:26px;--spinner-radius-lg:42px;--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width-xs:3px;--spinner-stroke-width-sm:4px;--spinner-stroke-width-md:6px;--spinner-stroke-width-lg:8px;--spinner-stroke-width:var(--spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--spinner-radius) * 2);height:calc(var(--spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--spinner-radius:var(--spinner-radius-xs);--spinner-stroke-width:var(--spinner-stroke-width-xs);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-sm{--spinner-radius:var(--spinner-radius-sm);--spinner-stroke-width:var(--spinner-stroke-width-sm);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-md{--spinner-radius:var(--spinner-radius-md);--spinner-stroke-width:var(--spinner-stroke-width-md);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-lg{--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width:var(--spinner-stroke-width-lg);--spinner-animation-speed:var(--spinner-speed-lg)}.tds-spinner-circle{cx:var(--spinner-radius);cy:var(--spinner-radius);r:calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);fill:none;--spinner-stroke-dash:calc((2 * var(--PI)) * var(--spinner-radius));stroke-dasharray:var(--spinner-stroke-dash);stroke-width:var(--spinner-stroke-width);animation:dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--spinner-stroke-dash))}to{stroke-dashoffset:var(--spinner-stroke-dash)}}";
|
|
4
4
|
const TdsSpinnerStyle0 = spinnerCss;
|
|
5
5
|
|
|
6
6
|
const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-92fb75a7.js';
|
|
3
3
|
|
|
4
4
|
const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
|
|
5
5
|
const TdsStepStyle0 = stepCss;
|
|
@@ -17,6 +17,7 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
|
|
|
17
17
|
this.__attachShadow();
|
|
18
18
|
this.index = undefined;
|
|
19
19
|
this.state = 'upcoming';
|
|
20
|
+
this.tdsAriaCurrent = undefined;
|
|
20
21
|
this.hideLabels = undefined;
|
|
21
22
|
this.size = undefined;
|
|
22
23
|
this.orientation = undefined;
|
|
@@ -44,13 +45,14 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
|
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: '52d3dba71d4c2168b01ded26bcee31f8f80ffa16' }, h("div", { key: 'da5bc2ef45609d027885a03a3d34e21ee1eed015', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'a0f65e54f04848d7440c7427ac42e820c51ae609', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '51011c20479712a9caa7719975032482c2191977', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '5556c301e1119a09e0e8c63ac46af11d88f98c23', name: "label" }))))));
|
|
48
49
|
}
|
|
49
50
|
get el() { return this; }
|
|
50
51
|
static get style() { return TdsStepStyle0; }
|
|
51
52
|
}, [1, "tds-step", {
|
|
52
53
|
"index": [1],
|
|
53
54
|
"state": [1],
|
|
55
|
+
"tdsAriaCurrent": [1, "tds-aria-current"],
|
|
54
56
|
"hideLabels": [32],
|
|
55
57
|
"size": [32],
|
|
56
58
|
"orientation": [32],
|