@scania/tegel 1.15.0-table-issue-beta.0 → 1.16.0-tdsheaderitems-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 +4 -8
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-body-cell.cjs.entry.js +2 -3
- package/dist/cjs/{tds-dropdown.cjs.entry.js → tds-dropdown_2.cjs.entry.js} +93 -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-header-cell.cjs.entry.js +1 -1
- package/dist/cjs/tds-header.cjs.entry.js +10 -1
- 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-navigation-tab.cjs.entry.js +2 -2
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +2 -2
- package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js +10 -7
- package/dist/cjs/tds-table-body.cjs.entry.js +14 -7
- package/dist/cjs/tds-table-footer.cjs.entry.js +41 -16
- package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js +1 -1
- package/dist/cjs/tds-table-header.cjs.entry.js +2 -2
- package/dist/cjs/tds-table-toolbar.cjs.entry.js +2 -2
- package/dist/cjs/tds-table.cjs.entry.js +8 -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 +1 -1
- package/dist/cjs/tds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +6 -0
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +1 -1
- package/dist/collection/components/dropdown/dropdown.css +13 -0
- package/dist/collection/components/dropdown/dropdown.js +5 -5
- package/dist/collection/components/header/header.js +10 -1
- package/dist/collection/components/table/table/table.js +28 -3
- package/dist/collection/components/table/table-body/table-body.css +28 -0
- package/dist/collection/components/table/table-body/table-body.js +14 -6
- package/dist/collection/components/table/table-body-cell/table-body-cell.js +2 -4
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +1 -1
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js +29 -8
- package/dist/collection/components/table/table-footer/table-footer.css +10 -0
- package/dist/collection/components/table/table-footer/table-footer.js +78 -18
- package/dist/collection/components/table/table-header/table-header.js +2 -2
- package/dist/collection/components/table/table-header-cell/table-header-cell.js +1 -1
- 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 +2 -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 +2 -2
- 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 +1 -1
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/{esm/tds-dropdown-option.entry.js → components/p-1c256b8d.js} +45 -10
- package/dist/{esm/tds-dropdown.entry.js → components/p-e7eab204.js} +61 -12
- package/dist/components/tds-body-cell.js +2 -4
- package/dist/components/tds-dropdown-option.js +1 -124
- package/dist/components/tds-dropdown.js +1 -509
- package/dist/components/tds-folder-tab.js +2 -2
- package/dist/components/tds-folder-tabs.js +2 -2
- package/dist/components/tds-header-cell.js +1 -1
- package/dist/components/tds-header.js +10 -1
- package/dist/components/tds-inline-tab.js +2 -2
- package/dist/components/tds-inline-tabs.js +2 -2
- package/dist/components/tds-navigation-tab.js +2 -2
- package/dist/components/tds-navigation-tabs.js +2 -2
- package/dist/components/tds-table-body-row-expandable.js +11 -7
- package/dist/components/tds-table-body.js +15 -7
- package/dist/components/tds-table-footer.js +64 -18
- package/dist/components/tds-table-header-input-wrapper.js +1 -1
- package/dist/components/tds-table-header.js +2 -2
- package/dist/components/tds-table-toolbar.js +2 -2
- package/dist/components/tds-table.js +10 -3
- package/dist/components/tds-text-field.js +5 -5
- package/dist/components/tds-textarea.js +3 -3
- package/dist/components/tds-toast.js +3 -3
- package/dist/components/tds-toggle.js +1 -1
- package/dist/components/tds-tooltip.js +2 -2
- package/dist/esm/index-51d04e39.js +4 -8
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-body-cell.entry.js +2 -3
- package/dist/esm/tds-dropdown_2.entry.js +550 -0
- package/dist/esm/tds-folder-tab.entry.js +2 -2
- package/dist/esm/tds-folder-tabs.entry.js +2 -2
- package/dist/esm/tds-header-cell.entry.js +1 -1
- package/dist/esm/tds-header.entry.js +10 -1
- package/dist/esm/tds-inline-tab.entry.js +2 -2
- package/dist/esm/tds-inline-tabs.entry.js +2 -2
- package/dist/esm/tds-navigation-tab.entry.js +2 -2
- package/dist/esm/tds-navigation-tabs.entry.js +2 -2
- package/dist/esm/tds-table-body-row-expandable.entry.js +10 -7
- package/dist/esm/tds-table-body.entry.js +14 -7
- package/dist/esm/tds-table-footer.entry.js +41 -16
- package/dist/esm/tds-table-header-input-wrapper.entry.js +1 -1
- package/dist/esm/tds-table-header.entry.js +2 -2
- package/dist/esm/tds-table-toolbar.entry.js +2 -2
- package/dist/esm/tds-table.entry.js +8 -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 +1 -1
- package/dist/esm/tds-tooltip.entry.js +2 -2
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/{p-480c6c28.entry.js → p-088bfcd4.entry.js} +1 -1
- package/dist/tegel/{p-a97dd06a.entry.js → p-1634247e.entry.js} +1 -1
- package/dist/tegel/{p-5c0bb8e1.entry.js → p-19571a64.entry.js} +1 -1
- package/dist/tegel/p-24f63399.entry.js +1 -0
- package/dist/tegel/p-51e49417.entry.js +1 -0
- package/dist/tegel/{p-b34cf70d.entry.js → p-52be41ce.entry.js} +1 -1
- package/dist/tegel/{p-e237cdcc.entry.js → p-73dd2dbb.entry.js} +1 -1
- package/dist/tegel/p-7a83cf55.entry.js +1 -0
- package/dist/tegel/{p-c12eaac3.entry.js → p-831111e9.entry.js} +1 -1
- package/dist/tegel/{p-08642415.entry.js → p-91dcddd5.entry.js} +1 -1
- package/dist/tegel/{p-f823777e.entry.js → p-987084a5.entry.js} +1 -1
- package/dist/tegel/{p-c1f8f523.entry.js → p-a642c800.entry.js} +1 -1
- package/dist/tegel/p-aed1c5cf.entry.js +1 -0
- package/dist/tegel/{p-7c75d8d3.entry.js → p-b00bcf39.entry.js} +1 -1
- package/dist/tegel/{p-6b04a919.entry.js → p-bb129d43.entry.js} +1 -1
- package/dist/tegel/{p-578f6d73.entry.js → p-c790ef93.entry.js} +1 -1
- package/dist/tegel/p-d3541e17.entry.js +1 -0
- package/dist/tegel/{p-98f5b520.entry.js → p-e4343e51.entry.js} +1 -1
- package/dist/tegel/{p-1ba22b41.entry.js → p-e86f2d31.entry.js} +1 -1
- package/dist/tegel/p-f4b640af.entry.js +1 -0
- package/dist/tegel/{p-0a4fe3db.entry.js → p-ff5cd75f.entry.js} +1 -1
- package/dist/tegel/{p-f3f1f357.entry.js → p-ff7ae8a3.entry.js} +1 -1
- package/dist/tegel/tegel.css +2 -2
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +1 -1
- package/dist/types/components/dropdown/dropdown.d.ts +1 -1
- package/dist/types/components/header/header.d.ts +2 -0
- package/dist/types/components/table/table/table.d.ts +4 -0
- package/dist/types/components/table/table-body/table-body.d.ts +1 -0
- package/dist/types/components/table/table-body-cell/table-body-cell.d.ts +0 -1
- package/dist/types/components/table/table-body-row-expandable/table-body-row-expandable.d.ts +5 -4
- package/dist/types/components/table/table-footer/table-footer.d.ts +10 -0
- package/dist/types/components.d.ts +46 -4
- package/package.json +1 -1
- package/dist/cjs/tds-dropdown-option.cjs.entry.js +0 -95
- package/dist/tegel/p-36e88ce8.entry.js +0 -1
- package/dist/tegel/p-3e859e33.entry.js +0 -1
- package/dist/tegel/p-7cb43ebe.entry.js +0 -1
- package/dist/tegel/p-957c8b27.entry.js +0 -1
- package/dist/tegel/p-c7b2773d.entry.js +0 -1
- package/dist/tegel/p-e1842d99.entry.js +0 -1
- package/dist/tegel/p-e7fac8ad.entry.js +0 -1
|
@@ -160,9 +160,9 @@ export class TdsFolderTabs {
|
|
|
160
160
|
this.removeEventListenerFromTabs();
|
|
161
161
|
}
|
|
162
162
|
render() {
|
|
163
|
-
return (h(Host, { key: '
|
|
163
|
+
return (h(Host, { key: '3164044436f7029d85c4eed0ff7e0cc2b4e35752', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '59beaa0776ff83a30e84b69c5715a2f0d62ec6d9', class: "wrapper", ref: (el) => {
|
|
164
164
|
this.navWrapperElement = el;
|
|
165
|
-
} }, h("button", { key: '
|
|
165
|
+
} }, h("button", { key: '0bd461d469592983e08043c23e295c21df04c80f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'd21448eea9cab4d73087fec72d29270b52bf0999', name: "chevron_left", size: "20px" })), h("slot", { key: 'efe348a98b964486a73d1aac235ce894277c6249', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ea819f59668994e328410941b5b7455620ecb321', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c52241bb7c77eabbdb8de5a19bb4400c32aa2062', name: "chevron_right", size: "20px" })))));
|
|
166
166
|
}
|
|
167
167
|
static get is() { return "tds-folder-tabs"; }
|
|
168
168
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,8 +12,8 @@ export class TdsInlineTab {
|
|
|
12
12
|
this.selected = selected;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
16
|
-
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '
|
|
15
|
+
return (h(Host, { key: 'd15c7d658b9f90d01743d8f4fe6d14714a73e3f8', role: "listitem" }, h("div", { key: 'cc3324aa2ee065c9c9fd78c0e55c5c096a975d4d', class: `inline-tab-item ${this.selected ? 'selected' : ''}
|
|
16
|
+
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '68bed317582717cb72d40f6b91d304a3a3df9d47' }))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "tds-inline-tab"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -167,9 +167,9 @@ export class TdsInlineTabs {
|
|
|
167
167
|
this.removeEventListenerFromTabs();
|
|
168
168
|
}
|
|
169
169
|
render() {
|
|
170
|
-
return (h(Host, { key: '
|
|
170
|
+
return (h(Host, { key: '71f42e22f75a1fe4ca4f906b2151ed1a4c324e51', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '33e457be72862e642f2a867243f6325f94d210e8', class: "wrapper", ref: (el) => {
|
|
171
171
|
this.navWrapperElement = el;
|
|
172
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
172
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '786a1655c5efe5f2a079c62cb89300a99149c3fb', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'df2f3798cb6cb4ea446932cdf8ce84ac068c57ff', name: "chevron_left", size: "20px" })), h("slot", { key: 'b5e14ca573a2ac7a4e20defd05b412a941e72f0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'da0b823e674c5eacd325f69e98e14f4def9c477f', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '2bdd7110bb4b22c4dfabc1a5ef2acf9e7592b9b9', name: "chevron_right", size: "20px" })))));
|
|
173
173
|
}
|
|
174
174
|
static get is() { return "tds-inline-tabs"; }
|
|
175
175
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,8 +12,8 @@ export class TdsNavigationTab {
|
|
|
12
12
|
this.selected = selected;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
16
|
-
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '
|
|
15
|
+
return (h(Host, { key: '46ce3b8e878eca4c970f29371cb17a0c7ec1789a', role: "listitem" }, h("div", { key: '51331675d8898d5bca9758ed9c09194c6dbfde23', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
|
|
16
|
+
${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'd326748125d8e6a366268c581139bb859ef8feeb' }))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "tds-navigation-tab"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -167,9 +167,9 @@ export class TdsNavigationTabs {
|
|
|
167
167
|
this.removeEventListenerFromTabs();
|
|
168
168
|
}
|
|
169
169
|
render() {
|
|
170
|
-
return (h(Host, { key: '
|
|
170
|
+
return (h(Host, { key: 'fa440271f692e4893d4374ccd081308b5b4623e5', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '434fba65da78ac84c018252c52440d20984ab7b3', class: "wrapper", ref: (el) => {
|
|
171
171
|
this.navWrapperElement = el;
|
|
172
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
172
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '29d8d76a06c82f06b1c2aa15a3d023d238b05f10', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '1936dee5d3476a0d2c46b4d64a7a26848320c9d7', name: "chevron_left", size: "20px" })), h("slot", { key: '9e4cffce9188a7d517636e4b32ef8574a8bea78a', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '3af05aee3183425bdcd5c2f5f65f0c8920ba8622', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '075726ba4074a4e9452248115968d3b21104e929', name: "chevron_right", size: "20px" })))));
|
|
173
173
|
}
|
|
174
174
|
static get is() { return "tds-navigation-tabs"; }
|
|
175
175
|
static get encapsulation() { return "shadow"; }
|
|
@@ -48,7 +48,7 @@ export class TdsTextField {
|
|
|
48
48
|
var _a;
|
|
49
49
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
50
50
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
51
|
-
return (h("div", { key: '
|
|
51
|
+
return (h("div", { key: 'd75b1ef11a730f7133c176776d6ff2f7713c302e', class: {
|
|
52
52
|
'form-text-field-nomin': this.noMinWidth,
|
|
53
53
|
'form-text-field': !this.focusInput || this.disabled,
|
|
54
54
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -62,12 +62,12 @@ export class TdsTextField {
|
|
|
62
62
|
'form-text-field-sm': this.size === 'sm',
|
|
63
63
|
'form-text-field-error': this.state === 'error',
|
|
64
64
|
'form-text-field-success': this.state === 'success',
|
|
65
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
65
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: 'd1058c58a68782725d425d22ee3982605e375d4b', class: "text-field-label-outside" }, h("div", { key: 'c15fb3eb6f0345e2c58efd21711113c9f17a6223' }, this.label))), h("div", { key: '8795ee1b898c4b9b503588e31f4dac1354154a5c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9b78e21a8aa003b976110467d28cc0cdd7e8da96', class: {
|
|
66
66
|
'text-field-slot-wrap-prefix': true,
|
|
67
67
|
'text-field-error': this.state === 'error',
|
|
68
68
|
'text-field-success': this.state === 'success',
|
|
69
69
|
'text-field-default': this.state === 'default',
|
|
70
|
-
} }, h("slot", { key: '
|
|
70
|
+
} }, h("slot", { key: 'e393a751374617fba0eb3153027ccc7c687546ae', name: "prefix" }))), h("div", { key: '5acc43f4064dee1294d9590f2978e6d2a68642a0', class: "text-field-input-container" }, h("input", { key: '12c6abdf65142b09efe6bd293c21f447307606f8', ref: (inputEl) => (this.textInput = inputEl), class: {
|
|
71
71
|
'text-field-input': true,
|
|
72
72
|
'text-field-input-sm': this.size === 'sm',
|
|
73
73
|
'text-field-input-md': this.size === 'md',
|
|
@@ -80,13 +80,13 @@ export class TdsTextField {
|
|
|
80
80
|
if (!this.readOnly) {
|
|
81
81
|
this.handleBlur(event);
|
|
82
82
|
}
|
|
83
|
-
} }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '
|
|
83
|
+
} }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '4f4b7888d0b25431b9716ae9082188945ee1b36f', class: "text-field-label-inside" }, this.label))), h("div", { key: '797624248b2d5a5d2ea20687f1952c9b4d8945d5', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '8a629c0927d391aea80a4b6d6ef4040772e9ded0', class: {
|
|
84
84
|
'text-field-slot-wrap-suffix': true,
|
|
85
85
|
'text-field-error': this.state === 'error',
|
|
86
86
|
'text-field-success': this.state === 'success',
|
|
87
87
|
'text-field-default': this.state === 'default',
|
|
88
88
|
'tds-u-display-none': this.readOnly,
|
|
89
|
-
} }, h("slot", { key: '
|
|
89
|
+
} }, h("slot", { key: '2de42ce855242335dc1a25248e09527534be0152', name: "suffix" }))), h("span", { key: '422c8b07010a7dd59d8653c65f76ab79dbf4284b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '254a6cf7c6fcde19447e0275d6984f16d1bf4385', name: "edit_inactive", size: "20px" })), h("span", { key: '8625d2334c62556ac6484ee81ac05a5caef87e33', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '82bc517d9d3be59c5861687334465b41d768ff63', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '25366fcd3b55885a5433b36560be8e6849c15875', class: "text-field-helper-error-state" }, h("tds-icon", { key: '8cdbc0ae8ec4efd992cecbb1588ba96c0600783e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '232f3e4f400c49f8c065190d9353202b94419ef1', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '9ccc2d350603c6ad5ed6c49e84e00f8adcc2cd91', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
|
|
90
90
|
}
|
|
91
91
|
static get is() { return "tds-text-field"; }
|
|
92
92
|
static get encapsulation() { return "scoped"; }
|
|
@@ -38,7 +38,7 @@ export class TdsTextarea {
|
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
40
|
var _a;
|
|
41
|
-
return (h("div", { key: '
|
|
41
|
+
return (h("div", { key: 'fc3599b1d61b75327840068968001f2df6ec6b05', class: `
|
|
42
42
|
textarea-container
|
|
43
43
|
${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
|
|
44
44
|
${this.focusInput ? 'textarea-focus' : ''}
|
|
@@ -48,7 +48,7 @@ export class TdsTextarea {
|
|
|
48
48
|
${this.value ? 'textarea-data' : ''}
|
|
49
49
|
${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
|
|
50
50
|
${this.noMinWidth ? 'no-min-width' : ''}
|
|
51
|
-
` }, this.labelPosition !== 'no-label' && h("span", { key: '
|
|
51
|
+
` }, this.labelPosition !== 'no-label' && h("span", { key: '5ac3d5ef752a55f241865fe51bdb7aa96416731b', class: 'textarea-label' }, this.label), h("div", { key: '310c4a2a51391c366e17eca98ee22903d1620b16', class: "textarea-wrapper" }, h("textarea", { key: '4b83ff31486dea966a4a4a9df35d83043ad1a616', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: 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) => {
|
|
52
52
|
if (!this.readOnly) {
|
|
53
53
|
this.handleFocus(event);
|
|
54
54
|
}
|
|
@@ -56,7 +56,7 @@ export class TdsTextarea {
|
|
|
56
56
|
if (!this.readOnly) {
|
|
57
57
|
this.handleBlur(event);
|
|
58
58
|
}
|
|
59
|
-
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '
|
|
59
|
+
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '7718db97412e86796819e23584037833d762d6ce', class: "textarea-resizer-icon" }, h("svg", { key: '2b59b518d8bb6a61f6cbbbfb9bd2ec67938e91b6', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99c42c62b8e6a17c6acf6824d6e08ae88a3ed2bf', "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" }))), h("span", { key: '5c4a4cad4aa805df35ce264c34f9cdde678b1804', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'c5fe3371e08431c38a3979c226f64b79c35fed23', name: "edit_inactive" })), h("span", { key: 'e4261be8ce8cf8fc9cba5f25e6d4c52de4503f67', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'a58d64d87a5f971f3e51356a839beea73dfff4b4', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '39dfd4c2c356817e5f3b39af7f4e90334de79ac0', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8df0493b694ddce5cd3669f00527329df2c29e06', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8604248491d68a2b70531c028661573de48deb27', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "tds-textarea"; }
|
|
62
62
|
static get encapsulation() { return "scoped"; }
|
|
@@ -58,12 +58,12 @@ export class TdsToast {
|
|
|
58
58
|
const usesHeaderSlot = hasSlot('header', this.host);
|
|
59
59
|
const usesSubheaderSlot = hasSlot('subheader', this.host);
|
|
60
60
|
const usesActionsSlot = hasSlot('actions', this.host);
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'ee07540896c1aae0d8025b16e6b7794f1c5d8f4a', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
|
|
62
62
|
hide: this.hidden,
|
|
63
63
|
show: !this.hidden,
|
|
64
|
-
} }, h("div", { key: '
|
|
64
|
+
} }, h("div", { key: '20a502c69ea5923dbd53fb8749c0c03a4aa4977b', class: `
|
|
65
65
|
wrapper
|
|
66
|
-
${this.variant}` }, h("tds-icon", { key: '
|
|
66
|
+
${this.variant}` }, h("tds-icon", { key: '4167e597b4603cdb7d522a8b86dcc9c5c382ecaa', name: this.getIconName(), size: "20px" }), h("div", { key: '31921a5a61b34711669cbc93583291581e95c86f', class: `content` }, h("div", { key: '6d45456ec0c53cba6714af755a6fc2fa4db4405a', class: "header-subheader" }, this.header && h("div", { key: '3ac77ce9dfea028f0207214d99221ea5de0025cd', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c746b1e1bd696fa8ed85e39bea4b6df0404a1a14', name: "header" }), this.subheader && h("div", { key: '3f6496b6942d9a6ff9a425cd60e396d813f4da1b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8c3c3a8f926dbc077c63a562cd54afba693d6ea6', name: "subheader" })), usesActionsSlot && (h("div", { key: 'dc5e027546c10825168bf0907280479f29688c3d', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'e7593549992a4842a7f6c35ab93c06b902ad469b', name: "actions" })))), this.closable && (h("button", { key: '7b3d02c1b27263f550445a18a3f94a5064375a78', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '69dffbd7b7e6be0dabd264683ea1bbf7c9413fae', name: "cross", size: "20px" }))))));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "tds-toast"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,7 @@ export class TdsToggle {
|
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: 'a740337f48412e83ddb8518fd88b7bfa9fb56930', class: "tds-toggle" }, this.headline && (h("div", { key: 'f768b325a07cbadb06bdf8a7ae3e41586b9e5d1b', class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: 'e10313611123f0f6ab5f0477ff533218289096e4', "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" }), h("label", { key: '5a46a186950ce374c963da377d41b64431c249af', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: '103d423193d379770333a78844e733c05402b010', name: "label" }))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "tds-toggle"; }
|
|
35
35
|
static get encapsulation() { return "scoped"; }
|
|
@@ -51,7 +51,7 @@ export class TdsTooltip {
|
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
53
|
var _a;
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '6ddab8bdc240b9b286226593656bbc5ab89f375d' }, h("tds-popover-core", Object.assign({ key: '82235fdf92c5d1fb7a63b2a756a59c8516e1e8c2' }, this.inheritedAttributes, { class: {
|
|
55
55
|
'tds-tooltip': true,
|
|
56
56
|
[`tds-tooltip-${this.border}`]: true,
|
|
57
57
|
[(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
|
|
@@ -60,7 +60,7 @@ export class TdsTooltip {
|
|
|
60
60
|
this.show = true;
|
|
61
61
|
}, onInternalTdsClose: () => {
|
|
62
62
|
this.show = false;
|
|
63
|
-
} }), this.text, h("slot", { key: '
|
|
63
|
+
} }), this.text, h("slot", { key: '579448ad9309452a0be5aedb906da8059f56b122' }))));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "tds-tooltip"; }
|
|
66
66
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-e4d7c655.js';
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-3e74be57.js';
|
|
2
4
|
|
|
3
|
-
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}: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 .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: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}";
|
|
5
|
+
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}: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}";
|
|
4
6
|
const TdsDropdownOptionStyle0 = dropdownOptionCss;
|
|
5
7
|
|
|
6
|
-
const TdsDropdownOption = class {
|
|
7
|
-
constructor(
|
|
8
|
-
|
|
8
|
+
const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends H {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
this.__registerHost();
|
|
12
|
+
this.__attachShadow();
|
|
9
13
|
this.tdsSelect = createEvent(this, "tdsSelect", 6);
|
|
10
14
|
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
11
15
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
@@ -67,7 +71,7 @@ const TdsDropdownOption = class {
|
|
|
67
71
|
this.selected = selected;
|
|
68
72
|
}
|
|
69
73
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option
|
|
71
75
|
${this.size}
|
|
72
76
|
${this.selected ? 'selected' : ''}
|
|
73
77
|
${this.disabled ? 'disabled' : ''}
|
|
@@ -84,8 +88,39 @@ const TdsDropdownOption = class {
|
|
|
84
88
|
}, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
|
|
85
89
|
}
|
|
86
90
|
static get delegatesFocus() { return true; }
|
|
87
|
-
get host() { return
|
|
88
|
-
}
|
|
89
|
-
|
|
91
|
+
get host() { return this; }
|
|
92
|
+
static get style() { return TdsDropdownOptionStyle0; }
|
|
93
|
+
}, [17, "tds-dropdown-option", {
|
|
94
|
+
"value": [1],
|
|
95
|
+
"disabled": [4],
|
|
96
|
+
"selected": [32],
|
|
97
|
+
"multiselect": [32],
|
|
98
|
+
"size": [32],
|
|
99
|
+
"setSelected": [64]
|
|
100
|
+
}]);
|
|
101
|
+
function defineCustomElement() {
|
|
102
|
+
if (typeof customElements === "undefined") {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
const components = ["tds-dropdown-option", "tds-checkbox", "tds-icon"];
|
|
106
|
+
components.forEach(tagName => { switch (tagName) {
|
|
107
|
+
case "tds-dropdown-option":
|
|
108
|
+
if (!customElements.get(tagName)) {
|
|
109
|
+
customElements.define(tagName, TdsDropdownOption);
|
|
110
|
+
}
|
|
111
|
+
break;
|
|
112
|
+
case "tds-checkbox":
|
|
113
|
+
if (!customElements.get(tagName)) {
|
|
114
|
+
defineCustomElement$2();
|
|
115
|
+
}
|
|
116
|
+
break;
|
|
117
|
+
case "tds-icon":
|
|
118
|
+
if (!customElements.get(tagName)) {
|
|
119
|
+
defineCustomElement$1();
|
|
120
|
+
}
|
|
121
|
+
break;
|
|
122
|
+
} });
|
|
123
|
+
}
|
|
124
|
+
defineCustomElement();
|
|
90
125
|
|
|
91
|
-
export { TdsDropdownOption as
|
|
126
|
+
export { TdsDropdownOption as T, defineCustomElement as d };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-3e74be57.js';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Find the next focusable element index in a list of focusable elements.
|
|
@@ -58,12 +59,14 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
58
59
|
input.value = value || '';
|
|
59
60
|
};
|
|
60
61
|
|
|
61
|
-
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
62
|
+
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin)}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
62
63
|
const TdsDropdownStyle0 = dropdownCss;
|
|
63
64
|
|
|
64
|
-
const TdsDropdown = class {
|
|
65
|
-
constructor(
|
|
66
|
-
|
|
65
|
+
const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
|
|
66
|
+
constructor() {
|
|
67
|
+
super();
|
|
68
|
+
this.__registerHost();
|
|
69
|
+
this.__attachShadow();
|
|
67
70
|
this.tdsChange = createEvent(this, "tdsChange", 6);
|
|
68
71
|
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
69
72
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
@@ -403,7 +406,7 @@ const TdsDropdown = class {
|
|
|
403
406
|
render() {
|
|
404
407
|
var _a, _b, _c, _d;
|
|
405
408
|
appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
|
|
406
|
-
return (h(Host, { key: '
|
|
409
|
+
return (h(Host, { key: '1e7eacac32eba892288cd94254053ef9d09b03f7', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '8a97e693abbf5ff8973fde64c1d383e926d5c5a8', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '55d98944321d2084de6cb3fd5f70b32b5b84d518', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
|
|
407
410
|
filter: true,
|
|
408
411
|
focus: this.filterFocus,
|
|
409
412
|
disabled: this.disabled,
|
|
@@ -446,17 +449,63 @@ const TdsDropdown = class {
|
|
|
446
449
|
label-inside-as-placeholder
|
|
447
450
|
${this.size}
|
|
448
451
|
${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
|
|
449
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '
|
|
452
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'b661988b59447f31ab71e6d03da4b6226caab184', ref: (element) => (this.dropdownList = element), class: `dropdown-list
|
|
450
453
|
${this.size}
|
|
451
454
|
${this.open ? 'open' : 'closed'}
|
|
452
455
|
${this.getOpenDirection()}
|
|
453
|
-
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '
|
|
456
|
+
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '855021b97bdc5e56d8a2ebcd981e143aabb8a1ef', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'c282e26376e176e3eca36261eb269bfe4cce60da', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '6bce306c718a21a8eb5320da036a7f8909467d76', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'a15e4b87b4388fd44701db482b4be4a9cfee68f2', name: "error", size: "16px" }), this.helper))));
|
|
454
457
|
}
|
|
455
|
-
get host() { return
|
|
458
|
+
get host() { return this; }
|
|
456
459
|
static get watchers() { return {
|
|
457
460
|
"open": ["handleOpenState"]
|
|
458
461
|
}; }
|
|
459
|
-
}
|
|
460
|
-
|
|
462
|
+
static get style() { return TdsDropdownStyle0; }
|
|
463
|
+
}, [1, "tds-dropdown", {
|
|
464
|
+
"name": [1],
|
|
465
|
+
"disabled": [4],
|
|
466
|
+
"helper": [1],
|
|
467
|
+
"label": [1],
|
|
468
|
+
"labelPosition": [1, "label-position"],
|
|
469
|
+
"modeVariant": [1, "mode-variant"],
|
|
470
|
+
"openDirection": [1, "open-direction"],
|
|
471
|
+
"placeholder": [1],
|
|
472
|
+
"size": [1],
|
|
473
|
+
"error": [4],
|
|
474
|
+
"multiselect": [4],
|
|
475
|
+
"filter": [4],
|
|
476
|
+
"normalizeText": [4, "normalize-text"],
|
|
477
|
+
"noResultText": [1, "no-result-text"],
|
|
478
|
+
"defaultValue": [1, "default-value"],
|
|
479
|
+
"open": [32],
|
|
480
|
+
"value": [32],
|
|
481
|
+
"filterResult": [32],
|
|
482
|
+
"filterFocus": [32],
|
|
483
|
+
"reset": [64],
|
|
484
|
+
"setValue": [64],
|
|
485
|
+
"appendValue": [64],
|
|
486
|
+
"removeValue": [64],
|
|
487
|
+
"close": [64]
|
|
488
|
+
}, [[9, "mousedown", "onAnyClick"], [0, "keydown", "onKeyDown"]], {
|
|
489
|
+
"open": ["handleOpenState"]
|
|
490
|
+
}]);
|
|
491
|
+
function defineCustomElement() {
|
|
492
|
+
if (typeof customElements === "undefined") {
|
|
493
|
+
return;
|
|
494
|
+
}
|
|
495
|
+
const components = ["tds-dropdown", "tds-icon"];
|
|
496
|
+
components.forEach(tagName => { switch (tagName) {
|
|
497
|
+
case "tds-dropdown":
|
|
498
|
+
if (!customElements.get(tagName)) {
|
|
499
|
+
customElements.define(tagName, TdsDropdown);
|
|
500
|
+
}
|
|
501
|
+
break;
|
|
502
|
+
case "tds-icon":
|
|
503
|
+
if (!customElements.get(tagName)) {
|
|
504
|
+
defineCustomElement$1();
|
|
505
|
+
}
|
|
506
|
+
break;
|
|
507
|
+
} });
|
|
508
|
+
}
|
|
509
|
+
defineCustomElement();
|
|
461
510
|
|
|
462
|
-
export { TdsDropdown as
|
|
511
|
+
export { TdsDropdown as T, defineCustomElement as d };
|
|
@@ -22,7 +22,6 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
|
|
|
22
22
|
this.verticalDividers = false;
|
|
23
23
|
this.compactDesign = false;
|
|
24
24
|
this.noMinWidth = false;
|
|
25
|
-
this.whiteBackground = false;
|
|
26
25
|
this.tableId = '';
|
|
27
26
|
}
|
|
28
27
|
internalTdsPropChangeListener(event) {
|
|
@@ -85,13 +84,13 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
|
|
|
85
84
|
// Conditionally set padding style
|
|
86
85
|
padding: paddingStyle,
|
|
87
86
|
};
|
|
88
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: '30e53ca949c66ba4499463aa9e4710b48a5c6a2b', class: {
|
|
89
88
|
'tds-table__body-cell': true,
|
|
90
89
|
'tds-table__body-cell--hover': this.activeSorting,
|
|
91
90
|
'tds-table__compact': this.compactDesign,
|
|
92
91
|
'tds-table--divider': this.verticalDividers,
|
|
93
92
|
'tds-table--no-min-width': this.noMinWidth,
|
|
94
|
-
}, style: dynamicStyles }, this.cellValue, h("slot", { key: '
|
|
93
|
+
}, style: dynamicStyles }, this.cellValue, h("slot", { key: '800cc9978517c7486b87b603e3cff2d576e9a3fc' })));
|
|
95
94
|
}
|
|
96
95
|
get host() { return this; }
|
|
97
96
|
static get style() { return TdsBodyCellStyle0; }
|
|
@@ -105,7 +104,6 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
|
|
|
105
104
|
"verticalDividers": [32],
|
|
106
105
|
"compactDesign": [32],
|
|
107
106
|
"noMinWidth": [32],
|
|
108
|
-
"whiteBackground": [32],
|
|
109
107
|
"tableId": [32]
|
|
110
108
|
}, [[16, "internalTdsPropChange", "internalTdsPropChangeListener"], [16, "internalTdsHover", "internalTdsHoverListener"], [16, "internalTdsTextAlign", "internalTdsTextAlignListener"]]]);
|
|
111
109
|
function defineCustomElement$1() {
|
|
@@ -1,127 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-e4d7c655.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-3e74be57.js';
|
|
4
|
-
|
|
5
|
-
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}: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 .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: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}";
|
|
6
|
-
const TdsDropdownOptionStyle0 = dropdownOptionCss;
|
|
7
|
-
|
|
8
|
-
const TdsDropdownOption$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends H {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
this.tdsSelect = createEvent(this, "tdsSelect", 6);
|
|
14
|
-
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
15
|
-
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
16
|
-
this.componentWillRender = () => {
|
|
17
|
-
this.parentElement =
|
|
18
|
-
this.host.parentElement.tagName === 'TDS-DROPDOWN'
|
|
19
|
-
? this.host.parentElement
|
|
20
|
-
: this.host.getRootNode().host;
|
|
21
|
-
this.multiselect = this.parentElement.multiselect;
|
|
22
|
-
this.size = this.parentElement.size;
|
|
23
|
-
this.label = this.host.textContent.trim();
|
|
24
|
-
};
|
|
25
|
-
this.handleSingleSelect = () => {
|
|
26
|
-
if (!this.disabled) {
|
|
27
|
-
this.selected = true;
|
|
28
|
-
this.parentElement.appendValue(this.value);
|
|
29
|
-
this.parentElement.close();
|
|
30
|
-
this.tdsSelect.emit({
|
|
31
|
-
value: this.value,
|
|
32
|
-
selected: this.selected,
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
this.handleMultiselect = (event) => {
|
|
37
|
-
if (!this.disabled) {
|
|
38
|
-
if (event.detail.checked) {
|
|
39
|
-
this.parentElement.appendValue(this.value);
|
|
40
|
-
this.selected = true;
|
|
41
|
-
this.tdsSelect.emit({
|
|
42
|
-
value: this.value,
|
|
43
|
-
selected: this.selected,
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
this.parentElement.removeValue(this.value);
|
|
48
|
-
this.selected = false;
|
|
49
|
-
this.tdsSelect.emit({
|
|
50
|
-
value: this.value,
|
|
51
|
-
selected: this.selected,
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
event.stopPropagation();
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
this.handleFocus = (event) => {
|
|
58
|
-
this.tdsFocus.emit(event);
|
|
59
|
-
};
|
|
60
|
-
this.handleBlur = (event) => {
|
|
61
|
-
this.tdsBlur.emit(event);
|
|
62
|
-
};
|
|
63
|
-
this.value = undefined;
|
|
64
|
-
this.disabled = false;
|
|
65
|
-
this.selected = false;
|
|
66
|
-
this.multiselect = undefined;
|
|
67
|
-
this.size = 'lg';
|
|
68
|
-
}
|
|
69
|
-
/** Method to select/deselect an option. */
|
|
70
|
-
async setSelected(selected) {
|
|
71
|
-
this.selected = selected;
|
|
72
|
-
}
|
|
73
|
-
render() {
|
|
74
|
-
return (h(Host, { key: '0c0253f02e12d0eb7924969b2d347ab2005d0772', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'ad79763807bb52a3e242989f676a03e85804fc62', class: `dropdown-option
|
|
75
|
-
${this.size}
|
|
76
|
-
${this.selected ? 'selected' : ''}
|
|
77
|
-
${this.disabled ? 'disabled' : ''}
|
|
78
|
-
` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
|
|
79
|
-
if (event.key === 'Escape') {
|
|
80
|
-
this.parentElement.close();
|
|
81
|
-
}
|
|
82
|
-
} }, h("tds-checkbox", { onTdsChange: (event) => {
|
|
83
|
-
this.handleMultiselect(event);
|
|
84
|
-
}, disabled: this.disabled, checked: this.selected, class: {
|
|
85
|
-
[this.size]: true,
|
|
86
|
-
} }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
|
|
87
|
-
this.handleSingleSelect();
|
|
88
|
-
}, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
|
|
89
|
-
}
|
|
90
|
-
static get delegatesFocus() { return true; }
|
|
91
|
-
get host() { return this; }
|
|
92
|
-
static get style() { return TdsDropdownOptionStyle0; }
|
|
93
|
-
}, [17, "tds-dropdown-option", {
|
|
94
|
-
"value": [1],
|
|
95
|
-
"disabled": [4],
|
|
96
|
-
"selected": [32],
|
|
97
|
-
"multiselect": [32],
|
|
98
|
-
"size": [32],
|
|
99
|
-
"setSelected": [64]
|
|
100
|
-
}]);
|
|
101
|
-
function defineCustomElement$1() {
|
|
102
|
-
if (typeof customElements === "undefined") {
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
const components = ["tds-dropdown-option", "tds-checkbox", "tds-icon"];
|
|
106
|
-
components.forEach(tagName => { switch (tagName) {
|
|
107
|
-
case "tds-dropdown-option":
|
|
108
|
-
if (!customElements.get(tagName)) {
|
|
109
|
-
customElements.define(tagName, TdsDropdownOption$1);
|
|
110
|
-
}
|
|
111
|
-
break;
|
|
112
|
-
case "tds-checkbox":
|
|
113
|
-
if (!customElements.get(tagName)) {
|
|
114
|
-
defineCustomElement$3();
|
|
115
|
-
}
|
|
116
|
-
break;
|
|
117
|
-
case "tds-icon":
|
|
118
|
-
if (!customElements.get(tagName)) {
|
|
119
|
-
defineCustomElement$2();
|
|
120
|
-
}
|
|
121
|
-
break;
|
|
122
|
-
} });
|
|
123
|
-
}
|
|
124
|
-
defineCustomElement$1();
|
|
1
|
+
import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-1c256b8d.js';
|
|
125
2
|
|
|
126
3
|
const TdsDropdownOption = TdsDropdownOption$1;
|
|
127
4
|
const defineCustomElement = defineCustomElement$1;
|