@scania/tegel 0.0.1-beta.9 → 0.0.31

package/dist/cjs/sdds-table-header.cjs.entry.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const tableHeaderCss = ":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";
+
+const relevantTableProps = [
+  'enableMultiselect',
+  'enableExpandableRows',
+  'verticalDividers',
+  'compactDesign',
+  'noMinWidth',
+];
+const TableHeaderRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mainCheckboxSelectedEvent = index.createEvent(this, "mainCheckboxSelectedEvent", 7);
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.mainCheckboxSelected = false;
+    this.mainExpendSelected = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.enableToolbarDesign = false;
+    this.tableId = '';
+  }
+  tablePropsChangedEventListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  updateMainCheckboxEventListener(event) {
+    const [receivedID, receivedMainCheckboxStatus] = event.detail;
+    if (this.tableId === receivedID) {
+      this.mainCheckboxSelected = receivedMainCheckboxStatus;
+    }
+  }
+  singleRowExpandedEventListener(event) {
+    if (this.tableId === event.detail[0]) {
+      // TODO: Improve this logic. Why we get late repose in DOM?
+      setTimeout(() => {
+        this.bodyExpandClicked();
+      }, 100);
+    }
+  }
+  bodyExpandClicked() {
+    const numberOfExtendRowsActive = this.host.parentElement
+      .querySelector('sdds-table-body')
+      .getElementsByClassName('sdds-table__row-extend--active').length;
+    const numberOfExtendRows = this.host.parentElement
+      .querySelector('sdds-table-body')
+      .getElementsByTagName('sdds-table-body-row-expendable').length;
+    if (numberOfExtendRows === numberOfExtendRowsActive) {
+      this.mainExpendSelected = true;
+    }
+    else {
+      this.mainExpendSelected = false;
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  componentWillRender() {
+    this.enableToolbarDesign =
+      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
+  }
+  headCheckBoxClicked(event) {
+    this.mainCheckboxSelected = event.currentTarget.checked;
+    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--toolbar-available': this.enableToolbarDesign,
+      } }, index.h("tr", null, this.enableMultiselect && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" }, index.h("div", { class: "sdds-checkbox-item" }, index.h("label", { class: "sdds-form-label sdds-form-label--data-table" }, index.h("input", { class: "sdds-form-input", type: "checkbox", onChange: (e) => this.headCheckBoxClicked(e), checked: this.mainCheckboxSelected }))))), this.enableExpandableRows && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" })), index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+TableHeaderRow.style = tableHeaderCss;
+
+exports.sdds_table_header = TableHeaderRow;
+
+//# sourceMappingURL=sdds-table-header.cjs.entry.js.map

package/dist/cjs/sdds-table-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-table-header.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-header-group;\n\n  .sdds-table__header-cell--checkbox {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    display: table-cell;\n    text-align: left;\n    color: var(--sdds-data-table-color);\n    background-color: var(--sdds-data-table-header-background);\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    height: 48px;\n    box-sizing: border-box;\n\n    // To fix issues with border-radius propagating up from button\n    overflow: hidden;\n    transition: background-color 200ms ease;\n    min-width: unset;\n    width: 48px;\n    padding: 0;\n    border-top-left-radius: 4px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 48px;\n    cursor: pointer;\n\n    .sdds-table__expand-input {\n      display: none;\n    }\n\n    .sdds-expandable-row-icon {\n      height: 20px;\n      width: 20px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n\n    .sdds-expandable-row-icon--opened {\n      transform: rotate(180deg);\n    }\n  }\n\n  ::slotted(sdds-header-cell:hover) {\n    background-color: var(--sdds-data-table-header-background-hover);\n  }\n}\n\n:host(.sdds-table--compact) {\n  .sdds-table__header-cell--checkbox {\n    height: 32px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__header-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n\n:host(.sdds-table--toolbar-available) {\n  .sdds-table__header-cell--checkbox {\n    border-top-left-radius: 0;\n  }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n\n@Component({\n  tag: 'sdds-table-header',\n  styleUrl: 'table-header.scss',\n  shadow: true,\n})\nexport class TableHeaderRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableExpandableRows: boolean = false;\n\n  @State() mainCheckboxSelected: boolean = false;\n\n  @State() mainExpendSelected: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Send status of main checkbox in header to the parent, sdds-table component */\n  @Event({\n    eventName: 'mainCheckboxSelectedEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  mainCheckboxSelectedEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  @Listen('updateMainCheckboxEvent', { target: 'body' })\n  updateMainCheckboxEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedMainCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.mainCheckboxSelected = receivedMainCheckboxStatus;\n    }\n  }\n\n  @Listen('singleRowExpandedEvent', { target: 'body' })\n  singleRowExpandedEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // TODO: Improve this logic. Why we get late repose in DOM?\n      setTimeout(() => {\n        this.bodyExpandClicked();\n      }, 100);\n    }\n  }\n\n  bodyExpandClicked() {\n    const numberOfExtendRowsActive = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByClassName('sdds-table__row-extend--active').length;\n    const numberOfExtendRows = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n    if (numberOfExtendRows === numberOfExtendRowsActive) {\n      this.mainExpendSelected = true;\n    } else {\n      this.mainExpendSelected = false;\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentWillRender() {\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  headCheckBoxClicked(event) {\n    this.mainCheckboxSelected = event.currentTarget.checked;\n    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n      >\n        <tr>\n          {this.enableMultiselect && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n              <div class=\"sdds-checkbox-item\">\n                <label class=\"sdds-form-label sdds-form-label--data-table\">\n                  <input\n                    class=\"sdds-form-input\"\n                    type=\"checkbox\"\n                    onChange={(e) => this.headCheckBoxClicked(e)}\n                    checked={this.mainCheckboxSelected}\n                  />\n                </label>\n              </div>\n            </th>\n          )}\n          {this.enableExpandableRows && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n          )}\n          <slot></slot>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-table-toolbar.cjs.entry.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--sdds-data-table-toolbar-background);color:var(--sdds-data-table-color);padding:0 var(--sdds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .sdds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .sdds-table__title{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding-top:var(--sdds-spacing-element-16);text-align:left}:host .sdds-table__actionbar{display:flex;align-self:center;gap:8px}:host .sdds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .sdds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--sdds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .sdds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .sdds-table__searchbar:focus-within,:host .sdds-table__searchbar.sdds-table__searchbar--active{width:208px;background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:focus-within:hover,:host .sdds-table__searchbar.sdds-table__searchbar--active:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar .sdds-table__searchbar-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-data-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .sdds-table__searchbar .sdds-table__searchbar-input :focus{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background-hover)}:host .sdds-table__searchbar .sdds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.sdds-table--compact){height:56px}";
+
+const relevantTableProps = [
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+const TableToolbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tableFilteringTerm = index.createEvent(this, "tableFilteringTerm", 7);
+    this.tableTitle = '';
+    this.enableFiltering = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  tablePropsChangedEventListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  searchFunction(event) {
+    const searchTerm = event.currentTarget.value.toLowerCase();
+    const sddsTableSearchBar = event.currentTarget.parentElement;
+    this.tableFilteringTerm.emit([this.tableId, searchTerm]);
+    if (searchTerm.length > 0) {
+      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');
+    }
+    else {
+      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, index.h("div", { class: "sdds-table__upper-bar-flex" }, index.h("caption", { class: "sdds-table__title" }, this.tableTitle), index.h("div", { class: "sdds-table__actionbar" }, this.enableFiltering && (index.h("div", { class: "sdds-table__searchbar" }, index.h("input", { class: "sdds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), index.h("span", { class: "sdds-table__searchbar-icon" }, index.h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z", fill: "currentColor" }))))), index.h("slot", { name: "sdds-table__actionbar" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+TableToolbar.style = tableToolbarCss;
+
+exports.sdds_table_toolbar = TableToolbar;
+
+//# sourceMappingURL=sdds-table-toolbar.cjs.entry.js.map

package/dist/cjs/sdds-table-toolbar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-table-toolbar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAAsC;EAC5D,eAAe;EACf,YAAY;EACZ,kBAAkB;CACnB,CAAC;MAOW,YAAY;;;;sBAEuB,EAAE;2BAGI,KAAK;4BAEpB,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAgB7B,8BAA8B,CAAC,KAA0C;IACvE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,cAAc,CAAC,KAAK;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAE7D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1DD,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,qBAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9DA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnBA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,mBACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACFA,kBAAM,KAAK,EAAC,4BAA4B,IACtCA,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrEA,+BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACDA,kBAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-caption;\n  position: relative;\n  background-color: var(--sdds-data-table-toolbar-background);\n  color: var(--sdds-data-table-color);\n  padding: 0 var(--sdds-spacing-element-16);\n  height: 64px;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n\n  .sdds-table__upper-bar-flex {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .sdds-table__title {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    padding-top: var(--sdds-spacing-element-16);\n    text-align: left;\n  }\n\n  .sdds-table__actionbar {\n    display: flex;\n    align-self: center;\n    gap: 8px;\n  }\n\n  .sdds-table__searchbar {\n    display: flex;\n    align-self: center;\n    position: relative;\n    height: 40px;\n    width: 40px;\n    border-radius: 4px 4px 0 0;\n    transition: background-color 250ms ease, width 250ms ease;\n    overflow: hidden;\n    background-color: transparent;\n\n    &::after {\n      content: '';\n      width: 100%;\n      height: 2px;\n      position: absolute;\n      bottom: 0;\n      background-color: var(--sdds-blue-400);\n      transform: scaleX(0);\n      transition: transform 150ms ease;\n    }\n\n    &:focus-within {\n      &::after {\n        transform: scaleX(100%);\n      }\n    }\n\n    &:focus-within,\n    &.sdds-table__searchbar--active {\n      width: 208px;\n      background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n      &:hover {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    .sdds-table__searchbar-input {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-data-table-color);\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0 36px 0 16px;\n      background-color: transparent;\n      outline: none;\n      cursor: pointer;\n\n      :focus {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    &:hover {\n      background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n    }\n\n    .sdds-table__searchbar-icon {\n      z-index: 0;\n      position: absolute;\n      right: 9px;\n      top: 9px;\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 56px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-table-toolbar',\n  styleUrl: 'table-toolbar.scss',\n  shadow: true,\n})\nexport class TableToolbar {\n  /** Adds title to the data-table */\n  @Prop({ reflect: true }) tableTitle: string = '';\n\n  /** Enables preview of searchbar */\n  @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Used for sending users input to main parent <sdds-table> component */\n  @Event({\n    eventName: 'tableFilteringTerm',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  tableFilteringTerm: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  searchFunction(event) {\n    const searchTerm = event.currentTarget.value.toLowerCase();\n    const sddsTableSearchBar = event.currentTarget.parentElement;\n\n    this.tableFilteringTerm.emit([this.tableId, searchTerm]);\n\n    if (searchTerm.length > 0) {\n      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n    } else {\n      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <div class=\"sdds-table__upper-bar-flex\">\n          <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n          <div class=\"sdds-table__actionbar\">\n            {this.enableFiltering && (\n              <div class=\"sdds-table__searchbar\">\n                <input\n                  class=\"sdds-table__searchbar-input\"\n                  type=\"text\"\n                  onKeyUp={(event) => this.searchFunction(event)}\n                />\n                <span class=\"sdds-table__searchbar-icon\">\n                  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            )}\n            <slot name=\"sdds-table__actionbar\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-table.cjs.entry.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tablePropsChangedEvent = index.createEvent(this, "tablePropsChangedEvent", 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();
+  }
+  emitTablePropsChangedEvent(changedValueName, changedValue) {
+    this.tablePropsChangedEvent.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitTablePropsChangedEvent('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitTablePropsChangedEvent('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitTablePropsChangedEvent('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitTablePropsChangedEvent('modeVariant', newValue);
+  }
+  render() {
+    return (index.h(index.Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, index.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,
+      } }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "enableMultiselect": ["enableMultiselectChanged"],
+    "enableExpandableRows": ["enableExpandableRowsChanged"],
+    "compactDesign": ["compactDesignChanged"],
+    "verticalDividers": ["verticalDividersChanged"],
+    "noMinWidth": ["noMinWidthChanged"],
+    "modeVariant": ["modeVariantChanged"]
+  }; }
+};
+Table.style = tableCss;
+
+exports.sdds_table = Table;
+
+//# sourceMappingURL=sdds-table.cjs.entry.js.map

package/dist/cjs/sdds-table.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-table.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MCyBnM,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,sBAAsB,CAAC,IAAI,CAAC;MAC/B,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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9DD,mBACE,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,IAEDA,qBAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;","names":["h","Host"],"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};\n\nexport type TablePropsChangedEvent = {\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  /** Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'tablePropsChangedEvent',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n  emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.tablePropsChangedEvent.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitTablePropsChangedEvent('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/cjs/sdds-textarea.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const textareaCss = ":root,.sdds-mode-light{--sdds-textarea-background-primary:var(--sdds-grey-50);--sdds-textarea-background-secondary:var(--sdds-white);--sdds-textarea-background:var(--sdds-textarea-background-primary);--sdds-textarea-color:var(--sdds-grey-868);--sdds-textarea-placeholder:var(--sdds-grey-500);--sdds-textarea-placeholder-focus-color:var(--sdds-grey-500);--sdds-textarea-disabled-color:var(--sdds-grey-400);--sdds-textarea-disabled-background:var(--sdds-white);--sdds-textarea-disabled-placeholder:var(--sdds-grey-400);--sdds-textarea-disabled-label:var(--sdds-grey-400);--sdds-textarea-label-color:var(--sdds-grey-958);--sdds-textarea-label-inside-color:var(--sdds-grey-700);--sdds-textarea-placeholder-focus-color:var(--sdds-grey-500);--sdds-textarea-helper:var(--sdds-grey-700);--sdds-textarea-helper-error:var(--sdds-negative);--sdds-textarea-bar:var(--sdds-blue-400);--sdds-textarea-bar-error:var(--sdds-negative);--sdds-textarea-textcounter:var(--sdds-grey-700);--sdds-textarea-textcounter-divider:var(--sdds-grey-500);--sdds-textarea-border-bottom:var(--sdds-grey-600);--sdds-textarea-border-bottom-hover:var(--sdds-grey-800);--sdds-textarea-border-bottom-success:var(--sdds-grey-958);--sdds-textarea-border-bottom-error:var(--sdds-negative);--sdds-textarea-icon-read-only-color:var(--sdds-grey-958);--sdds-textarea-icon-read-only-label-color:var(--sdds-grey-958);--sdds-textarea-resize-icon:var(--sdds-grey-500)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textarea-background:var(--sdds-textarea-background-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textarea-background:var(--sdds-textarea-background-secondary)}.sdds-mode-dark{--sdds-textarea-background-primary:var(--sdds-grey-900);--sdds-textarea-background-secondary:var(--sdds-grey-868);--sdds-textarea-background:var(--sdds-textarea-background-primary);--sdds-textarea-color:var(--sdds-grey-200);--sdds-textarea-placeholder:var(--sdds-grey-600);--sdds-textarea-placeholder-focus-color:var(--sdds-grey-700);--sdds-textarea-disabled-color:var(--sdds-grey-800);--sdds-textarea-disabled-background:var(--sdds-grey-868);--sdds-textarea-disabled-placeholder:var(--sdds-grey-800);--sdds-textarea-disabled-label:var(--sdds-grey-700);--sdds-textarea-label-color:var(--sdds-grey-100);--sdds-textarea-label-inside-color:var(--sdds-grey-400);--sdds-textarea-placeholder-focus-color:var(--sdds-grey-700);--sdds-textarea-helper:var(--sdds-grey-600);--sdds-textarea-helper-error:var(--sdds-negative);--sdds-textarea-bar:var(--sdds-blue-400);--sdds-textarea-bar-error:var(--sdds-negative);--sdds-textarea-textcounter:var(--sdds-grey-600);--sdds-textarea-textcounter-divider:var(--sdds-grey-700);--sdds-textarea-border-bottom:var(--sdds-grey-600);--sdds-textarea-border-bottom-hover:var(--sdds-grey-400);--sdds-textarea-border-bottom-success:var(--sdds-grey-50);--sdds-textarea-border-bottom-error:var(--sdds-negative);--sdds-textarea-icon-read-only-color:var(--sdds-grey-100);--sdds-textarea-icon-read-only-label-color:var(--sdds-grey-50);--sdds-textarea-resize-icon:var(--sdds-grey-500)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textarea-background:var(--sdds-textarea-background-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textarea-background:var(--sdds-textarea-background-secondary)}.sdds-textarea-container{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}.sdds-textarea-container .sdds-textarea-wrapper{position:relative;width:unset;min-width:100%}.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before,.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after{content:\"\";height:2px;width:0;position:absolute;background:var(--sdds-textarea-bar);transition:0.35s ease all}.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before{left:50%}.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after{right:50%}.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after,.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before{top:calc(100% - 2px)}.sdds-textarea-input{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}.sdds-textarea-input::placeholder{opacity:1;color:var(--sdds-textarea-placeholder)}.sdds-textarea-input:focus::placeholder{color:var(--sdds-textarea-placeholder-focus-color)}.sdds-textarea-input:disabled{background-color:var(--sdds-textarea-disabled-background);color:var(--sdds-textarea-disabled-color);cursor:not-allowed}.sdds-textarea-input:disabled::placeholder{color:var(--sdds-textarea-disabled-placeholder)}.sdds-textarea-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textarea-disabled-label)}.sdds-textarea-input::-webkit-resizer{display:none}.sdds-textarea-input:hover{border-bottom-color:var(--sdds-textarea-border-bottom-hover)}.sdds-textarea-resizer-icon{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)}.sdds-textarea-resizer-icon svg{display:block}.sdds-textarea-label{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)}.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-label{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)}.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input::placeholder{color:transparent}.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input ::placeholder{color:transparent}.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textarea-placeholder-focus-color)}.sdds-textarea-container.sdds-textarea-focus.sdds-textarea-label-inside .sdds-textarea-label{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::before,.sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::after{width:50%}.sdds-textarea-container.sdds-textarea-data.sdds-textarea-label-inside .sdds-textarea-label{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.sdds-textarea-textcounter{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)}.sdds-textarea-textcounter .sdds-textfield-textcounter-divider{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter-divider)}.sdds-textarea-helper{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}.sdds-textarea-helper~.sdds-textarea-textcounter{flex-basis:auto}.sdds-textarea-success .sdds-textarea-input{border-bottom-color:var(--sdds-textarea-border-bottom-success)}.sdds-textarea-error .sdds-textarea-input{border-bottom-color:var(--sdds-textarea-border-bottom-error)}.sdds-textarea-error .sdds-textarea-wrapper::after,.sdds-textarea-error .sdds-textarea-wrapper::before{background:var(--sdds-textarea-bar-error)}.sdds-textarea-error .sdds-textarea-helper{color:var(--sdds-textarea-helper-error)}.sdds-textarea-disabled .sdds-textarea-input{border-bottom-color:transparent}.sdds-textarea-disabled .sdds-textarea-label{color:var(--sdds-textarea-disabled-label)}.sdds-textarea-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textarea-icon-read-only-color)}.sdds-textarea-icon__readonly-label{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}.sdds-textarea-readonly{pointer-events:none}.sdds-textarea-readonly .sdds-textarea-icon__readonly{display:block}.sdds-textarea-readonly .sdds-textarea-icon__readonly:hover~.sdds-textarea-icon__readonly-label{display:block}.sdds-textarea-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-textarea-readonly .sdds-textfield-container{background-color:transparent}";
+
+const Textarea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 6);
+    this.sddsBlur = index.createEvent(this, "sddsBlur", 6);
+    this.sddsInput = index.createEvent(this, "sddsInput", 6);
+    this.sddsFocus = index.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.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 (index.h("div", { class: `
+        sdds-textarea-container
+        ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}
+        ${this.focusInput ? 'sdds-textarea-focus' : ''}
+        ${this.disabled ? 'sdds-textarea-disabled' : ''}
+        ${this.readOnly ? 'sdds-textarea-readonly' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.value ? 'sdds-textarea-data' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}
+        ` }, this.labelPosition !== 'no-label' && (index.h("span", { class: 'sdds-textarea-label' }, this.label)), index.h("div", { class: "sdds-textarea-wrapper" }, index.h("textarea", { class: 'sdds-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) }), index.h("span", { class: "sdds-textarea-resizer-icon" }, index.h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))), index.h("span", { class: "sdds-textarea-icon__readonly" }, index.h("sdds-icon", { name: "edit_inactive" })), index.h("span", { class: "sdds-textarea-icon__readonly-label" }, "This field is non-editable")), index.h("span", { class: 'sdds-textarea-helper' }, this.state === 'error' && index.h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (index.h("div", { class: 'sdds-textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+  }
+};
+Textarea.style = textareaCss;
+
+exports.sdds_textarea = Textarea;
+
+//# sourceMappingURL=sdds-textarea.cjs.entry.js.map

package/dist/cjs/sdds-textarea.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-textarea.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea","./src/components/textarea/textarea.tsx"],"sourcesContent":["@import './textarea-theme-vars.scss';\n\n@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .sdds-textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.sdds-textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n}\n\n.sdds-textarea-container {\n  .sdds-textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.sdds-textarea-container:not(.sdds-textarea-disabled) {\n  .sdds-textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.sdds-textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.sdds-textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.sdds-textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.sdds-textarea-container {\n  &.sdds-textarea-label-inside {\n    .sdds-textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .sdds-textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.sdds-textarea-focus {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .sdds-textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.sdds-textarea-data {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.sdds-textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .sdds-textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.sdds-textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .sdds-textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.sdds-textarea-success {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.sdds-textarea-error {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .sdds-textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .sdds-textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.sdds-textarea-disabled {\n  .sdds-textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .sdds-textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.sdds-textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.sdds-textarea-readonly {\n  pointer-events: none;\n\n  .sdds-textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .sdds-textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .sdds-textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        sdds-textarea-container\n        ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}\n        ${this.focusInput ? 'sdds-textarea-focus' : ''}\n        ${this.disabled ? 'sdds-textarea-disabled' : ''}\n        ${this.readOnly ? 'sdds-textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'sdds-textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && (\n          <span class={'sdds-textarea-label'}>{this.label}</span>\n        )}\n        <div class=\"sdds-textarea-wrapper\">\n          <textarea\n            class={'sdds-textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"sdds-textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                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\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'sdds-textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'sdds-textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"sdds-textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-textfield.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const textfieldCss = ":root,.sdds-mode-light{--sdds-textfield-background-primary:var(--sdds-grey-50);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-color:var(--sdds-grey-868);--sdds-textfield-placeholder:var(--sdds-grey-500);--sdds-textfield-background-disabled-primary:var(--sdds-grey-50);--sdds-textfield-background-disabled-secondary:var(--sdds-white);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-color-disabled:var(--sdds-grey-400);--sdds-textfield-placeholder-disabled:var(--sdds-grey-400);--sdds-textfield-label-disabled:var(--sdds-grey-400);--sdds-textfield-ps-color-disabled:var(--sdds-grey-400);--sdds-textfield-label-color:var(--sdds-grey-958);--sdds-textfield-label-inside-color:var(--sdds-grey-700);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-500);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-700);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-700);--sdds-textfield-textcounter-divider:var(--sdds-grey-500);--sdds-textfield-ps-color:var(--sdds-grey-600);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-800);--sdds-textfield-border-bottom-success:var(--sdds-grey-958);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-958);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-958)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-mode-dark{--sdds-textfield-background-primary:var(--sdds-grey-900);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-secondary:var(--sdds-grey-868);--sdds-textfield-color:var(--sdds-grey-200);--sdds-textfield-placeholder:var(--sdds-grey-600);--sdds-textfield-ps-color-disabled:var(--sdds-grey-700);--sdds-textfield-color-disabled:var(--sdds-grey-800);--sdds-textfield-background-disabled-primary:var(--sdds-grey-900);--sdds-textfield-background-disabled-secondary:var(--sdds-grey-868);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-placeholder-disabled:var(--sdds-grey-800);--sdds-textfield-label-disabled:var(--sdds-grey-700);--sdds-textfield-label-color:var(--sdds-grey-100);--sdds-textfield-label-inside-color:var(--sdds-grey-400);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-700);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-600);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-600);--sdds-textfield-textcounter-divider:var(--sdds-grey-700);--sdds-textfield-ps-color:var(--sdds-grey-100);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-400);--sdds-textfield-border-bottom-success:var(--sdds-grey-50);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-100);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-50)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-textfield-input{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-textfield-input::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-md{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-md::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-md:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-md:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-md:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-sm{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-sm::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-sm:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-sm:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-sm:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.sdds-textfield-container:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.sdds-form-textfield-md .sdds-textfield-container{height:48px}.sdds-form-textfield-sm .sdds-textfield-container{height:40px}.sdds-textfield-input-container{position:relative;width:100%}.sdds-textfield-label-outside>*{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.sdds-textfield-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.sdds-form-textfield{display:block;min-width:208px}.sdds-form-textfield-nomin{min-width:auto}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside{top:20px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-textfield-bar{position:absolute;width:100%}.sdds-textfield-bar::before,.sdds-textfield-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.sdds-form-textfield-md .sdds-textfield-bar::before,.sdds-form-textfield-md .sdds-textfield-bar::after{top:46px}.sdds-form-textfield-sm .sdds-textfield-bar::before,.sdds-form-textfield-sm .sdds-textfield-bar::after{top:40px}.sdds-textfield-bar::before{left:50%}.sdds-textfield-bar::after{right:50%}.sdds-textfield-focus .sdds-textfield-bar::before,.sdds-textfield-focus .sdds-textfield-bar::after{width:50%}.sdds-textfield-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.sdds-textfield-helper .sdds-textfield-textcounter{margin-left:auto}.sdds-form-textfield-disabled .sdds-textfield-container{border-bottom-color:transparent}.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>*,.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>*{color:var(--sdds-textfield-ps-color-disabled)}.sdds-form-textfield-disabled .sdds-textfield-label-outside>*{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.sdds-textfield-icon__readonly-label{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.sdds-form-textfield-readonly{pointer-events:none}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly{display:block}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label{display:block}.sdds-form-textfield-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-form-textfield-success .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.sdds-form-textfield-error .sdds-textfield-helper{color:var(--sdds-textfield-helper-error)}.sdds-form-textfield-error .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.sdds-form-textfield-error .sdds-textfield-bar::before,.sdds-form-textfield-error .sdds-textfield-bar::after{background:var(--sdds-textfield-bar-error)}.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-textfield-icon-error)}.sdds-textfield-helper-error-state{display:flex;gap:8px;flex-wrap:nowrap}.sdds-textfield-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.sdds-textfield-textcounter .sdds-textfield-textcounter-divider{color:var(--sdds-textfield-textcounter-divider)}.sdds-textfield-slot-wrap-prefix{align-self:center}.sdds-textfield-slot-wrap-prefix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}.sdds-textfield-slot-wrap-suffix{align-self:center}.sdds-textfield-slot-wrap-suffix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(*){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted(*)~.sdds-textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}";
+
+const Textfield = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 6);
+    this.sddsInput = index.createEvent(this, "sddsInput", 6);
+    this.sddsFocus = index.createEvent(this, "sddsFocus", 6);
+    this.sddsBlur = index.createEvent(this, "sddsBlur", 6);
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.helper = undefined;
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.size = 'lg';
+    this.modeVariant = null;
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  // 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.textInput.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.focusInput = false;
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    var _a;
+    let className = ' sdds-textfield-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
+    return (index.h("div", { class: `
+        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled
+        ? 'sdds-form-textfield sdds-textfield-focus'
+        : ' sdds-form-textfield'}
+        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'sdds-textfield-container-label-inside'
+        : ''}
+        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
+        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-textfield-${this.state}`
+        : ''}
+        ` }, this.labelPosition === 'outside' && (index.h("div", { class: "sdds-textfield-label-outside" }, index.h("div", null, this.label))), index.h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, index.h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, index.h("slot", { name: "sdds-prefix" })), index.h("div", { class: "sdds-textfield-input-container" }, index.h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { class: "sdds-textfield-label-inside" }, this.label))), index.h("div", { class: "sdds-textfield-bar" }), index.h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, index.h("slot", { name: "sdds-suffix" })), index.h("span", { class: "sdds-textfield-icon__readonly" }, index.h("sdds-icon", { name: "edit_inactive", size: "20px" })), index.h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), index.h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (index.h("div", { class: "sdds-textfield-helper-error-state" }, index.h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (index.h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+  }
+};
+Textfield.style = textfieldCss;
+
+exports.sdds_textfield = Textfield;
+
+//# sourceMappingURL=sdds-textfield.cjs.entry.js.map