@scania/tegel 0.0.61 → 0.0.72

package/dist/collection/components/divider/divider-webcomponent.stories.js

@@ -1,62 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    notes: { Divider: readme },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-        options: ['Horizontal', 'Vertical'],
-      },
-      table: {
-        defaultValue: { summary: 'horizontal' },
-      },
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Vertical' },
-    },
-  },
-  args: {
-    orientation: 'Horizontal',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ orientation, width, height }) => formatHtmlPreview(`
-  <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
-    <sdds-divider orientation="${orientation.toLowerCase()}"></sdds-divider>
-  </div>
-`);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=divider-webcomponent.stories.js.map

package/dist/collection/components/divider/divider-webcomponent.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"divider-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC1B,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;OACpC;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;OACxC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE;KAC7C;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,EAAE,UAAU,EAAE;KAC3C;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAClD,iBAAiB,CAAC;gBACJ,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,MAAM,KAAK;iCAC3D,WAAW,CAAC,WAAW,EAAE;;CAEzD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    notes: { Divider: readme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',\n      },\n    ],\n  },\n  argTypes: {\n    orientation: {\n      name: 'Orientation',\n      description: 'Choose divider orientation.',\n      control: {\n        type: 'radio',\n        options: ['Horizontal', 'Vertical'],\n      },\n      table: {\n        defaultValue: { summary: 'horizontal' },\n      },\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Vertical' },\n    },\n  },\n  args: {\n    orientation: 'Horizontal',\n    width: 150,\n    height: 150,\n  },\n};\n\nconst Template = ({ orientation, width, height }) =>\n  formatHtmlPreview(`\n  <div style=\"${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}\">\n    <sdds-divider orientation=\"${orientation.toLowerCase()}\"></sdds-divider>\n  </div>\n`);\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;uBAE+B,YAAY;;EAE7D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;MAE1E,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,WAAW,EAAE,GAAI,CACxC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-divider',\n  styleUrl: 'divider-component.scss',\n  shadow: true,\n})\nexport class Divider {\n  /** Orientation of the Divider, horizontal if not specified. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <Host\n        role=\"separator\"\n        aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n      >\n        <div class={`divider ${this.orientation}`} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,131 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    orientation: {
-      name: 'Orientation',
-      description: 'Choose divider orientation.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical'],
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Sets the direction of the divider.',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-    },
-    width: {
-      name: 'Width',
-      description: 'Sets the divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Sets the divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'orientation', eq: 'Vertical' },
-    },
-  },
-  args: {
-    orientation: 'Horizontal',
-    direction: 'Top',
-    width: 150,
-    height: 150,
-  },
-};
-const Template = ({ orientation, width, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider`,
-    Vertical: `sdds-divider-vertical`,
-  };
-  return formatHtmlPreview(`
-      <style>
-         ${height
-    ? `/* demo-div is for demonstration purposes only*/
-        .demo-div {
-          height: ${height}px;
-          width: 1px;
-          padding: 0px;
-        }`
-    : ''}    ${width
-    ? `/* demo-div is for demonstration purposes only*/
-            .demo-div {
-              width: ${width}px;
-              height: 1px;
-              padding: 0px;
-            }`
-    : ''}
-      </style>
-     
-      
-      <div
-  class="demo-div ${classLookup[orientation]}"></div>
-  `);
-};
-const BorderTemplate = ({ direction }) => {
-  const directionLookup = {
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-    Left: 'left',
-  };
-  return formatHtmlPreview(`
-      <style>
-      #demo-wrapper{
-        padding: 50px;
-        background-color: var(--sdds-grey-958)
-      }
-       /* border-demo-div is for demonstration purposes only*/
-        .border-demo-div {
-          height: 200px;
-          width: 200px;
-          background-color: var(--sdds-grey-868);
-          color: var(--sdds-grey-50);
-          text-align: center;
-          padding: 10px;
-        }
-           
-      </style>
-     <div id= "demo-wrapper">
-      
-      <div
-  class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
-  <H4>DEMO</H4></div></div>
-  `);
-};
-export const Native = Template.bind({});
-Native.argTypes = {
-  direction: { table: { disable: true } }
-};
-export const Border = BorderTemplate.bind({});
-Border.args = {
-  direction: 'Top'
-};
-Border.argTypes = {
-  orientation: { table: { disable: true } }
-};
-//# sourceMappingURL=divider.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\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=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    orientation: {\n      name: 'Orientation',\n      description: 'Choose divider orientation.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Sets the direction of the divider.',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n    width: {\n      name: 'Width',\n      description: 'Sets the divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Sets the divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'orientation', eq: 'Vertical' },\n    },\n  },\n  args: {\n    orientation: 'Horizontal',\n    direction: 'Top',\n    width: 150,\n    height: 150,\n  },\n};\n\n\nconst Template = ({ orientation, width, height }) => {\n  const classLookup = {\n    Horizontal: `sdds-divider`,\n    Vertical: `sdds-divider-vertical`,\n  };\n  \n  return formatHtmlPreview(\n    `\n      <style>\n         ${\n      height\n        ? `/* demo-div is for demonstration purposes only*/\n        .demo-div {\n          height: ${height}px;\n          width: 1px;\n          padding: 0px;\n        }`\n        : ''\n    }    ${\n      width\n        ? `/* demo-div is for demonstration purposes only*/\n            .demo-div {\n              width: ${width}px;\n              height: 1px;\n              padding: 0px;\n            }`\n        : ''\n    }\n      </style>\n     \n      \n      <div\n  class=\"demo-div ${classLookup[orientation]}\"></div>\n  `,\n);\n};\n\nconst BorderTemplate= ({ direction }) => {\n  const directionLookup = {\n    Top: 'top',\n    Right: 'right',\n    Bottom: 'bottom',\n    Left: 'left',\n  };\n  return formatHtmlPreview(\n    `\n      <style>\n      #demo-wrapper{\n        padding: 50px;\n        background-color: var(--sdds-grey-958)\n      }\n       /* border-demo-div is for demonstration purposes only*/\n        .border-demo-div {\n          height: 200px;\n          width: 200px;\n          background-color: var(--sdds-grey-868);\n          color: var(--sdds-grey-50);\n          text-align: center;\n          padding: 10px;\n        }\n           \n      </style>\n     <div id= \"demo-wrapper\">\n      \n      <div\n  class=\"border-demo-div sdds-divider-border-${directionLookup[direction]}\">\n  <H4>DEMO</H4></div></div>\n  `,\n);\n};\n\n\nexport const Native = Template.bind({});\nNative.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n orientation: { table:  { disable: true } }  \n}\n\n\n"]}

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-filter.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-filter',\n  shadow: true,\n  styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n  @State() dataOptions = [];\n\n  @State() filteredContent = [];\n\n  @State() searchTerm = '';\n\n  @State() selectedOptionState: any;\n\n  @State() dropdownRef?: HTMLSddsDropdownElement;\n\n  /** Set the variant of the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placeholder text for dropdown with no selected item */\n  @Prop() placeholder: string = '';\n\n  /** Label for dropdown with no selected item */\n  @Prop() label: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() defaultOption: string;\n\n   /** Direction that the dropdown will open. Default is auto. */\n   @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() disabled: boolean = false;\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Position of label */\n  @Prop() labelPosition: 'no-label' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: boolean = false;\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Data is an array of objects that contains label and value\n   * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n   */\n  @Prop() data: string;\n\n  @State() selectedLabel: string = 'no-selected';\n\n  @State() selectedValue: string = 'no-selected';\n\n  componentWillLoad() {\n    this.parseData(this.data);\n\n    if (this.defaultOption) {\n      this.selectedOptionState = this.defaultOption;\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: string) {\n    if (newValue) this.dataOptions = JSON.parse(newValue);\n    this.filteredContent = this.dataOptions;\n  }\n\n  @Listen('internalSddsSearch')\n  updateOptionsContent(event: CustomEvent<any>) {\n    this.searchTerm = event.detail;\n    this.findData();\n  }\n\n  @Listen('internalSddsSelect')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.selectedOptionState = event.detail.value;\n    this.selectedLabel = event.detail.label;\n    this.selectedValue = event.detail.value;\n\n    // Reset list when search is done and user have selected one option\n    // To match with animation time for option list to fadeout first\n    setTimeout(() => {\n      this.filteredContent = this.dataOptions;\n    }, 200);\n  }\n\n  findData() {\n    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n    this.filteredContent = this.dataOptions.filter((option) => {\n      if (option.label) {\n        const listItem = option.label.toLowerCase();\n        const searchResultList = listItem.match(searchAsRegEx);\n        if (searchResultList) {\n          return searchResultList;\n        }\n        this.selectedOptionState = null;\n        this.selectedLabel = 'no-result';\n        this.selectedValue = 'no-result';\n      }\n    });\n  }\n\n  setOptionsContent() {\n    const newList = this.filteredContent.map((obj) => (\n      <sdds-dropdown-option\n        tabindex=\"0\"\n        value={obj.value}\n        class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}\n      >\n        {obj.label}\n      </sdds-dropdown-option>\n    ));\n    if (newList.length > 0) {\n      return newList;\n    }\n    return (\n      <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n        No result\n      </sdds-dropdown-option>\n    );\n  }\n\n  /** Use this method to reset the dropdown. Then it will go back to its initial state. */\n  @Method() async resetOption() {\n    await this.dropdownRef?.resetOption();\n  }\n\n  render() {\n    return (\n      <Host\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        class={`\n      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n     `}\n      >\n        <sdds-dropdown\n          ref={(el) => (this.dropdownRef = el)}\n          exportparts=\"dropdown-filter-disabled\"\n          size={this.size}\n          label={this.label}\n          disabled={this.disabled}\n          labelPosition={this.labelPosition}\n          helper={this.helper}\n          state={this.state}\n          placeholder={this.placeholder}\n          defaultOption={this.defaultOption}\n          selectedOption={this.selectedOption}\n          type=\"filter\"\n          tabindex={this.disabled ? '-1' : null}\n          openDirection={this.openDirection}\n        >\n          {this.setOptionsContent()}\n        </sdds-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js

@@ -1,183 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Dropdown Filter',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-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: 'Error state',
-      description: 'Puts the component in error state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the dropdown.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'Sets which direction the dropdown will open in.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Up', 'Down', 'Auto'],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Outside'],
-      table: {
-        defaultValue: { summary: 'no-label' },
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      description: 'Sets a label text to help describe what the dropdown contains.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'labelPosition', neq: 'No label' },
-    },
-    placeholder: {
-      name: 'Placeholder',
-      description: 'Sets the placeholder text when no option is selected.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
-      control: {
-        type: 'text',
-      },
-    },
-    defaultOption: {
-      name: 'Default option',
-      description: 'Sets a pre-selected option and replaces the placeholder.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the dropdown.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: false,
-    size: 'Large',
-    openDirection: 'Auto',
-    labelPosition: 'No label',
-    labelText: 'Label text',
-    placeholder: 'Placeholder',
-    helper: '',
-    defaultOption: 'Option 1',
-    disabled: false,
-  },
-};
-const FilterTemplate = ({ modeVariant, state = false, size, openDirection, labelPosition, labelText, placeholder, helper = '', defaultOption, disabled = false, }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { 'No label': 'no-label', 'Outside': 'outside' };
-  const defaultOptionLookup = {
-    'No default': 'no-default',
-    'Option 1': 'option-1',
-    'Option 2': 'option-2',
-    'Option 3': 'option-3',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-      .demo-wrapper {
-        width: 300px;
-        height:200px;
-        }
-    </style>
-
-    <div class="demo-wrapper">
-      <sdds-dropdown-filter
-      ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}".sdds-option-label {
-        `
-    : ''}
-        id="sdds-dropdown-filter"
-        size="${sizeLookup[size]}"
-        placeholder="${placeholder}"
-        disabled="${disabled}"
-        open-direction="${openDirection.toLowerCase()}"
-        label-position="${labelPosLookup[labelPosition]}"
-        ${labelPosLookup[labelPosition] !== 'no-label' ? `label="${labelText}"` : ''}
-        ${helper !== '' ? `helper="${helper}"` : ''}
-        state="${state}"
-        data='[
-          {
-            "value": "option-1",
-            "label":"Jakarta"
-          },
-          {
-            "value":"option-2"
-            ,"label":"Stockholm"
-          },
-          {
-            "value":"option-3",
-            "label":"Barcelona"
-          }
-        ]'
-        default-option="${defaultOptionLookup[defaultOption]}">
-      </sdds-dropdown-filter>
-    </div>
-  `);
-};
-export const Default = FilterTemplate.bind({});
-//# sourceMappingURL=dropdown-filter.stories.js.map

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-filter.stories.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-filter/dropdown-filter.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Dropdown Filter',\n  parameters: {\n    layout: 'centered',\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=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-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: 'Error state',\n      description: 'Puts the component in error state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the dropdown.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    openDirection: {\n      name: 'Open direction',\n      description: 'Sets which direction the dropdown will open in.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Up', 'Down', 'Auto'],\n      table: {\n        defaultValue: { summary: 'auto' },\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', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Sets a label text to help describe what the dropdown contains.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'labelPosition', neq: 'No label' },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text when no option is selected.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets a helper text to assist the user with additional information about the dropdown.',\n      control: {\n        type: 'text',\n      },\n    },\n    defaultOption: {\n      name: 'Default option',\n      description: 'Sets a pre-selected option and replaces the placeholder.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the dropdown.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: false,\n    size: 'Large',\n    openDirection: 'Auto',\n    labelPosition: 'No label',\n    labelText: 'Label text',\n    placeholder: 'Placeholder',\n    helper: '',\n    defaultOption: 'Option 1',\n    disabled: false,\n  },\n};\n\nconst FilterTemplate = ({\n  modeVariant,\n  state = false,\n  size,\n  openDirection,\n  labelPosition,\n  labelText,\n  placeholder,\n  helper = '',\n  defaultOption,\n  disabled = false,\n}) => {\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  const labelPosLookup = { 'No label': 'no-label', 'Outside': 'outside' };\n  const defaultOptionLookup = {\n    'No default': 'no-default',\n    'Option 1': 'option-1',\n    'Option 2': 'option-2',\n    'Option 3': 'option-3',\n  };\n\n  return formatHtmlPreview(`\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/\n      .demo-wrapper {\n        width: 300px;\n        height:200px;\n        }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-dropdown-filter\n      ${\n        modeVariant !== 'Inherit from parent'\n          ? `mode-variant=\"${modeVariant.toLowerCase()}\".sdds-option-label {\n        `\n          : ''\n      }\n        id=\"sdds-dropdown-filter\"\n        size=\"${sizeLookup[size]}\"\n        placeholder=\"${placeholder}\"\n        disabled=\"${disabled}\"\n        open-direction=\"${openDirection.toLowerCase()}\"\n        label-position=\"${labelPosLookup[labelPosition]}\"\n        ${labelPosLookup[labelPosition] !== 'no-label' ? `label=\"${labelText}\"` : ''}\n        ${helper !== '' ? `helper=\"${helper}\"` : ''}\n        state=\"${state}\"\n        data='[\n          {\n            \"value\": \"option-1\",\n            \"label\":\"Jakarta\"\n          },\n          {\n            \"value\":\"option-2\"\n            ,\"label\":\"Stockholm\"\n          },\n          {\n            \"value\":\"option-3\",\n            \"label\":\"Barcelona\"\n          }\n        ]'\n        default-option=\"${defaultOptionLookup[defaultOption]}\">\n      </sdds-dropdown-filter>\n    </div>\n  `);\n};\n\nexport const Default = FilterTemplate.bind({});\n"]}

package/dist/collection/components/dropdown/dropdown-native.stories.js

@@ -1,104 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Dropdown',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-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: 'Error state',
-      description: 'Puts the component in error state.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the dropdown.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets a label text to help describe what the dropdown contains.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the dropdown.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: false,
-    size: 'Large',
-    label: '',
-    helper: '',
-    disabled: false,
-  },
-};
-const NativeTemplate = ({ modeVariant, state, size, label, helper, disabled }) => {
-  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  return formatHtmlPreview(`
-  <style>
-/* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-  }
-</style>
-
-<div class="demo-wrapper">
-       <div class="sdds-dropdown ${size !== 'Large' ? `sdds-dropdown-${sizeLookup[size]}` : ''} ${state ? 'sdds-dropdown--error' : ''} ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-       ${label !== '' ? `<span class="sdds-dropdown-label-outside">${label}</span> ` : ''}
-       <select
-       name="nativeDropdown"
-       id="mySelect"
-       ${disabled ? `disabled` : ''} >
-           <option value="truck">Truck</option>
-           <option value="bus">Bus</option>
-           <option value="car">Car</option>
-         </select>
-         ${helper !== '' ? `<span class="sdds-dropdown-helper">${helper}</span>` : ''}
-       </div>
-     </div>
- `);
-};
-export const Native = NativeTemplate.bind({});
-//# sourceMappingURL=dropdown-native.stories.js.map

package/dist/collection/components/dropdown/dropdown-native.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-native.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-native.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Dropdown',\n  parameters: {\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=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        '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: 'Error state',\n      description: 'Puts the component in error state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the dropdown.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets a label text to help describe what the dropdown contains.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description:\n        'Sets a helper text to assist the user with additional information about the dropdown.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the dropdown.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: false,\n    size: 'Large',\n    label: '',\n    helper: '',\n    disabled: false,\n  },\n};\n\nconst NativeTemplate = ({ modeVariant, state, size, label, helper, disabled }) => {\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  return formatHtmlPreview(`\n  <style>\n/* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 300px;\n  }\n</style>\n\n<div class=\"demo-wrapper\">\n       <div class=\"sdds-dropdown ${size !== 'Large' ? `sdds-dropdown-${sizeLookup[size]}` : ''} ${\n    state ? 'sdds-dropdown--error' : ''\n  } ${\n    modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`\n  }\">\n       ${label !== '' ? `<span class=\"sdds-dropdown-label-outside\">${label}</span> ` : ''}\n       <select\n       name=\"nativeDropdown\"\n       id=\"mySelect\"\n       ${disabled ? `disabled` : ''} >\n           <option value=\"truck\">Truck</option>\n           <option value=\"bus\">Bus</option>\n           <option value=\"car\">Car</option>\n         </select>\n         ${helper !== '' ? `<span class=\"sdds-dropdown-helper\">${helper}</span>` : ''}\n       </div>\n     </div>\n `);\n};\n\nexport const Native = NativeTemplate.bind({});\n"]}

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-option.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-option/dropdown-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;;;oBAOG,KAAK;oBAGL,KAAK;;;EAqBjC,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;EACpB,CAAC;EAGD,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;EACnB,CAAC;EAGD,SAAS,CAAC,KAAoB;IAC5B,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;MAC1B,IAAI,CAAC,WAAW,CAAC;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;QAC1B,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;OAC7B,CAAC,CAAC;KACJ;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;IAC7B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,IAAI;OACjC,OAAO,CAAC,eAAe,CAAC;OACxB,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC;EACrD,CAAC;EAED,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;MAC5C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACpC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;QAC7B,WAAW,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;UAC/B,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC,CAAC;OACJ;MACD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAEnE,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,cAAc,EAAE;UAClB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;SAChC;OACF;WAAM;QACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,cAAc,EAAE;UAClB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;SAC/B;OACF;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACjB,IAAI,IAAI,CAAC,mBAAmB,EAAE;UAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAC,WAAW,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;UAC1B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;SAChC,CAAC,CAAC;MACL,CAAC,EACD,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,QAAQ;QACzB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;OAC/C,EACD,QAAQ,EAAC,IAAI,mBACE,IAAI,CAAC,QAAQ;MAE3B,IAAI,CAAC,mBAAmB,IAAI,CAC3B,WAAK,KAAK,EAAC,yCAAyC;QAClD,aAAO,KAAK,EAAC,iBAAiB;UAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACI,CACJ,CACP;MACD,YAAM,KAAK,EAAC,mBAAmB;QAC7B,eAAQ,CACH;MACN,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAC5B,YAAM,KAAK,EAAC,uBAAuB;QACjC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;UAElC,YACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,kBACR,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE,CACD,CACR,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  /** @internal Fires on click on one of the dropdown items */\n  @Event({\n    eventName: 'internalSddsSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSelect: EventEmitter<{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.handleClick({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  handleClick(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.internalSddsSelect.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          if (this.isMultiSelectOption) {\n            event.stopPropagation();\n          }\n          return this.handleClick({\n            value: this.value,\n            label: this.host.innerText,\n            parent: event.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}