@scania/tegel 1.25.0-tooltip-beta.0 → 1.26.0-onTdsChange-gets-triggered-unexpectedly-beta.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 +0 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-checkbox.cjs.entry.js +10 -3
- package/dist/cjs/tds-chip.cjs.entry.js +7 -2
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +23 -16
- package/dist/cjs/tds-folder-tab.cjs.entry.js +21 -2
- package/dist/cjs/tds-folder-tabs.cjs.entry.js +4 -2
- package/dist/cjs/tds-icon.cjs.entry.js +1 -1
- package/dist/cjs/tds-inline-tab.cjs.entry.js +21 -2
- package/dist/cjs/tds-inline-tabs.cjs.entry.js +4 -2
- package/dist/cjs/tds-link.cjs.entry.js +17 -3
- package/dist/cjs/tds-navigation-tab.cjs.entry.js +21 -2
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +6 -4
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -2
- package/dist/collection/components/banner/banner.js +1 -1
- package/dist/collection/components/checkbox/checkbox.js +44 -3
- package/dist/collection/components/chip/chip.js +24 -2
- package/dist/collection/components/dropdown/dropdown.js +23 -16
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/icon/iconsArray.js +96 -1
- package/dist/collection/components/link/link.js +17 -3
- package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js +21 -2
- package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +40 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js +21 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +40 -2
- package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js +21 -2
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +42 -4
- package/dist/collection/utils/axeHelpers.js +1 -1
- package/dist/components/{p-c65351ab.js → p-14ab9663.js} +12 -3
- package/dist/components/{p-4c1e3344.js → p-363184d0.js} +1 -1
- package/dist/components/{p-2a43e410.js → p-5028a7ae.js} +2 -2
- package/dist/components/p-64019792.js +65 -0
- package/dist/components/{p-a64dc22e.js → p-bac1d6b1.js} +24 -17
- package/dist/components/tds-accordion-item.js +1 -1
- package/dist/components/tds-banner.js +1 -1
- package/dist/components/tds-checkbox.js +1 -1
- package/dist/components/tds-chip.js +9 -3
- 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-tab.js +21 -2
- package/dist/components/tds-folder-tabs.js +7 -3
- package/dist/components/tds-footer-group.js +1 -1
- package/dist/components/tds-header-cell.js +1 -1
- package/dist/components/tds-header-dropdown.js +1 -1
- package/dist/components/tds-header-hamburger.js +1 -1
- package/dist/components/tds-header-launcher-button.js +1 -1
- package/dist/components/tds-header-launcher.js +2 -2
- package/dist/components/tds-icon.js +1 -1
- package/dist/components/tds-inline-tab.js +21 -2
- package/dist/components/tds-inline-tabs.js +7 -3
- package/dist/components/tds-link.js +17 -3
- package/dist/components/tds-message.js +1 -1
- package/dist/components/tds-modal.js +1 -1
- package/dist/components/tds-navigation-tab.js +21 -2
- package/dist/components/tds-navigation-tabs.js +9 -5
- 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-step.js +1 -1
- package/dist/components/tds-table-body-input-wrapper.js +1 -1
- package/dist/components/tds-table-body-row.js +1 -1
- package/dist/components/tds-table-footer.js +4 -4
- package/dist/components/tds-table-header-input-wrapper.js +1 -1
- package/dist/components/tds-table-header.js +1 -1
- package/dist/components/tds-table-toolbar.js +1 -1
- package/dist/components/tds-text-field.js +1 -1
- package/dist/components/tds-textarea.js +1 -1
- package/dist/components/tds-toast.js +1 -1
- package/dist/esm/index-51d04e39.js +0 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-checkbox.entry.js +10 -3
- package/dist/esm/tds-chip.entry.js +7 -2
- package/dist/esm/tds-dropdown_2.entry.js +23 -16
- package/dist/esm/tds-folder-tab.entry.js +22 -3
- package/dist/esm/tds-folder-tabs.entry.js +4 -2
- package/dist/esm/tds-icon.entry.js +1 -1
- package/dist/esm/tds-inline-tab.entry.js +22 -3
- package/dist/esm/tds-inline-tabs.entry.js +4 -2
- package/dist/esm/tds-link.entry.js +17 -3
- package/dist/esm/tds-navigation-tab.entry.js +22 -3
- package/dist/esm/tds-navigation-tabs.entry.js +6 -4
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-0f2c9507.entry.js +1 -0
- package/dist/tegel/p-668b7662.entry.js +1 -0
- package/dist/tegel/p-a21250b8.entry.js +1 -0
- package/dist/tegel/p-aadb2553.entry.js +1 -0
- package/dist/tegel/p-ab8beb0f.entry.js +1 -0
- package/dist/tegel/p-b08886e3.entry.js +1 -0
- package/dist/tegel/p-c3607f10.entry.js +1 -0
- package/dist/tegel/p-cf302187.entry.js +1 -0
- package/dist/tegel/p-ddda64eb.entry.js +1 -0
- package/dist/tegel/p-eaa279dd.entry.js +1 -0
- package/dist/tegel/p-ee960089.entry.js +1 -0
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +5 -0
- package/dist/types/components/chip/chip.d.ts +3 -0
- package/dist/types/components/dropdown/dropdown.d.ts +2 -0
- package/dist/types/components/tabs/folder-tabs/folder-tab/folder-tab.d.ts +2 -0
- package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts +4 -0
- package/dist/types/components/tabs/inline-tabs/inline-tab/inline-tab.d.ts +2 -0
- package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts +4 -0
- package/dist/types/components/tabs/navigation-tabs/navigation-tab/navigation-tab.d.ts +2 -0
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +4 -0
- package/dist/types/components.d.ts +72 -35
- package/dist/types/types/Icons.d.ts +1 -1
- package/dist/types/utils/axeHelpers.d.ts +1 -2
- package/package.json +1 -1
- package/dist/cjs/tds-tooltip-beta.cjs.entry.js +0 -123
- package/dist/collection/components/tooltip-beta/tooltip-beta.css +0 -40
- package/dist/collection/components/tooltip-beta/tooltip-beta.js +0 -319
- package/dist/collection/types/Tooltip.js +0 -1
- package/dist/components/p-a2b7bdef.js +0 -65
- package/dist/components/tds-tooltip-beta.d.ts +0 -11
- package/dist/components/tds-tooltip-beta.js +0 -149
- package/dist/esm/tds-tooltip-beta.entry.js +0 -119
- package/dist/tegel/p-0c1e632d.entry.js +0 -1
- package/dist/tegel/p-19eb4ae1.entry.js +0 -1
- package/dist/tegel/p-4e33cbda.entry.js +0 -1
- package/dist/tegel/p-4ee344e5.entry.js +0 -1
- package/dist/tegel/p-64c80f14.entry.js +0 -1
- package/dist/tegel/p-72fd0083.entry.js +0 -1
- package/dist/tegel/p-93a4bd11.entry.js +0 -1
- package/dist/tegel/p-9e0b31a1.entry.js +0 -1
- package/dist/tegel/p-a0fc0cc2.entry.js +0 -1
- package/dist/tegel/p-b6526302.entry.js +0 -1
- package/dist/tegel/p-dcbc35af.entry.js +0 -1
- package/dist/tegel/p-ef3671d8.entry.js +0 -1
- package/dist/types/components/tooltip-beta/tooltip-beta.d.ts +0 -28
- package/dist/types/types/Tooltip.d.ts +0 -4
|
@@ -9,14 +9,28 @@ export class TdsLink {
|
|
|
9
9
|
this.standalone = false;
|
|
10
10
|
}
|
|
11
11
|
connectedCallback() {
|
|
12
|
-
this.host.
|
|
12
|
+
const links = this.host.querySelectorAll('a');
|
|
13
|
+
if (links.length > 1) {
|
|
14
|
+
console.warn('tds-link is only intended to wrap one <a> tag');
|
|
15
|
+
}
|
|
16
|
+
const link = links[0];
|
|
17
|
+
if (link) {
|
|
18
|
+
if (this.disabled) {
|
|
19
|
+
link.setAttribute('tabindex', '-1');
|
|
20
|
+
link.setAttribute('aria-disabled', 'true');
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
link.removeAttribute('tabindex');
|
|
24
|
+
link.removeAttribute('aria-disabled');
|
|
25
|
+
}
|
|
26
|
+
}
|
|
13
27
|
}
|
|
14
28
|
render() {
|
|
15
|
-
return (h("span", { key: '
|
|
29
|
+
return (h("span", { key: '1183de952c2fd6cb1193e9e0dec419f37bf07dee', class: {
|
|
16
30
|
'disabled': this.disabled,
|
|
17
31
|
'no-underline': !this.underline,
|
|
18
32
|
'standalone': this.standalone,
|
|
19
|
-
} }, h("slot", { key: '
|
|
33
|
+
} }, h("slot", { key: 'e019a83d2335cd0a7d682e79a6bf0148452c3e71' })));
|
|
20
34
|
}
|
|
21
35
|
static get is() { return "tds-link"; }
|
|
22
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,11 +16,29 @@ export class TdsFolderTab {
|
|
|
16
16
|
async setSelected(selected) {
|
|
17
17
|
this.selected = selected;
|
|
18
18
|
}
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
const elements = this.host.querySelectorAll('button, a');
|
|
21
|
+
for (let index = 0; index < elements.length; index++) {
|
|
22
|
+
const element = elements[index];
|
|
23
|
+
if (!element.getAttribute('aria-controls')) {
|
|
24
|
+
console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
|
|
25
|
+
}
|
|
26
|
+
if (element.getAttribute('role') !== 'tab') {
|
|
27
|
+
console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
|
|
28
|
+
}
|
|
29
|
+
if (this.disabled) {
|
|
30
|
+
element.setAttribute('aria-disabled', 'true');
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
element.removeAttribute('aria-disabled');
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
19
37
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '9290c4ab2f7d051bba9fec4dad9a7d07790ed5b7', "aria-selected": this.selected }, h("div", { key: '36225101c510f2d77282fd600c4ee00085791109', class: {
|
|
21
39
|
selected: this.selected,
|
|
22
40
|
disabled: this.disabled,
|
|
23
|
-
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '
|
|
41
|
+
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '05954c498b9fbd6a2a1231d84bf2657a0616db36' }))));
|
|
24
42
|
}
|
|
25
43
|
static get is() { return "tds-folder-tab"; }
|
|
26
44
|
static get encapsulation() { return "shadow"; }
|
|
@@ -114,4 +132,5 @@ export class TdsFolderTab {
|
|
|
114
132
|
}
|
|
115
133
|
};
|
|
116
134
|
}
|
|
135
|
+
static get elementRef() { return "host"; }
|
|
117
136
|
}
|
|
@@ -60,6 +60,8 @@ export class TdsFolderTabs {
|
|
|
60
60
|
this.modeVariant = null;
|
|
61
61
|
this.defaultSelectedIndex = 0;
|
|
62
62
|
this.selectedIndex = undefined;
|
|
63
|
+
this.tdsScrollLeftAriaLabel = 'Scroll left';
|
|
64
|
+
this.tdsScrollRightAriaLabel = 'Scroll right';
|
|
63
65
|
this.buttonWidth = 0;
|
|
64
66
|
this.showLeftScroll = false;
|
|
65
67
|
this.showRightScroll = false;
|
|
@@ -160,9 +162,9 @@ export class TdsFolderTabs {
|
|
|
160
162
|
this.removeEventListenerFromTabs();
|
|
161
163
|
}
|
|
162
164
|
render() {
|
|
163
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: '54a3cceed49387a8f0dbe74eecb96ae284882ff9', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '170e5256bde8efdce412bbab1a674b23159d02d1', class: "wrapper", ref: (el) => {
|
|
164
166
|
this.navWrapperElement = el;
|
|
165
|
-
} }, h("button", { key: '
|
|
167
|
+
} }, h("button", { key: '1c74ef8c81361bfa6ff5d227c145a3371fb2f66f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '94ddd85d4107c89487db727f13a9c443fd160fc6', name: "chevron_left", size: "20px" })), h("slot", { key: '63978c3c62482bc0a251377756630f555f10dfef', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'aeb86fbdb365e62df37b72daa0b53f51486834a9', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '2cc4d301a4490d6b8d8f2373fc2450c93922a814', name: "chevron_right", size: "20px" })))));
|
|
166
168
|
}
|
|
167
169
|
static get is() { return "tds-folder-tabs"; }
|
|
168
170
|
static get encapsulation() { return "shadow"; }
|
|
@@ -230,6 +232,42 @@ export class TdsFolderTabs {
|
|
|
230
232
|
},
|
|
231
233
|
"attribute": "selected-index",
|
|
232
234
|
"reflect": true
|
|
235
|
+
},
|
|
236
|
+
"tdsScrollLeftAriaLabel": {
|
|
237
|
+
"type": "string",
|
|
238
|
+
"mutable": false,
|
|
239
|
+
"complexType": {
|
|
240
|
+
"original": "string",
|
|
241
|
+
"resolved": "string",
|
|
242
|
+
"references": {}
|
|
243
|
+
},
|
|
244
|
+
"required": false,
|
|
245
|
+
"optional": false,
|
|
246
|
+
"docs": {
|
|
247
|
+
"tags": [],
|
|
248
|
+
"text": "Defines aria-label on left scroll button"
|
|
249
|
+
},
|
|
250
|
+
"attribute": "tds-scroll-left-aria-label",
|
|
251
|
+
"reflect": false,
|
|
252
|
+
"defaultValue": "'Scroll left'"
|
|
253
|
+
},
|
|
254
|
+
"tdsScrollRightAriaLabel": {
|
|
255
|
+
"type": "string",
|
|
256
|
+
"mutable": false,
|
|
257
|
+
"complexType": {
|
|
258
|
+
"original": "string",
|
|
259
|
+
"resolved": "string",
|
|
260
|
+
"references": {}
|
|
261
|
+
},
|
|
262
|
+
"required": false,
|
|
263
|
+
"optional": false,
|
|
264
|
+
"docs": {
|
|
265
|
+
"tags": [],
|
|
266
|
+
"text": "Defines aria-label on right scroll button"
|
|
267
|
+
},
|
|
268
|
+
"attribute": "tds-scroll-right-aria-label",
|
|
269
|
+
"reflect": false,
|
|
270
|
+
"defaultValue": "'Scroll right'"
|
|
233
271
|
}
|
|
234
272
|
};
|
|
235
273
|
}
|
|
@@ -11,12 +11,30 @@ export class TdsInlineTab {
|
|
|
11
11
|
async setSelected(selected) {
|
|
12
12
|
this.selected = selected;
|
|
13
13
|
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
const elements = this.host.querySelectorAll('button, a');
|
|
16
|
+
for (let index = 0; index < elements.length; index++) {
|
|
17
|
+
const element = elements[index];
|
|
18
|
+
if (!element.getAttribute('aria-controls')) {
|
|
19
|
+
console.warn('Tegel inline-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
|
|
20
|
+
}
|
|
21
|
+
if (element.getAttribute('role') !== 'tab') {
|
|
22
|
+
console.warn('Tegel inline-tab component: Interactive elements should have attribute role="tab"');
|
|
23
|
+
}
|
|
24
|
+
if (this.disabled) {
|
|
25
|
+
element.setAttribute('aria-disabled', 'true');
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
element.removeAttribute('aria-disabled');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
14
32
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '4c9f91014f30c1e7db52778dc4cf8800aa62050d', "aria-selected": this.selected }, h("div", { key: '860cfdd9338915275262875fc79588b58bebf447', class: {
|
|
16
34
|
'inline-tab-item': true,
|
|
17
35
|
'selected': this.selected,
|
|
18
36
|
'disabled': this.disabled,
|
|
19
|
-
} }, h("slot", { key: '
|
|
37
|
+
} }, h("slot", { key: 'eeccc1bdc172fab4d7ad96143b01f17982266f4d' }))));
|
|
20
38
|
}
|
|
21
39
|
static get is() { return "tds-inline-tab"; }
|
|
22
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -85,4 +103,5 @@ export class TdsInlineTab {
|
|
|
85
103
|
}
|
|
86
104
|
};
|
|
87
105
|
}
|
|
106
|
+
static get elementRef() { return "host"; }
|
|
88
107
|
}
|
|
@@ -60,6 +60,8 @@ export class TdsInlineTabs {
|
|
|
60
60
|
this.modeVariant = 'primary';
|
|
61
61
|
this.defaultSelectedIndex = 0;
|
|
62
62
|
this.selectedIndex = undefined;
|
|
63
|
+
this.tdsScrollLeftAriaLabel = 'Scroll left';
|
|
64
|
+
this.tdsScrollRightAriaLabel = 'Scroll right';
|
|
63
65
|
this.leftPadding = 32;
|
|
64
66
|
this.showLeftScroll = false;
|
|
65
67
|
this.showRightScroll = false;
|
|
@@ -167,9 +169,9 @@ export class TdsInlineTabs {
|
|
|
167
169
|
this.removeEventListenerFromTabs();
|
|
168
170
|
}
|
|
169
171
|
render() {
|
|
170
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '47fd4d494254749aa276d4f046ded68fe472b062', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'f5c42677bafef38db784c517714ac8a4e0149862', class: "wrapper", ref: (el) => {
|
|
171
173
|
this.navWrapperElement = el;
|
|
172
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
174
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '5955dc1657efcfec14393987f6ebfaea4c90615d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '3c3c7d93197f40b0cbb67d20cd5c32b827a29430', name: "chevron_left", size: "20px" })), h("slot", { key: '335ec61f80defb892c229901165809487950dc03', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'cc22a000e41efa472638da3c480b5cf1094aaec2', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9ca29d2d1cb3df19993723a2eb0716d36c0f20ea', name: "chevron_right", size: "20px" })))));
|
|
173
175
|
}
|
|
174
176
|
static get is() { return "tds-inline-tabs"; }
|
|
175
177
|
static get encapsulation() { return "shadow"; }
|
|
@@ -238,6 +240,42 @@ export class TdsInlineTabs {
|
|
|
238
240
|
"attribute": "selected-index",
|
|
239
241
|
"reflect": true
|
|
240
242
|
},
|
|
243
|
+
"tdsScrollLeftAriaLabel": {
|
|
244
|
+
"type": "string",
|
|
245
|
+
"mutable": false,
|
|
246
|
+
"complexType": {
|
|
247
|
+
"original": "string",
|
|
248
|
+
"resolved": "string",
|
|
249
|
+
"references": {}
|
|
250
|
+
},
|
|
251
|
+
"required": false,
|
|
252
|
+
"optional": false,
|
|
253
|
+
"docs": {
|
|
254
|
+
"tags": [],
|
|
255
|
+
"text": "Defines aria-label on left scroll button"
|
|
256
|
+
},
|
|
257
|
+
"attribute": "tds-scroll-left-aria-label",
|
|
258
|
+
"reflect": false,
|
|
259
|
+
"defaultValue": "'Scroll left'"
|
|
260
|
+
},
|
|
261
|
+
"tdsScrollRightAriaLabel": {
|
|
262
|
+
"type": "string",
|
|
263
|
+
"mutable": false,
|
|
264
|
+
"complexType": {
|
|
265
|
+
"original": "string",
|
|
266
|
+
"resolved": "string",
|
|
267
|
+
"references": {}
|
|
268
|
+
},
|
|
269
|
+
"required": false,
|
|
270
|
+
"optional": false,
|
|
271
|
+
"docs": {
|
|
272
|
+
"tags": [],
|
|
273
|
+
"text": "Defines aria-label on right scroll button"
|
|
274
|
+
},
|
|
275
|
+
"attribute": "tds-scroll-right-aria-label",
|
|
276
|
+
"reflect": false,
|
|
277
|
+
"defaultValue": "'Scroll right'"
|
|
278
|
+
},
|
|
241
279
|
"leftPadding": {
|
|
242
280
|
"type": "number",
|
|
243
281
|
"mutable": false,
|
|
@@ -11,9 +11,27 @@ export class TdsNavigationTab {
|
|
|
11
11
|
async setSelected(selected) {
|
|
12
12
|
this.selected = selected;
|
|
13
13
|
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
const elements = this.host.querySelectorAll('button, a');
|
|
16
|
+
for (let index = 0; index < elements.length; index++) {
|
|
17
|
+
const element = elements[index];
|
|
18
|
+
if (!element.getAttribute('aria-controls')) {
|
|
19
|
+
console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
|
|
20
|
+
}
|
|
21
|
+
if (element.getAttribute('role') !== 'tab') {
|
|
22
|
+
console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
|
|
23
|
+
}
|
|
24
|
+
if (this.disabled) {
|
|
25
|
+
element.setAttribute('aria-disabled', 'true');
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
element.removeAttribute('aria-disabled');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
14
32
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
16
|
-
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '
|
|
33
|
+
return (h(Host, { key: '51152bf313a84cb937e7f49e87cc8dcd74ab0612' }, h("div", { key: '5d55db68f75e042dafe40da1b9e84d74f1cd8849', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
|
|
34
|
+
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '174108daa16d6fa68c04244af1843771a4df91f5' }))));
|
|
17
35
|
}
|
|
18
36
|
static get is() { return "tds-navigation-tab"; }
|
|
19
37
|
static get encapsulation() { return "shadow"; }
|
|
@@ -82,4 +100,5 @@ export class TdsNavigationTab {
|
|
|
82
100
|
}
|
|
83
101
|
};
|
|
84
102
|
}
|
|
103
|
+
static get elementRef() { return "host"; }
|
|
85
104
|
}
|
|
@@ -61,6 +61,8 @@ export class TdsNavigationTabs {
|
|
|
61
61
|
this.defaultSelectedIndex = 0;
|
|
62
62
|
this.selectedIndex = undefined;
|
|
63
63
|
this.leftPadding = 32;
|
|
64
|
+
this.tdsScrollLeftAriaLabel = 'Scroll left';
|
|
65
|
+
this.tdsScrollRightAriaLabel = 'Scroll right';
|
|
64
66
|
this.showLeftScroll = false;
|
|
65
67
|
this.showRightScroll = false;
|
|
66
68
|
}
|
|
@@ -167,15 +169,15 @@ export class TdsNavigationTabs {
|
|
|
167
169
|
this.removeEventListenerFromTabs();
|
|
168
170
|
}
|
|
169
171
|
render() {
|
|
170
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '809fe9d34b03949edae1708b6dea7f0406afee80', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '866605f8695441d7817c07895bdffd5e3e7ba5ac', class: "wrapper", ref: (el) => {
|
|
171
173
|
this.navWrapperElement = el;
|
|
172
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
174
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2d394ecb940cee024174932676c2a6c22622c853', "aria-label": this.tdsScrollLeftAriaLabel, class: {
|
|
173
175
|
'scroll-left-button': true,
|
|
174
176
|
'show': this.showLeftScroll,
|
|
175
|
-
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '
|
|
177
|
+
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '09386162127467a545e00f44130352afb9cfed03', name: "chevron_left", size: "20px" })), h("slot", { key: '3b3cd70ed645318d0661a3acbee3d2bc748314cf', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '1afb2dc9b261626db800593548d7e023e14cd39b', "aria-label": this.tdsScrollRightAriaLabel, class: {
|
|
176
178
|
'scroll-right-button': true,
|
|
177
179
|
'show': this.showRightScroll,
|
|
178
|
-
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '
|
|
180
|
+
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '451a8ddc680799fd86e390d8aeab5c22c73f31ee', name: "chevron_right", size: "20px" })))));
|
|
179
181
|
}
|
|
180
182
|
static get is() { return "tds-navigation-tabs"; }
|
|
181
183
|
static get encapsulation() { return "shadow"; }
|
|
@@ -261,6 +263,42 @@ export class TdsNavigationTabs {
|
|
|
261
263
|
"attribute": "left-padding",
|
|
262
264
|
"reflect": true,
|
|
263
265
|
"defaultValue": "32"
|
|
266
|
+
},
|
|
267
|
+
"tdsScrollLeftAriaLabel": {
|
|
268
|
+
"type": "string",
|
|
269
|
+
"mutable": false,
|
|
270
|
+
"complexType": {
|
|
271
|
+
"original": "string",
|
|
272
|
+
"resolved": "string",
|
|
273
|
+
"references": {}
|
|
274
|
+
},
|
|
275
|
+
"required": false,
|
|
276
|
+
"optional": false,
|
|
277
|
+
"docs": {
|
|
278
|
+
"tags": [],
|
|
279
|
+
"text": "Defines aria-label on left scroll button"
|
|
280
|
+
},
|
|
281
|
+
"attribute": "tds-scroll-left-aria-label",
|
|
282
|
+
"reflect": false,
|
|
283
|
+
"defaultValue": "'Scroll left'"
|
|
284
|
+
},
|
|
285
|
+
"tdsScrollRightAriaLabel": {
|
|
286
|
+
"type": "string",
|
|
287
|
+
"mutable": false,
|
|
288
|
+
"complexType": {
|
|
289
|
+
"original": "string",
|
|
290
|
+
"resolved": "string",
|
|
291
|
+
"references": {}
|
|
292
|
+
},
|
|
293
|
+
"required": false,
|
|
294
|
+
"optional": false,
|
|
295
|
+
"docs": {
|
|
296
|
+
"tags": [],
|
|
297
|
+
"text": "Defines aria-label on right scroll button"
|
|
298
|
+
},
|
|
299
|
+
"attribute": "tds-scroll-right-aria-label",
|
|
300
|
+
"reflect": false,
|
|
301
|
+
"defaultValue": "'Scroll right'"
|
|
264
302
|
}
|
|
265
303
|
};
|
|
266
304
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import AxeBuilder from "@axe-core/playwright";
|
|
2
|
-
const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
|
|
2
|
+
const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
|
|
3
3
|
export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();
|
|
@@ -28,6 +28,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
|
|
|
28
28
|
this.checked = false;
|
|
29
29
|
this.indeterminate = false;
|
|
30
30
|
this.value = undefined;
|
|
31
|
+
this.tdsAriaLabel = undefined;
|
|
32
|
+
this.tdsAriaDescribedby = undefined;
|
|
31
33
|
}
|
|
32
34
|
/** Toggles the checked value of the component. */
|
|
33
35
|
async toggleCheckbox() {
|
|
@@ -56,12 +58,17 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
|
|
|
56
58
|
this.indeterminate = false;
|
|
57
59
|
}
|
|
58
60
|
}
|
|
61
|
+
connectedCallback() {
|
|
62
|
+
if (!this.tdsAriaLabel) {
|
|
63
|
+
console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
|
|
64
|
+
}
|
|
65
|
+
}
|
|
59
66
|
render() {
|
|
60
|
-
return (h("div", { key: '
|
|
67
|
+
return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
|
|
61
68
|
// eslint-disable-next-line no-return-assign
|
|
62
|
-
ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-
|
|
69
|
+
ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
|
|
63
70
|
this.handleChange();
|
|
64
|
-
} }), h("label", { key: '
|
|
71
|
+
} }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
|
|
65
72
|
}
|
|
66
73
|
get host() { return this; }
|
|
67
74
|
static get watchers() { return {
|
|
@@ -76,6 +83,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
|
|
|
76
83
|
"checked": [1540],
|
|
77
84
|
"indeterminate": [1028],
|
|
78
85
|
"value": [1],
|
|
86
|
+
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
87
|
+
"tdsAriaDescribedby": [1, "tds-aria-describedby"],
|
|
79
88
|
"toggleCheckbox": [64]
|
|
80
89
|
}, [[4, "reset", "handleFormReset"]], {
|
|
81
90
|
"indeterminate": ["handleIndeterminateState"]
|
|
@@ -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$3 } from './p-e49a0ceb.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-d61bd22e.js';
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-64019792.js';
|
|
6
6
|
|
|
7
7
|
const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
|
|
8
8
|
const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { a as convertToString } from './p-b1d21573.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-14ab9663.js';
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-64019792.js';
|
|
5
5
|
|
|
6
6
|
const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
|
|
7
7
|
const TdsDropdownOptionStyle0 = dropdownOptionCss;
|