@scania/tegel 0.0.4 → 0.0.5

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,9 +1,15 @@
 import { formatHtmlPreview } from '../../../utils/utils';
 import readme from './readme.md';
+import readmeLink from './navigation-tabs-link/readme.md';
+import readmeButton from './navigation-tabs-button/readme.md';
 export default {
   title: 'Components/Tabs',
   parameters: {
-    notes: readme,
+    notes: {
+      'Navigation tabs': readme,
+      'Navigation tabs button': readmeButton,
+      'Navigation tabs link': readmeLink,
+    },
     design: [
       {
         name: 'Figma',
@@ -17,17 +23,81 @@ export default {
       },
     ],
   },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variation 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' },
+      },
+    },
+    tabType: {
+      name: 'Tab type',
+      description: 'Type of child element, button/link.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Link'],
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    tabType: 'Link',
+  },
 };
 // Why role="link" on a disabled link: https://www.scottohara.me/blog/2021/05/28/disabled-links.html
-const Template = () => formatHtmlPreview(`
-    <sdds-navigation-tabs>
-      <a href="#" class="sdds-navigation-tabs-tab-active">Active tab</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a role="link" aria-disabled="true" tabindex="-1" class="sdds-navigation-tabs-tab-disabled">Disabled tab</a>
+const Template = ({ tabType, modeVariant }) => formatHtmlPreview(`
+    <sdds-navigation-tabs 
+      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      ${tabType === 'Link'
+  ? `
+      <sdds-navigation-tabs-link selected href="#" > First tab
+      </sdds-navigation-tabs-link>
+      <sdds-navigation-tabs-link href="#" > Second tab
+      </sdds-navigation-tabs-link>
+      <sdds-navigation-tabs-link href="#" > Third tab
+      </sdds-navigation-tabs-link>
+      <sdds-navigation-tabs-link href="#" disabled> Fourth tab
+      </sdds-navigation-tabs-link>
+      `
+  : ''}
+      ${tabType === 'Button'
+  ? `
+      <sdds-navigation-tabs-button selected> First tab
+      </sdds-navigation-tabs-button>
+      <sdds-navigation-tabs-button> Second tab
+      </sdds-navigation-tabs-button>
+      <sdds-navigation-tabs-button > Third tab
+      </sdds-navigation-tabs-button>
+      <sdds-navigation-tabs-button disabled> Fourth tab
+      </sdds-navigation-tabs-button>
+      `
+  : ''}
     </sdds-navigation-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="sdds-headline-04">Selected tab: <span class="selectedTab"></span></h4>
+      <h4 class="sdds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+    </div>
+ 
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTab = document.getElementsByClassName('selectedTab')[0]
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('sdds-navigation-tabs');
+    
+    tabs.addEventListener('sddsChange', (event) => {
+       console.log(event)
+      selectedTab.innerHTML = event.detail.selectedTab.tab
+      selectedTabIndex.innerHTML = event.detail.selectedTab.tabIndex
+    })
+    </script>
     `);
 export const NavigationTabs = Template.bind({});
-NavigationTabs.args = {};
 //# sourceMappingURL=navigation-tabs.stories.js.map

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/navigation-tabs/navigation-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;CACF,CAAC;AAEF,oGAAoG;AACpG,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CAAC;;;;;;;;KAQf,CAAC,CAAC;AAEP,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n};\n\n// Why role=\"link\" on a disabled link: https://www.scottohara.me/blog/2021/05/28/disabled-links.html\nconst Template = () =>\n  formatHtmlPreview(`\n    <sdds-navigation-tabs>\n      <a href=\"#\" class=\"sdds-navigation-tabs-tab-active\">Active tab</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\">Tab name</a>\n      <a role=\"link\" aria-disabled=\"true\" tabindex=\"-1\" class=\"sdds-navigation-tabs-tab-disabled\">Disabled tab</a>\n    </sdds-navigation-tabs>\n    `);\n\nexport const NavigationTabs = Template.bind({});\nNavigationTabs.args = {};\n"]}
+{"version":3,"file":"navigation-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/navigation-tabs/navigation-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAE9D,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE;MACL,iBAAiB,EAAE,MAAM;MACzB,wBAAwB,EAAE,YAAY;MACtC,sBAAsB,EAAE,UAAU;KACnC;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,4GAA4G;MAC9G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC5B;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,MAAM;GAChB;CACF,CAAC;AAEF,oGAAoG;AACpG,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CAAC;;QAEZ,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,kBAAkB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAG3F,OAAO,KAAK,MAAM;EAChB,CAAC,CAAC;;;;;;;;;OASL;EACG,CAAC,CAAC,EACN;QAEE,OAAO,KAAK,QAAQ;EAClB,CAAC,CAAC;;;;;;;;;OASL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;KAqBD,CAAC,CAAC;AAEP,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeLink from './navigation-tabs-link/readme.md';\nimport readmeButton from './navigation-tabs-button/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Navigation tabs': readme,\n      'Navigation tabs button': readmeButton,\n      'Navigation tabs link': readmeLink,\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variation 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    tabType: {\n      name: 'Tab type',\n      description: 'Type of child element, button/link.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Link'],\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tabType: 'Link',\n  },\n};\n\n// Why role=\"link\" on a disabled link: https://www.scottohara.me/blog/2021/05/28/disabled-links.html\nconst Template = ({ tabType, modeVariant }) =>\n  formatHtmlPreview(`\n    <sdds-navigation-tabs \n      ${modeVariant !== 'Inherit from parent' ? ` mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    >\n      ${\n        tabType === 'Link'\n          ? `\n      <sdds-navigation-tabs-link selected href=\"#\" > First tab\n      </sdds-navigation-tabs-link>\n      <sdds-navigation-tabs-link href=\"#\" > Second tab\n      </sdds-navigation-tabs-link>\n      <sdds-navigation-tabs-link href=\"#\" > Third tab\n      </sdds-navigation-tabs-link>\n      <sdds-navigation-tabs-link href=\"#\" disabled> Fourth tab\n      </sdds-navigation-tabs-link>\n      `\n          : ''\n      }\n      ${\n        tabType === 'Button'\n          ? `\n      <sdds-navigation-tabs-button selected> First tab\n      </sdds-navigation-tabs-button>\n      <sdds-navigation-tabs-button> Second tab\n      </sdds-navigation-tabs-button>\n      <sdds-navigation-tabs-button > Third tab\n      </sdds-navigation-tabs-button>\n      <sdds-navigation-tabs-button disabled> Fourth tab\n      </sdds-navigation-tabs-button>\n      `\n          : ''\n      }\n    </sdds-navigation-tabs>\n\n    <!-- Demo container. -->\n    <div class=\"demo-container\">\n      <h4 class=\"sdds-headline-04\">Selected tab: <span class=\"selectedTab\"></span></h4>\n      <h4 class=\"sdds-headline-04\">Selected tabindex: <span class=\"selectedTabIndex\"></span></h4>\n    </div>\n \n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n    selectedTab = document.getElementsByClassName('selectedTab')[0]\n    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]\n    tabs = document.querySelector('sdds-navigation-tabs');\n    \n    tabs.addEventListener('sddsChange', (event) => {\n       console.log(event)\n      selectedTab.innerHTML = event.detail.selectedTab.tab\n      selectedTabIndex.innerHTML = event.detail.selectedTab.tabIndex\n    })\n    </script>\n    `);\n\nexport const NavigationTabs = Template.bind({});"]}

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

@@ -1,85 +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-primary: var(--sdds-grey-50);
-  --sdds-textarea-disabled-background-secondary: var(--sdds-white);
-  --sdds-textarea-disabled-background: var(--sdds-textarea-disabled-background-primary);
-  --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);
-  --sdds-textarea-disabled-background: var(--sdds-textarea-disabled-background-primary);
-}
-:root .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
-  --sdds-textarea-disabled-background: var(--sdds-textarea-disabled-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-primary: var(--sdds-grey-900);
-  --sdds-textarea-disabled-background-secondary: var(--sdds-grey-868);
-  --sdds-textarea-disabled-background: var(--sdds-textarea-disabled-background-primary);
-  --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-textarea-disabled-background: var(--sdds-textarea-disabled-background-primary);
-}
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
-  --sdds-textarea-disabled-background: var(--sdds-textarea-disabled-background-secondary);
-}
-
-.sdds-textarea-container {
+.textarea-container {
   border-radius: 4px 4px 0 0;
   position: relative;
   box-sizing: border-box;
@@ -91,17 +10,17 @@
   flex-flow: row wrap;
   border-bottom: 0;
 }
-.sdds-textarea-container.no-min-width {
+.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;
@@ -109,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;
@@ -137,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;
@@ -173,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;
@@ -186,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;
@@ -195,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);
@@ -228,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;
@@ -245,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;
@@ -291,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

@@ -39,16 +39,16 @@ export class Textarea {
   render() {
     var _a;
     return (h("div", { class: `
-        sdds-textarea-container
-        ${this.noMinWidth ? 'no-min-width' : ''}
-        ${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);
         }
@@ -56,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"]

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,QAAQ;;iBAKK,EAAE;gBAGH,EAAE;;;;yBAYkC,UAAU;uBAGvC,EAAE;iBAGR,EAAE;oBAGE,KAAK;oBAGL,KAAK;iBAGgB,SAAS;;uBAMX,IAAI;qBAGtB,KAAK;sBAGJ,KAAK;;;EAcnC,YAAY,CAAC,KAAK;IAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC9B,CAAC;EAWD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;EAC1B,CAAC;EAWD,iCAAiC;EACjC,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;EAClC,CAAC;EAWD,iFAAiF;EACjF,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,WACE,KAAK,EAAE;;UAEL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;UACnE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UAC5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;UAC7C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;UAC7C,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;UACxE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACtC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;SACxF;MAEA,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,CACpC,YAAM,KAAK,EAAE,qBAAqB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD;MACD,WAAK,KAAK,EAAC,uBAAuB;QAChC,gBACE,KAAK,EAAE,qBAAqB,EAC5B,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAA8B,CAAC,EAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;cAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;aACzB;UACH,CAAC,EACD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;cAClB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;aACxB;UACH,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GACnC;QACZ,YAAM,KAAK,EAAC,4BAA4B;UACtC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;YAElC,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,4uBAA4uB,EAC9uB,IAAI,EAAC,cAAc,GACnB,CACE,CACD;QACP,YAAM,KAAK,EAAC,8BAA8B;UACxC,iBAAW,IAAI,EAAC,eAAe,GAAa,CACvC;QACP,YAAM,KAAK,EAAC,oCAAoC,iCAAkC,CAC9E;MACN,YAAM,KAAK,EAAE,sBAAsB;QAChC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa;QAC1E,IAAI,CAAC,MAAM,CACP;MAEN,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CACrB,WAAK,KAAK,EAAE,2BAA2B;QACpC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM;QAC7C,YAAM,KAAK,EAAC,oCAAoC,UAAW;;QAAE,IAAI,CAAC,SAAS,CACvE,CACP,CACG,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  /** 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        sdds-textarea-container\n        ${this.noMinWidth ? 'no-min-width' : ''}\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"]}