@scania/tegel 0.0.34 → 0.0.52

package/dist/collection/components/textarea/textarea.css

@@ -1,77 +1,4 @@
-: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 {
+.textarea-container {
   border-radius: 4px 4px 0 0;
   position: relative;
   box-sizing: border-box;
@@ -83,14 +10,17 @@
   flex-flow: row wrap;
   border-bottom: 0;
 }
+.textarea-container.no-min-width {
+  min-width: unset;
+}
 
-.sdds-textarea-container .sdds-textarea-wrapper {
+.textarea-container .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 {
+.textarea-container:not(.textarea-disabled) .textarea-wrapper::before, .textarea-container:not(.textarea-disabled) .textarea-wrapper::after {
   content: "";
   height: 2px;
   width: 0;
@@ -98,17 +28,17 @@
   background: var(--sdds-textarea-bar);
   transition: 0.35s ease all;
 }
-.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
+.textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
   left: 50%;
 }
-.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
+.textarea-container:not(.textarea-disabled) .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 {
+.textarea-container:not(.textarea-disabled) .textarea-wrapper::after, .textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
   top: calc(100% - 2px);
 }
 
-.sdds-textarea-input {
+.textarea-input {
   border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
@@ -126,32 +56,32 @@
   border-bottom: 1px solid var(--sdds-textarea-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
-.sdds-textarea-input::placeholder {
+.textarea-input::placeholder {
   opacity: 1;
   color: var(--sdds-textarea-placeholder);
 }
-.sdds-textarea-input:focus::placeholder {
+.textarea-input:focus::placeholder {
   color: var(--sdds-textarea-placeholder-focus-color);
 }
-.sdds-textarea-input:disabled {
+.textarea-input:disabled {
   background-color: var(--sdds-textarea-disabled-background);
   color: var(--sdds-textarea-disabled-color);
   cursor: not-allowed;
 }
-.sdds-textarea-input:disabled::placeholder {
+.textarea-input:disabled::placeholder {
   color: var(--sdds-textarea-disabled-placeholder);
 }
-.sdds-textarea-input:disabled ~ .sdds-textfield-label-inside {
+.textarea-input:disabled ~ .textfield-label-inside {
   color: var(--sdds-textarea-disabled-label);
 }
-.sdds-textarea-input::-webkit-resizer {
+.textarea-input::-webkit-resizer {
   display: none;
 }
-.sdds-textarea-input:hover {
+.textarea-input:hover {
   border-bottom-color: var(--sdds-textarea-border-bottom-hover);
 }
 
-.sdds-textarea-resizer-icon {
+.textarea-resizer-icon {
   color: var(--sdds-textarea-resize-icon);
   position: absolute;
   display: block;
@@ -162,11 +92,11 @@
   pointer-events: none;
   background-color: var(--sdds-textarea-background);
 }
-.sdds-textarea-resizer-icon svg {
+.textarea-resizer-icon svg {
   display: block;
 }
 
-.sdds-textarea-label {
+.textarea-label {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: block;
@@ -175,7 +105,7 @@
   color: var(--sdds-textarea-label-color);
 }
 
-.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-label {
+.textarea-container.textarea-label-inside .textarea-label {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   transition: 0.1s ease all;
@@ -184,31 +114,31 @@
   top: var(--sdds-spacing-element-20);
   left: var(--sdds-spacing-element-16);
 }
-.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input::placeholder {
+.textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
 }
-.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input ::placeholder {
+.textarea-container.textarea-label-inside .textarea-input ::placeholder {
   color: transparent;
 }
-.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input:focus::placeholder {
+.textarea-container.textarea-label-inside .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 {
+.textarea-container.textarea-focus.textarea-label-inside .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 {
+.textarea-container.textarea-focus .textarea-wrapper::before, .textarea-container.textarea-focus .textarea-wrapper::after {
   width: 50%;
 }
-.sdds-textarea-container.sdds-textarea-data.sdds-textarea-label-inside .sdds-textarea-label {
+.textarea-container.textarea-data.textarea-label-inside .textarea-label {
   font: var(--sdds-detail-07);
   letter-spacing: var(--sdds-detail-07-ls);
   top: var(--sdds-spacing-element-8);
 }
 
-.sdds-textarea-textcounter {
+.textarea-textcounter {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   color: var(--sdds-textarea-textcounter);
@@ -217,13 +147,13 @@
   text-align: right;
   padding-top: var(--sdds-spacing-element-4);
 }
-.sdds-textarea-textcounter .sdds-textfield-textcounter-divider {
+.textarea-textcounter .textfield-textcounter-divider {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   color: var(--sdds-textarea-textcounter-divider);
 }
 
-.sdds-textarea-helper {
+.textarea-helper {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: flex;
@@ -234,39 +164,39 @@
   flex-grow: 2;
   flex-basis: auto;
 }
-.sdds-textarea-helper ~ .sdds-textarea-textcounter {
+.textarea-helper ~ .textarea-textcounter {
   flex-basis: auto;
 }
 
-.sdds-textarea-success .sdds-textarea-input {
+.textarea-success .textarea-input {
   border-bottom-color: var(--sdds-textarea-border-bottom-success);
 }
 
-.sdds-textarea-error .sdds-textarea-input {
+.textarea-error .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 {
+.textarea-error .textarea-wrapper::after, .textarea-error .textarea-wrapper::before {
   background: var(--sdds-textarea-bar-error);
 }
-.sdds-textarea-error .sdds-textarea-helper {
+.textarea-error .textarea-helper {
   color: var(--sdds-textarea-helper-error);
 }
 
-.sdds-textarea-disabled .sdds-textarea-input {
+.textarea-disabled .textarea-input {
   border-bottom-color: transparent;
 }
-.sdds-textarea-disabled .sdds-textarea-label {
+.textarea-disabled .textarea-label {
   color: var(--sdds-textarea-disabled-label);
 }
 
-.sdds-textarea-icon__readonly {
+.textarea-icon__readonly {
   display: none;
   position: absolute;
   right: 18px;
   top: 18px;
   color: var(--sdds-textarea-icon-read-only-color);
 }
-.sdds-textarea-icon__readonly-label {
+.textarea-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
@@ -280,19 +210,19 @@
   border-radius: 4px 0 4px 4px;
 }
 
-.sdds-textarea-readonly {
+.textarea-readonly {
   pointer-events: none;
 }
-.sdds-textarea-readonly .sdds-textarea-icon__readonly {
+.textarea-readonly .textarea-icon__readonly {
   display: block;
 }
-.sdds-textarea-readonly .sdds-textarea-icon__readonly:hover ~ .sdds-textarea-icon__readonly-label {
+.textarea-readonly .textarea-icon__readonly:hover ~ .textarea-icon__readonly-label {
   display: block;
 }
-.sdds-textarea-readonly .sdds-textfield-input {
+.textarea-readonly .textfield-input {
   padding-right: 54px;
   background-color: transparent;
 }
-.sdds-textarea-readonly .sdds-textfield-container {
+.textarea-readonly .textfield-container {
   background-color: transparent;
 }

package/dist/collection/components/textarea/textarea.js

@@ -15,6 +15,7 @@ export class Textarea {
     this.maxLength = undefined;
     this.modeVariant = null;
     this.autoFocus = false;
+    this.noMinWidth = false;
     this.focusInput = undefined;
   }
   handleChange(event) {
@@ -38,15 +39,16 @@ export class Textarea {
   render() {
     var _a;
     return (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' : ''}
+        textarea-container
+        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
+        ${this.focusInput ? 'textarea-focus' : ''}
+        ${this.disabled ? 'textarea-disabled' : ''}
+        ${this.readOnly ? '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' && (h("span", { class: 'sdds-textarea-label' }, this.label)), h("div", { class: "sdds-textarea-wrapper" }, 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) => {
+        ${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);
         }
@@ -54,9 +56,10 @@ export class Textarea {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "sdds-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: "sdds-textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "sdds-textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'sdds-textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'sdds-textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+      }, 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 is() { return "sdds-textarea"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["textarea.scss"]
@@ -316,6 +319,24 @@ export class Textarea {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unset minimum width of 208px."
+        },
+        "attribute": "no-min-width",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["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  scoped: true,\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  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: 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        textarea-container\n        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n        ${this.focusInput ? 'textarea-focus' : ''}\n        ${this.disabled ? 'textarea-disabled' : ''}\n        ${this.readOnly ? 'textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n        <div class=\"textarea-wrapper\">\n          <textarea\n            class={'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=\"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=\"textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'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={'textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/textarea/textarea.stories.js

@@ -19,16 +19,9 @@ export default {
     ],
   },
   argTypes: {
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Placeholder text',
-      control: {
-        type: 'text',
-      },
-    },
     modeVariant: {
       name: 'Mode variant',
-      description: 'Change the components mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
@@ -37,91 +30,115 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      description: 'Set textfield to read-only state',
-      name: 'Read only',
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
       control: {
-        type: 'boolean',
+        type: 'radio',
       },
+      options: ['Default', 'Success', 'Error'],
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'default' },
       },
     },
     label: {
-      description: 'Label text for specific textfield',
       name: 'Label text',
+      description: 'Sets the label text.',
       control: {
         type: 'text',
       },
     },
     labelPosition: {
       name: 'Label position',
+      description: 'Sets the label text position.',
       control: {
         type: 'radio',
       },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
+    },
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text.',
+      control: {
+        type: 'text',
+      },
     },
     helper: {
       name: 'Helper text',
-      description: 'Add helper text for the textfield',
+      description: 'Sets the helper text.',
       control: {
         type: 'text',
       },
     },
+    rows: {
+      name: 'Rows',
+      description: 'Sets the number of rows.',
+      control: {
+        type: 'number',
+      },
+    },
     maxLength: {
       name: 'Max length',
-      description: 'Set a maximum value of how long the text can be.',
+      description: 'Sets a maximum value of how long the text can be.',
       control: {
         type: 'number',
       },
     },
-    rows: {
-      name: 'Rows',
-      description: 'Set the number of rows',
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
       control: {
-        type: 'number',
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
       },
     },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
+    readonly: {
+      name: 'Read only',
+      description: 'Sets the textarea to read-only state.',
       control: {
-        type: 'radio',
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the textarea.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
       },
-      options: ['Default', 'Success', 'Error'],
     },
   },
   args: {
-    placeholder: 'Placeholder',
-    disabled: false,
-    readonly: false,
+    modeVariant: 'Inherit from parent',
+    state: 'Default',
     label: 'Label',
-    labelPosition: 'None',
+    labelPosition: 'No label',
+    placeholder: 'Placeholder',
     helper: '',
-    maxLength: 0,
     rows: 5,
-    state: 'Default',
-    modeVariant: 'Inherit from parent',
+    maxLength: 0,
+    noMinWidth: false,
+    readonly: false,
+    disabled: false,
   },
 };
-const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, modeVariant, rows, }) => {
+const Template = ({ modeVariant, state, label, labelPosition, placeholder, helper, rows, maxLength, noMinWidth, readonly, disabled, }) => {
   const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
   const stateValue = state.toLowerCase();
   const labelPosLookup = {
-    None: 'no-label',
-    Inside: 'inside',
-    Outside: 'outside',
+    'No label': 'no-label',
+    'Inside': 'inside',
+    'Outside': 'outside',
   };
   return formatHtmlPreview(`
   <style>
@@ -143,6 +160,7 @@ const Template = ({ placeholder, disabled, readonly, label, labelPosition, state
           label-position="${labelPosLookup[labelPosition]}"
           ${disabled ? 'disabled' : ''}
           ${readonly ? 'read-only' : ''}
+          ${noMinWidth ? 'no-min-width' : ''}
           placeholder="${placeholder}"
           ${maxlength}>
         </sdds-textarea>