@scania/tegel 0.0.33 → 0.0.51

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

@@ -1,128 +1,145 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Textarea',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Placeholder text',
-      control: {
-        type: 'text',
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Change the components mode variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        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',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    label: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Set a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    rows: {
-      name: 'Rows',
-      description: 'Set the number of rows',
-      control: {
-        type: 'number',
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-    },
-  },
-  args: {
-    placeholder: 'Placeholder',
-    disabled: false,
-    readonly: false,
-    label: 'Label',
-    labelPosition: 'None',
-    helper: '',
-    maxLength: 0,
-    rows: 5,
-    state: 'Default',
-    modeVariant: 'Inherit from parent',
-  },
-};
-const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, modeVariant, rows, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const stateValue = state.toLowerCase();
-  const labelPosLookup = {
-    None: 'no-label',
-    Inside: 'inside',
-    Outside: 'outside',
-  };
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textarea',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    label: {
+      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: ['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: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description: 'Sets the number of rows.',
+      control: {
+        type: 'number',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Sets a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      name: 'Read only',
+      description: 'Sets the textarea to read-only state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the textarea.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'Default',
+    label: 'Label',
+    labelPosition: 'No label',
+    placeholder: 'Placeholder',
+    helper: '',
+    rows: 5,
+    maxLength: 0,
+    noMinWidth: false,
+    readonly: false,
+    disabled: false,
+  },
+};
+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 = {
+    'No label': 'no-label',
+    'Inside': 'inside',
+    'Outside': 'outside',
+  };
   return formatHtmlPreview(`
   <style>
   /* demo-wrapper is for demonstration purposes only*/
@@ -137,12 +154,13 @@ const Template = ({ placeholder, disabled, readonly, label, labelPosition, state
           state="${stateValue}"
           label="${label}"
           helper="${helper}"
-          ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}"`
+          ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
     : ''}
           label-position="${labelPosLookup[labelPosition]}"
           ${disabled ? 'disabled' : ''}
           ${readonly ? 'read-only' : ''}
+          ${noMinWidth ? 'no-min-width' : ''}
           placeholder="${placeholder}"
           ${maxlength}>
         </sdds-textarea>
@@ -164,7 +182,7 @@ const Template = ({ placeholder, disabled, readonly, label, labelPosition, state
       console.log(event)
     })
   </script>
-  `);
-};
-export const Default = Template.bind({});
-//# sourceMappingURL=textarea.stories.js.map
+  `);
+};
+export const Default = Template.bind({});
+//# sourceMappingURL=textarea.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textarea',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Placeholder text',\n      control: {\n        type: 'text',\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Change the components mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    disabled: {\n      description: 'Set textfield to disabled state',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      description: 'Set textfield to read-only state',\n      name: 'Read only',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    label: {\n      description: 'Label text for specific textfield',\n      name: 'Label text',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Add helper text for the textfield',\n      control: {\n        type: 'text',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Set a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    rows: {\n      name: 'Rows',\n      description: 'Set the number of rows',\n      control: {\n        type: 'number',\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switch between success or error state',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n    },\n  },\n  args: {\n    placeholder: 'Placeholder',\n    disabled: false,\n    readonly: false,\n    label: 'Label',\n    labelPosition: 'None',\n    helper: '',\n    maxLength: 0,\n    rows: 5,\n    state: 'Default',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({\n  placeholder,\n  disabled,\n  readonly,\n  label,\n  labelPosition,\n  state,\n  helper,\n  maxLength,\n  modeVariant,\n  rows,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const labelPosLookup = {\n    None: 'no-label',\n    Inside: 'inside',\n    Outside: 'outside',\n  };\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n      width: 400px;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n        <sdds-textarea\n          rows=\"${rows}\"\n          state=\"${stateValue}\"\n          label=\"${label}\"\n          helper=\"${helper}\"\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\"`\n              : ''\n          }\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${disabled ? 'disabled' : ''}\n          ${readonly ? 'read-only' : ''}\n          placeholder=\"${placeholder}\"\n          ${maxlength}>\n        </sdds-textarea>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textarea')\n\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textarea',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switches between success and error state.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label text.',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets the helper text.',\n      control: {\n        type: 'text',\n      },\n    },\n    rows: {\n      name: 'Rows',\n      description: 'Sets the number of rows.',\n      control: {\n        type: 'number',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Sets a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Enables component to shrink below 208px which is the default width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      name: 'Read only',\n      description: 'Sets the textarea to read-only state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the textarea.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: 'Default',\n    label: 'Label',\n    labelPosition: 'No label',\n    placeholder: 'Placeholder',\n    helper: '',\n    rows: 5,\n    maxLength: 0,\n    noMinWidth: false,\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state,\n  label,\n  labelPosition,\n  placeholder,\n  helper,\n  rows,\n  maxLength,\n  noMinWidth,\n  readonly,\n  disabled,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const labelPosLookup = {\n    'No label': 'no-label',\n    'Inside': 'inside',\n    'Outside': 'outside',\n  };\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n      width: 400px;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n        <sdds-textarea\n          rows=\"${rows}\"\n          state=\"${stateValue}\"\n          label=\"${label}\"\n          helper=\"${helper}\"\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\"`\n              : ''\n          }\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${disabled ? 'disabled' : ''}\n          ${readonly ? 'read-only' : ''}\n          ${noMinWidth ? 'no-min-width' : ''}\n          placeholder=\"${placeholder}\"\n          ${maxlength}>\n        </sdds-textarea>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textarea')\n\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}