@scania/tegel 1.28.1-fix-text-field-label-click-focus-beta.0 → 1.28.1-fix-textarea-label-click-focus-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.
Files changed (16) hide show
  1. package/dist/cjs/tds-text-field.cjs.entry.js +5 -7
  2. package/dist/cjs/tds-textarea.cjs.entry.js +5 -3
  3. package/dist/collection/components/text-field/text-field.js +5 -7
  4. package/dist/collection/components/textarea/textarea.js +5 -3
  5. package/dist/components/tds-text-field.js +5 -7
  6. package/dist/components/tds-textarea.js +5 -3
  7. package/dist/esm/tds-text-field.entry.js +5 -7
  8. package/dist/esm/tds-textarea.entry.js +5 -3
  9. package/dist/tegel/p-0fd8e378.entry.js +1 -0
  10. package/dist/tegel/p-135f2276.entry.js +1 -0
  11. package/dist/tegel/tegel.esm.js +1 -1
  12. package/dist/types/components/text-field/text-field.d.ts +0 -1
  13. package/dist/types/components/textarea/textarea.d.ts +1 -0
  14. package/package.json +1 -1
  15. package/dist/tegel/p-132c0d81.entry.js +0 -1
  16. package/dist/tegel/p-66786ba0.entry.js +0 -1
package/dist/cjs/tds-text-field.cjs.entry.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ca8040ad.js');
6
6
  const hasSlot = require('./hasSlot-1c90e9ba.js');
7
- const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
8
7
 
9
8
  const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
10
9
  const TdsTextFieldStyle0 = textFieldCss;
@@ -16,7 +15,6 @@ const TdsTextField = class {
16
15
  this.tdsInput = index.createEvent(this, "tdsInput", 6);
17
16
  this.tdsFocus = index.createEvent(this, "tdsFocus", 6);
18
17
  this.tdsBlur = index.createEvent(this, "tdsBlur", 6);
19
- this.uuid = generateUniqueId.generateUniqueId();
20
18
  this.type = 'text';
21
19
  this.labelPosition = 'no-label';
22
20
  this.label = '';
@@ -85,7 +83,7 @@ const TdsTextField = class {
85
83
  var _a;
86
84
  const usesPrefixSlot = hasSlot.hasSlot('prefix', this.host);
87
85
  const usesSuffixSlot = hasSlot.hasSlot('suffix', this.host);
88
- return (index.h("div", { key: '04c86fdbe70838228aa25e129adde1e92b8c3da1', class: {
86
+ return (index.h("div", { key: '85a4ed4ae1abbf96282697257163addf538b91fc', class: {
89
87
  'form-text-field': true,
90
88
  'form-text-field-nomin': this.noMinWidth,
91
89
  'text-field-focus': this.focusInput && !this.disabled,
@@ -103,12 +101,12 @@ const TdsTextField = class {
103
101
  'form-text-field-sm': this.size === 'sm',
104
102
  'form-text-field-error': this.state === 'error',
105
103
  'form-text-field-success': this.state === 'success',
106
- } }, this.labelPosition === 'outside' && (index.h("div", { key: '89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7', class: "text-field-label-outside" }, index.h("label", { key: '1a26cc9423cd42e4ae64fdfe36ae28a1600217e1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: 'fff9ea20453ad6708b32e5efb7fabd8272863c8d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: '5d3b6511643b28852f3ab9c1490aa1577d0c1870', class: {
104
+ } }, this.labelPosition === 'outside' && (index.h("div", { key: 'ece56b44f204ee232b7347d38a2599db350479c1', class: "text-field-label-outside" }, index.h("label", { key: 'da09951622f48b2f8af929194c5c33b3577fefd7', htmlFor: "text-field-input-element" }, this.label))), index.h("div", { key: '71d6fb36ba28fa411b11566e0e99f6256e1f83bd', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: 'a63e4c89d91bc172eafe7ed73223b81949fff841', class: {
107
105
  'text-field-slot-wrap-prefix': true,
108
106
  'text-field-error': this.state === 'error',
109
107
  'text-field-success': this.state === 'success',
110
108
  'text-field-default': this.state === 'default',
111
- } }, index.h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), index.h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, index.h("input", { key: 'd208edd0ffe3f2a78bc2df4f0dd58e13fd768453', ref: (inputEl) => {
109
+ } }, index.h("slot", { key: 'abd1abaf91eb563de9dab564e3303d8cc4e8bb7f', name: "prefix" }))), index.h("div", { key: '53af5e75425250b17ca0316794c545a93b43a8d5', class: "text-field-input-container" }, index.h("input", { key: 'b642c1fbabc52be6584d9f5755d2258caca34ea6', ref: (inputEl) => {
112
110
  this.textInput = inputEl;
113
111
  }, class: {
114
112
  'text-field-input': true,
@@ -123,13 +121,13 @@ const TdsTextField = class {
123
121
  if (!this.readOnly) {
124
122
  this.handleBlur(event);
125
123
  }
126
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { key: '38b9cedc8c7a07b582c16b01a267cf4e08a20481', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: '9587a4002c11b93ee715952080e4959be0393642', class: "text-field-bar" }), usesSuffixSlot && (index.h("div", { key: 'bb46ceb5bee96468ecbd1ec0bda36c639b045450', class: {
124
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { key: '8481a9e2d131de7142054af34e62f55462f3b57e', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), index.h("div", { key: '8228b678f175902426db7840115682b532cb9608', class: "text-field-bar" }), usesSuffixSlot && (index.h("div", { key: 'de47acdd61b322f22420334e9aee899977f05baa', class: {
127
125
  'text-field-slot-wrap-suffix': true,
128
126
  'text-field-error': this.state === 'error',
129
127
  'text-field-success': this.state === 'success',
130
128
  'text-field-default': this.state === 'default',
131
129
  'tds-u-display-none': this.readOnly,
132
- } }, index.h("slot", { key: 'baa86fca37b71182b800095be7c4fb6db2ee4d13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '6d3abf0a6e60463e7f6db1187229cf17e5f4b80b', class: "text-field-icon__readonly" }, index.h("tds-icon", { key: 'c5afca89f935a0a3f2c63039badf7b05c60b6015', name: "edit_inactive", size: "20px" }))), index.h("span", { key: 'd677de36f510688d3311f514aed89390c1d0a39b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), index.h("div", { key: 'f79ebd15d92174541ea7683de7cf002af996733a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (index.h("div", { key: 'b7708331d4c8a21d869a21f86e873da017ae2157', class: "text-field-helper" }, this.state === 'error' && (index.h("div", { key: '098f7e9d9b053b4bfb02a387be879d4c519c2b95', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: 'fa894663253fdb19d168e284284f35695deada29', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (index.h("span", { key: 'dcae00985dc79db8ad6bdd65fe6160d4f5de8603', class: {
130
+ } }, index.h("slot", { key: 'ac8a9688c8a75466174d24903a5178ee283d3ea8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '28feccceb3e45f762fceecd9108c1bb23077e0d5', class: "text-field-icon__readonly" }, index.h("tds-icon", { key: '87f9666853a79e9529e0856431894eecf007920e', name: "edit_inactive", size: "20px" }))), index.h("span", { key: 'bd8ac1b13ae24e3fd963d715c7ae839e1c1315ff', class: "text-field-icon__readonly-label" }, "This field is non-editable")), index.h("div", { key: 'f1604132dd79bcae94293af680a48ef6a91108ad', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (index.h("div", { key: '88fe20f17da67cbc6898904b9cb4ad35c5efb119', class: "text-field-helper" }, this.state === 'error' && (index.h("div", { key: '77d6b96628ef3e0564c4ccae084e2e7eab4798c9', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: '7593cc143ec577075b670f37b9a8dd5e66576072', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (index.h("span", { key: 'afe6f09714c093c9b0246daa1f676507c633d903', class: {
133
131
  'text-field-textcounter-divider': true,
134
132
  'text-field-textcounter-disabled': this.disabled,
135
133
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/cjs/tds-textarea.cjs.entry.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ca8040ad.js');
6
+ const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
6
7
 
7
8
  const textareaCss = ".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:\"\";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border:1px solid var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}";
8
9
  const TdsTextareaStyle0 = textareaCss;
@@ -14,6 +15,7 @@ const TdsTextarea = class {
14
15
  this.tdsBlur = index.createEvent(this, "tdsBlur", 6);
15
16
  this.tdsInput = index.createEvent(this, "tdsInput", 6);
16
17
  this.tdsFocus = index.createEvent(this, "tdsFocus", 6);
18
+ this.uuid = generateUniqueId.generateUniqueId();
17
19
  this.label = '';
18
20
  this.name = '';
19
21
  this.helper = undefined;
@@ -69,7 +71,7 @@ const TdsTextarea = class {
69
71
  }
70
72
  render() {
71
73
  var _a;
72
- return (index.h("div", { key: 'f2498e712e2e778d311c9ceb92b44a5cfad9bb10', class: {
74
+ return (index.h("div", { key: '09084849dd168d823b2754bcaede53797632768e', class: {
73
75
  'textarea-container': true,
74
76
  'textarea-label-inside': this.labelPosition === 'inside',
75
77
  'textarea-focus': this.focusInput,
@@ -79,7 +81,7 @@ const TdsTextarea = class {
79
81
  'textarea-data': this.value !== '',
80
82
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
81
83
  'no-min-width': this.noMinWidth,
82
- } }, this.labelPosition !== 'no-label' && (index.h("label", { key: '4130830455779ac1a5a5aeb1ae732a57b4fd8b95', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), index.h("div", { key: '2f33705c73ff50f8e7c42316b9a593b7d13c631d', class: "textarea-wrapper" }, index.h("textarea", { key: '8b2474a289364530756b4ea22d0349a1aa3f9891', id: "textarea-element", class: 'textarea-input', ref: (inputEl) => {
84
+ } }, this.labelPosition !== 'no-label' && (index.h("label", { key: 'f9877966b5ba3bd607657d36b2a7bbd3c474c16c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), index.h("div", { key: 'cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22', class: "textarea-wrapper" }, index.h("textarea", { key: '50683f2569ee49c150969b22858a351a953b1222', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
83
85
  this.textEl = inputEl;
84
86
  }, 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) => {
85
87
  if (!this.readOnly) {
@@ -89,7 +91,7 @@ const TdsTextarea = class {
89
91
  if (!this.readOnly) {
90
92
  this.handleBlur(event);
91
93
  }
92
- }, 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" }), index.h("span", { key: 'cef602f7b35e99b34fdd7cec331159619d25fe1e', class: "textarea-resizer-icon" }, index.h("svg", { key: '6cb70ef6a302f7158e6bd1aac01b12af75b5bbc1', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '128bfe15af23b9b5d537e0da590de2f4861fc22b', "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 && (index.h("span", { key: '608bb4c9e3cd9b82fded262178ff16d84d3cd556', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: '260d605a27af4b9d8ca730a087f19642680f00d2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: 'c83c3dc9e614947e925d9b1cabce6fa01ca3aef4', id: "readonly-tooltip", name: "edit_inactive" })))), index.h("span", { key: '76584bc76c80bc8fd3d5071fce1aabd0ae2aaaaf', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && index.h("tds-icon", { key: '648c02820b2f52f1befc3c95915d2e3878bd8fa5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (index.h("div", { key: 'a79e43decc56632ba9d11e68f13411599b91392d', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { key: 'f40aa87ea29f65f2b704737837b831d1b96827b2', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
94
+ }, 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}` }), index.h("span", { key: '63845b20b05c201035152df1aa842760cec47962', class: "textarea-resizer-icon" }, index.h("svg", { key: 'ba16ccfcbc0252e4353018499354191f29a15fe2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '33a546d271c4aecad1c4ce3fc8228a14a3790068', "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 && (index.h("span", { key: 'f7c2b6973c0ab4990379ea66d05bcf7d846ace1c', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: 'dce91ccbd1aa3649ff9db60c8641a254ed5486f6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '4dd9659c02aece8803820ec34c65298d109f9007', id: "readonly-tooltip", name: "edit_inactive" })))), index.h("span", { key: '33954390252928f917ceb119a20eff0f06342cc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && index.h("tds-icon", { key: '33c46966f9df85784e2520b096a6f58ebfff2885', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (index.h("div", { key: '8c9051a3c6fd9bc65c35b0e2d02786a24acb00de', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { key: '59180502bd4aa0bb71378fba4a3899eb59c8211e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
93
95
  }
94
96
  };
95
97
  TdsTextarea.style = TdsTextareaStyle0;
package/dist/collection/components/text-field/text-field.js CHANGED
@@ -1,13 +1,11 @@
1
1
  import { h } from "@stencil/core";
2
2
  import hasSlot from "../../utils/hasSlot";
3
- import generateUniqueId from "../../utils/generateUniqueId";
4
3
  /**
5
4
  * @slot prefix - Slot for the prefix in the component.
6
5
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
7
6
  */
8
7
  export class TdsTextField {
9
8
  constructor() {
10
- this.uuid = generateUniqueId();
11
9
  this.type = 'text';
12
10
  this.labelPosition = 'no-label';
13
11
  this.label = '';
@@ -76,7 +74,7 @@ export class TdsTextField {
76
74
  var _a;
77
75
  const usesPrefixSlot = hasSlot('prefix', this.host);
78
76
  const usesSuffixSlot = hasSlot('suffix', this.host);
79
- return (h("div", { key: '04c86fdbe70838228aa25e129adde1e92b8c3da1', class: {
77
+ return (h("div", { key: '85a4ed4ae1abbf96282697257163addf538b91fc', class: {
80
78
  'form-text-field': true,
81
79
  'form-text-field-nomin': this.noMinWidth,
82
80
  'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +92,12 @@ export class TdsTextField {
94
92
  'form-text-field-sm': this.size === 'sm',
95
93
  'form-text-field-error': this.state === 'error',
96
94
  'form-text-field-success': this.state === 'success',
97
- } }, this.labelPosition === 'outside' && (h("div", { key: '89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7', class: "text-field-label-outside" }, h("label", { key: '1a26cc9423cd42e4ae64fdfe36ae28a1600217e1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'fff9ea20453ad6708b32e5efb7fabd8272863c8d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d3b6511643b28852f3ab9c1490aa1577d0c1870', class: {
95
+ } }, this.labelPosition === 'outside' && (h("div", { key: 'ece56b44f204ee232b7347d38a2599db350479c1', class: "text-field-label-outside" }, h("label", { key: 'da09951622f48b2f8af929194c5c33b3577fefd7', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '71d6fb36ba28fa411b11566e0e99f6256e1f83bd', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a63e4c89d91bc172eafe7ed73223b81949fff841', class: {
98
96
  'text-field-slot-wrap-prefix': true,
99
97
  'text-field-error': this.state === 'error',
100
98
  'text-field-success': this.state === 'success',
101
99
  'text-field-default': this.state === 'default',
102
- } }, h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: 'd208edd0ffe3f2a78bc2df4f0dd58e13fd768453', ref: (inputEl) => {
100
+ } }, h("slot", { key: 'abd1abaf91eb563de9dab564e3303d8cc4e8bb7f', name: "prefix" }))), h("div", { key: '53af5e75425250b17ca0316794c545a93b43a8d5', class: "text-field-input-container" }, h("input", { key: 'b642c1fbabc52be6584d9f5755d2258caca34ea6', ref: (inputEl) => {
103
101
  this.textInput = inputEl;
104
102
  }, class: {
105
103
  'text-field-input': true,
@@ -114,13 +112,13 @@ export class TdsTextField {
114
112
  if (!this.readOnly) {
115
113
  this.handleBlur(event);
116
114
  }
117
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '38b9cedc8c7a07b582c16b01a267cf4e08a20481', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '9587a4002c11b93ee715952080e4959be0393642', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'bb46ceb5bee96468ecbd1ec0bda36c639b045450', class: {
115
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '8481a9e2d131de7142054af34e62f55462f3b57e', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '8228b678f175902426db7840115682b532cb9608', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'de47acdd61b322f22420334e9aee899977f05baa', class: {
118
116
  'text-field-slot-wrap-suffix': true,
119
117
  'text-field-error': this.state === 'error',
120
118
  'text-field-success': this.state === 'success',
121
119
  'text-field-default': this.state === 'default',
122
120
  'tds-u-display-none': this.readOnly,
123
- } }, h("slot", { key: 'baa86fca37b71182b800095be7c4fb6db2ee4d13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '6d3abf0a6e60463e7f6db1187229cf17e5f4b80b', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'c5afca89f935a0a3f2c63039badf7b05c60b6015', name: "edit_inactive", size: "20px" }))), h("span", { key: 'd677de36f510688d3311f514aed89390c1d0a39b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f79ebd15d92174541ea7683de7cf002af996733a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'b7708331d4c8a21d869a21f86e873da017ae2157', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '098f7e9d9b053b4bfb02a387be879d4c519c2b95', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'fa894663253fdb19d168e284284f35695deada29', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'dcae00985dc79db8ad6bdd65fe6160d4f5de8603', class: {
121
+ } }, h("slot", { key: 'ac8a9688c8a75466174d24903a5178ee283d3ea8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '28feccceb3e45f762fceecd9108c1bb23077e0d5', class: "text-field-icon__readonly" }, h("tds-icon", { key: '87f9666853a79e9529e0856431894eecf007920e', name: "edit_inactive", size: "20px" }))), h("span", { key: 'bd8ac1b13ae24e3fd963d715c7ae839e1c1315ff', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f1604132dd79bcae94293af680a48ef6a91108ad', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '88fe20f17da67cbc6898904b9cb4ad35c5efb119', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '77d6b96628ef3e0564c4ccae084e2e7eab4798c9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '7593cc143ec577075b670f37b9a8dd5e66576072', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'afe6f09714c093c9b0246daa1f676507c633d903', class: {
124
122
  'text-field-textcounter-divider': true,
125
123
  'text-field-textcounter-disabled': this.disabled,
126
124
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/collection/components/textarea/textarea.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { h } from "@stencil/core";
2
+ import generateUniqueId from "../../utils/generateUniqueId";
2
3
  export class TdsTextarea {
3
4
  constructor() {
5
+ this.uuid = generateUniqueId();
4
6
  this.label = '';
5
7
  this.name = '';
6
8
  this.helper = undefined;
@@ -56,7 +58,7 @@ export class TdsTextarea {
56
58
  }
57
59
  render() {
58
60
  var _a;
59
- return (h("div", { key: 'f2498e712e2e778d311c9ceb92b44a5cfad9bb10', class: {
61
+ return (h("div", { key: '09084849dd168d823b2754bcaede53797632768e', class: {
60
62
  'textarea-container': true,
61
63
  'textarea-label-inside': this.labelPosition === 'inside',
62
64
  'textarea-focus': this.focusInput,
@@ -66,7 +68,7 @@ export class TdsTextarea {
66
68
  'textarea-data': this.value !== '',
67
69
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
68
70
  'no-min-width': this.noMinWidth,
69
- } }, this.labelPosition !== 'no-label' && (h("label", { key: '4130830455779ac1a5a5aeb1ae732a57b4fd8b95', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), h("div", { key: '2f33705c73ff50f8e7c42316b9a593b7d13c631d', class: "textarea-wrapper" }, h("textarea", { key: '8b2474a289364530756b4ea22d0349a1aa3f9891', id: "textarea-element", class: 'textarea-input', ref: (inputEl) => {
71
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: 'f9877966b5ba3bd607657d36b2a7bbd3c474c16c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22', class: "textarea-wrapper" }, h("textarea", { key: '50683f2569ee49c150969b22858a351a953b1222', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
70
72
  this.textEl = inputEl;
71
73
  }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
72
74
  if (!this.readOnly) {
@@ -76,7 +78,7 @@ export class TdsTextarea {
76
78
  if (!this.readOnly) {
77
79
  this.handleBlur(event);
78
80
  }
79
- }, 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" }), h("span", { key: 'cef602f7b35e99b34fdd7cec331159619d25fe1e', class: "textarea-resizer-icon" }, h("svg", { key: '6cb70ef6a302f7158e6bd1aac01b12af75b5bbc1', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '128bfe15af23b9b5d537e0da590de2f4861fc22b', "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: '608bb4c9e3cd9b82fded262178ff16d84d3cd556', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '260d605a27af4b9d8ca730a087f19642680f00d2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'c83c3dc9e614947e925d9b1cabce6fa01ca3aef4', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '76584bc76c80bc8fd3d5071fce1aabd0ae2aaaaf', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '648c02820b2f52f1befc3c95915d2e3878bd8fa5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'a79e43decc56632ba9d11e68f13411599b91392d', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f40aa87ea29f65f2b704737837b831d1b96827b2', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
81
+ }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '63845b20b05c201035152df1aa842760cec47962', class: "textarea-resizer-icon" }, h("svg", { key: 'ba16ccfcbc0252e4353018499354191f29a15fe2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33a546d271c4aecad1c4ce3fc8228a14a3790068', "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: 'f7c2b6973c0ab4990379ea66d05bcf7d846ace1c', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'dce91ccbd1aa3649ff9db60c8641a254ed5486f6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4dd9659c02aece8803820ec34c65298d109f9007', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '33954390252928f917ceb119a20eff0f06342cc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '33c46966f9df85784e2520b096a6f58ebfff2885', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8c9051a3c6fd9bc65c35b0e2d02786a24acb00de', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '59180502bd4aa0bb71378fba4a3899eb59c8211e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
80
82
  }
81
83
  static get is() { return "tds-textarea"; }
82
84
  static get encapsulation() { return "scoped"; }
package/dist/components/tds-text-field.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
2
2
  import { h as hasSlot } from './p-ae110fc2.js';
3
- import { g as generateUniqueId } from './p-11648030.js';
4
3
  import { d as defineCustomElement$2 } from './p-9b40a24d.js';
5
4
 
6
5
  const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
@@ -14,7 +13,6 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
14
13
  this.tdsInput = createEvent(this, "tdsInput", 6);
15
14
  this.tdsFocus = createEvent(this, "tdsFocus", 6);
16
15
  this.tdsBlur = createEvent(this, "tdsBlur", 6);
17
- this.uuid = generateUniqueId();
18
16
  this.type = 'text';
19
17
  this.labelPosition = 'no-label';
20
18
  this.label = '';
@@ -83,7 +81,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
83
81
  var _a;
84
82
  const usesPrefixSlot = hasSlot('prefix', this.host);
85
83
  const usesSuffixSlot = hasSlot('suffix', this.host);
86
- return (h("div", { key: '04c86fdbe70838228aa25e129adde1e92b8c3da1', class: {
84
+ return (h("div", { key: '85a4ed4ae1abbf96282697257163addf538b91fc', class: {
87
85
  'form-text-field': true,
88
86
  'form-text-field-nomin': this.noMinWidth,
89
87
  'text-field-focus': this.focusInput && !this.disabled,
@@ -101,12 +99,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
101
99
  'form-text-field-sm': this.size === 'sm',
102
100
  'form-text-field-error': this.state === 'error',
103
101
  'form-text-field-success': this.state === 'success',
104
- } }, this.labelPosition === 'outside' && (h("div", { key: '89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7', class: "text-field-label-outside" }, h("label", { key: '1a26cc9423cd42e4ae64fdfe36ae28a1600217e1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'fff9ea20453ad6708b32e5efb7fabd8272863c8d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d3b6511643b28852f3ab9c1490aa1577d0c1870', class: {
102
+ } }, this.labelPosition === 'outside' && (h("div", { key: 'ece56b44f204ee232b7347d38a2599db350479c1', class: "text-field-label-outside" }, h("label", { key: 'da09951622f48b2f8af929194c5c33b3577fefd7', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '71d6fb36ba28fa411b11566e0e99f6256e1f83bd', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a63e4c89d91bc172eafe7ed73223b81949fff841', class: {
105
103
  'text-field-slot-wrap-prefix': true,
106
104
  'text-field-error': this.state === 'error',
107
105
  'text-field-success': this.state === 'success',
108
106
  'text-field-default': this.state === 'default',
109
- } }, h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: 'd208edd0ffe3f2a78bc2df4f0dd58e13fd768453', ref: (inputEl) => {
107
+ } }, h("slot", { key: 'abd1abaf91eb563de9dab564e3303d8cc4e8bb7f', name: "prefix" }))), h("div", { key: '53af5e75425250b17ca0316794c545a93b43a8d5', class: "text-field-input-container" }, h("input", { key: 'b642c1fbabc52be6584d9f5755d2258caca34ea6', ref: (inputEl) => {
110
108
  this.textInput = inputEl;
111
109
  }, class: {
112
110
  'text-field-input': true,
@@ -121,13 +119,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
121
119
  if (!this.readOnly) {
122
120
  this.handleBlur(event);
123
121
  }
124
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '38b9cedc8c7a07b582c16b01a267cf4e08a20481', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '9587a4002c11b93ee715952080e4959be0393642', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'bb46ceb5bee96468ecbd1ec0bda36c639b045450', class: {
122
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '8481a9e2d131de7142054af34e62f55462f3b57e', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '8228b678f175902426db7840115682b532cb9608', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'de47acdd61b322f22420334e9aee899977f05baa', class: {
125
123
  'text-field-slot-wrap-suffix': true,
126
124
  'text-field-error': this.state === 'error',
127
125
  'text-field-success': this.state === 'success',
128
126
  'text-field-default': this.state === 'default',
129
127
  'tds-u-display-none': this.readOnly,
130
- } }, h("slot", { key: 'baa86fca37b71182b800095be7c4fb6db2ee4d13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '6d3abf0a6e60463e7f6db1187229cf17e5f4b80b', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'c5afca89f935a0a3f2c63039badf7b05c60b6015', name: "edit_inactive", size: "20px" }))), h("span", { key: 'd677de36f510688d3311f514aed89390c1d0a39b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f79ebd15d92174541ea7683de7cf002af996733a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'b7708331d4c8a21d869a21f86e873da017ae2157', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '098f7e9d9b053b4bfb02a387be879d4c519c2b95', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'fa894663253fdb19d168e284284f35695deada29', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'dcae00985dc79db8ad6bdd65fe6160d4f5de8603', class: {
128
+ } }, h("slot", { key: 'ac8a9688c8a75466174d24903a5178ee283d3ea8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '28feccceb3e45f762fceecd9108c1bb23077e0d5', class: "text-field-icon__readonly" }, h("tds-icon", { key: '87f9666853a79e9529e0856431894eecf007920e', name: "edit_inactive", size: "20px" }))), h("span", { key: 'bd8ac1b13ae24e3fd963d715c7ae839e1c1315ff', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f1604132dd79bcae94293af680a48ef6a91108ad', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '88fe20f17da67cbc6898904b9cb4ad35c5efb119', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '77d6b96628ef3e0564c4ccae084e2e7eab4798c9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '7593cc143ec577075b670f37b9a8dd5e66576072', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'afe6f09714c093c9b0246daa1f676507c633d903', class: {
131
129
  'text-field-textcounter-divider': true,
132
130
  'text-field-textcounter-disabled': this.disabled,
133
131
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/components/tds-textarea.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
2
+ import { g as generateUniqueId } from './p-11648030.js';
2
3
  import { d as defineCustomElement$4 } from './p-9b40a24d.js';
3
4
  import { d as defineCustomElement$3 } from './p-b0ca50a3.js';
4
5
  import { d as defineCustomElement$2 } from './p-76c8d381.js';
@@ -14,6 +15,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
14
15
  this.tdsBlur = createEvent(this, "tdsBlur", 6);
15
16
  this.tdsInput = createEvent(this, "tdsInput", 6);
16
17
  this.tdsFocus = createEvent(this, "tdsFocus", 6);
18
+ this.uuid = generateUniqueId();
17
19
  this.label = '';
18
20
  this.name = '';
19
21
  this.helper = undefined;
@@ -69,7 +71,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
69
71
  }
70
72
  render() {
71
73
  var _a;
72
- return (h("div", { key: 'f2498e712e2e778d311c9ceb92b44a5cfad9bb10', class: {
74
+ return (h("div", { key: '09084849dd168d823b2754bcaede53797632768e', class: {
73
75
  'textarea-container': true,
74
76
  'textarea-label-inside': this.labelPosition === 'inside',
75
77
  'textarea-focus': this.focusInput,
@@ -79,7 +81,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
79
81
  'textarea-data': this.value !== '',
80
82
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
81
83
  'no-min-width': this.noMinWidth,
82
- } }, this.labelPosition !== 'no-label' && (h("label", { key: '4130830455779ac1a5a5aeb1ae732a57b4fd8b95', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), h("div", { key: '2f33705c73ff50f8e7c42316b9a593b7d13c631d', class: "textarea-wrapper" }, h("textarea", { key: '8b2474a289364530756b4ea22d0349a1aa3f9891', id: "textarea-element", class: 'textarea-input', ref: (inputEl) => {
84
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: 'f9877966b5ba3bd607657d36b2a7bbd3c474c16c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22', class: "textarea-wrapper" }, h("textarea", { key: '50683f2569ee49c150969b22858a351a953b1222', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
83
85
  this.textEl = inputEl;
84
86
  }, 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) => {
85
87
  if (!this.readOnly) {
@@ -89,7 +91,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
89
91
  if (!this.readOnly) {
90
92
  this.handleBlur(event);
91
93
  }
92
- }, 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" }), h("span", { key: 'cef602f7b35e99b34fdd7cec331159619d25fe1e', class: "textarea-resizer-icon" }, h("svg", { key: '6cb70ef6a302f7158e6bd1aac01b12af75b5bbc1', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '128bfe15af23b9b5d537e0da590de2f4861fc22b', "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: '608bb4c9e3cd9b82fded262178ff16d84d3cd556', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '260d605a27af4b9d8ca730a087f19642680f00d2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'c83c3dc9e614947e925d9b1cabce6fa01ca3aef4', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '76584bc76c80bc8fd3d5071fce1aabd0ae2aaaaf', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '648c02820b2f52f1befc3c95915d2e3878bd8fa5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'a79e43decc56632ba9d11e68f13411599b91392d', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f40aa87ea29f65f2b704737837b831d1b96827b2', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
94
+ }, 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: '63845b20b05c201035152df1aa842760cec47962', class: "textarea-resizer-icon" }, h("svg", { key: 'ba16ccfcbc0252e4353018499354191f29a15fe2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33a546d271c4aecad1c4ce3fc8228a14a3790068', "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: 'f7c2b6973c0ab4990379ea66d05bcf7d846ace1c', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'dce91ccbd1aa3649ff9db60c8641a254ed5486f6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4dd9659c02aece8803820ec34c65298d109f9007', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '33954390252928f917ceb119a20eff0f06342cc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '33c46966f9df85784e2520b096a6f58ebfff2885', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8c9051a3c6fd9bc65c35b0e2d02786a24acb00de', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '59180502bd4aa0bb71378fba4a3899eb59c8211e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
93
95
  }
94
96
  static get style() { return TdsTextareaStyle0; }
95
97
  }, [2, "tds-textarea", {
package/dist/esm/tds-text-field.entry.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, g as getElement } from './index-51d04e39.js';
2
2
  import { h as hasSlot } from './hasSlot-d52114d0.js';
3
- import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
4
3
 
5
4
  const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
6
5
  const TdsTextFieldStyle0 = textFieldCss;
@@ -12,7 +11,6 @@ const TdsTextField = class {
12
11
  this.tdsInput = createEvent(this, "tdsInput", 6);
13
12
  this.tdsFocus = createEvent(this, "tdsFocus", 6);
14
13
  this.tdsBlur = createEvent(this, "tdsBlur", 6);
15
- this.uuid = generateUniqueId();
16
14
  this.type = 'text';
17
15
  this.labelPosition = 'no-label';
18
16
  this.label = '';
@@ -81,7 +79,7 @@ const TdsTextField = class {
81
79
  var _a;
82
80
  const usesPrefixSlot = hasSlot('prefix', this.host);
83
81
  const usesSuffixSlot = hasSlot('suffix', this.host);
84
- return (h("div", { key: '04c86fdbe70838228aa25e129adde1e92b8c3da1', class: {
82
+ return (h("div", { key: '85a4ed4ae1abbf96282697257163addf538b91fc', class: {
85
83
  'form-text-field': true,
86
84
  'form-text-field-nomin': this.noMinWidth,
87
85
  'text-field-focus': this.focusInput && !this.disabled,
@@ -99,12 +97,12 @@ const TdsTextField = class {
99
97
  'form-text-field-sm': this.size === 'sm',
100
98
  'form-text-field-error': this.state === 'error',
101
99
  'form-text-field-success': this.state === 'success',
102
- } }, this.labelPosition === 'outside' && (h("div", { key: '89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7', class: "text-field-label-outside" }, h("label", { key: '1a26cc9423cd42e4ae64fdfe36ae28a1600217e1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'fff9ea20453ad6708b32e5efb7fabd8272863c8d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d3b6511643b28852f3ab9c1490aa1577d0c1870', class: {
100
+ } }, this.labelPosition === 'outside' && (h("div", { key: 'ece56b44f204ee232b7347d38a2599db350479c1', class: "text-field-label-outside" }, h("label", { key: 'da09951622f48b2f8af929194c5c33b3577fefd7', htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '71d6fb36ba28fa411b11566e0e99f6256e1f83bd', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a63e4c89d91bc172eafe7ed73223b81949fff841', class: {
103
101
  'text-field-slot-wrap-prefix': true,
104
102
  'text-field-error': this.state === 'error',
105
103
  'text-field-success': this.state === 'success',
106
104
  'text-field-default': this.state === 'default',
107
- } }, h("slot", { key: '8c6c192a137ea00d114f9721d0f6fcea366708ca', name: "prefix" }))), h("div", { key: 'e8b2650e45cba5e63e1db4e3d1d7af6662ff187b', class: "text-field-input-container" }, h("input", { key: 'd208edd0ffe3f2a78bc2df4f0dd58e13fd768453', ref: (inputEl) => {
105
+ } }, h("slot", { key: 'abd1abaf91eb563de9dab564e3303d8cc4e8bb7f', name: "prefix" }))), h("div", { key: '53af5e75425250b17ca0316794c545a93b43a8d5', class: "text-field-input-container" }, h("input", { key: 'b642c1fbabc52be6584d9f5755d2258caca34ea6', ref: (inputEl) => {
108
106
  this.textInput = inputEl;
109
107
  }, class: {
110
108
  'text-field-input': true,
@@ -119,13 +117,13 @@ const TdsTextField = class {
119
117
  if (!this.readOnly) {
120
118
  this.handleBlur(event);
121
119
  }
122
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '38b9cedc8c7a07b582c16b01a267cf4e08a20481', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '9587a4002c11b93ee715952080e4959be0393642', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'bb46ceb5bee96468ecbd1ec0bda36c639b045450', class: {
120
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "text-field-helper-element", "aria-readonly": this.readOnly, id: "text-field-input-element" }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '8481a9e2d131de7142054af34e62f55462f3b57e', class: "text-field-label-inside", htmlFor: "text-field-input-element" }, this.label))), h("div", { key: '8228b678f175902426db7840115682b532cb9608', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'de47acdd61b322f22420334e9aee899977f05baa', class: {
123
121
  'text-field-slot-wrap-suffix': true,
124
122
  'text-field-error': this.state === 'error',
125
123
  'text-field-success': this.state === 'success',
126
124
  'text-field-default': this.state === 'default',
127
125
  'tds-u-display-none': this.readOnly,
128
- } }, h("slot", { key: 'baa86fca37b71182b800095be7c4fb6db2ee4d13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '6d3abf0a6e60463e7f6db1187229cf17e5f4b80b', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'c5afca89f935a0a3f2c63039badf7b05c60b6015', name: "edit_inactive", size: "20px" }))), h("span", { key: 'd677de36f510688d3311f514aed89390c1d0a39b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f79ebd15d92174541ea7683de7cf002af996733a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'b7708331d4c8a21d869a21f86e873da017ae2157', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '098f7e9d9b053b4bfb02a387be879d4c519c2b95', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'fa894663253fdb19d168e284284f35695deada29', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'dcae00985dc79db8ad6bdd65fe6160d4f5de8603', class: {
126
+ } }, h("slot", { key: 'ac8a9688c8a75466174d24903a5178ee283d3ea8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '28feccceb3e45f762fceecd9108c1bb23077e0d5', class: "text-field-icon__readonly" }, h("tds-icon", { key: '87f9666853a79e9529e0856431894eecf007920e', name: "edit_inactive", size: "20px" }))), h("span", { key: 'bd8ac1b13ae24e3fd963d715c7ae839e1c1315ff', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: 'f1604132dd79bcae94293af680a48ef6a91108ad', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '88fe20f17da67cbc6898904b9cb4ad35c5efb119', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '77d6b96628ef3e0564c4ccae084e2e7eab4798c9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '7593cc143ec577075b670f37b9a8dd5e66576072', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'afe6f09714c093c9b0246daa1f676507c633d903', class: {
129
127
  'text-field-textcounter-divider': true,
130
128
  'text-field-textcounter-disabled': this.disabled,
131
129
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/esm/tds-textarea.entry.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-51d04e39.js';
2
+ import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
2
3
 
3
4
  const textareaCss = ".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:\"\";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border:1px solid var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}";
4
5
  const TdsTextareaStyle0 = textareaCss;
@@ -10,6 +11,7 @@ const TdsTextarea = class {
10
11
  this.tdsBlur = createEvent(this, "tdsBlur", 6);
11
12
  this.tdsInput = createEvent(this, "tdsInput", 6);
12
13
  this.tdsFocus = createEvent(this, "tdsFocus", 6);
14
+ this.uuid = generateUniqueId();
13
15
  this.label = '';
14
16
  this.name = '';
15
17
  this.helper = undefined;
@@ -65,7 +67,7 @@ const TdsTextarea = class {
65
67
  }
66
68
  render() {
67
69
  var _a;
68
- return (h("div", { key: 'f2498e712e2e778d311c9ceb92b44a5cfad9bb10', class: {
70
+ return (h("div", { key: '09084849dd168d823b2754bcaede53797632768e', class: {
69
71
  'textarea-container': true,
70
72
  'textarea-label-inside': this.labelPosition === 'inside',
71
73
  'textarea-focus': this.focusInput,
@@ -75,7 +77,7 @@ const TdsTextarea = class {
75
77
  'textarea-data': this.value !== '',
76
78
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
77
79
  'no-min-width': this.noMinWidth,
78
- } }, this.labelPosition !== 'no-label' && (h("label", { key: '4130830455779ac1a5a5aeb1ae732a57b4fd8b95', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), h("div", { key: '2f33705c73ff50f8e7c42316b9a593b7d13c631d', class: "textarea-wrapper" }, h("textarea", { key: '8b2474a289364530756b4ea22d0349a1aa3f9891', id: "textarea-element", class: 'textarea-input', ref: (inputEl) => {
80
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: 'f9877966b5ba3bd607657d36b2a7bbd3c474c16c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22', class: "textarea-wrapper" }, h("textarea", { key: '50683f2569ee49c150969b22858a351a953b1222', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
79
81
  this.textEl = inputEl;
80
82
  }, 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
83
  if (!this.readOnly) {
@@ -85,7 +87,7 @@ const TdsTextarea = class {
85
87
  if (!this.readOnly) {
86
88
  this.handleBlur(event);
87
89
  }
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" }), h("span", { key: 'cef602f7b35e99b34fdd7cec331159619d25fe1e', class: "textarea-resizer-icon" }, h("svg", { key: '6cb70ef6a302f7158e6bd1aac01b12af75b5bbc1', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '128bfe15af23b9b5d537e0da590de2f4861fc22b', "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: '608bb4c9e3cd9b82fded262178ff16d84d3cd556', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '260d605a27af4b9d8ca730a087f19642680f00d2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'c83c3dc9e614947e925d9b1cabce6fa01ca3aef4', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '76584bc76c80bc8fd3d5071fce1aabd0ae2aaaaf', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '648c02820b2f52f1befc3c95915d2e3878bd8fa5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'a79e43decc56632ba9d11e68f13411599b91392d', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f40aa87ea29f65f2b704737837b831d1b96827b2', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
90
+ }, 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: '63845b20b05c201035152df1aa842760cec47962', class: "textarea-resizer-icon" }, h("svg", { key: 'ba16ccfcbc0252e4353018499354191f29a15fe2', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33a546d271c4aecad1c4ce3fc8228a14a3790068', "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: 'f7c2b6973c0ab4990379ea66d05bcf7d846ace1c', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'dce91ccbd1aa3649ff9db60c8641a254ed5486f6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4dd9659c02aece8803820ec34c65298d109f9007', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '33954390252928f917ceb119a20eff0f06342cc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: '33c46966f9df85784e2520b096a6f58ebfff2885', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8c9051a3c6fd9bc65c35b0e2d02786a24acb00de', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '59180502bd4aa0bb71378fba4a3899eb59c8211e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
89
91
  }
90
92
  };
91
93
  TdsTextarea.style = TdsTextareaStyle0;
package/dist/tegel/p-0fd8e378.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as a}from"./p-2049fab2.js";import{g as r}from"./p-11648030.js";const s=class{constructor(a){t(this,a),this.tdsChange=e(this,"tdsChange",6),this.tdsBlur=e(this,"tdsBlur",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.uuid=r(),this.label="",this.name="",this.helper=void 0,this.cols=void 0,this.rows=void 0,this.labelPosition="no-label",this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.hideReadOnlyIcon=!1,this.state="default",this.maxLength=void 0,this.modeVariant=null,this.autofocus=!1,this.noMinWidth=!1,this.tdsAriaLabel=void 0,this.focusInput=void 0}handleChange(t){this.tdsChange.emit(t)}handleBlur(t){this.tdsBlur.emit(t),this.focusInput=!1}handleInput(t){t.target instanceof HTMLInputElement&&(this.value=t.target.value,this.tdsInput.emit(t))}handleFocus(t){this.textEl.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}setModeVariant(t){return this.readOnly&&"primary"===t?"secondary":this.readOnly&&"secondary"===t?"primary":t}connectedCallback(){this.tdsAriaLabel||this.label||console.warn("Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility")}render(){var t;return a("div",{key:"09084849dd168d823b2754bcaede53797632768e",class:{"textarea-container":!0,"textarea-label-inside":"inside"===this.labelPosition,"textarea-focus":this.focusInput,"textarea-disabled":this.disabled,"textarea-readonly":!this.disabled&&this.readOnly,[`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]:!0,"textarea-data":""!==this.value,[`textarea-${this.state}`]:"error"===this.state||"success"===this.state,"no-min-width":this.noMinWidth}},"no-label"!==this.labelPosition&&a("label",{key:"f9877966b5ba3bd607657d36b2a7bbd3c474c16c",htmlFor:`textarea-element-${this.uuid}`,class:"textarea-label"},this.label),a("div",{key:"cba716bf15c07f17d5960bc67e8f8e3bd6bc5f22",class:"textarea-wrapper"},a("textarea",{key:"50683f2569ee49c150969b22858a351a953b1222",id:`textarea-element-${this.uuid}`,class:"textarea-input",ref:t=>{this.textEl=t},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:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)},onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),"aria-invalid":"error"===this.state?"true":"false","aria-readonly":this.readOnly?"true":"false","aria-label":this.tdsAriaLabel?this.tdsAriaLabel:this.label,"aria-describedby":`textarea-helper-element-${this.uuid}`}),a("span",{key:"63845b20b05c201035152df1aa842760cec47962",class:"textarea-resizer-icon"},a("svg",{key:"ba16ccfcbc0252e4353018499354191f29a15fe2",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"33a546d271c4aecad1c4ce3fc8228a14a3790068","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&&a("span",{key:"f7c2b6973c0ab4990379ea66d05bcf7d846ace1c",class:"textarea-icon__readonly"},a("tds-tooltip",{key:"dce91ccbd1aa3649ff9db60c8641a254ed5486f6",placement:"top-end",text:"This field is non-editable",selector:"#readonly-tooltip"}),a("tds-icon",{key:"4dd9659c02aece8803820ec34c65298d109f9007",id:"readonly-tooltip",name:"edit_inactive"}))),a("span",{key:"33954390252928f917ceb119a20eff0f06342cc1",class:"textarea-helper","aria-live":"assertive",id:`textarea-helper-element-${this.uuid}`},"error"===this.state&&!this.readOnly&&a("tds-icon",{key:"33c46966f9df85784e2520b096a6f58ebfff2885",name:"error",size:"16px"}),this.helper),this.maxLength>0&&a("div",{key:"8c9051a3c6fd9bc65c35b0e2d02786a24acb00de",class:"textarea-textcounter"},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length,a("span",{key:"59180502bd4aa0bb71378fba4a3899eb59c8211e",class:"textfield-textcounter-divider"}," / ")," ",this.maxLength))}};s.style='.textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:"";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border:1px solid var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}';export{s as tds_textarea}
package/dist/tegel/p-135f2276.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as d,g as i}from"./p-2049fab2.js";import{h as l}from"./p-ae110fc2.js";const s=class{constructor(d){t(this,d),this.tdsChange=e(this,"tdsChange",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.tdsBlur=e(this,"tdsBlur",6),this.type="text",this.labelPosition="no-label",this.label="",this.min=void 0,this.max=void 0,this.helper=void 0,this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.hideReadOnlyIcon=!1,this.size="lg",this.modeVariant=null,this.noMinWidth=!1,this.name="",this.state="default",this.maxLength=void 0,this.autofocus=!1,this.tdsAriaLabel=void 0,this.focusInput=!1}handleChange(t){this.tdsChange.emit(t)}handleInput(t){const e=t.target;let{value:d}=e;if("number"===this.type){const t=Number(d);void 0!==this.min&&t<Number(this.min)&&(d=String(this.min)),void 0!==this.max&&t>Number(this.max)&&(d=String(this.max)),e.value=d}this.value=d,this.tdsInput.emit(t)}handleFocus(t){this.textInput.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}handleBlur(t){this.focusInput=!1,this.tdsBlur.emit(t)}async focusElement(){this.textInput&&this.textInput.focus()}connectedCallback(){this.tdsAriaLabel||console.warn("Tegel Text Field component: prop tdsAriaLabel is missing")}render(){var t;const e=l("prefix",this.host),i=l("suffix",this.host);return d("div",{key:"85a4ed4ae1abbf96282697257163addf538b91fc",class:{"form-text-field":!0,"form-text-field-nomin":this.noMinWidth,"text-field-focus":this.focusInput&&!this.disabled,"text-field-data":""!==this.value&&null!==this.value,"text-field-container-label-inside":"inside"===this.labelPosition&&"sm"!==this.size,"form-text-field-disabled":this.disabled,"form-text-field-readonly":!this.disabled&&this.readOnly,"tds-mode-variant-primary":this.readOnly?"secondary"===this.modeVariant:"primary"===this.modeVariant,"tds-mode-variant-secondary":this.readOnly?"primary"===this.modeVariant:"secondary"===this.modeVariant,"form-text-field-md":"md"===this.size,"form-text-field-sm":"sm"===this.size,"form-text-field-error":"error"===this.state,"form-text-field-success":"success"===this.state}},"outside"===this.labelPosition&&d("div",{key:"ece56b44f204ee232b7347d38a2599db350479c1",class:"text-field-label-outside"},d("label",{key:"da09951622f48b2f8af929194c5c33b3577fefd7",htmlFor:"text-field-input-element"},this.label)),d("div",{key:"71d6fb36ba28fa411b11566e0e99f6256e1f83bd",onClick:()=>this.textInput.focus(),class:"text-field-container"},e&&d("div",{key:"a63e4c89d91bc172eafe7ed73223b81949fff841",class:{"text-field-slot-wrap-prefix":!0,"text-field-error":"error"===this.state,"text-field-success":"success"===this.state,"text-field-default":"default"===this.state}},d("slot",{key:"abd1abaf91eb563de9dab564e3303d8cc4e8bb7f",name:"prefix"})),d("div",{key:"53af5e75425250b17ca0316794c545a93b43a8d5",class:"text-field-input-container"},d("input",{key:"b642c1fbabc52be6584d9f5755d2258caca34ea6",ref:t=>{this.textInput=t},class:{"text-field-input":!0,"text-field-input-sm":"sm"===this.size,"text-field-input-md":"md"===this.size,"text-field-input-lg":"lg"===this.size},type:this.type,disabled:this.disabled,readonly:!this.disabled&&this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,min:this.min,max:this.max,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onFocus:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)},"aria-label":this.tdsAriaLabel?this.tdsAriaLabel:this.label,"aria-describedby":"text-field-helper-element","aria-readonly":this.readOnly,id:"text-field-input-element"}),"inside"===this.labelPosition&&"sm"!==this.size&&d("label",{key:"8481a9e2d131de7142054af34e62f55462f3b57e",class:"text-field-label-inside",htmlFor:"text-field-input-element"},this.label)),d("div",{key:"8228b678f175902426db7840115682b532cb9608",class:"text-field-bar"}),i&&d("div",{key:"de47acdd61b322f22420334e9aee899977f05baa",class:{"text-field-slot-wrap-suffix":!0,"text-field-error":"error"===this.state,"text-field-success":"success"===this.state,"text-field-default":"default"===this.state,"tds-u-display-none":this.readOnly}},d("slot",{key:"ac8a9688c8a75466174d24903a5178ee283d3ea8",name:"suffix"})),this.readOnly&&!this.hideReadOnlyIcon&&d("span",{key:"28feccceb3e45f762fceecd9108c1bb23077e0d5",class:"text-field-icon__readonly"},d("tds-icon",{key:"87f9666853a79e9529e0856431894eecf007920e",name:"edit_inactive",size:"20px"})),d("span",{key:"bd8ac1b13ae24e3fd963d715c7ae839e1c1315ff",class:"text-field-icon__readonly-label"},"This field is non-editable")),d("div",{key:"f1604132dd79bcae94293af680a48ef6a91108ad","aria-live":"assertive"},(this.helper||this.maxLength>0)&&d("div",{key:"88fe20f17da67cbc6898904b9cb4ad35c5efb119",class:"text-field-helper"},"error"===this.state&&d("div",{key:"77d6b96628ef3e0564c4ccae084e2e7eab4798c9",class:"text-field-helper-error-state"},!this.readOnly&&d("tds-icon",{key:"7593cc143ec577075b670f37b9a8dd5e66576072",name:"error",size:"16px"}),this.helper),"error"!==this.state&&this.helper,!this.readOnly&&this.maxLength>0&&d("span",{key:"afe6f09714c093c9b0246daa1f676507c633d903",class:{"text-field-textcounter-divider":!0,"text-field-textcounter-disabled":this.disabled}},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length," / ",this.maxLength))))}get host(){return i(this)}};s.style='.text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}';export{s as tds_text_field}
package/dist/tegel/tegel.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as a}from"./p-2049fab2.js";export{s as setNonce}from"./p-2049fab2.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a(JSON.parse('[["p-1286da6a",[[1,"tds-header-launcher",{"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"buttonEl":[32],"hasListTypeMenu":[32]},[[8,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-97e88e6e",[[1,"tds-header-dropdown",{"label":[1],"noDropdownIcon":[4,"no-dropdown-icon"],"selected":[4],"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"buttonEl":[32]},[[4,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-918a3c1a",[[1,"tds-table-footer",{"pagination":[516],"paginationValue":[1538,"pagination-value"],"rowsperpage":[516],"rowsPerPageValues":[16],"pages":[514],"cols":[2],"columnsNumber":[32],"compactDesign":[32],"lastCorrectValue":[32],"tableId":[32],"horizontalScrollWidth":[32],"rowsPerPageValue":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-0bd4fd5c",[[1,"tds-header-hamburger",{"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-132c0d81",[[2,"tds-textarea",{"label":[1],"name":[1],"helper":[1],"cols":[2],"rows":[2],"labelPosition":[1,"label-position"],"placeholder":[1],"value":[1],"disabled":[4],"readOnly":[4,"read-only"],"hideReadOnlyIcon":[4,"hide-read-only-icon"],"state":[1],"maxLength":[2,"max-length"],"modeVariant":[1,"mode-variant"],"autofocus":[4],"noMinWidth":[4,"no-min-width"],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32]}]]],["p-6c8b40f7",[[1,"tds-header-brand-symbol"]]],["p-7ef50e7f",[[1,"tds-side-menu-dropdown",{"defaultOpen":[4,"default-open"],"buttonLabel":[1,"button-label"],"selected":[4],"open":[4],"hoverState":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"],[1,"pointerenter","onEventPointerEnter"],[0,"focusin","onEventFocus"],[1,"pointerleave","onEventPointerLeave"],[0,"focusout","onEventBlur"],[0,"keydown","handleKeyDown"]]]]],["p-9858b0fe",[[1,"tds-side-menu-user",{"heading":[1],"subheading":[1],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"]}]]],["p-8e9c6ef4",[[1,"tds-accordion-item",{"header":[1],"expandIconPosition":[1,"expand-icon-position"],"disabled":[4],"expanded":[4],"paddingReset":[4,"padding-reset"],"ariaLevelValue":[1,"aria-level-value"],"toggleAccordionItem":[64]}]]],["p-1120575b",[[1,"tds-banner",{"icon":[1],"header":[1],"subheader":[1],"variant":[1],"bannerId":[1,"banner-id"],"hidden":[516],"roleType":[1,"role-type"],"hideBanner":[64],"showBanner":[64]}]]],["p-710c42c5",[[1,"tds-card",{"modeVariant":[1,"mode-variant"],"imagePlacement":[1,"image-placement"],"header":[1],"subheader":[1],"bodyImg":[1,"body-img"],"bodyImgAlt":[1,"body-img-alt"],"bodyDivider":[4,"body-divider"],"clickable":[4],"stretch":[4],"cardId":[1,"card-id"]}]]],["p-1078b1b4",[[2,"tds-datetime",{"type":[513],"value":[1537],"min":[1],"max":[1],"defaultValue":[1,"default-value"],"disabled":[4],"size":[1],"noMinWidth":[4,"no-min-width"],"modeVariant":[1,"mode-variant"],"name":[1],"state":[1],"autofocus":[4],"label":[1],"helper":[1],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32],"reset":[64],"setValue":[64]},[[0,"focus","handleFocusIn"],[0,"focusout","handleFocusOut"]]]]],["p-87929060",[[1,"tds-folder-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"buttonWidth":[32],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-4e8e7bcd",[[1,"tds-footer-group",{"titleText":[1,"title-text"],"tdsListAriaLabel":[1,"tds-list-aria-label"],"open":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-981e6232",[[1,"tds-header-cell",{"cellKey":[513,"cell-key"],"cellValue":[513,"cell-value"],"customWidth":[513,"custom-width"],"sortable":[4],"textAlign":[513,"text-align"],"disablePadding":[516,"disable-padding"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"multiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"expandableRows":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalSortButtonClicked","updateOptionsContent"]]]]],["p-3c348fcb",[[4,"tds-header-launcher-list"]]],["p-c163d44f",[[1,"tds-header-launcher-list-item"]]],["p-27777c26",[[1,"tds-inline-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"leftPadding":[514,"left-padding"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-c1b7d773",[[1,"tds-message",{"header":[1],"modeVariant":[1,"mode-variant"],"variant":[1],"noIcon":[4,"no-icon"],"minimal":[4],"tdsAlertDialog":[1,"tds-alert-dialog"],"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-a56ad3d8",[[1,"tds-modal",{"header":[1],"prevent":[4],"size":[1],"actionsPosition":[1,"actions-position"],"selector":[1],"referenceEl":[16],"show":[4],"closable":[4],"tdsAlertDialog":[1,"tds-alert-dialog"],"isShown":[32],"activeElementIndex":[32],"showModal":[64],"closeModal":[64],"initializeModal":[64],"cleanupModal":[64]},[[10,"keydown","handleFocusTrap"]]]]],["p-2446dfb6",[[1,"tds-navigation-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"leftPadding":[514,"left-padding"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-7486e9f9",[[6,"tds-popover-menu",{"selector":[1],"referenceEl":[16],"show":[4],"defaultShow":[4,"default-show"],"placement":[1],"animation":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"fluidWidth":[4,"fluid-width"],"childRef":[32],"close":[64]}]]],["p-faa512fd",[[1,"tds-side-menu-close-button"]]],["p-2deba066",[[1,"tds-side-menu-collapse-button",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-05da560e",[[0,"tds-slider",{"label":[1],"value":[1025],"min":[1],"max":[1],"ticks":[1],"showTickNumbers":[4,"show-tick-numbers"],"tooltip":[4],"disabled":[4],"readOnly":[4,"read-only"],"controls":[4],"input":[4],"step":[1],"name":[1],"thumbSize":[1,"thumb-size"],"snap":[4],"tdsAriaLabel":[1,"tds-aria-label"],"sliderId":[1,"slider-id"],"tdsReadOnlyAriaLabel":[1,"tds-read-only-aria-label"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{"value":["handleValueUpdate"]}]]],["p-eff1d877",[[1,"tds-step",{"index":[1],"state":[1],"tdsAriaCurrent":[1,"tds-aria-current"],"hideLabels":[32],"size":[32],"orientation":[32],"labelPosition":[32]},[[16,"internalTdsPropsChange","handlePropsChange"]]]]],["p-1cda8fe6",[[1,"tds-table-body-input-wrapper",{"showIcon":[4,"show-icon"],"renderSlot":[32],"inputFocused":[32],"compactDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-2fbf2fdb",[[1,"tds-table-body-row",{"selected":[516],"disabled":[516],"clickable":[516],"multiselect":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-9f187848",[[1,"tds-table-header",{"allSelected":[1540,"all-selected"],"selected":[1540],"disabled":[1540],"indeterminate":[4],"multiselect":[32],"expandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowExpanded","internalTdsRowExpandedListener"]]]]],["p-d515fcdb",[[1,"tds-table-header-input-wrapper",{"showIcon":[4,"show-icon"],"compactDesign":[4,"compact-design"],"renderSlot":[32],"inputFocused":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-2551fd5b",[[1,"tds-table-toolbar",{"tableTitle":[513,"table-title"],"filter":[516],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32],"horizontalScrollWidth":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-66786ba0",[[6,"tds-text-field",{"type":[513],"labelPosition":[1,"label-position"],"label":[1],"min":[8],"max":[8],"helper":[1],"placeholder":[1],"value":[513],"disabled":[4],"readOnly":[4,"read-only"],"hideReadOnlyIcon":[4,"hide-read-only-icon"],"size":[1],"modeVariant":[1,"mode-variant"],"noMinWidth":[4,"no-min-width"],"name":[1],"state":[1],"maxLength":[2,"max-length"],"autofocus":[4],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32],"focusElement":[64]}]]],["p-37e979b3",[[1,"tds-toast",{"toastId":[1,"toast-id"],"header":[1],"subheader":[1],"variant":[1],"hidden":[516],"closable":[4],"toastRole":[1,"toast-role"],"tdsCloseAriaLabel":[1,"tds-close-aria-label"],"tdsAriaLive":[1,"tds-aria-live"],"hideToast":[64],"showToast":[64]}]]],["p-1978cb0d",[[1,"tds-accordion",{"modeVariant":[1,"mode-variant"],"hideLastBorder":[4,"hide-last-border"]}]]],["p-e102ca15",[[1,"tds-badge",{"value":[1],"hidden":[516],"size":[1],"tdsAriaLive":[1,"tds-aria-live"],"tdsAriaLabel":[32],"shape":[32],"text":[32]},null,{"value":["watchProps"],"size":["watchProps"]}]]],["p-72006dd7",[[1,"tds-block",{"modeVariant":[1,"mode-variant"],"componentTag":[1,"component-tag"]}]]],["p-a10b3a4a",[[1,"tds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[520,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlign":[513,"text-align"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalTdsHover","internalTdsHoverListener"],[16,"internalTdsTextAlign","internalTdsTextAlignListener"]]]]],["p-c5e50096",[[1,"tds-breadcrumb",{"current":[4]}]]],["p-618d6b4f",[[1,"tds-breadcrumbs",{"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-d38039b3",[[6,"tds-button",{"text":[1],"type":[1],"variant":[1],"size":[1],"disabled":[4],"fullbleed":[4],"modeVariant":[1,"mode-variant"],"animation":[1],"tdsAriaLabel":[1,"tds-aria-label"],"onlyIcon":[32]}]]],["p-dfe24bb1",[[6,"tds-chip",{"type":[1],"size":[1],"chipId":[1,"chip-id"],"checked":[1540],"name":[1],"value":[1],"disabled":[4],"tdsAriaLabel":[1,"tds-aria-label"]},[[16,"internalRadioOnChange","handleInternaRadioChange"]]]]],["p-54ac3ec2",[[1,"tds-folder-tab",{"disabled":[4],"selected":[32],"tabWidth":[32],"setTabWidth":[64],"setSelected":[64]}]]],["p-dfe4bb23",[[1,"tds-footer",{"modeVariant":[1,"mode-variant"]}]]],["p-0c421cde",[[1,"tds-footer-item"]]],["p-354d3986",[[4,"tds-header"]]],["p-4de2807c",[[1,"tds-header-dropdown-list-user",{"imgUrl":[1,"img-url"],"imgAlt":[1,"img-alt"],"header":[1],"subheader":[1]}]]],["p-ca32a270",[[4,"tds-header-launcher-grid",{"headingElement":[32]}]]],["p-6b675e89",[[1,"tds-header-launcher-grid-item"]]],["p-8a4837ae",[[4,"tds-header-launcher-grid-title"]]],["p-c23a3f12",[[4,"tds-header-launcher-list-title"]]],["p-646d1df4",[[1,"tds-header-title"]]],["p-27e64ae1",[[1,"tds-inline-tab",{"disabled":[4],"selected":[32],"setSelected":[64]}]]],["p-e88b2128",[[1,"tds-link",{"disabled":[4],"underline":[4],"standalone":[4]}]]],["p-33f1f60e",[[1,"tds-navigation-tab",{"disabled":[4],"selected":[32],"setSelected":[64]}]]],["p-2faeb483",[[1,"tds-popover-menu-item",{"disabled":[4]}]]],["p-0e5c6384",[[6,"tds-radio-button",{"name":[1],"value":[1],"radioId":[1,"radio-id"],"checked":[516],"required":[4],"disabled":[4],"tdsAriaLabel":[1,"tds-aria-label"],"tdsTabIndex":[2,"tds-tab-index"]}]]],["p-ccbafacd",[[1,"tds-side-menu",{"open":[1028],"persistent":[4],"collapsed":[1028],"isUpperSlotEmpty":[32],"isCollapsed":[32],"initialCollapsedState":[32],"activeElementIndex":[32]},[[8,"keydown","handleKeyDown"],[10,"keydown","handleFocusTrap"],[16,"internalTdsCollapse","collapsedSideMenuEventHandler"]],{"collapsed":["onCollapsedChange"],"open":["onOpenChange"]}]]],["p-b210d23c",[[1,"tds-side-menu-dropdown-list",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"]]]]],["p-e5e9bd0c",[[1,"tds-side-menu-dropdown-list-item",{"selected":[4],"dropdownHasIcon":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-304f5a5c",[[1,"tds-side-menu-overlay"]]],["p-8f1aead7",[[0,"tds-spinner",{"size":[1],"variant":[1]}]]],["p-177386d5",[[1,"tds-stepper",{"orientation":[1],"labelPosition":[1,"label-position"],"size":[1],"hideLabels":[4,"hide-labels"],"stepperId":[1,"stepper-id"],"tdsAriaLabel":[1,"tds-aria-label"]},null,{"orientation":["handleDirectionChange"],"labelPosition":["handleLabelPositionChange"],"size":["handleSizeChange"],"hideLabels":["handleHideLabelsChange"]}]]],["p-08f63e5d",[[1,"tds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"multiselect":[516],"expandableRows":[516,"expandable-rows"],"responsive":[516],"modeVariant":[513,"mode-variant"],"zebraMode":[513,"zebra-mode"],"horizontalScrollWidth":[1,"horizontal-scroll-width"],"tableId":[1,"table-id"],"enableHorizontalScrollToolbarDesign":[32],"enableHorizontalScrollFooterDesign":[32],"getSelectedRows":[64]},null,{"multiselect":["multiselectChanged"],"expandableRows":["enableExpandableRowsChanged"],"compactDesign":["compactDesignChanged"],"verticalDividers":["verticalDividersChanged"],"noMinWidth":["noMinWidthChanged"],"zebraMode":["zebraModeChanged"],"modeVariant":["modeVariantChanged"],"horizontalScrollWidth":["widthChanged"]}]]],["p-08ad6a21",[[4,"tds-table-body",{"multiselect":[32],"enablePaginationTableBody":[32],"expandableRows":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"zebraMode":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowChange","bodyCheckboxListener"]]]]],["p-9ef67795",[[1,"tds-table-body-row-expandable",{"colSpan":[2,"col-span"],"rowId":[513,"row-id"],"expanded":[516],"overflow":[513],"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"expand":[64],"collapse":[64]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"tdsChange","handleRowExpand"]],{"expanded":["watchExpanded"]}]]],["p-4cafd755",[[6,"tds-toggle",{"checked":[516],"required":[4],"size":[1],"name":[1],"headline":[1],"disabled":[4],"toggleId":[1,"toggle-id"],"tdsAriaLabel":[1,"tds-aria-label"],"toggle":[64]}]]],["p-ab00e6e4",[[1,"tds-header-launcher-button",{"active":[4],"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-7f2228be",[[6,"tds-tooltip",{"text":[1],"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"mouseOverTooltip":[4,"mouse-over-tooltip"],"trigger":[1],"show":[1028],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"tdsAriaDescribedby":[1,"tds-aria-describedby"]},[[8,"keydown","handleKeyDown"]]]]],["p-319e992d",[[1,"tds-divider",{"orientation":[1]}]]],["p-c0cbc9f5",[[1,"tds-header-dropdown-list",{"size":[513],"headingElement":[32]}]]],["p-58b928e5",[[1,"tds-header-dropdown-list-item",{"selected":[4],"size":[513]}]]],["p-d6d8cb7f",[[6,"tds-checkbox",{"name":[1],"checkboxId":[1,"checkbox-id"],"disabled":[4],"required":[4],"checked":[1540],"indeterminate":[1028],"value":[1],"tdsAriaLabel":[1,"tds-aria-label"],"tdsAriaDescribedby":[1,"tds-aria-describedby"],"toggleCheckbox":[64]},[[4,"reset","handleFormReset"]],{"indeterminate":["handleIndeterminateState"]}]]],["p-63d2c1fe",[[17,"tds-dropdown-option",{"value":[8],"disabled":[4],"internalValue":[32],"selected":[32],"multiselect":[32],"size":[32],"setSelected":[64]},null,{"value":["valueWatcher"]}],[1,"tds-dropdown",{"name":[1],"disabled":[4],"helper":[1],"label":[1],"labelPosition":[1,"label-position"],"modeVariant":[1,"mode-variant"],"openDirection":[1,"open-direction"],"placeholder":[1],"size":[1],"animation":[1],"error":[4],"multiselect":[4],"filter":[4],"normalizeText":[4,"normalize-text"],"noResultText":[1,"no-result-text"],"defaultValue":[8,"default-value"],"value":[1032],"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"internalValue":[32],"filterResult":[32],"filterFocus":[32],"internalDefaultValue":[32],"selectedOptions":[32],"setValue":[64],"reset":[64],"removeValue":[64],"focusElement":[64],"close":[64],"appendValue":[64]},[[9,"mousedown","onAnyClick"],[0,"keydown","onKeyDown"]],{"value":["handleValueChange"],"open":["handleOpenState"],"defaultValue":["handleDefaultValueChange"]}]]],["p-8afeb375",[[6,"tds-popover-core",{"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"animation":[1],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"modifiers":[16],"trigger":[1],"autoHide":[4,"auto-hide"],"renderedShowValue":[32],"popperInstance":[32],"target":[32],"isShown":[32],"disableLogic":[32],"hasShownAtLeastOnce":[32],"openedByKeyboard":[32],"close":[64]},[[8,"click","onAnyClick"],[8,"internalTdsShow","onTdsShow"],[8,"keydown","handleKeydown"]],{"show":["onShowChange"],"referenceEl":["onReferenceElChanged"],"trigger":["onTriggerChanged"],"isShown":["onIsShownChange"]}]]],["p-286f470e",[[6,"tds-popover-canvas",{"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"animation":[1],"offsetDistance":[2,"offset-distance"],"modifiers":[16],"tdsAlertDialog":[1,"tds-alert-dialog"],"childRef":[32],"close":[64]}]]],["p-5c8fd75e",[[1,"tds-side-menu-user-image",{"src":[1],"alt":[1]}],[1,"tds-side-menu-user-label",{"heading":[1],"subheading":[1]}]]],["p-003184ea",[[1,"tds-side-menu-item",{"selected":[4],"active":[4],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-4241afd6",[[1,"tds-header-item",{"active":[4],"selected":[4]}],[1,"tds-core-header-item"]]],["p-0e37277e",[[1,"tds-icon",{"name":[513],"size":[513],"svgTitle":[1,"svg-title"],"tdsAriaHidden":[4,"tds-aria-hidden"],"svgDescription":[1,"svg-description"],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e))));
1
+ import{p as e,b as a}from"./p-2049fab2.js";export{s as setNonce}from"./p-2049fab2.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a(JSON.parse('[["p-1286da6a",[[1,"tds-header-launcher",{"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"buttonEl":[32],"hasListTypeMenu":[32]},[[8,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-97e88e6e",[[1,"tds-header-dropdown",{"label":[1],"noDropdownIcon":[4,"no-dropdown-icon"],"selected":[4],"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"buttonEl":[32]},[[4,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-918a3c1a",[[1,"tds-table-footer",{"pagination":[516],"paginationValue":[1538,"pagination-value"],"rowsperpage":[516],"rowsPerPageValues":[16],"pages":[514],"cols":[2],"columnsNumber":[32],"compactDesign":[32],"lastCorrectValue":[32],"tableId":[32],"horizontalScrollWidth":[32],"rowsPerPageValue":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-0bd4fd5c",[[1,"tds-header-hamburger",{"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-0fd8e378",[[2,"tds-textarea",{"label":[1],"name":[1],"helper":[1],"cols":[2],"rows":[2],"labelPosition":[1,"label-position"],"placeholder":[1],"value":[1],"disabled":[4],"readOnly":[4,"read-only"],"hideReadOnlyIcon":[4,"hide-read-only-icon"],"state":[1],"maxLength":[2,"max-length"],"modeVariant":[1,"mode-variant"],"autofocus":[4],"noMinWidth":[4,"no-min-width"],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32]}]]],["p-6c8b40f7",[[1,"tds-header-brand-symbol"]]],["p-7ef50e7f",[[1,"tds-side-menu-dropdown",{"defaultOpen":[4,"default-open"],"buttonLabel":[1,"button-label"],"selected":[4],"open":[4],"hoverState":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"],[1,"pointerenter","onEventPointerEnter"],[0,"focusin","onEventFocus"],[1,"pointerleave","onEventPointerLeave"],[0,"focusout","onEventBlur"],[0,"keydown","handleKeyDown"]]]]],["p-9858b0fe",[[1,"tds-side-menu-user",{"heading":[1],"subheading":[1],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"]}]]],["p-8e9c6ef4",[[1,"tds-accordion-item",{"header":[1],"expandIconPosition":[1,"expand-icon-position"],"disabled":[4],"expanded":[4],"paddingReset":[4,"padding-reset"],"ariaLevelValue":[1,"aria-level-value"],"toggleAccordionItem":[64]}]]],["p-1120575b",[[1,"tds-banner",{"icon":[1],"header":[1],"subheader":[1],"variant":[1],"bannerId":[1,"banner-id"],"hidden":[516],"roleType":[1,"role-type"],"hideBanner":[64],"showBanner":[64]}]]],["p-710c42c5",[[1,"tds-card",{"modeVariant":[1,"mode-variant"],"imagePlacement":[1,"image-placement"],"header":[1],"subheader":[1],"bodyImg":[1,"body-img"],"bodyImgAlt":[1,"body-img-alt"],"bodyDivider":[4,"body-divider"],"clickable":[4],"stretch":[4],"cardId":[1,"card-id"]}]]],["p-1078b1b4",[[2,"tds-datetime",{"type":[513],"value":[1537],"min":[1],"max":[1],"defaultValue":[1,"default-value"],"disabled":[4],"size":[1],"noMinWidth":[4,"no-min-width"],"modeVariant":[1,"mode-variant"],"name":[1],"state":[1],"autofocus":[4],"label":[1],"helper":[1],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32],"reset":[64],"setValue":[64]},[[0,"focus","handleFocusIn"],[0,"focusout","handleFocusOut"]]]]],["p-87929060",[[1,"tds-folder-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"buttonWidth":[32],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-4e8e7bcd",[[1,"tds-footer-group",{"titleText":[1,"title-text"],"tdsListAriaLabel":[1,"tds-list-aria-label"],"open":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-981e6232",[[1,"tds-header-cell",{"cellKey":[513,"cell-key"],"cellValue":[513,"cell-value"],"customWidth":[513,"custom-width"],"sortable":[4],"textAlign":[513,"text-align"],"disablePadding":[516,"disable-padding"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"multiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"expandableRows":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalSortButtonClicked","updateOptionsContent"]]]]],["p-3c348fcb",[[4,"tds-header-launcher-list"]]],["p-c163d44f",[[1,"tds-header-launcher-list-item"]]],["p-27777c26",[[1,"tds-inline-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"leftPadding":[514,"left-padding"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-c1b7d773",[[1,"tds-message",{"header":[1],"modeVariant":[1,"mode-variant"],"variant":[1],"noIcon":[4,"no-icon"],"minimal":[4],"tdsAlertDialog":[1,"tds-alert-dialog"],"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-a56ad3d8",[[1,"tds-modal",{"header":[1],"prevent":[4],"size":[1],"actionsPosition":[1,"actions-position"],"selector":[1],"referenceEl":[16],"show":[4],"closable":[4],"tdsAlertDialog":[1,"tds-alert-dialog"],"isShown":[32],"activeElementIndex":[32],"showModal":[64],"closeModal":[64],"initializeModal":[64],"cleanupModal":[64]},[[10,"keydown","handleFocusTrap"]]]]],["p-2446dfb6",[[1,"tds-navigation-tabs",{"modeVariant":[1,"mode-variant"],"defaultSelectedIndex":[2,"default-selected-index"],"selectedIndex":[514,"selected-index"],"leftPadding":[514,"left-padding"],"tdsScrollLeftAriaLabel":[1,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[1,"tds-scroll-right-aria-label"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":["handleSelectedIndexUpdate"]}]]],["p-7486e9f9",[[6,"tds-popover-menu",{"selector":[1],"referenceEl":[16],"show":[4],"defaultShow":[4,"default-show"],"placement":[1],"animation":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"fluidWidth":[4,"fluid-width"],"childRef":[32],"close":[64]}]]],["p-faa512fd",[[1,"tds-side-menu-close-button"]]],["p-2deba066",[[1,"tds-side-menu-collapse-button",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-05da560e",[[0,"tds-slider",{"label":[1],"value":[1025],"min":[1],"max":[1],"ticks":[1],"showTickNumbers":[4,"show-tick-numbers"],"tooltip":[4],"disabled":[4],"readOnly":[4,"read-only"],"controls":[4],"input":[4],"step":[1],"name":[1],"thumbSize":[1,"thumb-size"],"snap":[4],"tdsAriaLabel":[1,"tds-aria-label"],"sliderId":[1,"slider-id"],"tdsReadOnlyAriaLabel":[1,"tds-read-only-aria-label"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{"value":["handleValueUpdate"]}]]],["p-eff1d877",[[1,"tds-step",{"index":[1],"state":[1],"tdsAriaCurrent":[1,"tds-aria-current"],"hideLabels":[32],"size":[32],"orientation":[32],"labelPosition":[32]},[[16,"internalTdsPropsChange","handlePropsChange"]]]]],["p-1cda8fe6",[[1,"tds-table-body-input-wrapper",{"showIcon":[4,"show-icon"],"renderSlot":[32],"inputFocused":[32],"compactDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-2fbf2fdb",[[1,"tds-table-body-row",{"selected":[516],"disabled":[516],"clickable":[516],"multiselect":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-9f187848",[[1,"tds-table-header",{"allSelected":[1540,"all-selected"],"selected":[1540],"disabled":[1540],"indeterminate":[4],"multiselect":[32],"expandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowExpanded","internalTdsRowExpandedListener"]]]]],["p-d515fcdb",[[1,"tds-table-header-input-wrapper",{"showIcon":[4,"show-icon"],"compactDesign":[4,"compact-design"],"renderSlot":[32],"inputFocused":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-2551fd5b",[[1,"tds-table-toolbar",{"tableTitle":[513,"table-title"],"filter":[516],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32],"horizontalScrollWidth":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-135f2276",[[6,"tds-text-field",{"type":[513],"labelPosition":[1,"label-position"],"label":[1],"min":[8],"max":[8],"helper":[1],"placeholder":[1],"value":[513],"disabled":[4],"readOnly":[4,"read-only"],"hideReadOnlyIcon":[4,"hide-read-only-icon"],"size":[1],"modeVariant":[1,"mode-variant"],"noMinWidth":[4,"no-min-width"],"name":[1],"state":[1],"maxLength":[2,"max-length"],"autofocus":[4],"tdsAriaLabel":[1,"tds-aria-label"],"focusInput":[32],"focusElement":[64]}]]],["p-37e979b3",[[1,"tds-toast",{"toastId":[1,"toast-id"],"header":[1],"subheader":[1],"variant":[1],"hidden":[516],"closable":[4],"toastRole":[1,"toast-role"],"tdsCloseAriaLabel":[1,"tds-close-aria-label"],"tdsAriaLive":[1,"tds-aria-live"],"hideToast":[64],"showToast":[64]}]]],["p-1978cb0d",[[1,"tds-accordion",{"modeVariant":[1,"mode-variant"],"hideLastBorder":[4,"hide-last-border"]}]]],["p-e102ca15",[[1,"tds-badge",{"value":[1],"hidden":[516],"size":[1],"tdsAriaLive":[1,"tds-aria-live"],"tdsAriaLabel":[32],"shape":[32],"text":[32]},null,{"value":["watchProps"],"size":["watchProps"]}]]],["p-72006dd7",[[1,"tds-block",{"modeVariant":[1,"mode-variant"],"componentTag":[1,"component-tag"]}]]],["p-a10b3a4a",[[1,"tds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[520,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlign":[513,"text-align"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalTdsHover","internalTdsHoverListener"],[16,"internalTdsTextAlign","internalTdsTextAlignListener"]]]]],["p-c5e50096",[[1,"tds-breadcrumb",{"current":[4]}]]],["p-618d6b4f",[[1,"tds-breadcrumbs",{"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-d38039b3",[[6,"tds-button",{"text":[1],"type":[1],"variant":[1],"size":[1],"disabled":[4],"fullbleed":[4],"modeVariant":[1,"mode-variant"],"animation":[1],"tdsAriaLabel":[1,"tds-aria-label"],"onlyIcon":[32]}]]],["p-dfe24bb1",[[6,"tds-chip",{"type":[1],"size":[1],"chipId":[1,"chip-id"],"checked":[1540],"name":[1],"value":[1],"disabled":[4],"tdsAriaLabel":[1,"tds-aria-label"]},[[16,"internalRadioOnChange","handleInternaRadioChange"]]]]],["p-54ac3ec2",[[1,"tds-folder-tab",{"disabled":[4],"selected":[32],"tabWidth":[32],"setTabWidth":[64],"setSelected":[64]}]]],["p-dfe4bb23",[[1,"tds-footer",{"modeVariant":[1,"mode-variant"]}]]],["p-0c421cde",[[1,"tds-footer-item"]]],["p-354d3986",[[4,"tds-header"]]],["p-4de2807c",[[1,"tds-header-dropdown-list-user",{"imgUrl":[1,"img-url"],"imgAlt":[1,"img-alt"],"header":[1],"subheader":[1]}]]],["p-ca32a270",[[4,"tds-header-launcher-grid",{"headingElement":[32]}]]],["p-6b675e89",[[1,"tds-header-launcher-grid-item"]]],["p-8a4837ae",[[4,"tds-header-launcher-grid-title"]]],["p-c23a3f12",[[4,"tds-header-launcher-list-title"]]],["p-646d1df4",[[1,"tds-header-title"]]],["p-27e64ae1",[[1,"tds-inline-tab",{"disabled":[4],"selected":[32],"setSelected":[64]}]]],["p-e88b2128",[[1,"tds-link",{"disabled":[4],"underline":[4],"standalone":[4]}]]],["p-33f1f60e",[[1,"tds-navigation-tab",{"disabled":[4],"selected":[32],"setSelected":[64]}]]],["p-2faeb483",[[1,"tds-popover-menu-item",{"disabled":[4]}]]],["p-0e5c6384",[[6,"tds-radio-button",{"name":[1],"value":[1],"radioId":[1,"radio-id"],"checked":[516],"required":[4],"disabled":[4],"tdsAriaLabel":[1,"tds-aria-label"],"tdsTabIndex":[2,"tds-tab-index"]}]]],["p-ccbafacd",[[1,"tds-side-menu",{"open":[1028],"persistent":[4],"collapsed":[1028],"isUpperSlotEmpty":[32],"isCollapsed":[32],"initialCollapsedState":[32],"activeElementIndex":[32]},[[8,"keydown","handleKeyDown"],[10,"keydown","handleFocusTrap"],[16,"internalTdsCollapse","collapsedSideMenuEventHandler"]],{"collapsed":["onCollapsedChange"],"open":["onOpenChange"]}]]],["p-b210d23c",[[1,"tds-side-menu-dropdown-list",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"]]]]],["p-e5e9bd0c",[[1,"tds-side-menu-dropdown-list-item",{"selected":[4],"dropdownHasIcon":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-304f5a5c",[[1,"tds-side-menu-overlay"]]],["p-8f1aead7",[[0,"tds-spinner",{"size":[1],"variant":[1]}]]],["p-177386d5",[[1,"tds-stepper",{"orientation":[1],"labelPosition":[1,"label-position"],"size":[1],"hideLabels":[4,"hide-labels"],"stepperId":[1,"stepper-id"],"tdsAriaLabel":[1,"tds-aria-label"]},null,{"orientation":["handleDirectionChange"],"labelPosition":["handleLabelPositionChange"],"size":["handleSizeChange"],"hideLabels":["handleHideLabelsChange"]}]]],["p-08f63e5d",[[1,"tds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"multiselect":[516],"expandableRows":[516,"expandable-rows"],"responsive":[516],"modeVariant":[513,"mode-variant"],"zebraMode":[513,"zebra-mode"],"horizontalScrollWidth":[1,"horizontal-scroll-width"],"tableId":[1,"table-id"],"enableHorizontalScrollToolbarDesign":[32],"enableHorizontalScrollFooterDesign":[32],"getSelectedRows":[64]},null,{"multiselect":["multiselectChanged"],"expandableRows":["enableExpandableRowsChanged"],"compactDesign":["compactDesignChanged"],"verticalDividers":["verticalDividersChanged"],"noMinWidth":["noMinWidthChanged"],"zebraMode":["zebraModeChanged"],"modeVariant":["modeVariantChanged"],"horizontalScrollWidth":["widthChanged"]}]]],["p-08ad6a21",[[4,"tds-table-body",{"multiselect":[32],"enablePaginationTableBody":[32],"expandableRows":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"zebraMode":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowChange","bodyCheckboxListener"]]]]],["p-9ef67795",[[1,"tds-table-body-row-expandable",{"colSpan":[2,"col-span"],"rowId":[513,"row-id"],"expanded":[516],"overflow":[513],"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"expand":[64],"collapse":[64]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"tdsChange","handleRowExpand"]],{"expanded":["watchExpanded"]}]]],["p-4cafd755",[[6,"tds-toggle",{"checked":[516],"required":[4],"size":[1],"name":[1],"headline":[1],"disabled":[4],"toggleId":[1,"toggle-id"],"tdsAriaLabel":[1,"tds-aria-label"],"toggle":[64]}]]],["p-ab00e6e4",[[1,"tds-header-launcher-button",{"active":[4],"tdsAriaLabel":[1,"tds-aria-label"]}]]],["p-7f2228be",[[6,"tds-tooltip",{"text":[1],"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"mouseOverTooltip":[4,"mouse-over-tooltip"],"trigger":[1],"show":[1028],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"tdsAriaDescribedby":[1,"tds-aria-describedby"]},[[8,"keydown","handleKeyDown"]]]]],["p-319e992d",[[1,"tds-divider",{"orientation":[1]}]]],["p-c0cbc9f5",[[1,"tds-header-dropdown-list",{"size":[513],"headingElement":[32]}]]],["p-58b928e5",[[1,"tds-header-dropdown-list-item",{"selected":[4],"size":[513]}]]],["p-d6d8cb7f",[[6,"tds-checkbox",{"name":[1],"checkboxId":[1,"checkbox-id"],"disabled":[4],"required":[4],"checked":[1540],"indeterminate":[1028],"value":[1],"tdsAriaLabel":[1,"tds-aria-label"],"tdsAriaDescribedby":[1,"tds-aria-describedby"],"toggleCheckbox":[64]},[[4,"reset","handleFormReset"]],{"indeterminate":["handleIndeterminateState"]}]]],["p-63d2c1fe",[[17,"tds-dropdown-option",{"value":[8],"disabled":[4],"internalValue":[32],"selected":[32],"multiselect":[32],"size":[32],"setSelected":[64]},null,{"value":["valueWatcher"]}],[1,"tds-dropdown",{"name":[1],"disabled":[4],"helper":[1],"label":[1],"labelPosition":[1,"label-position"],"modeVariant":[1,"mode-variant"],"openDirection":[1,"open-direction"],"placeholder":[1],"size":[1],"animation":[1],"error":[4],"multiselect":[4],"filter":[4],"normalizeText":[4,"normalize-text"],"noResultText":[1,"no-result-text"],"defaultValue":[8,"default-value"],"value":[1032],"tdsAriaLabel":[1,"tds-aria-label"],"open":[32],"internalValue":[32],"filterResult":[32],"filterFocus":[32],"internalDefaultValue":[32],"selectedOptions":[32],"setValue":[64],"reset":[64],"removeValue":[64],"focusElement":[64],"close":[64],"appendValue":[64]},[[9,"mousedown","onAnyClick"],[0,"keydown","onKeyDown"]],{"value":["handleValueChange"],"open":["handleOpenState"],"defaultValue":["handleDefaultValueChange"]}]]],["p-8afeb375",[[6,"tds-popover-core",{"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"animation":[1],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"modifiers":[16],"trigger":[1],"autoHide":[4,"auto-hide"],"renderedShowValue":[32],"popperInstance":[32],"target":[32],"isShown":[32],"disableLogic":[32],"hasShownAtLeastOnce":[32],"openedByKeyboard":[32],"close":[64]},[[8,"click","onAnyClick"],[8,"internalTdsShow","onTdsShow"],[8,"keydown","handleKeydown"]],{"show":["onShowChange"],"referenceEl":["onReferenceElChanged"],"trigger":["onTriggerChanged"],"isShown":["onIsShownChange"]}]]],["p-286f470e",[[6,"tds-popover-canvas",{"selector":[1],"referenceEl":[16],"defaultShow":[4,"default-show"],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"animation":[1],"offsetDistance":[2,"offset-distance"],"modifiers":[16],"tdsAlertDialog":[1,"tds-alert-dialog"],"childRef":[32],"close":[64]}]]],["p-5c8fd75e",[[1,"tds-side-menu-user-image",{"src":[1],"alt":[1]}],[1,"tds-side-menu-user-label",{"heading":[1],"subheading":[1]}]]],["p-003184ea",[[1,"tds-side-menu-item",{"selected":[4],"active":[4],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-4241afd6",[[1,"tds-header-item",{"active":[4],"selected":[4]}],[1,"tds-core-header-item"]]],["p-0e37277e",[[1,"tds-icon",{"name":[513],"size":[513],"svgTitle":[1,"svg-title"],"tdsAriaHidden":[4,"tds-aria-hidden"],"svgDescription":[1,"svg-description"],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e))));
package/dist/types/components/text-field/text-field.d.ts CHANGED
@@ -5,7 +5,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
5
5
  */
6
6
  export declare class TdsTextField {
7
7
  host: HTMLElement;
8
- private uuid;
9
8
  /** Text input for focus state */
10
9
  textInput?: HTMLInputElement;
11
10
  /** Which input type, text, password or similar */
package/dist/types/components/textarea/textarea.d.ts CHANGED
@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
2
2
  export declare class TdsTextarea {
3
3
  /** Text input for focus state */
4
4
  textEl?: HTMLTextAreaElement;
5
+ private uuid;
5
6
  /** Label text */
6
7
  label: string;
7
8
  /** Name attribute */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel",
3
- "version": "1.28.1-fix-text-field-label-click-focus-beta.0",
3
+ "version": "1.28.1-fix-textarea-label-click-focus-beta.0",
4
4
  "description": "Tegel Design System",
5
5
  "type": "module",
6
6
  "keywords": [
package/dist/tegel/p-132c0d81.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as a}from"./p-2049fab2.js";const r=class{constructor(a){t(this,a),this.tdsChange=e(this,"tdsChange",6),this.tdsBlur=e(this,"tdsBlur",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.label="",this.name="",this.helper=void 0,this.cols=void 0,this.rows=void 0,this.labelPosition="no-label",this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.hideReadOnlyIcon=!1,this.state="default",this.maxLength=void 0,this.modeVariant=null,this.autofocus=!1,this.noMinWidth=!1,this.tdsAriaLabel=void 0,this.focusInput=void 0}handleChange(t){this.tdsChange.emit(t)}handleBlur(t){this.tdsBlur.emit(t),this.focusInput=!1}handleInput(t){t.target instanceof HTMLInputElement&&(this.value=t.target.value,this.tdsInput.emit(t))}handleFocus(t){this.textEl.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}setModeVariant(t){return this.readOnly&&"primary"===t?"secondary":this.readOnly&&"secondary"===t?"primary":t}connectedCallback(){this.tdsAriaLabel||this.label||console.warn("Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility")}render(){var t;return a("div",{key:"f2498e712e2e778d311c9ceb92b44a5cfad9bb10",class:{"textarea-container":!0,"textarea-label-inside":"inside"===this.labelPosition,"textarea-focus":this.focusInput,"textarea-disabled":this.disabled,"textarea-readonly":!this.disabled&&this.readOnly,[`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]:!0,"textarea-data":""!==this.value,[`textarea-${this.state}`]:"error"===this.state||"success"===this.state,"no-min-width":this.noMinWidth}},"no-label"!==this.labelPosition&&a("label",{key:"4130830455779ac1a5a5aeb1ae732a57b4fd8b95",htmlFor:"textarea-element",class:"textarea-label"},this.label),a("div",{key:"2f33705c73ff50f8e7c42316b9a593b7d13c631d",class:"textarea-wrapper"},a("textarea",{key:"8b2474a289364530756b4ea22d0349a1aa3f9891",id:"textarea-element",class:"textarea-input",ref:t=>{this.textEl=t},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:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)},onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),"aria-invalid":"error"===this.state?"true":"false","aria-readonly":this.readOnly?"true":"false","aria-label":this.tdsAriaLabel?this.tdsAriaLabel:this.label,"aria-describedby":"textarea-helper-element"}),a("span",{key:"cef602f7b35e99b34fdd7cec331159619d25fe1e",class:"textarea-resizer-icon"},a("svg",{key:"6cb70ef6a302f7158e6bd1aac01b12af75b5bbc1",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"128bfe15af23b9b5d537e0da590de2f4861fc22b","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&&a("span",{key:"608bb4c9e3cd9b82fded262178ff16d84d3cd556",class:"textarea-icon__readonly"},a("tds-tooltip",{key:"260d605a27af4b9d8ca730a087f19642680f00d2",placement:"top-end",text:"This field is non-editable",selector:"#readonly-tooltip"}),a("tds-icon",{key:"c83c3dc9e614947e925d9b1cabce6fa01ca3aef4",id:"readonly-tooltip",name:"edit_inactive"}))),a("span",{key:"76584bc76c80bc8fd3d5071fce1aabd0ae2aaaaf",class:"textarea-helper","aria-live":"assertive",id:"textarea-helper-element"},"error"===this.state&&!this.readOnly&&a("tds-icon",{key:"648c02820b2f52f1befc3c95915d2e3878bd8fa5",name:"error",size:"16px"}),this.helper),this.maxLength>0&&a("div",{key:"a79e43decc56632ba9d11e68f13411599b91392d",class:"textarea-textcounter"},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length,a("span",{key:"f40aa87ea29f65f2b704737837b831d1b96827b2",class:"textfield-textcounter-divider"}," / ")," ",this.maxLength))}};r.style='.textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:"";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border:1px solid var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}';export{r as tds_textarea}
package/dist/tegel/p-66786ba0.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as d,g as i}from"./p-2049fab2.js";import{h as l}from"./p-ae110fc2.js";import{g as s}from"./p-11648030.js";const r=class{constructor(d){t(this,d),this.tdsChange=e(this,"tdsChange",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.tdsBlur=e(this,"tdsBlur",6),this.uuid=s(),this.type="text",this.labelPosition="no-label",this.label="",this.min=void 0,this.max=void 0,this.helper=void 0,this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.hideReadOnlyIcon=!1,this.size="lg",this.modeVariant=null,this.noMinWidth=!1,this.name="",this.state="default",this.maxLength=void 0,this.autofocus=!1,this.tdsAriaLabel=void 0,this.focusInput=!1}handleChange(t){this.tdsChange.emit(t)}handleInput(t){const e=t.target;let{value:d}=e;if("number"===this.type){const t=Number(d);void 0!==this.min&&t<Number(this.min)&&(d=String(this.min)),void 0!==this.max&&t>Number(this.max)&&(d=String(this.max)),e.value=d}this.value=d,this.tdsInput.emit(t)}handleFocus(t){this.textInput.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}handleBlur(t){this.focusInput=!1,this.tdsBlur.emit(t)}async focusElement(){this.textInput&&this.textInput.focus()}connectedCallback(){this.tdsAriaLabel||console.warn("Tegel Text Field component: prop tdsAriaLabel is missing")}render(){var t;const e=l("prefix",this.host),i=l("suffix",this.host);return d("div",{key:"04c86fdbe70838228aa25e129adde1e92b8c3da1",class:{"form-text-field":!0,"form-text-field-nomin":this.noMinWidth,"text-field-focus":this.focusInput&&!this.disabled,"text-field-data":""!==this.value&&null!==this.value,"text-field-container-label-inside":"inside"===this.labelPosition&&"sm"!==this.size,"form-text-field-disabled":this.disabled,"form-text-field-readonly":!this.disabled&&this.readOnly,"tds-mode-variant-primary":this.readOnly?"secondary"===this.modeVariant:"primary"===this.modeVariant,"tds-mode-variant-secondary":this.readOnly?"primary"===this.modeVariant:"secondary"===this.modeVariant,"form-text-field-md":"md"===this.size,"form-text-field-sm":"sm"===this.size,"form-text-field-error":"error"===this.state,"form-text-field-success":"success"===this.state}},"outside"===this.labelPosition&&d("div",{key:"89a6c50afdfc35f8329b7a1e6de9c6dc860fa2a7",class:"text-field-label-outside"},d("label",{key:"1a26cc9423cd42e4ae64fdfe36ae28a1600217e1",htmlFor:`text-field-input-element-${this.uuid}`},this.label)),d("div",{key:"fff9ea20453ad6708b32e5efb7fabd8272863c8d",onClick:()=>this.textInput.focus(),class:"text-field-container"},e&&d("div",{key:"5d3b6511643b28852f3ab9c1490aa1577d0c1870",class:{"text-field-slot-wrap-prefix":!0,"text-field-error":"error"===this.state,"text-field-success":"success"===this.state,"text-field-default":"default"===this.state}},d("slot",{key:"8c6c192a137ea00d114f9721d0f6fcea366708ca",name:"prefix"})),d("div",{key:"e8b2650e45cba5e63e1db4e3d1d7af6662ff187b",class:"text-field-input-container"},d("input",{key:"d208edd0ffe3f2a78bc2df4f0dd58e13fd768453",ref:t=>{this.textInput=t},class:{"text-field-input":!0,"text-field-input-sm":"sm"===this.size,"text-field-input-md":"md"===this.size,"text-field-input-lg":"lg"===this.size},type:this.type,disabled:this.disabled,readonly:!this.disabled&&this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,min:this.min,max:this.max,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onFocus:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)},"aria-label":this.tdsAriaLabel?this.tdsAriaLabel:this.label,"aria-describedby":"text-field-helper-element","aria-readonly":this.readOnly,id:`text-field-input-element-${this.uuid}`}),"inside"===this.labelPosition&&"sm"!==this.size&&d("label",{key:"38b9cedc8c7a07b582c16b01a267cf4e08a20481",class:"text-field-label-inside",htmlFor:`text-field-input-element-${this.uuid}`},this.label)),d("div",{key:"9587a4002c11b93ee715952080e4959be0393642",class:"text-field-bar"}),i&&d("div",{key:"bb46ceb5bee96468ecbd1ec0bda36c639b045450",class:{"text-field-slot-wrap-suffix":!0,"text-field-error":"error"===this.state,"text-field-success":"success"===this.state,"text-field-default":"default"===this.state,"tds-u-display-none":this.readOnly}},d("slot",{key:"baa86fca37b71182b800095be7c4fb6db2ee4d13",name:"suffix"})),this.readOnly&&!this.hideReadOnlyIcon&&d("span",{key:"6d3abf0a6e60463e7f6db1187229cf17e5f4b80b",class:"text-field-icon__readonly"},d("tds-icon",{key:"c5afca89f935a0a3f2c63039badf7b05c60b6015",name:"edit_inactive",size:"20px"})),d("span",{key:"d677de36f510688d3311f514aed89390c1d0a39b",class:"text-field-icon__readonly-label"},"This field is non-editable")),d("div",{key:"f79ebd15d92174541ea7683de7cf002af996733a","aria-live":"assertive"},(this.helper||this.maxLength>0)&&d("div",{key:"b7708331d4c8a21d869a21f86e873da017ae2157",class:"text-field-helper"},"error"===this.state&&d("div",{key:"098f7e9d9b053b4bfb02a387be879d4c519c2b95",class:"text-field-helper-error-state"},!this.readOnly&&d("tds-icon",{key:"fa894663253fdb19d168e284284f35695deada29",name:"error",size:"16px"}),this.helper),"error"!==this.state&&this.helper,!this.readOnly&&this.maxLength>0&&d("span",{key:"dcae00985dc79db8ad6bdd65fe6160d4f5de8603",class:{"text-field-textcounter-divider":!0,"text-field-textcounter-disabled":this.disabled}},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length," / ",this.maxLength))))}get host(){return i(this)}};r.style='.text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}';export{r as tds_text_field}