@scania/tegel 1.36.0-ghost-button.beta.0 → 1.36.0-remove-aria-warnings-beta.1

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.
Files changed (97) hide show
  1. package/dist/cjs/tds-breadcrumbs.cjs.entry.js +1 -6
  2. package/dist/cjs/tds-button.cjs.entry.js +4 -9
  3. package/dist/cjs/tds-checkbox.cjs.entry.js +2 -7
  4. package/dist/cjs/tds-chip.cjs.entry.js +1 -6
  5. package/dist/cjs/tds-datetime.cjs.entry.js +3 -8
  6. package/dist/cjs/tds-dropdown_2.cjs.entry.js +6 -16
  7. package/dist/cjs/tds-header-dropdown.cjs.entry.js +3 -10
  8. package/dist/cjs/tds-header-hamburger.cjs.entry.js +1 -6
  9. package/dist/cjs/tds-header-launcher.cjs.entry.js +2 -7
  10. package/dist/cjs/tds-text-field.cjs.entry.js +5 -10
  11. package/dist/cjs/tds-textarea.cjs.entry.js +3 -8
  12. package/dist/cjs/tds-toggle.cjs.entry.js +4 -7
  13. package/dist/collection/components/breadcrumbs/breadcrumbs.js +1 -6
  14. package/dist/collection/components/button/button.css +3 -3
  15. package/dist/collection/components/button/button.js +3 -8
  16. package/dist/collection/components/checkbox/checkbox.js +2 -7
  17. package/dist/collection/components/chip/chip.js +1 -6
  18. package/dist/collection/components/datetime/datetime.js +3 -8
  19. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +1 -6
  20. package/dist/collection/components/dropdown/dropdown.js +5 -10
  21. package/dist/collection/components/header/header-dropdown/header-dropdown.js +3 -10
  22. package/dist/collection/components/header/header-hamburger/header-hamburger.js +1 -6
  23. package/dist/collection/components/header/header-launcher/header-launcher.js +2 -7
  24. package/dist/collection/components/text-field/text-field.js +5 -10
  25. package/dist/collection/components/textarea/textarea.js +3 -8
  26. package/dist/collection/components/toggle/toggle.js +4 -7
  27. package/dist/components/{p-23aab3b9.js → p-44f5b5e1.js} +2 -7
  28. package/dist/components/{p-ffbaebb1.js → p-94bfc9f4.js} +5 -10
  29. package/dist/components/{p-19edd11a.js → p-d64878cb.js} +2 -7
  30. package/dist/components/tds-breadcrumbs.js +1 -6
  31. package/dist/components/tds-button.js +4 -9
  32. package/dist/components/tds-checkbox.js +1 -1
  33. package/dist/components/tds-chip.js +1 -6
  34. package/dist/components/tds-datetime.js +3 -8
  35. package/dist/components/tds-dropdown-option.js +1 -1
  36. package/dist/components/tds-dropdown.js +1 -1
  37. package/dist/components/tds-header-dropdown.js +3 -10
  38. package/dist/components/tds-header-hamburger.js +1 -6
  39. package/dist/components/tds-header-launcher.js +2 -7
  40. package/dist/components/tds-table-body-row.js +1 -1
  41. package/dist/components/tds-table-footer.js +3 -3
  42. package/dist/components/tds-table-header.js +1 -1
  43. package/dist/components/tds-text-field.js +5 -10
  44. package/dist/components/tds-textarea.js +3 -8
  45. package/dist/components/tds-toggle.js +4 -7
  46. package/dist/esm/tds-breadcrumbs.entry.js +1 -6
  47. package/dist/esm/tds-button.entry.js +4 -9
  48. package/dist/esm/tds-checkbox.entry.js +2 -7
  49. package/dist/esm/tds-chip.entry.js +1 -6
  50. package/dist/esm/tds-datetime.entry.js +3 -8
  51. package/dist/esm/tds-dropdown_2.entry.js +6 -16
  52. package/dist/esm/tds-header-dropdown.entry.js +3 -10
  53. package/dist/esm/tds-header-hamburger.entry.js +1 -6
  54. package/dist/esm/tds-header-launcher.entry.js +2 -7
  55. package/dist/esm/tds-text-field.entry.js +5 -10
  56. package/dist/esm/tds-textarea.entry.js +3 -8
  57. package/dist/esm/tds-toggle.entry.js +4 -7
  58. package/dist/tegel/p-00c4fa7f.entry.js +1 -0
  59. package/dist/tegel/p-1b471db7.entry.js +1 -0
  60. package/dist/tegel/p-2a8c194d.entry.js +1 -0
  61. package/dist/tegel/p-3022d31d.entry.js +1 -0
  62. package/dist/tegel/p-303acf88.entry.js +1 -0
  63. package/dist/tegel/p-397c8969.entry.js +1 -0
  64. package/dist/tegel/p-3ebe93ff.entry.js +1 -0
  65. package/dist/tegel/p-60dbfb58.entry.js +1 -0
  66. package/dist/tegel/p-8c2695af.entry.js +1 -0
  67. package/dist/tegel/p-9b0c886e.entry.js +1 -0
  68. package/dist/tegel/p-d85104a7.entry.js +1 -0
  69. package/dist/tegel/p-f9c17612.entry.js +1 -0
  70. package/dist/tegel/tegel.css +1 -1
  71. package/dist/tegel/tegel.esm.js +1 -1
  72. package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +0 -1
  73. package/dist/types/components/button/button.d.ts +0 -1
  74. package/dist/types/components/checkbox/checkbox.d.ts +0 -1
  75. package/dist/types/components/chip/chip.d.ts +0 -1
  76. package/dist/types/components/datetime/datetime.d.ts +0 -1
  77. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -1
  78. package/dist/types/components/dropdown/dropdown.d.ts +0 -1
  79. package/dist/types/components/header/header-dropdown/header-dropdown.d.ts +0 -1
  80. package/dist/types/components/header/header-hamburger/header-hamburger.d.ts +0 -1
  81. package/dist/types/components/header/header-launcher/header-launcher.d.ts +0 -1
  82. package/dist/types/components/text-field/text-field.d.ts +0 -1
  83. package/dist/types/components/textarea/textarea.d.ts +0 -1
  84. package/dist/types/components/toggle/toggle.d.ts +0 -1
  85. package/package.json +1 -1
  86. package/dist/tegel/p-23ea1922.entry.js +0 -1
  87. package/dist/tegel/p-291ee72b.entry.js +0 -1
  88. package/dist/tegel/p-2c56421f.entry.js +0 -1
  89. package/dist/tegel/p-391ce989.entry.js +0 -1
  90. package/dist/tegel/p-5020a688.entry.js +0 -1
  91. package/dist/tegel/p-618d6b4f.entry.js +0 -1
  92. package/dist/tegel/p-7d79e50c.entry.js +0 -1
  93. package/dist/tegel/p-83831252.entry.js +0 -1
  94. package/dist/tegel/p-9fe97da7.entry.js +0 -1
  95. package/dist/tegel/p-ab103d0c.entry.js +0 -1
  96. package/dist/tegel/p-b58194f9.entry.js +0 -1
  97. package/dist/tegel/p-f9374451.entry.js +0 -1
@@ -19,11 +19,6 @@ export class TdsButton {
19
19
  this.value = undefined;
20
20
  this.onlyIcon = false;
21
21
  }
22
- connectedCallback() {
23
- if (this.onlyIcon && !this.tdsAriaLabel) {
24
- console.warn('Tegel button component: please specify the tdsAriaLabel prop when you have the onlyIcon attribute set to true');
25
- }
26
- }
27
22
  handleKeyDown(event) {
28
23
  if (event.key === 'Enter' && !this.disabled) {
29
24
  this.host.querySelector('button').classList.add('active');
@@ -40,11 +35,11 @@ export class TdsButton {
40
35
  if (!this.text && !hasLabelSlot) {
41
36
  this.onlyIcon = true;
42
37
  }
43
- return (h(Host, { key: '37c42e8c220b689445940a8dc863e24b46daa4f5', class: {
38
+ return (h(Host, { key: '7358240d76e1b7a6df238b2a1e5f1702f9cd33d7', class: {
44
39
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
45
40
  disabled: Boolean(this.disabled),
46
41
  fullbleed: Boolean(this.fullbleed),
47
- }, disabled: this.disabled }, h("button", Object.assign({ key: 'aa4a32c29d10f66ff37e1b6c6ab4381a587c89d7', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
42
+ }, 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: {
48
43
  'primary': this.variant === 'primary',
49
44
  'secondary': this.variant === 'secondary',
50
45
  'ghost': this.variant === 'ghost',
@@ -58,7 +53,7 @@ export class TdsButton {
58
53
  'icon': hasIconSlot,
59
54
  'only-icon': this.onlyIcon,
60
55
  [`animation-${this.animation}`]: this.animation !== 'none',
61
- } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '4b6fa14e76d9952fd48566e51196717b741e639b', name: "label" }), hasIconSlot && h("slot", { key: '7e922832ce9f28a4181d38dbfec4906a6ccb6c48', name: "icon" }))));
56
+ } }, (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" }))));
62
57
  }
63
58
  static get is() { return "tds-button"; }
64
59
  static get encapsulation() { return "scoped"; }
@@ -58,17 +58,12 @@ export class TdsCheckbox {
58
58
  this.indeterminate = false;
59
59
  }
60
60
  }
61
- connectedCallback() {
62
- if (!this.tdsAriaLabel) {
63
- console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
64
- }
65
- }
66
61
  render() {
67
- return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '18b283a21ff649b9a4935a7b3e6f489cde16073d',
62
+ return (h("div", { key: '87d4e8620e183b5fb8a885dca8081424c7497b21', class: "tds-checkbox" }, h("input", { key: 'fa5d4c8e9a33a7a88d1348f6eb66b474e94c0ad1',
68
63
  // eslint-disable-next-line no-return-assign
69
64
  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: () => {
70
65
  this.handleChange();
71
- } }), h("label", { key: '51d15b0eea1fd0f7517ca8d0f669bc02ac59781c', htmlFor: this.checkboxId }, h("slot", { key: 'bb10126c57b177f825ef8cd75da505465b2d6ae3', name: "label" }))));
66
+ } }), h("label", { key: '82545f01ad68fae4d613b58d82a770a0c1bce79e', htmlFor: this.checkboxId }, h("slot", { key: '99892e112b596a7f8517427cc42f75e90140c315', name: "label" }))));
72
67
  }
73
68
  static get is() { return "tds-checkbox"; }
74
69
  static get encapsulation() { return "scoped"; }
@@ -68,11 +68,6 @@ export class TdsChip {
68
68
  }
69
69
  return Object.assign(Object.assign({}, commonAttributes), { onClick: () => this.handleClick() });
70
70
  }
71
- connectedCallback() {
72
- if (!this.tdsAriaLabel) {
73
- console.warn('Tegel Chip component: tdsAriaLabel prop is missing');
74
- }
75
- }
76
71
  render() {
77
72
  const inputAttributes = this.renderInputAttributes();
78
73
  const hasPrefixSlot = hasSlot('prefix', this.host);
@@ -86,7 +81,7 @@ export class TdsChip {
86
81
  'suffix': hasSuffixSlot,
87
82
  'disabled': this.disabled,
88
83
  };
89
- return (h(Host, { key: 'bec32d74f1e0a42f98fb431d5988ba1d78c57b43' }, h("div", { key: 'af67d86bbf22be341cc816d72dad135cf04a9002', class: "component" }, h("div", { key: 'ee91bc58ca35ba6307e270f63bbb3da65e16b4f9', class: chipClasses }, h("input", Object.assign({ key: 'a5e723793a8f8c749f6d54937bbde888788115e0', 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: 'f0a219c8f5c462e3ec626551aeea054ead479d2b', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '9169b3a496fa6648873811a3ca9eb5d51d110a6f', name: "prefix" }), hasLabelSlot && h("slot", { key: '932e06fe8be85d7588d11024ebc87000c887e9c0', name: "label" }), hasSuffixSlot && h("slot", { key: '3f159f17de790ec17b64a596b9f88dbbda7d1429', name: "suffix" }))))));
84
+ 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" }))))));
90
85
  }
91
86
  static get is() { return "tds-chip"; }
92
87
  static get encapsulation() { return "scoped"; }
@@ -103,11 +103,6 @@ export class TdsDatetime {
103
103
  }
104
104
  this.value = value;
105
105
  }
106
- connectedCallback() {
107
- if (!this.tdsAriaLabel && !this.label) {
108
- console.warn('Tegel Datetime component: provide the label or tdsAriaLabel prop for improved accessibility');
109
- }
110
- }
111
106
  render() {
112
107
  let className = ' tds-datetime-input';
113
108
  if (this.size === 'md') {
@@ -128,7 +123,7 @@ export class TdsDatetime {
128
123
  'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
129
124
  };
130
125
  const iphone = navigator.userAgent.toLowerCase().includes('iphone');
131
- return (h("div", { key: '28c414fb800bb7e1411feb93b03b4ec4732e60fb', class: classNames, onKeyDown: (e) => {
126
+ return (h("div", { key: 'f397a4fc034fb7cd4dcb8ed7b0cbf2ab2e51177a', class: classNames, onKeyDown: (e) => {
132
127
  if (e.key === 'Enter') {
133
128
  const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
134
129
  if (browserIsChrome) {
@@ -136,9 +131,9 @@ export class TdsDatetime {
136
131
  this.textInput.showPicker();
137
132
  }
138
133
  }
139
- } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '8498489db26eeffef963d57dd8aaaa27903e3e98', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'e62f09d543d12a3d9578bee5249171c85c7e3f03', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '0d083993b8f447918d0110ba78f18586d5afac1c', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'cdec8e9e1c8f355858031f34799fac7dd8d03c4b', ref: (inputEl) => {
134
+ } }, 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) => {
140
135
  this.textInput = inputEl;
141
- }, 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: 'f5ab00bd2a3dca4a46981da7e54ff6dcacfb6529', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'ce7799142c01703e7d3add1bc3d0fb474dec25e3', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '189b60ff034d2e0bc49e9461fc9970846a7e10a2', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '192c46c706e8d8ca8613e832df2f77e981b64e2a', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e0cb4c98ccd40cb6d5b82d313aa48da8e4564b57', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: '5a677ae45553060d459e1002741c0bed7ae1cefa', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '0b132b2f580c3dffcfceff2ba8b4c2315ca8cd50', class: "tds-datetime-helper" }, h("div", { key: 'b17e1f96757072c8092e4cbe6e66b45b209a16ae', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '8afde58643e719da112bad1dcdc47f363c85490c', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
136
+ }, 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)))));
142
137
  }
143
138
  static get is() { return "tds-datetime"; }
144
139
  static get encapsulation() { return "scoped"; }
@@ -80,13 +80,8 @@ export class TdsDropdownOption {
80
80
  componentWillLoad() {
81
81
  this.internalValue = convertToString(this.value);
82
82
  }
83
- connectedCallback() {
84
- if (!this.tdsAriaLabel && !this.multiselect) {
85
- console.warn('Tegel Dropdown option component: tdsAriaLabel prop is missing');
86
- }
87
- }
88
83
  render() {
89
- return (h(Host, { key: '52827112a3060a8858978c3e65c284358f923539' }, h("div", { key: 'edf5262e5dbbfadf34ff6faa164e58b7fec1e561', class: `dropdown-option
84
+ return (h(Host, { key: 'd35a3153be292b1656d0efca93f06bfc1357041b' }, h("div", { key: '384353f9868a3fb559ca4140d5cd4f5553e024ad', class: `dropdown-option
90
85
  ${this.size}
91
86
  ${this.selected ? 'selected' : ''}
92
87
  ${this.disabled ? 'disabled' : ''}
@@ -441,11 +441,6 @@ export class TdsDropdown {
441
441
  form.removeEventListener('reset', this.resetInput);
442
442
  }
443
443
  }
444
- connectedCallback() {
445
- if (!this.tdsAriaLabel) {
446
- console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
447
- }
448
- }
449
444
  updateDropdownListInertState() {
450
445
  if (this.dropdownList) {
451
446
  if (this.open) {
@@ -461,9 +456,9 @@ export class TdsDropdown {
461
456
  // Generate unique IDs for associating labels and helpers with the input/button
462
457
  const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
463
458
  const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
464
- return (h(Host, { key: '676f9d61c5fd8488cedbc949757e992be13e49eb', class: {
459
+ return (h(Host, { key: '69cdc96b6983b9556b4a9133ef8a0d2fa1e9e18e', class: {
465
460
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
466
- } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ac4f3c9ca2719acc72f06ae977bf032d05913c6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c9d4142f63e315c73daef5038f266a32b05559a1', class: {
461
+ } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1cc3f825bc81ca34af7bbe845bd900531f724172', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '213f3149de4b9bc4c147ab658d6d5199d3360181', class: {
467
462
  'dropdown-select': true,
468
463
  [this.size]: true,
469
464
  'disabled': this.disabled,
@@ -513,7 +508,7 @@ export class TdsDropdown {
513
508
  label-inside-as-placeholder
514
509
  ${this.size}
515
510
  ${this.selectedOptions.length ? 'selected' : ''}
516
- ` }, 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: '6de931198040eec79815f83e2617d2646507b6a1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
511
+ ` }, 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: 'af7815b0cb8b36e37278965094d5198a9ff5aba9', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
517
512
  this.dropdownList = element;
518
513
  }, class: {
519
514
  'dropdown-list': true,
@@ -524,11 +519,11 @@ export class TdsDropdown {
524
519
  'closed': !this.open,
525
520
  [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
526
521
  [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
527
- } }, h("slot", { key: '61ab9737181371073b25b95c34dad3311c2995c0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'aca39f881a57a6a23de03da78b5062e5dff55af7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1e4221e58bc16608bfb0f780b7bc8040935eab37', id: helperId, class: {
522
+ } }, h("slot", { key: '736b82b5f716fa818c17ae161341bc6b131d9cf2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'f1c1471cbec4a6dd8830a8540f54e142c559d539', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'aa138a349c073158785ae1177c0879604f6b8d90', id: helperId, class: {
528
523
  helper: true,
529
524
  error: this.error,
530
525
  disabled: this.disabled,
531
- } }, this.error && h("tds-icon", { key: 'ec946e77add75e7eaf194e2b38e5dd1c548ab32f', name: "error", size: "16px" }), this.helper))));
526
+ } }, this.error && h("tds-icon", { key: '936a8bd7db8a0ed994d6827c26bbb6732420fea4', name: "error", size: "16px" }), this.helper))));
532
527
  }
533
528
  static get is() { return "tds-dropdown"; }
534
529
  static get encapsulation() { return "shadow"; }
@@ -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: '6ab1d0f1d475d6d0a486e1909cad300d89eb39a0' }, h("div", { key: 'bfe11cdc8c2bf592cec7f3cf8888555071781afe', class: {
50
+ return (h(Host, { key: 'd3f0a943b953783f2fc1c6345563a5adf0ded1dd' }, h("div", { key: 'c7028ceb31b9409d76d3663cd92a1fb3fa68fd7e', class: {
58
51
  'state-open': this.open,
59
- } }, h("tds-header-item", { key: '27b6d2680858443a26d7108b5318386df76db788', class: "button", active: this.open, selected: this.selected }, h("button", { key: '09d0ccb3bc5a31a897af65f5fcf4d47ee8b35192', ref: (el) => {
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: '50c872c297116ece9dd5da41398aac3bd88cd529', name: "icon" }), this.label, h("slot", { key: '141a43cdc4c8aeade4d547bbb91a28f62542bb98', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '13f2f8d6b264f09dea45e9b7809adab1b83db683', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '10b18c15ae1d2c0fbafaa82bed4ae7759c857c54', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
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: '5ea87f94483c167f580c26c7914a22cb6caea885' }, h("tds-header-item", { key: 'f2792ffbd859c263165b95b7d2cd9d1c76509c8f' }, h("button", Object.assign({ key: 'd1c44fcf5b7bb9c3cefbbbf09e3217704770f761' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '62ec94113557c7032a3145ad4b6ac22d39d6453c', class: "icon", name: "burger", size: "20px" })))));
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: 'a1c8cce3e26d57b654700893add3e5e1554e23d0' }, h("div", { key: 'bfc4e2f77d142f4913a4509b0c16b7503c942bf3', class: {
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: 'c30e8b26d73a8d3a5aa5bf476226419b70c26061' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '10e13ac7fb52c3123dd51d1f91754262feb56134', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
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: '985928ef59662762648f2d95d5decad2e3188e05', class: {
74
+ return (h("div", { key: 'ada8e30b1f05bc2c4752ca7ddcf8edbe3b1df136', 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: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
92
+ } }, this.labelPosition === 'outside' && (h("div", { key: '9038e6d82e1b5010e81df9abface6b776ea04e4e', class: "text-field-label-outside" }, h("label", { key: '29d4bce96da92d2aecf88b7cd856e99add21b0a6', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '81f5071052a7e9f7a71c2d60a6dfb762a0f29681', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '2bc0d2889ba0fb42c543842d2432f63228ecacc8', 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: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
97
+ } }, h("slot", { key: 'cbc322cc43bf3346bfcab9b310813d3dd2d73b7d', name: "prefix" }))), h("div", { key: '1ba419f4a6f95e84b8f682f223191d9011cb9c4e', class: "text-field-input-container" }, h("input", { key: 'ef83eabcb17d78a85bfd9ca00540eba78257fdf9', 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: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '5b298f0fa7da72f81044f8376f880c837c0b6641', class: {
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: 'bc3a496bc79a8f2e8513d94ab6f9067981d6e8a3', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '9542af93fba75517d3eed06ee019792f3bd7bcd5', 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: '00ea364a0cb2f8082f2130a420723af0b70b7782', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'b26ff9d734bc0ad028ddf949a561dddfe5095497', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '49e804e5574dbaaa07f3c4ef7bfa296b5d7c96b3', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '289871dfa5b3d5272f1c278cab643aee46917646', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0044e01906f1799b4f2171f81641dd83774de258', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '5ba083696e74ee6070a15e33540e6bf4dc274487', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'afd728709f2411e0062e56896d987e7bec899f59', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'e500647edf86ff8a246937432fbd3d2332c2f353', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '082d6c56531234c32adb4b9d51db56e2ff562578', class: {
118
+ } }, h("slot", { key: '9efe2a289ab639c41fb3af433242a31ccb95d368', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '4d778d8f53d1618e982fbdda56c5f2bf497c06bf', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '163b9b22ab728ae0d8d39ac6452e425adcfa199e', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '78a29003ed1289c8ace7e8155424b9305f245731', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '9d31daacf361e8a74a68b7dc715b25ed3a98a4ec', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '3b75706cacf0a33fab58a40f6421964ef4fd0fa9', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'b42fe66103602cfa60c827c4422e1404f9754593', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '02c70a8414dab6df3ceb33e49d987762d1252bd6', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'f11a2cdedce075323778749b5c15909262e13465', 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: 'a96bf81b9f4a714ae2a6a725a62bcb8f76119f6c', class: {
63
+ return (h("div", { key: '97f8921f584d489b3d20bfa13663e14fa274f6fc', 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: '5e96d6e065b58c8b9f14ebfff36ec61ec6859c84', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '2cfe4d666a9fa8a17df35cc6ff3eeff40f556282', class: "textarea-wrapper" }, h("textarea", { key: 'a8d4223bc5b6007cca6b4a8cc311bf5c70445193', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
73
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: '36c593b01265179d1c24f4b093de657f0768b919', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '645e79d49d4f7ce0ad3666f4c3fd7cf77dc8f740', class: "textarea-wrapper" }, h("textarea", { key: 'e313a3a22a5f7dd9f93f6a929fa980a1ff26607c', 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: '865f65211a45368fb53c6f45ac476116d8490b41', class: "textarea-resizer-icon" }, h("svg", { key: '4413be24d3588eea8f111533f16fd6f3a8fef972', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e876b91bff01e8a750781b384f3e6157d299aa46', "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: '5e2f9a21f10b845b708c049d23920106a1719f3f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '16081527b573461a92fe56bcf98cc036fd62bda7', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '26731d4495314e55a59b4268112ff2d85d464a56', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'fbc94414673871a6b39ad3c54cd32601b3907bac', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '7374c9752ddfd2e7300b176e16e67eeac1c4bdf3', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '405d7bdb185b8024ae8bd73b3d5b7acb577ba051', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '0ebaed674420f9761c81ba30229cb745bbf526a5', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
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: 'f1883b43a9e912d3aa004819d195fc64bf3eec79', class: "textarea-resizer-icon" }, h("svg", { key: '8ea84dccc84a89ec8c2feed3483507d2ede3a538', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9d8b5c64f41124d72d9765e159b54f73313c950f', "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: '14d472bc161e9291aa7085f51a9f06ece85df439', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '64f66dd796f92b17278786870943f96251517584', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '7e1ddf8da7906d18de88aa9ed122745f274dbfcd', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'edbc0e01e0a1d6f11ef5c31c6109553c4540a80c', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'be919e136de6b2e0f961a907a039e1c0312f5531', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '2ce5bfcf7795ce7e20e5aac4bf734ec8275777d8', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'a4d545a1d3bdd32911acf50e34f046e1647d6230', 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: '8816da87f8d6d2f7c220101b8edaefc8970337e2', class: "tds-toggle" }, this.headline && (h("div", { key: 'f82d43b60715a25a079565d1751ba96f4a99f98e', class: {
42
+ return (h("div", { key: '829f5720f610e60fe9c3d335f419e9290f6efaa6', class: "tds-toggle" }, this.headline && (h("div", { key: '4e2ae1cdd691c5692ef2612cb6683000bb8898ce', class: {
48
43
  'toggle-headline': true,
49
44
  'disabled': this.disabled,
50
- } }, this.headline)), h("input", { key: '6f96b705c464f40fcc68ea75f1b065ad47cd76b8', ref: (inputEl) => (this.inputElement = inputEl), "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: 'cfe3a7a8a40c8010d0b67cf1165e41fcf17c2d6f', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '535b732e1195f21b8ed455ba4e684abec2afce0f', name: "label" })))));
45
+ } }, this.headline)), h("input", { key: '32816cb95820b151058f4c020b8d0f0e46708fd2', 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: 'd61d1c1c16aa7918f34dac371a6d03bd767c4b8a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '121e4f6f4b2a1f0f6e215026f6b3a79487ee7fdb', name: "label" })))));
51
48
  }
52
49
  static get is() { return "tds-toggle"; }
53
50
  static get encapsulation() { return "scoped"; }
@@ -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: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '18b283a21ff649b9a4935a7b3e6f489cde16073d',
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: '51d15b0eea1fd0f7517ca8d0f669bc02ac59781c', htmlFor: this.checkboxId }, h("slot", { key: 'bb10126c57b177f825ef8cd75da505465b2d6ae3', name: "label" }))));
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 {
@@ -505,11 +505,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
505
505
  form.removeEventListener('reset', this.resetInput);
506
506
  }
507
507
  }
508
- connectedCallback() {
509
- if (!this.tdsAriaLabel) {
510
- console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
511
- }
512
- }
513
508
  updateDropdownListInertState() {
514
509
  if (this.dropdownList) {
515
510
  if (this.open) {
@@ -525,9 +520,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
525
520
  // Generate unique IDs for associating labels and helpers with the input/button
526
521
  const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
527
522
  const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
528
- return (h(Host, { key: '676f9d61c5fd8488cedbc949757e992be13e49eb', class: {
523
+ return (h(Host, { key: '69cdc96b6983b9556b4a9133ef8a0d2fa1e9e18e', class: {
529
524
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
530
- } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ac4f3c9ca2719acc72f06ae977bf032d05913c6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c9d4142f63e315c73daef5038f266a32b05559a1', class: {
525
+ } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1cc3f825bc81ca34af7bbe845bd900531f724172', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '213f3149de4b9bc4c147ab658d6d5199d3360181', class: {
531
526
  'dropdown-select': true,
532
527
  [this.size]: true,
533
528
  'disabled': this.disabled,
@@ -577,7 +572,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
577
572
  label-inside-as-placeholder
578
573
  ${this.size}
579
574
  ${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: '6de931198040eec79815f83e2617d2646507b6a1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
575
+ ` }, 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: 'af7815b0cb8b36e37278965094d5198a9ff5aba9', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
581
576
  this.dropdownList = element;
582
577
  }, class: {
583
578
  'dropdown-list': true,
@@ -588,11 +583,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
588
583
  'closed': !this.open,
589
584
  [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
590
585
  [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
591
- } }, h("slot", { key: '61ab9737181371073b25b95c34dad3311c2995c0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'aca39f881a57a6a23de03da78b5062e5dff55af7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1e4221e58bc16608bfb0f780b7bc8040935eab37', id: helperId, class: {
586
+ } }, h("slot", { key: '736b82b5f716fa818c17ae161341bc6b131d9cf2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'f1c1471cbec4a6dd8830a8540f54e142c559d539', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'aa138a349c073158785ae1177c0879604f6b8d90', id: helperId, class: {
592
587
  helper: true,
593
588
  error: this.error,
594
589
  disabled: this.disabled,
595
- } }, this.error && h("tds-icon", { key: 'ec946e77add75e7eaf194e2b38e5dd1c548ab32f', name: "error", size: "16px" }), this.helper))));
590
+ } }, this.error && h("tds-icon", { key: '936a8bd7db8a0ed994d6827c26bbb6732420fea4', name: "error", size: "16px" }), this.helper))));
596
591
  }
597
592
  get host() { return this; }
598
593
  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-23aab3b9.js';
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}";
@@ -89,13 +89,8 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
89
89
  componentWillLoad() {
90
90
  this.internalValue = convertToString(this.value);
91
91
  }
92
- connectedCallback() {
93
- if (!this.tdsAriaLabel && !this.multiselect) {
94
- console.warn('Tegel Dropdown option component: tdsAriaLabel prop is missing');
95
- }
96
- }
97
92
  render() {
98
- return (h(Host, { key: '52827112a3060a8858978c3e65c284358f923539' }, h("div", { key: 'edf5262e5dbbfadf34ff6faa164e58b7fec1e561', class: `dropdown-option
93
+ return (h(Host, { key: 'd35a3153be292b1656d0efca93f06bfc1357041b' }, h("div", { key: '384353f9868a3fb559ca4140d5cd4f5553e024ad', class: `dropdown-option
99
94
  ${this.size}
100
95
  ${this.selected ? 'selected' : ''}
101
96
  ${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: 'fe6eaf7da192518c8f5078ac07082ac437b4aa9d', "aria-label": this.tdsAriaLabel }, h("div", { key: 'a33b2f1de081eff02a6101177cc72a899a81bbff', role: "list", class: "tds-breadcrumb" }, h("slot", { key: '0e7a03715689f66c35f1109d301b42694254c864' }))));
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; }