@scania/tegel 1.30.0 → 1.31.1-feat-button-name-attribute-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-accordion-item.cjs.entry.js +25 -3
- package/dist/cjs/tds-button.cjs.entry.js +5 -4
- package/dist/cjs/tds-folder-tab.cjs.entry.js +2 -2
- package/dist/cjs/tds-folder-tabs.cjs.entry.js +2 -2
- package/dist/cjs/tds-inline-tab.cjs.entry.js +2 -2
- package/dist/cjs/tds-inline-tabs.cjs.entry.js +2 -2
- package/dist/cjs/tds-modal.cjs.entry.js +14 -4
- package/dist/cjs/tds-navigation-tab.cjs.entry.js +2 -2
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +4 -4
- package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
- package/dist/cjs/tds-table-toolbar.cjs.entry.js +3 -3
- package/dist/cjs/tds-text-field.cjs.entry.js +5 -5
- package/dist/cjs/tds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/tds-toast.cjs.entry.js +3 -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/accordion/accordion-item/accordion-item.js +77 -4
- package/dist/collection/components/button/button.css +11 -11
- package/dist/collection/components/button/button.js +21 -3
- package/dist/collection/components/modal/modal.js +45 -4
- package/dist/collection/components/popover-core/tds-popover-core.css +843 -12
- package/dist/collection/components/table/table-toolbar/table-toolbar.css +6 -1
- package/dist/collection/components/table/table-toolbar/table-toolbar.js +3 -2
- package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js +2 -2
- package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +2 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js +2 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +2 -2
- package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js +2 -2
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +4 -4
- package/dist/collection/components/text-field/text-field.js +5 -5
- package/dist/collection/components/textarea/textarea.js +3 -3
- package/dist/collection/components/toast/toast.js +3 -3
- package/dist/collection/components/toggle/toggle.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/components/{p-d4fa1832.js → p-516d8085.js} +1 -1
- package/dist/components/{p-a2dafd0e.js → p-69109003.js} +3 -3
- package/dist/components/p-96e83134.js +2098 -0
- package/dist/components/tds-accordion-item.js +30 -5
- package/dist/components/tds-button.js +6 -4
- package/dist/components/tds-folder-tab.js +2 -2
- package/dist/components/tds-folder-tabs.js +2 -2
- package/dist/components/tds-header-dropdown.js +2 -2
- package/dist/components/tds-header-launcher.js +2 -2
- package/dist/components/tds-inline-tab.js +2 -2
- package/dist/components/tds-inline-tabs.js +2 -2
- package/dist/components/tds-modal.js +15 -4
- package/dist/components/tds-navigation-tab.js +2 -2
- package/dist/components/tds-navigation-tabs.js +4 -4
- package/dist/components/tds-popover-canvas.js +1 -1
- package/dist/components/tds-popover-core.js +1 -1
- package/dist/components/tds-popover-menu.js +1 -1
- package/dist/components/tds-table-toolbar.js +3 -3
- package/dist/components/tds-text-field.js +5 -5
- package/dist/components/tds-textarea.js +5 -5
- package/dist/components/tds-toast.js +3 -3
- package/dist/components/tds-toggle.js +2 -2
- package/dist/components/tds-tooltip.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-accordion-item.entry.js +25 -3
- package/dist/esm/tds-button.entry.js +5 -4
- package/dist/esm/tds-folder-tab.entry.js +2 -2
- package/dist/esm/tds-folder-tabs.entry.js +2 -2
- package/dist/esm/tds-inline-tab.entry.js +2 -2
- package/dist/esm/tds-inline-tabs.entry.js +2 -2
- package/dist/esm/tds-modal.entry.js +14 -4
- package/dist/esm/tds-navigation-tab.entry.js +2 -2
- package/dist/esm/tds-navigation-tabs.entry.js +4 -4
- package/dist/esm/tds-popover-core.entry.js +1 -1
- package/dist/esm/tds-table-toolbar.entry.js +3 -3
- package/dist/esm/tds-text-field.entry.js +5 -5
- package/dist/esm/tds-textarea.entry.js +3 -3
- package/dist/esm/tds-toast.entry.js +3 -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-a1262f8f.entry.js → p-106e048d.entry.js} +1 -1
- package/dist/tegel/{p-2286d4c3.entry.js → p-10dfd194.entry.js} +1 -1
- package/dist/tegel/p-1297d40e.entry.js +1 -0
- package/dist/tegel/{p-0ca95c76.entry.js → p-212e1fff.entry.js} +1 -1
- package/dist/tegel/p-2b8e97e1.entry.js +1 -0
- package/dist/tegel/p-2c36022d.entry.js +1 -0
- package/dist/tegel/p-3a92d554.entry.js +1 -0
- package/dist/tegel/p-3e4707fb.entry.js +1 -0
- package/dist/tegel/p-3f81c19a.entry.js +1 -0
- package/dist/tegel/{p-2774f177.entry.js → p-46b66490.entry.js} +1 -1
- package/dist/tegel/{p-1116da44.entry.js → p-52adc30c.entry.js} +1 -1
- package/dist/tegel/{p-87ba6285.entry.js → p-64be21db.entry.js} +1 -1
- package/dist/tegel/{p-d29a777f.entry.js → p-67b4b2cf.entry.js} +1 -1
- package/dist/tegel/{p-e7a452a8.entry.js → p-76faaf70.entry.js} +1 -1
- package/dist/tegel/{p-9d8bb017.entry.js → p-78823da3.entry.js} +1 -1
- package/dist/tegel/p-b58c7bed.entry.js +1 -0
- package/dist/tegel/tegel.css +2 -2
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +6 -0
- package/dist/types/components/button/button.d.ts +2 -0
- package/dist/types/components/modal/modal.d.ts +6 -2
- package/dist/types/components/table/table-toolbar/table-toolbar.d.ts +1 -0
- package/dist/types/components.d.ts +29 -0
- package/package.json +6 -1
- package/dist/components/p-2e25c35b.js +0 -2098
- package/dist/tegel/p-0955d5fc.entry.js +0 -1
- package/dist/tegel/p-26e8f033.entry.js +0 -1
- package/dist/tegel/p-5ade1970.entry.js +0 -1
- package/dist/tegel/p-b6a4f459.entry.js +0 -1
- package/dist/tegel/p-c3d91dfa.entry.js +0 -1
- package/dist/tegel/p-d38039b3.entry.js +0 -1
- package/dist/tegel/p-d56f426f.entry.js +0 -1
|
@@ -18,14 +18,19 @@
|
|
|
18
18
|
display: flex;
|
|
19
19
|
justify-content: space-between;
|
|
20
20
|
}
|
|
21
|
+
:host .tds-table__actionbar-left {
|
|
22
|
+
display: flex;
|
|
23
|
+
}
|
|
21
24
|
:host .tds-table__title {
|
|
22
25
|
font: var(--tds-headline-07);
|
|
23
26
|
letter-spacing: var(--tds-headline-07-ls);
|
|
24
27
|
padding-top: var(--tds-spacing-element-16);
|
|
25
28
|
text-align: left;
|
|
29
|
+
margin-right: var(--tds-spacing-element-8);
|
|
26
30
|
}
|
|
27
31
|
:host .tds-table__actionbar,
|
|
28
|
-
:host slot[name=end]::slotted(*)
|
|
32
|
+
:host slot[name=end]::slotted(*),
|
|
33
|
+
:host slot[name=start]::slotted(*) {
|
|
29
34
|
display: flex;
|
|
30
35
|
align-self: center;
|
|
31
36
|
}
|
|
@@ -6,6 +6,7 @@ const relevantTableProps = [
|
|
|
6
6
|
'horizontalScrollWidth',
|
|
7
7
|
];
|
|
8
8
|
/**
|
|
9
|
+
* @slot start - Slot for the start (left side) of the Table Toolbar.
|
|
9
10
|
* @slot end - Slot for the end (right side) of the Table Toolbar.
|
|
10
11
|
*/
|
|
11
12
|
export class TdsTableToolbar {
|
|
@@ -67,10 +68,10 @@ export class TdsTableToolbar {
|
|
|
67
68
|
return styles;
|
|
68
69
|
}
|
|
69
70
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
|
|
71
72
|
'tds-table--compact': this.compactDesign,
|
|
72
73
|
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
|
|
73
|
-
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '
|
|
74
|
+
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
|
|
74
75
|
}
|
|
75
76
|
static get is() { return "tds-table-toolbar"; }
|
|
76
77
|
static get encapsulation() { return "shadow"; }
|
|
@@ -35,10 +35,10 @@ export class TdsFolderTab {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
|
|
39
39
|
selected: this.selected,
|
|
40
40
|
disabled: this.disabled,
|
|
41
|
-
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '
|
|
41
|
+
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
|
|
42
42
|
}
|
|
43
43
|
static get is() { return "tds-folder-tab"; }
|
|
44
44
|
static get encapsulation() { return "shadow"; }
|
|
@@ -162,9 +162,9 @@ export class TdsFolderTabs {
|
|
|
162
162
|
this.removeEventListenerFromTabs();
|
|
163
163
|
}
|
|
164
164
|
render() {
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
|
|
166
166
|
this.navWrapperElement = el;
|
|
167
|
-
} }, h("button", { key: '
|
|
167
|
+
} }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
|
|
168
168
|
}
|
|
169
169
|
static get is() { return "tds-folder-tabs"; }
|
|
170
170
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,11 +30,11 @@ export class TdsInlineTab {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
|
|
34
34
|
'inline-tab-item': true,
|
|
35
35
|
'selected': this.selected,
|
|
36
36
|
'disabled': this.disabled,
|
|
37
|
-
} }, h("slot", { key: '
|
|
37
|
+
} }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "tds-inline-tab"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -169,9 +169,9 @@ export class TdsInlineTabs {
|
|
|
169
169
|
this.removeEventListenerFromTabs();
|
|
170
170
|
}
|
|
171
171
|
render() {
|
|
172
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
|
|
173
173
|
this.navWrapperElement = el;
|
|
174
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
174
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '9b97d342cfe66209063b504b49480d587cd626d5', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a447ce946eb5bc02a2527f210322aa76ca5ad5b8', name: "chevron_left", size: "20px" })), h("slot", { key: '1df34e68bbea35ef76de48e7b8fe96b3a8655792', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7c753dd66c173265c32a7b49197df12fbecc78d1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f76934b67470db5ff6ddb6fbae86f87fd3d0bdee', name: "chevron_right", size: "20px" })))));
|
|
175
175
|
}
|
|
176
176
|
static get is() { return "tds-inline-tabs"; }
|
|
177
177
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,8 +30,8 @@ export class TdsNavigationTab {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
34
|
-
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '
|
|
33
|
+
return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
|
|
34
|
+
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
|
|
35
35
|
}
|
|
36
36
|
static get is() { return "tds-navigation-tab"; }
|
|
37
37
|
static get encapsulation() { return "shadow"; }
|
|
@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
|
|
|
169
169
|
this.removeEventListenerFromTabs();
|
|
170
170
|
}
|
|
171
171
|
render() {
|
|
172
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
|
|
173
173
|
this.navWrapperElement = el;
|
|
174
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
174
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
|
|
175
175
|
'scroll-left-button': true,
|
|
176
176
|
'show': this.showLeftScroll,
|
|
177
|
-
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '
|
|
177
|
+
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
|
|
178
178
|
'scroll-right-button': true,
|
|
179
179
|
'show': this.showRightScroll,
|
|
180
|
-
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '
|
|
180
|
+
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
|
|
181
181
|
}
|
|
182
182
|
static get is() { return "tds-navigation-tabs"; }
|
|
183
183
|
static get encapsulation() { return "shadow"; }
|
|
@@ -76,7 +76,7 @@ export class TdsTextField {
|
|
|
76
76
|
var _a;
|
|
77
77
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
78
78
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
79
|
-
return (h("div", { key: '
|
|
79
|
+
return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
|
|
80
80
|
'form-text-field': true,
|
|
81
81
|
'form-text-field-nomin': this.noMinWidth,
|
|
82
82
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -94,12 +94,12 @@ export class TdsTextField {
|
|
|
94
94
|
'form-text-field-sm': this.size === 'sm',
|
|
95
95
|
'form-text-field-error': this.state === 'error',
|
|
96
96
|
'form-text-field-success': this.state === 'success',
|
|
97
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
97
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
|
|
98
98
|
'text-field-slot-wrap-prefix': true,
|
|
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: '
|
|
102
|
+
} }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', 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": `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: '
|
|
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: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', 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: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-icon", { key: '56b8b76a5771889f9f36ab683dcba6906bff42a6', name: "edit_inactive", size: "20px" }))), h("span", { key: '9e8fa95602a1ce5630f30947b59decc700c06c8b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '9e8547e06a25e7da98ff977ac6be1b79d27e4151', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'daeea67a48a15d27785f31dfcb69fb75e31ab85b', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '974bad3f97b23d69a20130bf66b6c72ef47f68bc', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '687cad3cb0451a262f836089851e9a2e08f2c74e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '431709fb793dde8845b20698e722a7c140bb32b6', 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)))))));
|
|
@@ -58,7 +58,7 @@ export class TdsTextarea {
|
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
var _a;
|
|
61
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: 'b6ab60b15126cf19df75b05976c1180252bfea65', class: {
|
|
62
62
|
'textarea-container': true,
|
|
63
63
|
'textarea-label-inside': this.labelPosition === 'inside',
|
|
64
64
|
'textarea-focus': this.focusInput,
|
|
@@ -68,7 +68,7 @@ export class TdsTextarea {
|
|
|
68
68
|
'textarea-data': this.value !== '',
|
|
69
69
|
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
|
|
70
70
|
'no-min-width': this.noMinWidth,
|
|
71
|
-
} }, this.labelPosition !== 'no-label' && (h("label", { key: '
|
|
71
|
+
} }, this.labelPosition !== 'no-label' && (h("label", { key: '8bb63e248f9f36fabd2811280cc2d5e91c64f979', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '1271be9d8521ba7ccdd66c1e519b64ac6417554e', class: "textarea-wrapper" }, h("textarea", { key: 'f87a6c0b28df9c48fbba38b4b9b9a0d39b2c7d87', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
|
|
72
72
|
this.textEl = inputEl;
|
|
73
73
|
}, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
|
|
74
74
|
if (!this.readOnly) {
|
|
@@ -78,7 +78,7 @@ export class TdsTextarea {
|
|
|
78
78
|
if (!this.readOnly) {
|
|
79
79
|
this.handleBlur(event);
|
|
80
80
|
}
|
|
81
|
-
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '
|
|
81
|
+
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '211744dccbb93dfee49194d68b76828291666f26', class: "textarea-resizer-icon" }, h("svg", { key: '003dab848372c2990b55ce1d493ad6466f36d19d', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '79e2bd76ed400c27fb66a7abb5eafcdc2f2ea2ee', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'b1514ff5b6c4ba0164991bc685779d5642e7dbfa', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '3fc21e5386f0fd112da214e218027fa283cda70a', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '6e3f4513c3cea8256a0e1da440f9ba12b8e2f45d', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '10332770b3e59d89fe778140dbf37e1f4a8d86cb', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'a18110ca6e2fd5c8957ec78dd7cf57ce3722ff46', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '1b700f79ec9c337ede9d16956f25512afa54b77c', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'b9a7da0390bdf25a7fe614f12694f6754b840b30', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
82
82
|
}
|
|
83
83
|
static get is() { return "tds-textarea"; }
|
|
84
84
|
static get encapsulation() { return "scoped"; }
|
|
@@ -65,12 +65,12 @@ export class TdsToast {
|
|
|
65
65
|
const usesHeaderSlot = hasSlot('header', this.host);
|
|
66
66
|
const usesSubheaderSlot = hasSlot('subheader', this.host);
|
|
67
67
|
const usesActionsSlot = hasSlot('actions', this.host);
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
|
|
69
69
|
hide: this.hidden,
|
|
70
70
|
show: !this.hidden,
|
|
71
|
-
} }, h("div", { key: '
|
|
71
|
+
} }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
|
|
72
72
|
wrapper
|
|
73
|
-
${this.variant}` }, h("tds-icon", { key: '
|
|
73
|
+
${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
|
|
74
74
|
}
|
|
75
75
|
static get is() { return "tds-toast"; }
|
|
76
76
|
static get encapsulation() { return "shadow"; }
|
|
@@ -38,10 +38,10 @@ export class TdsToggle {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("div", { key: '
|
|
41
|
+
return (h("div", { key: '01d3faf866451cf2e09694d614b1cca9defa1f69', class: "tds-toggle" }, this.headline && (h("div", { key: '2809bf2c3653c20ca6b93280b3391255b2285d8c', class: {
|
|
42
42
|
'toggle-headline': true,
|
|
43
43
|
'disabled': this.disabled,
|
|
44
|
-
} }, this.headline)), h("input", { key: '
|
|
44
|
+
} }, this.headline)), h("input", { key: '52ab62b4d4c506ca74533ffafc68247accae612b', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '73f43d7134ff9a9ecded6b8b153b1590014e2a80', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'efe7c2a3f76f9990a00b1156d66b78c0e26e6411', name: "label" })))));
|
|
45
45
|
}
|
|
46
46
|
static get is() { return "tds-toggle"; }
|
|
47
47
|
static get encapsulation() { return "scoped"; }
|
|
@@ -58,7 +58,7 @@ export class TdsTooltip {
|
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
var _a;
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
|
|
62
62
|
'tds-tooltip': true,
|
|
63
63
|
[`tds-tooltip-${this.border}`]: true,
|
|
64
64
|
[(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
|
|
@@ -71,7 +71,7 @@ export class TdsTooltip {
|
|
|
71
71
|
// @ts-ignore
|
|
72
72
|
onInternalTdsClose: () => {
|
|
73
73
|
this.show = false;
|
|
74
|
-
}, defaultShow: this.defaultShow }), this.text, h("slot", { key: '
|
|
74
|
+
}, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
|
|
75
75
|
}
|
|
76
76
|
static get is() { return "tds-tooltip"; }
|
|
77
77
|
static get encapsulation() { return "scoped"; }
|
|
@@ -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$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-96e83134.js';
|
|
4
4
|
|
|
5
5
|
const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);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-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
|
|
6
6
|
const TdsPopoverCanvasStyle0 = popoverCanvasCss;
|
|
@@ -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$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-96e83134.js';
|
|
4
4
|
|
|
5
5
|
const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
|
|
6
6
|
const TdsTooltipStyle0 = tooltipCss;
|
|
@@ -62,7 +62,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
|
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
64
|
var _a;
|
|
65
|
-
return (h(Host, { key: '
|
|
65
|
+
return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
|
|
66
66
|
'tds-tooltip': true,
|
|
67
67
|
[`tds-tooltip-${this.border}`]: true,
|
|
68
68
|
[(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
|
|
@@ -75,7 +75,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
|
|
|
75
75
|
// @ts-ignore
|
|
76
76
|
onInternalTdsClose: () => {
|
|
77
77
|
this.show = false;
|
|
78
|
-
}, defaultShow: this.defaultShow }), this.text, h("slot", { key: '
|
|
78
|
+
}, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
|
|
79
79
|
}
|
|
80
80
|
get host() { return this; }
|
|
81
81
|
static get style() { return TdsTooltipStyle0; }
|