@scania/tegel 0.0.51 → 0.0.61

package/dist/components/sdds-table.js

@@ -2,87 +2,87 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 
 const tableCss = ":host,.sdds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.sdds-table *{box-sizing:border-box}:host(.sdds-table--responsive),.sdds-table--responsive{width:100%}";
 
-const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.internalSddsTablePropChange = createEvent(this, "internalSddsTablePropChange", 7);
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = undefined;
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
-    this.enableResponsive = false;
-    this.modeVariant = null;
-    this.tableId = crypto.randomUUID();
-  }
-  emitInternalSddsPropChange(changedValueName, changedValue) {
-    this.internalSddsTablePropChange.emit({
-      tableId: this.tableId,
-      changed: [changedValueName],
-      [changedValueName]: changedValue,
-    });
-  }
-  enableMultiselectChanged(newValue) {
-    this.emitInternalSddsPropChange('enableMultiselect', newValue);
-  }
-  enableExpandableRowsChanged(newValue) {
-    this.emitInternalSddsPropChange('enableExpandableRows', newValue);
-  }
-  compactDesignChanged(newValue) {
-    this.emitInternalSddsPropChange('compactDesign', newValue);
-  }
-  verticalDividersChanged(newValue) {
-    this.emitInternalSddsPropChange('verticalDividers', newValue);
-  }
-  noMinWidthChanged(newValue) {
-    this.emitInternalSddsPropChange('noMinWidth', newValue);
-  }
-  modeVariantChanged(newValue) {
-    this.emitInternalSddsPropChange('modeVariant', newValue);
-  }
-  render() {
-    return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
-        'sdds-table': true,
-        'sdds-table--compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--no-min-width': this.noMinWidth,
-        'sdds-table--responsive': this.enableResponsive,
-      } }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "enableMultiselect": ["enableMultiselectChanged"],
-    "enableExpandableRows": ["enableExpandableRowsChanged"],
-    "compactDesign": ["compactDesignChanged"],
-    "verticalDividers": ["verticalDividersChanged"],
-    "noMinWidth": ["noMinWidthChanged"],
-    "modeVariant": ["modeVariantChanged"]
-  }; }
-  static get style() { return tableCss; }
-}, [1, "sdds-table", {
-    "verticalDividers": [516, "vertical-dividers"],
-    "compactDesign": [516, "compact-design"],
-    "noMinWidth": [516, "no-min-width"],
-    "enableMultiselect": [516, "enable-multiselect"],
-    "enableExpandableRows": [516, "enable-expandable-rows"],
-    "enableResponsive": [516, "enable-responsive"],
-    "modeVariant": [513, "mode-variant"],
-    "tableId": [1, "table-id"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-table"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Table);
-      }
-      break;
-  } });
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.internalSddsTablePropChange = createEvent(this, "internalSddsTablePropChange", 6);
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = undefined;
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.enableResponsive = false;
+    this.modeVariant = null;
+    this.tableId = crypto.randomUUID();
+  }
+  emitInternalSddsPropChange(changedValueName, changedValue) {
+    this.internalSddsTablePropChange.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitInternalSddsPropChange('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitInternalSddsPropChange('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitInternalSddsPropChange('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitInternalSddsPropChange('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitInternalSddsPropChange('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitInternalSddsPropChange('modeVariant', newValue);
+  }
+  render() {
+    return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
+        'sdds-table': true,
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--no-min-width': this.noMinWidth,
+        'sdds-table--responsive': this.enableResponsive,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "enableMultiselect": ["enableMultiselectChanged"],
+    "enableExpandableRows": ["enableExpandableRowsChanged"],
+    "compactDesign": ["compactDesignChanged"],
+    "verticalDividers": ["verticalDividersChanged"],
+    "noMinWidth": ["noMinWidthChanged"],
+    "modeVariant": ["modeVariantChanged"]
+  }; }
+  static get style() { return tableCss; }
+}, [1, "sdds-table", {
+    "verticalDividers": [516, "vertical-dividers"],
+    "compactDesign": [516, "compact-design"],
+    "noMinWidth": [516, "no-min-width"],
+    "enableMultiselect": [516, "enable-multiselect"],
+    "enableExpandableRows": [516, "enable-expandable-rows"],
+    "enableResponsive": [516, "enable-responsive"],
+    "modeVariant": [513, "mode-variant"],
+    "tableId": [1, "table-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+  } });
 }
 
 const SddsTable = Table;

package/dist/components/sdds-table.js.map

@@ -1 +1 @@
-{"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MC0BnM,KAAK;;;;;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n  border-collapse: collapse;\n  display: table;\n  @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n  width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n  textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** @internal Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'internalSddsTablePropChange',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n  emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.internalSddsTablePropChange.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitInternalSddsPropChange('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MC0BnM,KAAK;;;;;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n  border-collapse: collapse;\n  display: table;\n  @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n  width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n  textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** @internal Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'internalSddsTablePropChange',\n    bubbles: true,\n    composed: true,\n    cancelable: false,\n  })\n  internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n  emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.internalSddsTablePropChange.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitInternalSddsPropChange('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-textarea.js

@@ -3,51 +3,51 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const textareaCss = ".textarea-container.sc-sdds-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-sdds-textarea{min-width:unset}.textarea-container.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{content:\"\";height:2px;width:0;position:absolute;background:var(--sdds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{left:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{right:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-sdds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textarea-color);background-color:var(--sdds-textarea-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--sdds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-sdds-textarea::placeholder{opacity:1;color:var(--sdds-textarea-placeholder)}.textarea-input.sc-sdds-textarea:focus::placeholder{color:var(--sdds-textarea-placeholder-focus-color)}.textarea-input.sc-sdds-textarea:disabled{background-color:var(--sdds-textarea-disabled-background);color:var(--sdds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-sdds-textarea:disabled::placeholder{color:var(--sdds-textarea-disabled-placeholder)}.textarea-input.sc-sdds-textarea:disabled~.textfield-label-inside.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-input.sc-sdds-textarea::-webkit-resizer{display:none}.textarea-input.sc-sdds-textarea:hover{border-bottom-color:var(--sdds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-sdds-textarea{color:var(--sdds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--sdds-textarea-background)}.textarea-resizer-icon.sc-sdds-textarea svg.sc-sdds-textarea{display:block}.textarea-label.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);transition:0.1s ease all;color:var(--sdds-textarea-label-inside-color);position:absolute;top:var(--sdds-spacing-element-20);left:var(--sdds-spacing-element-16)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea .sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textarea-placeholder-focus-color)}.textarea-container.textarea-focus.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-textcounter.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--sdds-spacing-element-4)}.textarea-textcounter.sc-sdds-textarea .textfield-textcounter-divider.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter-divider)}.textarea-helper.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-sdds-textarea~.textarea-textcounter.sc-sdds-textarea{flex-basis:auto}.textarea-success.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-success)}.textarea-error.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-error)}.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after,.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before{background:var(--sdds-textarea-bar-error)}.textarea-error.sc-sdds-textarea .textarea-helper.sc-sdds-textarea{color:var(--sdds-textarea-helper-error)}.textarea-disabled.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:transparent}.textarea-disabled.sc-sdds-textarea .textarea-label.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-icon__readonly.sc-sdds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-sdds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;color:var(--sdds-textarea-icon-read-only-label-color);background-color:var(--sdds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-sdds-textarea{pointer-events:none}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea:hover~.textarea-icon__readonly-label.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textfield-input.sc-sdds-textarea{padding-right:54px;background-color:transparent}.textarea-readonly.sc-sdds-textarea .textfield-container.sc-sdds-textarea{background-color:transparent}";
 
-const Textarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.sddsChange = createEvent(this, "sddsChange", 6);
-    this.sddsBlur = createEvent(this, "sddsBlur", 6);
-    this.sddsInput = createEvent(this, "sddsInput", 6);
-    this.sddsFocus = createEvent(this, "sddsFocus", 6);
-    this.label = '';
-    this.name = '';
-    this.helper = undefined;
-    this.cols = undefined;
-    this.rows = undefined;
-    this.labelPosition = 'no-label';
-    this.placeholder = '';
-    this.value = '';
-    this.disabled = false;
-    this.readOnly = false;
-    this.state = 'default';
-    this.maxLength = undefined;
-    this.modeVariant = null;
-    this.autoFocus = false;
-    this.noMinWidth = false;
-    this.focusInput = undefined;
-  }
-  handleChange(event) {
-    this.sddsChange.emit(event);
-  }
-  handleBlur(event) {
-    this.sddsBlur.emit(event);
-    this.focusInput = false;
-  }
-  // Data input event in value prop
-  handleInput(event) {
-    this.sddsInput.emit(event);
-    this.value = event.target.value;
-  }
-  /* Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleFocus(event) {
-    this.textEl.focus();
-    this.focusInput = true;
-    this.sddsFocus.emit(event);
-  }
-  render() {
-    var _a;
+const Textarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sddsChange = createEvent(this, "sddsChange", 6);
+    this.sddsBlur = createEvent(this, "sddsBlur", 6);
+    this.sddsInput = createEvent(this, "sddsInput", 6);
+    this.sddsFocus = createEvent(this, "sddsFocus", 6);
+    this.label = '';
+    this.name = '';
+    this.helper = undefined;
+    this.cols = undefined;
+    this.rows = undefined;
+    this.labelPosition = 'no-label';
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.modeVariant = null;
+    this.autoFocus = false;
+    this.noMinWidth = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  handleBlur(event) {
+    this.sddsBlur.emit(event);
+    this.focusInput = false;
+  }
+  // Data input event in value prop
+  handleInput(event) {
+    this.sddsInput.emit(event);
+    this.value = event.target.value;
+  }
+  /* Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.textEl.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  render() {
+    var _a;
     return (h("div", { class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
@@ -58,52 +58,52 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { class: "textarea-wrapper" }, h("textarea", { class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autoFocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
-        if (!this.readOnly) {
-          this.handleFocus(event);
-        }
-      }, onBlur: (event) => {
-        if (!this.readOnly) {
-          this.handleBlur(event);
-        }
-      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
-  }
-  static get style() { return textareaCss; }
-}, [2, "sdds-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"],
-    "state": [1],
-    "maxLength": [2, "max-length"],
-    "modeVariant": [1, "mode-variant"],
-    "autoFocus": [4, "auto-focus"],
-    "noMinWidth": [4, "no-min-width"],
-    "focusInput": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-textarea", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-textarea":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Textarea);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+        ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { class: "textarea-wrapper" }, h("textarea", { class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autoFocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+  }
+  static get style() { return textareaCss; }
+}, [2, "sdds-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"],
+    "state": [1],
+    "maxLength": [2, "max-length"],
+    "modeVariant": [1, "mode-variant"],
+    "autoFocus": [4, "auto-focus"],
+    "noMinWidth": [4, "no-min-width"],
+    "focusInput": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-textarea", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Textarea);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const SddsTextarea = Textarea;