@scania/tegel 1.37.0 → 1.37.1-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-breadcrumbs.cjs.entry.js +1 -6
- package/dist/cjs/tds-button.cjs.entry.js +3 -8
- package/dist/cjs/tds-checkbox.cjs.entry.js +2 -7
- package/dist/cjs/tds-chip.cjs.entry.js +1 -6
- package/dist/cjs/tds-datetime.cjs.entry.js +3 -8
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +44 -24
- package/dist/cjs/tds-header-dropdown.cjs.entry.js +3 -10
- package/dist/cjs/tds-header-hamburger.cjs.entry.js +1 -6
- package/dist/cjs/tds-header-launcher.cjs.entry.js +2 -7
- package/dist/cjs/tds-table-body-row.cjs.entry.js +1 -1
- package/dist/cjs/tds-text-field.cjs.entry.js +5 -10
- package/dist/cjs/tds-textarea.cjs.entry.js +3 -8
- package/dist/cjs/tds-toggle.cjs.entry.js +4 -7
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +1 -6
- package/dist/collection/components/button/button.js +3 -8
- package/dist/collection/components/checkbox/checkbox.js +2 -7
- package/dist/collection/components/chip/chip.js +1 -6
- package/dist/collection/components/datetime/datetime.js +3 -8
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +13 -8
- package/dist/collection/components/dropdown/dropdown.js +43 -16
- package/dist/collection/components/header/header-dropdown/header-dropdown.js +3 -10
- package/dist/collection/components/header/header-hamburger/header-hamburger.js +1 -6
- package/dist/collection/components/header/header-launcher/header-launcher.js +2 -7
- package/dist/collection/components/table/table-body-row/table-body-row.css +4 -0
- package/dist/collection/components/text-field/text-field.js +5 -10
- package/dist/collection/components/textarea/textarea.js +3 -8
- package/dist/collection/components/toggle/toggle.js +4 -7
- package/dist/components/{p-ffbaebb1.js → p-250a9772.js} +32 -17
- package/dist/components/{p-23aab3b9.js → p-44f5b5e1.js} +2 -7
- package/dist/components/{p-19edd11a.js → p-a65b09a1.js} +14 -9
- package/dist/components/tds-breadcrumbs.js +1 -6
- package/dist/components/tds-button.js +3 -8
- package/dist/components/tds-checkbox.js +1 -1
- package/dist/components/tds-chip.js +1 -6
- package/dist/components/tds-datetime.js +3 -8
- package/dist/components/tds-dropdown-option.js +1 -1
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-header-dropdown.js +3 -10
- package/dist/components/tds-header-hamburger.js +1 -6
- package/dist/components/tds-header-launcher.js +2 -7
- package/dist/components/tds-table-body-row.js +2 -2
- package/dist/components/tds-table-footer.js +3 -3
- package/dist/components/tds-table-header.js +1 -1
- package/dist/components/tds-text-field.js +5 -10
- package/dist/components/tds-textarea.js +3 -8
- package/dist/components/tds-toggle.js +4 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-breadcrumbs.entry.js +1 -6
- package/dist/esm/tds-button.entry.js +3 -8
- package/dist/esm/tds-checkbox.entry.js +2 -7
- package/dist/esm/tds-chip.entry.js +1 -6
- package/dist/esm/tds-datetime.entry.js +3 -8
- package/dist/esm/tds-dropdown_2.entry.js +44 -24
- package/dist/esm/tds-header-dropdown.entry.js +3 -10
- package/dist/esm/tds-header-hamburger.entry.js +1 -6
- package/dist/esm/tds-header-launcher.entry.js +2 -7
- package/dist/esm/tds-table-body-row.entry.js +1 -1
- package/dist/esm/tds-text-field.entry.js +5 -10
- package/dist/esm/tds-textarea.entry.js +3 -8
- package/dist/esm/tds-toggle.entry.js +4 -7
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-1b471db7.entry.js +1 -0
- package/dist/tegel/p-3022d31d.entry.js +1 -0
- package/dist/tegel/p-303acf88.entry.js +1 -0
- package/dist/tegel/p-3ebe93ff.entry.js +1 -0
- package/dist/tegel/p-8c2695af.entry.js +1 -0
- package/dist/tegel/p-9b0c886e.entry.js +1 -0
- package/dist/tegel/p-a6238890.entry.js +1 -0
- package/dist/tegel/p-a74cb560.entry.js +1 -0
- package/dist/tegel/p-a98767ea.entry.js +1 -0
- package/dist/tegel/p-bc0f66e6.entry.js +1 -0
- package/dist/tegel/p-cd5103e3.entry.js +1 -0
- package/dist/tegel/{p-614cc097.entry.js → p-d0f09796.entry.js} +1 -1
- package/dist/tegel/p-f9c17612.entry.js +1 -0
- package/dist/tegel/tegel.css +3 -3
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +0 -1
- package/dist/types/components/button/button.d.ts +0 -1
- package/dist/types/components/checkbox/checkbox.d.ts +0 -1
- package/dist/types/components/chip/chip.d.ts +0 -1
- package/dist/types/components/datetime/datetime.d.ts +0 -1
- package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -1
- package/dist/types/components/dropdown/dropdown.d.ts +3 -1
- package/dist/types/components/header/header-dropdown/header-dropdown.d.ts +0 -1
- package/dist/types/components/header/header-hamburger/header-hamburger.d.ts +0 -1
- package/dist/types/components/header/header-launcher/header-launcher.d.ts +0 -1
- package/dist/types/components/text-field/text-field.d.ts +0 -1
- package/dist/types/components/textarea/textarea.d.ts +0 -1
- package/dist/types/components/toggle/toggle.d.ts +0 -1
- package/package.json +1 -1
- package/dist/tegel/p-23ea1922.entry.js +0 -1
- package/dist/tegel/p-2c56421f.entry.js +0 -1
- package/dist/tegel/p-5020a688.entry.js +0 -1
- package/dist/tegel/p-569d5de4.entry.js +0 -1
- package/dist/tegel/p-618d6b4f.entry.js +0 -1
- package/dist/tegel/p-83831252.entry.js +0 -1
- package/dist/tegel/p-9fe97da7.entry.js +0 -1
- package/dist/tegel/p-ab103d0c.entry.js +0 -1
- package/dist/tegel/p-b58194f9.entry.js +0 -1
- package/dist/tegel/p-e00c0c30.entry.js +0 -1
- package/dist/tegel/p-f68530b3.entry.js +0 -1
- package/dist/tegel/p-f9374451.entry.js +0 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import generateUniqueId from "../../../utils/generateUniqueId";
|
|
3
|
-
import hasSlot from "../../../utils/hasSlot";
|
|
4
3
|
/**
|
|
5
4
|
* @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
|
|
6
5
|
* @slot icon - Slot for an Icon in the dropdown button.
|
|
@@ -47,20 +46,14 @@ export class TdsHeaderDropdown {
|
|
|
47
46
|
});
|
|
48
47
|
}
|
|
49
48
|
}
|
|
50
|
-
connectedCallback() {
|
|
51
|
-
const hasLabelSlot = hasSlot('label', this.host);
|
|
52
|
-
if (!this.tdsAriaLabel && !hasLabelSlot) {
|
|
53
|
-
console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
49
|
render() {
|
|
57
|
-
return (h(Host, { key: '
|
|
50
|
+
return (h(Host, { key: 'd3f0a943b953783f2fc1c6345563a5adf0ded1dd' }, h("div", { key: 'c7028ceb31b9409d76d3663cd92a1fb3fa68fd7e', class: {
|
|
58
51
|
'state-open': this.open,
|
|
59
|
-
} }, h("tds-header-item", { key: '
|
|
52
|
+
} }, h("tds-header-item", { key: 'f1d5fe99ee0b62316dd0b48c9b5bb04439fb9b12', class: "button", active: this.open, selected: this.selected }, h("button", { key: '0e1437b558782c96e984287bfc0b9f301090bdb0', ref: (el) => {
|
|
60
53
|
this.buttonEl = el;
|
|
61
54
|
}, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
|
|
62
55
|
this.toggleDropdown();
|
|
63
|
-
}, "aria-label": this.tdsAriaLabel }, h("slot", { key: '
|
|
56
|
+
}, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'fc63cfe2414eb2c60fe85e481a3af49af3ce9653', name: "icon" }), this.label, h("slot", { key: 'f302406472c7be0223fa17b76cc2674cb3e148b7', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '32c53b88ffeed4a78f9efc77b5976afe190c86c6', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '86ed4a3140d80521792b2953bc4acdef9476c3f6', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
|
|
64
57
|
{
|
|
65
58
|
name: 'flip',
|
|
66
59
|
options: {
|
|
@@ -4,14 +4,9 @@ export class TdsHeaderHamburger {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.tdsAriaLabel = undefined;
|
|
6
6
|
}
|
|
7
|
-
connectedCallback() {
|
|
8
|
-
if (!this.tdsAriaLabel) {
|
|
9
|
-
console.warn('Tegel Header Hamburger component: missing tdsAriaLabel prop');
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
7
|
render() {
|
|
13
8
|
const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
|
|
14
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'e89db0f35bac2766a531be705b37c1d02e315431' }, h("tds-header-item", { key: '2aba0027ff9ce0516722d9785df5f61cd69aa02e' }, h("button", Object.assign({ key: 'f3b03d5b8a13285972edc9c645effc91c3ec92ad' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '6177dfc5ec0fed7902ecea6bab75b6031099c9c3', class: "icon", name: "burger", size: "20px" })))));
|
|
15
10
|
}
|
|
16
11
|
static get is() { return "tds-header-hamburger"; }
|
|
17
12
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,11 +41,6 @@ export class TdsHeaderLauncher {
|
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
connectedCallback() {
|
|
45
|
-
if (!this.tdsAriaLabel) {
|
|
46
|
-
console.warn('Tegel Header Launcher component: missing tdsAriaLabel prop');
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
44
|
render() {
|
|
50
45
|
this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
|
|
51
46
|
const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
|
|
@@ -53,11 +48,11 @@ export class TdsHeaderLauncher {
|
|
|
53
48
|
}, 'ref': (el) => {
|
|
54
49
|
this.buttonEl = el;
|
|
55
50
|
} });
|
|
56
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: 'b62aac321e36b12d139d51c3421a1a9540079c22' }, h("div", { key: '4bb1d8e74ec245d9899870fccd990935488dcf7b', class: {
|
|
57
52
|
'wrapper': true,
|
|
58
53
|
'state-open': this.open,
|
|
59
54
|
'state-list-type-menu': this.hasListTypeMenu,
|
|
60
|
-
} }, h("tds-header-launcher-button", Object.assign({ key: '
|
|
55
|
+
} }, h("tds-header-launcher-button", Object.assign({ key: 'c3b90d64efd2878ffc2b0332538c2877f2b48fec' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'dd41f1e0573ceed07f519813bec503001d02377b', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
|
|
61
56
|
{
|
|
62
57
|
name: 'flip',
|
|
63
58
|
options: {
|
|
@@ -67,16 +67,11 @@ export class TdsTextField {
|
|
|
67
67
|
this.textInput.focus();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
connectedCallback() {
|
|
71
|
-
if (!this.tdsAriaLabel) {
|
|
72
|
-
console.warn('Tegel Text Field component: prop tdsAriaLabel is missing');
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
70
|
render() {
|
|
76
71
|
var _a;
|
|
77
72
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
78
73
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
79
|
-
return (h("div", { key: '
|
|
74
|
+
return (h("div", { key: 'b9fa2b03ce2a0b196dc6083614420d6f83675e3d', class: {
|
|
80
75
|
'form-text-field': true,
|
|
81
76
|
'form-text-field-nomin': this.noMinWidth,
|
|
82
77
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -94,12 +89,12 @@ export class TdsTextField {
|
|
|
94
89
|
'form-text-field-sm': this.size === 'sm',
|
|
95
90
|
'form-text-field-error': this.state === 'error',
|
|
96
91
|
'form-text-field-success': this.state === 'success',
|
|
97
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
92
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: '7110b867aba9a9ba62b796f67caeccf22a4a8060', class: "text-field-label-outside" }, h("label", { key: '6b0b6c7d17bb236f1203dfaf793ba0a3bc2d8efb', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '5603d3e78b290a78d7c482a0dac7e1f0efb9af7f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9accb59dffa061d7947d4392310cb1717a395363', class: {
|
|
98
93
|
'text-field-slot-wrap-prefix': true,
|
|
99
94
|
'text-field-error': this.state === 'error',
|
|
100
95
|
'text-field-success': this.state === 'success',
|
|
101
96
|
'text-field-default': this.state === 'default',
|
|
102
|
-
} }, h("slot", { key: '
|
|
97
|
+
} }, h("slot", { key: '739e089cdb9798dc108b68c4858c90bf75e18958', name: "prefix" }))), h("div", { key: 'e4229be4e4bf421319184e798b98afcbaa361413', class: "text-field-input-container" }, h("input", { key: 'f462b4c0d49e4e070090f6a14df52af66b87648d', ref: (inputEl) => {
|
|
103
98
|
this.textInput = inputEl;
|
|
104
99
|
}, class: {
|
|
105
100
|
'text-field-input': true,
|
|
@@ -114,13 +109,13 @@ export class TdsTextField {
|
|
|
114
109
|
if (!this.readOnly) {
|
|
115
110
|
this.handleBlur(event);
|
|
116
111
|
}
|
|
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: '
|
|
112
|
+
}, "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: 'ac16cff7856d65503fa30f7eb23d2936377e72d4', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'b70453ec36ca62f584b26b0e6dc4b3f0cde2ff54', class: {
|
|
118
113
|
'text-field-slot-wrap-suffix': true,
|
|
119
114
|
'text-field-error': this.state === 'error',
|
|
120
115
|
'text-field-success': this.state === 'success',
|
|
121
116
|
'text-field-default': this.state === 'default',
|
|
122
117
|
'tds-u-display-none': this.readOnly,
|
|
123
|
-
} }, h("slot", { key: '
|
|
118
|
+
} }, h("slot", { key: '7e50b20d90a68f9af583b8f2ade5c742e2d52351', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '72e2cf4f2872d247ac6f28e935e8185aafef6dec', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '171bdde8535c6bbd08eec60d87d9aa5bae1f98bd', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05e7e8898ee3fcf81fb011aa2141092e8b749e37', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0c16d399b376d9aebed2aabf759cb7319c5745cf', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '280eed9185c8cffa29e3cf62425f1f1f377f3abc', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ddf07e469173a574a848cd2ff816bcc535940340', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'b5b06dba13fb8911828153341b631facfc016c88', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'a4c41817f19b32e575423d5bbe19c28a38031e6e', class: {
|
|
124
119
|
'text-field-textcounter-divider': true,
|
|
125
120
|
'text-field-textcounter-disabled': this.disabled,
|
|
126
121
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -58,14 +58,9 @@ export class TdsTextarea {
|
|
|
58
58
|
}
|
|
59
59
|
return modeVariant;
|
|
60
60
|
}
|
|
61
|
-
connectedCallback() {
|
|
62
|
-
if (!this.tdsAriaLabel && !this.label) {
|
|
63
|
-
console.warn('Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility');
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
61
|
render() {
|
|
67
62
|
var _a;
|
|
68
|
-
return (h("div", { key: '
|
|
63
|
+
return (h("div", { key: '873fc5866c777549e56d115e7bce64a62fdd5c0c', class: {
|
|
69
64
|
'textarea-container': true,
|
|
70
65
|
'textarea-label-inside': this.labelPosition === 'inside',
|
|
71
66
|
'textarea-focus': this.focusInput,
|
|
@@ -75,7 +70,7 @@ export class TdsTextarea {
|
|
|
75
70
|
'textarea-data': this.value !== '',
|
|
76
71
|
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
|
|
77
72
|
'no-min-width': this.noMinWidth,
|
|
78
|
-
} }, this.labelPosition !== 'no-label' && (h("label", { key: '
|
|
73
|
+
} }, this.labelPosition !== 'no-label' && (h("label", { key: '09f5df4efb39b7e3eb71d8567adc5cffd374ad66', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '57bd6d6e2e7a1919d668625a675e4a20421af965', class: "textarea-wrapper" }, h("textarea", { key: '69955de378170f86c7a942d5f8101aa2ff9440f4', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
|
|
79
74
|
this.textEl = inputEl;
|
|
80
75
|
}, 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) => {
|
|
81
76
|
if (!this.readOnly) {
|
|
@@ -85,7 +80,7 @@ export class TdsTextarea {
|
|
|
85
80
|
if (!this.readOnly) {
|
|
86
81
|
this.handleBlur(event);
|
|
87
82
|
}
|
|
88
|
-
}, 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: '
|
|
83
|
+
}, 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: '0fded8e72f3f6d8e6f53cb57df94f480df17ce53', class: "textarea-resizer-icon" }, h("svg", { key: '6b41ae06bbedfa5ba88991bc6856f80ca8a4b6f8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c4f731e7483bade2d0dbd545302afc278039a122', "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: '94bc8eed69418751ad240087201827a0ef0185b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '231983d3994030724a06358f37dd0e53f91d78d4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '9e7f16d10939227a5c8c87f00ddd653a58c094ad', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '67222f0c93979caf49881c591cd99eb4c97ebdc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'cbde13084b090f7eea4bd80da47373ec941e1981', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '5895277b2e07f4c8f2990f624eb0797dffd0b1f0', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '97afedbb5aaf02461a38f39643298b6c2650c52f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
89
84
|
}
|
|
90
85
|
static get is() { return "tds-textarea"; }
|
|
91
86
|
static get encapsulation() { return "scoped"; }
|
|
@@ -38,16 +38,13 @@ export class TdsToggle {
|
|
|
38
38
|
componentWillLoad() {
|
|
39
39
|
this.labelSlot = this.host.querySelector("[slot='label']");
|
|
40
40
|
}
|
|
41
|
-
connectedCallback() {
|
|
42
|
-
if (!this.tdsAriaLabel) {
|
|
43
|
-
console.warn('Tegel Toggle component: tdsAriaLabel prop is missing');
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
41
|
render() {
|
|
47
|
-
return (h("div", { key: '
|
|
42
|
+
return (h("div", { key: '68e34abfad735ed96e35e0f7966670e226dcbc82', class: "tds-toggle" }, this.headline && (h("div", { key: '3784ca8234261dd269d0f641a5f2515abae0ece4', class: {
|
|
48
43
|
'toggle-headline': true,
|
|
49
44
|
'disabled': this.disabled,
|
|
50
|
-
} }, this.headline)), h("input", { key: '
|
|
45
|
+
} }, this.headline)), h("input", { key: '675a0c941bce13fc053411b8faf7fe583cbf3245', ref: (inputEl) => {
|
|
46
|
+
this.inputElement = inputEl;
|
|
47
|
+
}, "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: '2c73df3e48968f3c95de4b4e14817abf57423f98', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'd1f660a5f25b8bd2ffef2e6cf9574d429cb4ca8a', name: "label" })))));
|
|
51
48
|
}
|
|
52
49
|
static get is() { return "tds-toggle"; }
|
|
53
50
|
static get encapsulation() { return "scoped"; }
|
|
@@ -78,6 +78,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
78
78
|
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
79
79
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
80
80
|
this.tdsInput = createEvent(this, "tdsInput", 6);
|
|
81
|
+
this.hasFocus = false;
|
|
81
82
|
this.setDefaultOption = () => {
|
|
82
83
|
if (this.internalDefaultValue) {
|
|
83
84
|
// Convert the internal default value to an array if it's not already
|
|
@@ -198,13 +199,18 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
198
199
|
if (this.multiselect && this.inputElement) {
|
|
199
200
|
this.inputElement.value = '';
|
|
200
201
|
}
|
|
201
|
-
|
|
202
|
+
// Focus event is now handled by focusin listener
|
|
202
203
|
if (this.filter) {
|
|
203
204
|
this.handleFilter({ target: { value: '' } });
|
|
204
205
|
}
|
|
205
206
|
};
|
|
206
207
|
this.handleBlur = (event) => {
|
|
207
|
-
|
|
208
|
+
// Blur event is now handled by focusout listener
|
|
209
|
+
// Only handle internal state changes here
|
|
210
|
+
this.filterFocus = false;
|
|
211
|
+
if (this.multiselect && this.inputElement) {
|
|
212
|
+
this.inputElement.value = this.getValue();
|
|
213
|
+
}
|
|
208
214
|
};
|
|
209
215
|
this.resetInput = () => {
|
|
210
216
|
const inputEl = this.host.querySelector('input');
|
|
@@ -401,6 +407,24 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
401
407
|
}
|
|
402
408
|
}
|
|
403
409
|
}
|
|
410
|
+
onFocusIn(event) {
|
|
411
|
+
// Check if the focus is within this dropdown component
|
|
412
|
+
if (this.host.contains(event.target)) {
|
|
413
|
+
if (!this.hasFocus) {
|
|
414
|
+
this.hasFocus = true;
|
|
415
|
+
this.tdsFocus.emit(event);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
onFocusOut(event) {
|
|
420
|
+
// Use setTimeout to check if focus moved to another element within the dropdown
|
|
421
|
+
setTimeout(() => {
|
|
422
|
+
if (this.hasFocus && !this.host.contains(document.activeElement)) {
|
|
423
|
+
this.hasFocus = false;
|
|
424
|
+
this.tdsBlur.emit(event);
|
|
425
|
+
}
|
|
426
|
+
}, 0);
|
|
427
|
+
}
|
|
404
428
|
async onKeyDown(event) {
|
|
405
429
|
var _a;
|
|
406
430
|
// Get the active element
|
|
@@ -505,11 +529,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
505
529
|
form.removeEventListener('reset', this.resetInput);
|
|
506
530
|
}
|
|
507
531
|
}
|
|
508
|
-
connectedCallback() {
|
|
509
|
-
if (!this.tdsAriaLabel) {
|
|
510
|
-
console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
532
|
updateDropdownListInertState() {
|
|
514
533
|
if (this.dropdownList) {
|
|
515
534
|
if (this.open) {
|
|
@@ -525,9 +544,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
525
544
|
// Generate unique IDs for associating labels and helpers with the input/button
|
|
526
545
|
const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
|
|
527
546
|
const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
|
|
528
|
-
return (h(Host, { key: '
|
|
547
|
+
return (h(Host, { key: '1e6530be86fe1206f235280842066a3101c73500', class: {
|
|
529
548
|
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
|
|
530
|
-
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '
|
|
549
|
+
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1305a6b1599bc38019bd4a5beff68fdd5d4e2a22', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'fcd5c2701c2b8ab044f2cb03f38b7a0ca4dc09c4', class: {
|
|
531
550
|
'dropdown-select': true,
|
|
532
551
|
[this.size]: true,
|
|
533
552
|
'disabled': this.disabled,
|
|
@@ -545,10 +564,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
545
564
|
ref: (inputEl) => (this.inputElement = inputEl), class: {
|
|
546
565
|
placeholder: this.labelPosition === 'inside',
|
|
547
566
|
}, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
|
|
548
|
-
this.filterFocus = false;
|
|
549
|
-
if (this.multiselect) {
|
|
550
|
-
this.inputElement.value = this.getValue();
|
|
551
|
-
}
|
|
552
567
|
this.handleBlur(event);
|
|
553
568
|
}, onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => {
|
|
554
569
|
if (event.key === 'Escape') {
|
|
@@ -577,7 +592,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
577
592
|
label-inside-as-placeholder
|
|
578
593
|
${this.size}
|
|
579
594
|
${this.selectedOptions.length ? 'selected' : ''}
|
|
580
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.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: '
|
|
595
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.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: '0c9b87075f263db54dee78381fe5a3348d331f71', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
|
|
581
596
|
this.dropdownList = element;
|
|
582
597
|
}, class: {
|
|
583
598
|
'dropdown-list': true,
|
|
@@ -588,11 +603,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
588
603
|
'closed': !this.open,
|
|
589
604
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
590
605
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
591
|
-
} }, h("slot", { key: '
|
|
606
|
+
} }, h("slot", { key: 'da3fb78f1f900ade5851e204e8df4790ba7de048', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'a27dabaf16e2d9482febfad6b1ab0cc922ff5afe', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1cc797831d5018f13a27788bb3d3262f1c0b0397', id: helperId, class: {
|
|
592
607
|
helper: true,
|
|
593
608
|
error: this.error,
|
|
594
609
|
disabled: this.disabled,
|
|
595
|
-
} }, this.error && h("tds-icon", { key: '
|
|
610
|
+
} }, this.error && h("tds-icon", { key: '35ccf7836afd37a2e4d8b7e6f2d2689a6e1b66a1', name: "error", size: "16px" }), this.helper))));
|
|
596
611
|
}
|
|
597
612
|
get host() { return this; }
|
|
598
613
|
static get watchers() { return {
|
|
@@ -633,7 +648,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
633
648
|
"close": [64],
|
|
634
649
|
"updateDisplay": [64],
|
|
635
650
|
"appendValue": [64]
|
|
636
|
-
}, [[9, "mousedown", "onAnyClick"], [0, "keydown", "onKeyDown"]], {
|
|
651
|
+
}, [[9, "mousedown", "onAnyClick"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "keydown", "onKeyDown"]], {
|
|
637
652
|
"value": ["handleValueChange"],
|
|
638
653
|
"open": ["handleOpenState"],
|
|
639
654
|
"defaultValue": ["handleDefaultValueChange"]
|
|
@@ -64,17 +64,12 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
|
|
|
64
64
|
this.indeterminate = false;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
connectedCallback() {
|
|
68
|
-
if (!this.tdsAriaLabel) {
|
|
69
|
-
console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
67
|
render() {
|
|
73
|
-
return (h("div", { key: '
|
|
68
|
+
return (h("div", { key: '87d4e8620e183b5fb8a885dca8081424c7497b21', class: "tds-checkbox" }, h("input", { key: 'fa5d4c8e9a33a7a88d1348f6eb66b474e94c0ad1',
|
|
74
69
|
// eslint-disable-next-line no-return-assign
|
|
75
70
|
ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
|
|
76
71
|
this.handleChange();
|
|
77
|
-
} }), h("label", { key: '
|
|
72
|
+
} }), h("label", { key: '82545f01ad68fae4d613b58d82a770a0c1bce79e', htmlFor: this.checkboxId }, h("slot", { key: '99892e112b596a7f8517427cc42f75e90140c315', name: "label" }))));
|
|
78
73
|
}
|
|
79
74
|
get host() { return this; }
|
|
80
75
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { c as convertToString } from './p-a1181b1f.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-44f5b5e1.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './p-b390ece5.js';
|
|
5
5
|
|
|
6
6
|
const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-dropdown-option-focus);box-shadow:inset 0 0 0 3px var(--tds-white);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{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:pointer}:host .dropdown-option:hover.disabled{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:not-allowed}:host([hidden]){display:none}";
|
|
@@ -66,10 +66,20 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
|
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
this.handleFocus = (event) => {
|
|
69
|
-
|
|
69
|
+
// Focus events are now handled by the parent dropdown component
|
|
70
|
+
// Only emit if this is a standalone option (not within a dropdown)
|
|
71
|
+
if (!this.parentElement) {
|
|
72
|
+
this.tdsFocus.emit(event);
|
|
73
|
+
}
|
|
70
74
|
};
|
|
71
75
|
this.handleBlur = (event) => {
|
|
72
|
-
|
|
76
|
+
// Blur events are now handled by the parent dropdown component
|
|
77
|
+
// Only emit if this is a standalone option (not within a dropdown)
|
|
78
|
+
if (!this.parentElement) {
|
|
79
|
+
this.tdsBlur.emit(event);
|
|
80
|
+
}
|
|
81
|
+
// Always prevent the event from bubbling up to avoid interference
|
|
82
|
+
event.stopPropagation();
|
|
73
83
|
};
|
|
74
84
|
this.value = undefined;
|
|
75
85
|
this.internalValue = undefined;
|
|
@@ -89,13 +99,8 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
|
|
|
89
99
|
componentWillLoad() {
|
|
90
100
|
this.internalValue = convertToString(this.value);
|
|
91
101
|
}
|
|
92
|
-
connectedCallback() {
|
|
93
|
-
if (!this.tdsAriaLabel && !this.multiselect) {
|
|
94
|
-
console.warn('Tegel Dropdown option component: tdsAriaLabel prop is missing');
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
102
|
render() {
|
|
98
|
-
return (h(Host, { key: '
|
|
103
|
+
return (h(Host, { key: '32e24afab090771e384db240a9d3b79cb97e26d1' }, h("div", { key: '76ae9e5bd5580cfd5200753e42de8b74174cf75c', class: `dropdown-option
|
|
99
104
|
${this.size}
|
|
100
105
|
${this.selected ? 'selected' : ''}
|
|
101
106
|
${this.disabled ? 'disabled' : ''}
|
|
@@ -10,15 +10,10 @@ const TdsBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumbs e
|
|
|
10
10
|
this.__attachShadow();
|
|
11
11
|
this.tdsAriaLabel = undefined;
|
|
12
12
|
}
|
|
13
|
-
connectedCallback() {
|
|
14
|
-
if (!this.tdsAriaLabel) {
|
|
15
|
-
console.warn('Tegel Breadcrumbs component: missing tdsAriaLabel prop');
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
13
|
render() {
|
|
19
14
|
var _a;
|
|
20
15
|
(_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
|
|
21
|
-
return (h("nav", { key: '
|
|
16
|
+
return (h("nav", { key: 'd79f99fbdf47a75d66376c7900a1ba2ccfad0ef2', "aria-label": this.tdsAriaLabel }, h("div", { key: 'c06fa49904e230b1fcbaa8eeba1e2d6059f4eccd', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'fd44b69cd45ffaed95c865988832fa56c545125c' }))));
|
|
22
17
|
}
|
|
23
18
|
get host() { return this; }
|
|
24
19
|
static get style() { return TdsBreadcrumbsStyle0; }
|
|
@@ -21,11 +21,6 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends H {
|
|
|
21
21
|
this.value = undefined;
|
|
22
22
|
this.onlyIcon = false;
|
|
23
23
|
}
|
|
24
|
-
connectedCallback() {
|
|
25
|
-
if (this.onlyIcon && !this.tdsAriaLabel) {
|
|
26
|
-
console.warn('Tegel button component: please specify the tdsAriaLabel prop when you have the onlyIcon attribute set to true');
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
24
|
handleKeyDown(event) {
|
|
30
25
|
if (event.key === 'Enter' && !this.disabled) {
|
|
31
26
|
this.host.querySelector('button').classList.add('active');
|
|
@@ -42,11 +37,11 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends H {
|
|
|
42
37
|
if (!this.text && !hasLabelSlot) {
|
|
43
38
|
this.onlyIcon = true;
|
|
44
39
|
}
|
|
45
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: '7358240d76e1b7a6df238b2a1e5f1702f9cd33d7', class: {
|
|
46
41
|
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
|
|
47
42
|
disabled: Boolean(this.disabled),
|
|
48
43
|
fullbleed: Boolean(this.fullbleed),
|
|
49
|
-
}, disabled: this.disabled }, h("button", Object.assign({ key: '
|
|
44
|
+
}, disabled: this.disabled }, h("button", Object.assign({ key: '971f814b0b832e9b161c77812fb7668ed34312ab', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
|
|
50
45
|
'primary': this.variant === 'primary',
|
|
51
46
|
'secondary': this.variant === 'secondary',
|
|
52
47
|
'ghost': this.variant === 'ghost',
|
|
@@ -60,7 +55,7 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends H {
|
|
|
60
55
|
'icon': hasIconSlot,
|
|
61
56
|
'only-icon': this.onlyIcon,
|
|
62
57
|
[`animation-${this.animation}`]: this.animation !== 'none',
|
|
63
|
-
} }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '
|
|
58
|
+
} }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '2dc9400b032af40765d7ba1add85c09249dea64b', name: "label" }), hasIconSlot && h("slot", { key: '01af3eeaa00abc5dc824f4fa4633b2460fb4fe46', name: "icon" }))));
|
|
64
59
|
}
|
|
65
60
|
get host() { return this; }
|
|
66
61
|
static get style() { return TdsButtonStyle0; }
|
|
@@ -72,11 +72,6 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
|
|
|
72
72
|
}
|
|
73
73
|
return Object.assign(Object.assign({}, commonAttributes), { onClick: () => this.handleClick() });
|
|
74
74
|
}
|
|
75
|
-
connectedCallback() {
|
|
76
|
-
if (!this.tdsAriaLabel) {
|
|
77
|
-
console.warn('Tegel Chip component: tdsAriaLabel prop is missing');
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
75
|
render() {
|
|
81
76
|
const inputAttributes = this.renderInputAttributes();
|
|
82
77
|
const hasPrefixSlot = hasSlot('prefix', this.host);
|
|
@@ -90,7 +85,7 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
|
|
|
90
85
|
'suffix': hasSuffixSlot,
|
|
91
86
|
'disabled': this.disabled,
|
|
92
87
|
};
|
|
93
|
-
return (h(Host, { key: '
|
|
88
|
+
return (h(Host, { key: '4a498e81dbdd096e01d502a1bc378bfa9f7ea61d' }, h("div", { key: '441e76b25ec9fb91485f3394e6df08fa2ac0363f', class: "component" }, h("div", { key: '88658da3bae225792261b6b3b7796c514d76e665', class: chipClasses }, h("input", Object.assign({ key: '1e495bd583136ba481b7f11891f008c8584b0b38', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'ffaff7dd33befe64eb69fc6f786efd38eb654628', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '95a6bf9c4d337a9d9caaf66b598615af657045c3', name: "prefix" }), hasLabelSlot && h("slot", { key: '2e732390348814bbeea2bb0c4c5fa0b9206a6578', name: "label" }), hasSuffixSlot && h("slot", { key: '716254ff0b5995b2d2a99dcd2aaa2f94613255d0', name: "suffix" }))))));
|
|
94
89
|
}
|
|
95
90
|
get host() { return this; }
|
|
96
91
|
static get style() { return TdsChipStyle0; }
|
|
@@ -114,11 +114,6 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
|
|
|
114
114
|
}
|
|
115
115
|
this.value = value;
|
|
116
116
|
}
|
|
117
|
-
connectedCallback() {
|
|
118
|
-
if (!this.tdsAriaLabel && !this.label) {
|
|
119
|
-
console.warn('Tegel Datetime component: provide the label or tdsAriaLabel prop for improved accessibility');
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
117
|
render() {
|
|
123
118
|
let className = ' tds-datetime-input';
|
|
124
119
|
if (this.size === 'md') {
|
|
@@ -139,7 +134,7 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
|
|
|
139
134
|
'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
|
|
140
135
|
};
|
|
141
136
|
const iphone = navigator.userAgent.toLowerCase().includes('iphone');
|
|
142
|
-
return (h("div", { key: '
|
|
137
|
+
return (h("div", { key: 'f397a4fc034fb7cd4dcb8ed7b0cbf2ab2e51177a', class: classNames, onKeyDown: (e) => {
|
|
143
138
|
if (e.key === 'Enter') {
|
|
144
139
|
const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
|
|
145
140
|
if (browserIsChrome) {
|
|
@@ -147,9 +142,9 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
|
|
|
147
142
|
this.textInput.showPicker();
|
|
148
143
|
}
|
|
149
144
|
}
|
|
150
|
-
} }, this.labelPosition === 'outside' && this.label && (h("label", { key: '
|
|
145
|
+
} }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'e5dd50563ed2d464983016bc608d81b77c379add', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'b2c01f96bb7d8fa7279ac27048328204cc249547', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'e7002fc416e62d2c93c337aee1869aa817997df9', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '3fdf8d55b15f5a00d4fb0755d5774fee93f100b9', ref: (inputEl) => {
|
|
151
146
|
this.textInput = inputEl;
|
|
152
|
-
}, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '
|
|
147
|
+
}, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: '80dec676d32fd856e7a7dcee7b7e6acbb8b66827', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'ff276d3c174c88c14081d7a5da689c278844422a', class: "tds-datetime-helper" }, h("div", { key: '9401ca569dd8c23e1bcbdccb39d9f8134fc027db', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'dada47e75f30dac9b132477ffd73720d0e1a7530', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
|
|
153
148
|
}
|
|
154
149
|
static get style() { return TdsDatetimeStyle0; }
|
|
155
150
|
}, [2, "tds-datetime", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-a65b09a1.js';
|
|
2
2
|
|
|
3
3
|
const TdsDropdownOption = TdsDropdownOption$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
-
import { h as hasSlot } from './p-ae110fc2.js';
|
|
4
3
|
import { d as defineCustomElement$6 } from './p-9ad61cb5.js';
|
|
5
4
|
import { d as defineCustomElement$5 } from './p-6adb1ce3.js';
|
|
6
5
|
import { d as defineCustomElement$4 } from './p-b390ece5.js';
|
|
@@ -54,20 +53,14 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
|
|
|
54
53
|
});
|
|
55
54
|
}
|
|
56
55
|
}
|
|
57
|
-
connectedCallback() {
|
|
58
|
-
const hasLabelSlot = hasSlot('label', this.host);
|
|
59
|
-
if (!this.tdsAriaLabel && !hasLabelSlot) {
|
|
60
|
-
console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
56
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'd3f0a943b953783f2fc1c6345563a5adf0ded1dd' }, h("div", { key: 'c7028ceb31b9409d76d3663cd92a1fb3fa68fd7e', class: {
|
|
65
58
|
'state-open': this.open,
|
|
66
|
-
} }, h("tds-header-item", { key: '
|
|
59
|
+
} }, h("tds-header-item", { key: 'f1d5fe99ee0b62316dd0b48c9b5bb04439fb9b12', class: "button", active: this.open, selected: this.selected }, h("button", { key: '0e1437b558782c96e984287bfc0b9f301090bdb0', ref: (el) => {
|
|
67
60
|
this.buttonEl = el;
|
|
68
61
|
}, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
|
|
69
62
|
this.toggleDropdown();
|
|
70
|
-
}, "aria-label": this.tdsAriaLabel }, h("slot", { key: '
|
|
63
|
+
}, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'fc63cfe2414eb2c60fe85e481a3af49af3ce9653', name: "icon" }), this.label, h("slot", { key: 'f302406472c7be0223fa17b76cc2674cb3e148b7', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '32c53b88ffeed4a78f9efc77b5976afe190c86c6', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '86ed4a3140d80521792b2953bc4acdef9476c3f6', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
|
|
71
64
|
{
|
|
72
65
|
name: 'flip',
|
|
73
66
|
options: {
|