@scania/tegel 1.29.0-fix-modal-reference-element-beta.1 → 1.29.0-health-check-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/loader.cjs.js +1 -1
- package/dist/cjs/tds-body-cell.cjs.entry.js +2 -2
- package/dist/cjs/tds-datetime.cjs.entry.js +1 -1
- package/dist/cjs/tds-header-cell.cjs.entry.js +11 -3
- package/dist/cjs/tds-icon.cjs.entry.js +21 -3
- package/dist/cjs/tds-modal.cjs.entry.js +13 -7
- package/dist/cjs/tds-side-menu.cjs.entry.js +4 -3
- package/dist/cjs/tds-spinner.cjs.entry.js +1 -1
- package/dist/cjs/tds-table-body-input-wrapper.cjs.entry.js +19 -1
- package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js +8 -7
- package/dist/cjs/tds-table-body-row.cjs.entry.js +2 -2
- package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js +1 -1
- package/dist/cjs/tds-table-toolbar.cjs.entry.js +6 -2
- package/dist/cjs/tds-text-field.cjs.entry.js +3 -3
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/datetime/datetime.js +1 -1
- package/dist/collection/components/icon/icon.js +19 -3
- package/dist/{components/p-9b40a24d.js → collection/components/icon/scaniaIconsArray.js} +246 -66
- package/dist/collection/components/icon/tratonIconsArray.js +32 -0
- package/dist/collection/components/modal/modal.js +13 -7
- package/dist/collection/components/side-menu/side-menu.js +4 -3
- package/dist/collection/components/spinner/spinner.css +1 -0
- package/dist/collection/components/table/table-body-cell/table-body-cell.js +2 -2
- package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js +19 -1
- package/dist/collection/components/table/table-body-row/table-body-row.js +2 -2
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js +26 -7
- package/dist/collection/components/table/table-header-cell/table-header-cell.js +29 -3
- package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js +1 -1
- package/dist/collection/components/table/table-toolbar/table-toolbar.js +24 -2
- package/dist/collection/components/text-field/text-field.js +3 -3
- package/dist/collection/types/ScaniaIcons.js +1 -0
- package/dist/collection/types/TratonIcons.js +1 -0
- package/dist/components/{p-9ba3c16e.js → p-090bb1e9.js} +1 -1
- package/dist/components/{p-ce28efb8.js → p-50b1ba5c.js} +1 -1
- package/dist/components/{p-f4c6f29b.js → p-7f02bdf2.js} +1 -1
- package/dist/components/p-adf3fdac.js +85 -0
- package/dist/components/tds-accordion-item.js +1 -1
- package/dist/components/tds-banner.js +1 -1
- package/dist/components/tds-body-cell.js +2 -2
- package/dist/components/tds-datetime.js +2 -2
- 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 +1 -1
- package/dist/components/tds-header-cell.js +13 -4
- 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-tabs.js +1 -1
- package/dist/components/tds-message.js +1 -1
- package/dist/components/tds-modal.js +14 -8
- package/dist/components/tds-navigation-tabs.js +1 -1
- 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-side-menu.js +4 -3
- package/dist/components/tds-slider.js +1 -1
- package/dist/components/tds-spinner.js +1 -1
- package/dist/components/tds-step.js +1 -1
- package/dist/components/tds-table-body-input-wrapper.js +20 -2
- package/dist/components/tds-table-body-row-expandable.js +9 -7
- package/dist/components/tds-table-body-row.js +2 -2
- package/dist/components/tds-table-footer.js +3 -3
- package/dist/components/tds-table-header-input-wrapper.js +2 -2
- package/dist/components/tds-table-toolbar.js +8 -3
- package/dist/components/tds-text-field.js +4 -4
- package/dist/components/tds-textarea.js +1 -1
- package/dist/components/tds-toast.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-body-cell.entry.js +2 -2
- package/dist/esm/tds-datetime.entry.js +1 -1
- package/dist/esm/tds-header-cell.entry.js +11 -3
- package/dist/esm/tds-icon.entry.js +22 -4
- package/dist/esm/tds-modal.entry.js +13 -7
- package/dist/esm/tds-side-menu.entry.js +4 -3
- package/dist/esm/tds-spinner.entry.js +1 -1
- package/dist/esm/tds-table-body-input-wrapper.entry.js +19 -1
- package/dist/esm/tds-table-body-row-expandable.entry.js +8 -7
- package/dist/esm/tds-table-body-row.entry.js +2 -2
- package/dist/esm/tds-table-header-input-wrapper.entry.js +1 -1
- package/dist/esm/tds-table-toolbar.entry.js +6 -2
- package/dist/esm/tds-text-field.entry.js +3 -3
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-07524838.entry.js +1 -0
- package/dist/tegel/p-0cfe8671.entry.js +1 -0
- package/dist/tegel/p-1647691e.entry.js +1 -0
- package/dist/tegel/p-1c0c284b.entry.js +1 -0
- package/dist/tegel/p-1cb3dfc2.entry.js +1 -0
- package/dist/tegel/p-63d60c80.entry.js +1 -0
- package/dist/tegel/p-6a388505.entry.js +1 -0
- package/dist/tegel/p-c1eb973b.entry.js +1 -0
- package/dist/tegel/{p-a10b3a4a.entry.js → p-d7cdbc4e.entry.js} +1 -1
- package/dist/tegel/p-d94b21ce.entry.js +1 -0
- package/dist/tegel/p-ec862374.entry.js +1 -0
- package/dist/tegel/p-f2318c88.entry.js +1 -0
- package/dist/tegel/{p-d515fcdb.entry.js → p-f31f56fe.entry.js} +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/icon/icon.d.ts +3 -1
- package/dist/types/components/table/table-body-input-wrapper/table-body-input-wrapper.d.ts +1 -0
- package/dist/types/components/table/table-body-row-expandable/table-body-row-expandable.d.ts +2 -0
- package/dist/types/components/table/table-header-cell/table-header-cell.d.ts +3 -0
- package/dist/types/components/table/table-toolbar/table-toolbar.d.ts +2 -0
- package/dist/types/components.d.ts +24 -0
- package/dist/types/types/Icons.d.ts +3 -1
- package/dist/types/types/ScaniaIcons.d.ts +1 -0
- package/dist/types/types/TratonIcons.d.ts +1 -0
- package/package.json +1 -1
- package/dist/tegel/p-0e37277e.entry.js +0 -1
- package/dist/tegel/p-1cda8fe6.entry.js +0 -1
- package/dist/tegel/p-2551fd5b.entry.js +0 -1
- package/dist/tegel/p-2fbf2fdb.entry.js +0 -1
- package/dist/tegel/p-5480bed7.entry.js +0 -1
- package/dist/tegel/p-66786ba0.entry.js +0 -1
- package/dist/tegel/p-8f1aead7.entry.js +0 -1
- package/dist/tegel/p-981e6232.entry.js +0 -1
- package/dist/tegel/p-9ef67795.entry.js +0 -1
- package/dist/tegel/p-ba51ab15.entry.js +0 -1
- package/dist/tegel/p-ccbafacd.entry.js +0 -1
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export const iconsCollection =
|
|
2
|
+
'[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
|
|
3
|
+
export const iconsNames = [
|
|
4
|
+
'arrow_diagonal',
|
|
5
|
+
'arrow_down',
|
|
6
|
+
'arrow_left',
|
|
7
|
+
'arrow_right',
|
|
8
|
+
'arrow_up',
|
|
9
|
+
'bento',
|
|
10
|
+
'burger',
|
|
11
|
+
'calendar',
|
|
12
|
+
'chevron_down',
|
|
13
|
+
'chevron_left',
|
|
14
|
+
'chevron_right',
|
|
15
|
+
'chevron_up',
|
|
16
|
+
'cross',
|
|
17
|
+
'edit',
|
|
18
|
+
'error',
|
|
19
|
+
'info',
|
|
20
|
+
'minus',
|
|
21
|
+
'notification',
|
|
22
|
+
'plus',
|
|
23
|
+
'print',
|
|
24
|
+
'refresh',
|
|
25
|
+
'search',
|
|
26
|
+
'share',
|
|
27
|
+
'sorting',
|
|
28
|
+
'star',
|
|
29
|
+
'tick',
|
|
30
|
+
'truck',
|
|
31
|
+
'warning',
|
|
32
|
+
];
|
|
@@ -92,7 +92,7 @@ export class TdsModal {
|
|
|
92
92
|
console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ");
|
|
93
93
|
}
|
|
94
94
|
if (!this.selector && !this.referenceEl) {
|
|
95
|
-
console.warn('Tegel Modal
|
|
95
|
+
console.warn('Tegel Modal: Missing focus origin. Please provide either a "referenceEl" or a "selector" to ensure focus returns to the element that opened the modal. If the modal is opened programmatically, this message can be ignored.');
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
componentWillLoad() {
|
|
@@ -126,11 +126,17 @@ export class TdsModal {
|
|
|
126
126
|
return; // no element to return focus to
|
|
127
127
|
}
|
|
128
128
|
const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
|
|
129
|
-
|
|
130
|
-
if (
|
|
131
|
-
referenceElement
|
|
129
|
+
const isNativeFocusable = potentialReferenceElements.includes(referenceElement.tagName);
|
|
130
|
+
if (isNativeFocusable) {
|
|
131
|
+
referenceElement.focus();
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
// If referenced element is a custom element eg: tds-button we find the interactive element inside:
|
|
135
|
+
const interactiveElement = referenceElement.querySelector(potentialReferenceElements.join(','));
|
|
136
|
+
if (interactiveElement) {
|
|
137
|
+
interactiveElement.focus();
|
|
138
|
+
}
|
|
132
139
|
}
|
|
133
|
-
referenceElement.focus();
|
|
134
140
|
}
|
|
135
141
|
getFocusableElements() {
|
|
136
142
|
const focusableSelectors = [
|
|
@@ -190,10 +196,10 @@ export class TdsModal {
|
|
|
190
196
|
const usesActionsSlot = hasSlot('actions', this.host);
|
|
191
197
|
const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
|
|
192
198
|
const bodyId = `tds-modal-body-${generateUniqueId()}`;
|
|
193
|
-
return (h(Host, { key: '
|
|
199
|
+
return (h(Host, { key: '69513d4841b1f183e585631cf908d9db4a3d4090', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
|
|
194
200
|
show: this.isShown,
|
|
195
201
|
hide: !this.isShown,
|
|
196
|
-
}, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '
|
|
202
|
+
}, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'a3b0008d95219d905b2a2181a7a5bf2621bee424', class: "tds-modal-backdrop" }), h("div", { key: '6093229552cec6db2daa02e0075396d647aebbfe', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '03860fe11a102979eb303079706a71ff9a09f26e', id: headerId, class: "header" }, this.header && h("div", { key: '97aad36c9778d81f4ab4abf1e772b357948cc2b7', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'e3815acb94f296534f8af66b7fa3f0c7b94ac87f', name: "header" }), this.closable && (h("button", { key: '38c1d1eb933a54da361f4d4db7a6f0e27231bf09', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '4172b72fc0d6364a084b1b566f544de5fc9f2297', name: "cross", size: "20px" })))), h("div", { key: '2983cbc611026f5a4f8113c6401c5e4ddab16974', id: bodyId, class: "body" }, h("slot", { key: 'f429ffd8d2f73986b026ff9a75c6e8aa7dcbc8b7', name: "body" })), usesActionsSlot && h("slot", { key: 'f03881eb0365a95fb3540f512b56ea84823532ee', name: "actions" }))));
|
|
197
203
|
}
|
|
198
204
|
static get is() { return "tds-modal"; }
|
|
199
205
|
static get encapsulation() { return "shadow"; }
|
|
@@ -17,6 +17,7 @@ export class TdsSideMenu {
|
|
|
17
17
|
}
|
|
18
18
|
else {
|
|
19
19
|
this.collapsed = this.initialCollapsedState;
|
|
20
|
+
this.open = false;
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
23
|
this.open = false;
|
|
@@ -137,16 +138,16 @@ export class TdsSideMenu {
|
|
|
137
138
|
this.collapsed = event.detail.collapsed;
|
|
138
139
|
}
|
|
139
140
|
render() {
|
|
140
|
-
return (h(Host, { key: '
|
|
141
|
+
return (h(Host, { key: '62d159fdff0e4dd3d2a93e0c5542b8e672e3f287', class: {
|
|
141
142
|
'menu-opened': this.open,
|
|
142
143
|
'menu-persistent': this.persistent,
|
|
143
144
|
'menu-collapsed': this.collapsed,
|
|
144
|
-
}, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '
|
|
145
|
+
}, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '17134ffc1c3ca6658f4ff87c203ca3b6ba991b83', class: {
|
|
145
146
|
'wrapper': true,
|
|
146
147
|
'state-upper-slot-empty': this.isUpperSlotEmpty,
|
|
147
148
|
'state-open': this.open,
|
|
148
149
|
'state-closed': !this.open,
|
|
149
|
-
} }, h("slot", { key: '
|
|
150
|
+
} }, h("slot", { key: '8ed1f309c2188e6de12b874198c36a4698d7a69f', name: "overlay" }), h("aside", { key: '45702b7ff79693b31565550fc1985bfd64e45f92', class: `menu` }, h("div", { key: 'e799983a07a07ad0f4cac8e962e1748d08107b6b', role: "navigation" }, h("slot", { key: '4550b56dae039b94005dd58c8c5cb9818c3ab48a', name: "close-button" }), h("div", { key: 'ad2457482eb6dc9b08428f36078d53143f7b5168', class: "tds-side-menu-wrapper" }, h("ul", { key: '541323ca57ed67565c848a984bd3ac210ce6f135', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: '6248720390640a1166e1158caa0f50164fe1dfad' }, h("slot", { key: 'b3d24d582d4781fef041a2c099681fd538d01910' }))), h("ul", { key: '0a5f76474b4b3851d790ab8f698dbea9fd0fda05', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '576cf3e91cac7c1a21e6b35105475f1f443c2f45' }, h("slot", { key: '71f9c2d1c061401ef26daf68c7801b5665a25d03', name: "end" })))), h("slot", { key: '41805c2bb7c66f74f47edd2393a9a3452132c769', name: "sticky-end" }))))));
|
|
150
151
|
}
|
|
151
152
|
static get is() { return "tds-side-menu"; }
|
|
152
153
|
static get encapsulation() { return "shadow"; }
|
|
@@ -83,13 +83,13 @@ export class TdsTableBodyCell {
|
|
|
83
83
|
// Conditionally set padding style
|
|
84
84
|
padding: paddingStyle,
|
|
85
85
|
};
|
|
86
|
-
return (h(Host, { key: '
|
|
86
|
+
return (h(Host, { key: 'cfabd07f5fb68862ec1afe31679d492593e5a579', class: {
|
|
87
87
|
'tds-table__body-cell': true,
|
|
88
88
|
'tds-table__body-cell--hover': this.activeSorting,
|
|
89
89
|
'tds-table__compact': this.compactDesign,
|
|
90
90
|
'tds-table--divider': this.verticalDividers,
|
|
91
91
|
'tds-table--no-min-width': this.noMinWidth,
|
|
92
|
-
}, style: dynamicStyles }, this.cellValue, h("slot", { key: '
|
|
92
|
+
}, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'cb0466abad9e73f9daed8483304246deb79d37e8' })));
|
|
93
93
|
}
|
|
94
94
|
static get is() { return "tds-body-cell"; }
|
|
95
95
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js
CHANGED
|
@@ -60,10 +60,28 @@ export class TdsTableBodyInputWrapper {
|
|
|
60
60
|
input.addEventListener('blur', () => {
|
|
61
61
|
this.inputFocused = false;
|
|
62
62
|
});
|
|
63
|
+
// Handle Enter key event
|
|
64
|
+
input.addEventListener('keydown', (event) => {
|
|
65
|
+
if (event.key === 'Enter') {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
this.moveToNextEditableCell();
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
moveToNextEditableCell() {
|
|
73
|
+
const allEditableCells = Array.from(document.querySelectorAll('tds-table-body-input-wrapper'));
|
|
74
|
+
const currentIndex = allEditableCells.indexOf(this.host);
|
|
75
|
+
if (currentIndex !== -1 && currentIndex < allEditableCells.length - 1) {
|
|
76
|
+
const nextCell = allEditableCells[currentIndex + 1];
|
|
77
|
+
const nextInput = nextCell.querySelector('input');
|
|
78
|
+
if (nextInput) {
|
|
79
|
+
nextInput.focus();
|
|
80
|
+
}
|
|
63
81
|
}
|
|
64
82
|
}
|
|
65
83
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
|
|
67
85
|
'focused-input-wrapper': this.inputFocused,
|
|
68
86
|
'show-icon': this.showIcon,
|
|
69
87
|
'tds-table__compact': this.compactDesign,
|
|
@@ -68,13 +68,13 @@ export class TdsTableBodyRow {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
render() {
|
|
71
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', tabindex: this.clickable ? '0' : null, class: {
|
|
72
72
|
'tds-table__row': true,
|
|
73
73
|
'tds-table__row--selected': this.selected,
|
|
74
74
|
'tds-table__compact': this.compactDesign,
|
|
75
75
|
'tds-table--divider': this.verticalDividers,
|
|
76
76
|
'tds-table__row--clickable': this.clickable,
|
|
77
|
-
}, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (h("td", { key: '
|
|
77
|
+
}, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
|
|
78
78
|
}
|
|
79
79
|
static get is() { return "tds-table-body-row"; }
|
|
80
80
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js
CHANGED
|
@@ -21,6 +21,7 @@ export class TdsTableBodyRowExpandable {
|
|
|
21
21
|
this.expanded = undefined;
|
|
22
22
|
this.overflow = 'auto';
|
|
23
23
|
this.autoCollapse = false;
|
|
24
|
+
this.tdsAriaLabelExpandButton = '';
|
|
24
25
|
this.isExpanded = false;
|
|
25
26
|
this.tableId = '';
|
|
26
27
|
this.columnsNumber = null;
|
|
@@ -100,26 +101,26 @@ export class TdsTableBodyRowExpandable {
|
|
|
100
101
|
this.sendValue();
|
|
101
102
|
}
|
|
102
103
|
render() {
|
|
103
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', class: {
|
|
104
105
|
'tds-table__row': true,
|
|
105
106
|
'tds-table__row-expand--active': this.isExpanded,
|
|
106
107
|
'tds-table__compact': this.compactDesign,
|
|
107
108
|
'tds-table--divider': this.verticalDividers,
|
|
108
|
-
} }, h("tr", { key: '
|
|
109
|
+
} }, h("tr", { key: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
|
|
109
110
|
'tds-table__row': true,
|
|
110
111
|
'tds-table__row--expanded': this.isExpanded,
|
|
111
|
-
}, part: "row" }, h("td", { key: '
|
|
112
|
+
}, part: "row" }, h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
|
|
112
113
|
'tds-table__cell-expand': true,
|
|
113
|
-
} }, h("label", { key: '
|
|
114
|
+
} }, h("label", { key: 'c878be3429a3145b62b242f2e3d9c90ec0a74257', class: "tds-table__expand-control-container" }, h("input", { key: '6b99ef165e359012f83f7e298d9f83319493fc52', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'ec9e1aefc553362c0c3e15cb99118a9c2dfffd04', class: "tds-expendable-row-icon" }, h("svg", { key: '84b3270e5f1bfc7671adcea34d862fe0485f40a8', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'fc04209a4a2d35c19c7c74875c0ab302077abbf2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '0c16341da217fbe920241a97b179335cb61e2364' })), h("tr", { key: 'a83ca5c30ec4945dfee096a408db4d1d240d3643', class: {
|
|
114
115
|
'tds-table__row-expand': true,
|
|
115
116
|
'tds-table__row-expand--expanded': this.isExpanded,
|
|
116
|
-
}, part: "expand-row" }, h("td", { key: '
|
|
117
|
+
}, part: "expand-row" }, h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
|
|
117
118
|
'tds-table__cell-expand': true,
|
|
118
119
|
'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
|
|
119
120
|
'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
|
|
120
|
-
}, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '
|
|
121
|
+
}, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
|
|
121
122
|
overflow: this.overflow,
|
|
122
|
-
} }, h("slot", { key: '
|
|
123
|
+
} }, h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
|
|
123
124
|
}
|
|
124
125
|
static get is() { return "tds-table-body-row-expandable"; }
|
|
125
126
|
static get encapsulation() { return "shadow"; }
|
|
@@ -223,6 +224,24 @@ export class TdsTableBodyRowExpandable {
|
|
|
223
224
|
"attribute": "auto-collapse",
|
|
224
225
|
"reflect": false,
|
|
225
226
|
"defaultValue": "false"
|
|
227
|
+
},
|
|
228
|
+
"tdsAriaLabelExpandButton": {
|
|
229
|
+
"type": "string",
|
|
230
|
+
"mutable": false,
|
|
231
|
+
"complexType": {
|
|
232
|
+
"original": "string",
|
|
233
|
+
"resolved": "string",
|
|
234
|
+
"references": {}
|
|
235
|
+
},
|
|
236
|
+
"required": false,
|
|
237
|
+
"optional": false,
|
|
238
|
+
"docs": {
|
|
239
|
+
"tags": [],
|
|
240
|
+
"text": "Aria label for the expand button, providing an accessible description"
|
|
241
|
+
},
|
|
242
|
+
"attribute": "tds-aria-label-expand-button",
|
|
243
|
+
"reflect": true,
|
|
244
|
+
"defaultValue": "''"
|
|
226
245
|
}
|
|
227
246
|
};
|
|
228
247
|
}
|
|
@@ -31,7 +31,7 @@ export class TdsTableHeaderCell {
|
|
|
31
31
|
};
|
|
32
32
|
this.headerCellContent = () => {
|
|
33
33
|
if (this.sortable) {
|
|
34
|
-
return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState } }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
|
|
34
|
+
return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState }, "aria-label": this.tdsAriaLabelSortButton }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { svgTitle: "sorting", class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { svgTitle: "arrow down", class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
|
|
35
35
|
}
|
|
36
36
|
return (h("p", { class: {
|
|
37
37
|
'tds-table__header-text': true,
|
|
@@ -50,6 +50,7 @@ export class TdsTableHeaderCell {
|
|
|
50
50
|
this.sortable = false;
|
|
51
51
|
this.textAlign = 'left';
|
|
52
52
|
this.disablePadding = false;
|
|
53
|
+
this.tdsAriaLabelSortButton = '';
|
|
53
54
|
this.textAlignState = undefined;
|
|
54
55
|
this.sortingDirection = undefined;
|
|
55
56
|
this.sortedByMyKey = false;
|
|
@@ -104,8 +105,15 @@ export class TdsTableHeaderCell {
|
|
|
104
105
|
this.enableToolbarDesign =
|
|
105
106
|
this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
|
|
106
107
|
}
|
|
108
|
+
getAriaSort() {
|
|
109
|
+
if (this.sortingDirection === 'asc')
|
|
110
|
+
return 'ascending';
|
|
111
|
+
if (this.sortingDirection === 'desc')
|
|
112
|
+
return 'descending';
|
|
113
|
+
return 'none';
|
|
114
|
+
}
|
|
107
115
|
render() {
|
|
108
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: 'f128527938679fe448019802ea76cda1a57d75be', class: {
|
|
109
117
|
'tds-table__header-cell': true,
|
|
110
118
|
'tds-table__header-cell--sortable': this.sortable,
|
|
111
119
|
'tds-table__header-cell--is-sorted': this.sortedByMyKey,
|
|
@@ -116,7 +124,7 @@ export class TdsTableHeaderCell {
|
|
|
116
124
|
'tds-table--extra-column': this.multiselect || this.expandableRows,
|
|
117
125
|
'tds-table--toolbar-available': this.enableToolbarDesign,
|
|
118
126
|
'tds-table--no-padding': this.disablePadding,
|
|
119
|
-
}, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
|
|
127
|
+
}, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
|
|
120
128
|
}
|
|
121
129
|
static get is() { return "tds-header-cell"; }
|
|
122
130
|
static get encapsulation() { return "shadow"; }
|
|
@@ -236,6 +244,24 @@ export class TdsTableHeaderCell {
|
|
|
236
244
|
"attribute": "disable-padding",
|
|
237
245
|
"reflect": true,
|
|
238
246
|
"defaultValue": "false"
|
|
247
|
+
},
|
|
248
|
+
"tdsAriaLabelSortButton": {
|
|
249
|
+
"type": "string",
|
|
250
|
+
"mutable": false,
|
|
251
|
+
"complexType": {
|
|
252
|
+
"original": "string",
|
|
253
|
+
"resolved": "string",
|
|
254
|
+
"references": {}
|
|
255
|
+
},
|
|
256
|
+
"required": false,
|
|
257
|
+
"optional": true,
|
|
258
|
+
"docs": {
|
|
259
|
+
"tags": [],
|
|
260
|
+
"text": "Aria label for the sort button, providing an accessible description"
|
|
261
|
+
},
|
|
262
|
+
"attribute": "tds-aria-label-sort-button",
|
|
263
|
+
"reflect": true,
|
|
264
|
+
"defaultValue": "''"
|
|
239
265
|
}
|
|
240
266
|
};
|
|
241
267
|
}
|
package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js
CHANGED
|
@@ -67,7 +67,7 @@ export class TdsTableHeaderInputWrapper {
|
|
|
67
67
|
'focused-input-wrapper': this.inputFocused,
|
|
68
68
|
'show-icon': this.showIcon,
|
|
69
69
|
'tds-table__compact': this.compactDesign,
|
|
70
|
-
} }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
|
|
70
|
+
} }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
|
|
71
71
|
}
|
|
72
72
|
static get is() { return "tds-table-header-input-wrapper"; }
|
|
73
73
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,6 +12,7 @@ export class TdsTableToolbar {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
this.tableTitle = '';
|
|
14
14
|
this.filter = false;
|
|
15
|
+
this.tdsSearchAriaLabel = '';
|
|
15
16
|
this.verticalDividers = false;
|
|
16
17
|
this.compactDesign = false;
|
|
17
18
|
this.noMinWidth = false;
|
|
@@ -34,6 +35,9 @@ export class TdsTableToolbar {
|
|
|
34
35
|
connectedCallback() {
|
|
35
36
|
this.tableEl = this.host.closest('tds-table');
|
|
36
37
|
this.tableId = this.tableEl.tableId;
|
|
38
|
+
if (!this.tdsSearchAriaLabel) {
|
|
39
|
+
console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
|
|
40
|
+
}
|
|
37
41
|
}
|
|
38
42
|
componentWillLoad() {
|
|
39
43
|
relevantTableProps.forEach((tablePropName) => {
|
|
@@ -63,10 +67,10 @@ export class TdsTableToolbar {
|
|
|
63
67
|
return styles;
|
|
64
68
|
}
|
|
65
69
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: '063779da774e1040065cb68412e1e57f9b5a700c', class: {
|
|
67
71
|
'tds-table--compact': this.compactDesign,
|
|
68
72
|
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
|
|
69
|
-
}, style: this.getStyles() }, h("div", { key: '
|
|
73
|
+
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '2bdef8894ab761fbdce8a1074d81c7af252b75be', class: "tds-table__upper-bar-flex" }, h("caption", { key: '031e3ecf77cd9a988f3c256383595aa1348215a0', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle), h("div", { key: 'fe49c2d76c2cc64350b81b6a36db4dd40ef83e58', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '7cb0de70a472d969fa99374b4c70b0dd170c07fc', class: "tds-table__searchbar" }, h("input", { key: '0afebcf7ebf0b5e040f975667e87c32ba4f56aed', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: 'c9e90eb15de675efe7a4a4552af1089036027c25', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '64fa664f000a0419b6807b1a639da85c426cb4f2', name: "search", size: "20px" })))), h("slot", { key: '3f18fa9b8877bcec0e3af488dbbbd77c5e09d53c', name: "end" })))));
|
|
70
74
|
}
|
|
71
75
|
static get is() { return "tds-table-toolbar"; }
|
|
72
76
|
static get encapsulation() { return "shadow"; }
|
|
@@ -117,6 +121,24 @@ export class TdsTableToolbar {
|
|
|
117
121
|
"attribute": "filter",
|
|
118
122
|
"reflect": true,
|
|
119
123
|
"defaultValue": "false"
|
|
124
|
+
},
|
|
125
|
+
"tdsSearchAriaLabel": {
|
|
126
|
+
"type": "string",
|
|
127
|
+
"mutable": false,
|
|
128
|
+
"complexType": {
|
|
129
|
+
"original": "string",
|
|
130
|
+
"resolved": "string",
|
|
131
|
+
"references": {}
|
|
132
|
+
},
|
|
133
|
+
"required": false,
|
|
134
|
+
"optional": false,
|
|
135
|
+
"docs": {
|
|
136
|
+
"tags": [],
|
|
137
|
+
"text": "Aria label for the search input, providing an accessible description"
|
|
138
|
+
},
|
|
139
|
+
"attribute": "tds-search-aria-label",
|
|
140
|
+
"reflect": false,
|
|
141
|
+
"defaultValue": "''"
|
|
120
142
|
}
|
|
121
143
|
};
|
|
122
144
|
}
|
|
@@ -99,7 +99,7 @@ export class TdsTextField {
|
|
|
99
99
|
'text-field-error': this.state === 'error',
|
|
100
100
|
'text-field-success': this.state === 'success',
|
|
101
101
|
'text-field-default': this.state === 'default',
|
|
102
|
-
} }, h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: '
|
|
102
|
+
} }, h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: 'd5d238312f2c4fd2179892995165a7263d12a7bd', ref: (inputEl) => {
|
|
103
103
|
this.textInput = inputEl;
|
|
104
104
|
}, class: {
|
|
105
105
|
'text-field-input': true,
|
|
@@ -114,13 +114,13 @@ export class TdsTextField {
|
|
|
114
114
|
if (!this.readOnly) {
|
|
115
115
|
this.handleBlur(event);
|
|
116
116
|
}
|
|
117
|
-
}, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby":
|
|
117
|
+
}, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '9d3cadd3c28ae4f198d5ddc142ef02d7535e9def', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '6df4af20de96ef2c081fed3ae765e4982cd836bd', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '38b4ee5a2639c26f7e66f8ac4449fac3c90cf753', class: {
|
|
118
118
|
'text-field-slot-wrap-suffix': true,
|
|
119
119
|
'text-field-error': this.state === 'error',
|
|
120
120
|
'text-field-success': this.state === 'success',
|
|
121
121
|
'text-field-default': this.state === 'default',
|
|
122
122
|
'tds-u-display-none': this.readOnly,
|
|
123
|
-
} }, h("slot", { key: '
|
|
123
|
+
} }, h("slot", { key: 'a320cf2cabe3de76c4605a0cd4ed8925d7ceac17', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '02ca8a9c4afdb8570abb8e848c87d84b3cb470db', class: "text-field-icon__readonly" }, h("tds-icon", { key: '8774ad6177bd0007cf1c62b15a7bca4ad32b8e1e', name: "edit_inactive", size: "20px" }))), h("span", { key: '81ebfc7038ea8cc5c55abafb142d19102171b931', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'bb636ecc8feb14ae6d65828f8642eaade8af5a77', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '5f5c356778771e62d89b392e440de717bd2c98f1', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '26b094a392c6ffa39bdbd5b3e4be1d312a6afb34', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'c2c968f2d161a54955da370780fea6caeeb683d3', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '70534a98310d79bd6e9de45671e4f0035c3d6c9a', class: {
|
|
124
124
|
'text-field-textcounter-divider': true,
|
|
125
125
|
'text-field-textcounter-disabled': this.disabled,
|
|
126
126
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -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 { c as convertToString } from './p-a1181b1f.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-1ef7423a.js';
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-adf3fdac.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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-adf3fdac.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Find the next focusable element index in a list of focusable elements.
|
|
@@ -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-e1622f4a.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-7dbc1182.js';
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-adf3fdac.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;
|