@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/header/header-inline.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-inline.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-inline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;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,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgE/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Header',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    siteName: {\n      name: 'Site name',\n      description: 'Sets a custom title for the header.',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst InlineMenuTemplate = ({ siteName }) =>\n  formatHtmlPreview(\n    `\n    <nav class='sdds-nav'>\n        <div class='sdds-nav__left'>\n          <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n              <span id='sdds-nav__mob-menu-icon'>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n              </span>\n          </button>\n          <div class='sdds-nav__app-name'>${siteName}</div>\n        </div>\n\n        <div class='sdds-nav__center'>\n          <ul class='sdds-nav__inline-menu'>\n\n              <li class='sdds-nav__item'>\n                  <a class='sdds-nav__item-core' href='#'>\n                      <span class='sdds-nav__item-core-text'>Item 1</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__item--active'>\n                  <a class='sdds-nav__item-core ' href='#'>\n                      <span class='sdds-nav__item-core-text'>Item 2</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__dropdown'>\n              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n                  <span class='sdds-nav__item-core-text'>Item 3</span>\n                  <span class='sdds-nav__dropdown-icon'>\n                    <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n                  </span>\n              </button>\n              <ul class='sdds-nav__dropdown-menu'>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>\n                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n              </ul>\n              </li>\n          </ul>\n        </div>\n\n        <div class='sdds-nav__right'>\n          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n        </div>\n    </nav>\n\n    <script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n    toggleMobileMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n\n    toggleInlineDropdown = () => {\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n\n    closeDropdownsFromOverlay = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n    </script>\n    `,\n  );\n\nexport const InlineMenu = InlineMenuTemplate.bind({});\n"]}

package/dist/collection/components/header/header-search.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-search.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-search.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;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,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsN/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Header',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    siteName: {\n      name: 'Site name',\n      description: 'Sets a custom title for the header.',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst SearchbarMenuTemplate = ({ siteName }) =>\n  formatHtmlPreview(\n    `\n    <nav class='sdds-nav'>\n        <div class='sdds-nav__left'>\n          <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n              <span id='sdds-nav__mob-menu-icon'>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n              </span>\n          </button>\n          <div class='sdds-nav__app-name'>${siteName}</div>\n        </div>\n\n        <div class='sdds-nav__center sdds-nav__center-withsearch'>\n        <ul class='sdds-nav__inline-menu'>\n\n        <li class='sdds-nav__item'>\n            <a class='sdds-nav__item-core' href='#'>\n                <span class='span'>Item 1</span>\n            </a>\n        </li>\n\n        <li class='sdds-nav__item sdds-nav__item--active'>\n            <a class='sdds-nav__item-core ' href='#'>\n                <span class='sdds-nav__item-core-text'>Item 2</span>\n            </a>\n        </li>\n\n        <li class='sdds-nav__item sdds-nav__dropdown'>\n        <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n            <span class='sdds-nav__item-core-text'>Item 3</span>\n            <span class='sdds-nav__dropdown-icon'>\n              <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n            </span>\n        </button>\n        <ul class='sdds-nav__dropdown-menu'>\n            <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n            <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>\n            <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n        </ul>\n        </li>\n      </ul>\n      <div class=\"sdds-nav__app-searchbar-container\">\n      <div class=\"sdds-nav__app-searchbar\">\n        <div class=\"sdds-nav__searchbar-input-expanded\">\n          <ul class='sdds-nav__searchbar-menu'>\n              <li class='sdds-nav__searchbar-item--top' tabindex=\"0\">\n                    <p class='sdds-nav__searchbar-all-results'>\n                    <sdds-icon name=\"search\" class=\"sdds-nav__app-searchbar-results-mgl-svg\"></sdds-icon>\n                    See all search results <span>(press enter)</span>\n                    </p>\n              </li>\n            <ul class='sdds-nav__searchbar-results--category'>\n              <p class='sdds-nav__searchbar-results-category-title'>USERS</p>\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>User – Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n                <div>\n                  <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n                </div>\n              </button>\n            </li>\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>User– Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n              <div>\n              <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n            </div>              </button>\n              </li>\n            </ul>\n            <ul class='sdds-nav__searchbar-results--category'>\n              <p class='sdds-nav__searchbar-results-category-title'>TEAMS</p>\n\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>Team– Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n              <div>\n              <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n            </div>             </button>\n              </li>\n          </ul>\n        </ul>\n        <input class=\"sdds-nav__searchbar-input\" type=\"text\" placeholder=\"Search\">\n          <button class=\"sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-x-btn\" onclick=\"toggleSearchbar()\">\n            <sdds-icon class=\"sdds-nav__app-searchbar-btn-svg\" name=\"cross\" size=\"20px\"></sdds-icon> \n          </button>\n\n      </div>\n       <button class=\"sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-mgl-btn\" onclick=\"toggleSearchbar()\">\n          <sdds-icon class=\"sdds-nav__app-searchbar-btn-svg\" name=\"search\" size=\"20px\"></sdds-icon> \n      </button>\n    </div>\n  </div>\n    <ul class='sdds-nav__toolbar-menu'>\n\n        <li class='sdds-nav__item sdds-nav__avatar'>\n            <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>\n                <img class=\"sdds-nav__avatar-img\" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>\n                <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>\n                    <span class='sdds-nav__avatar-title'>Employee Name</span>\n                    <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                </span>\n            </button>\n\n            <ul class='sdds-nav__avatar-menu'>\n                <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>\n                    <span class='sdds-nav__avatar-info'>\n                        <span class='sdds-nav__avatar-title'>Employee Name</span>\n                        <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                    </span>\n                </li>\n                <li class='sdds-nav__avatar-item'>\n                    <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>\n                </li>\n                <li class='sdds-nav__avatar-item'>\n                    <button class='sdds-nav__avatar-item-core'>Logout</button>\n                </li>\n            </ul>\n        </li>\n        </ul>\n        </div>\n        <div class='sdds-nav__right'>\n          <div class='sdds-nav__item sdds-nav__app-launcher'>\n              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>\n                <sdds-icon class=\"sdds-nav__app-launcher-btn-svg\" name=\"bento\" size=\"20px\"></sdds-icon> \n              </button>\n              <ul class='sdds-nav__app-launcher-menu'>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n              </ul>\n          </div>\n          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n        </div>\n    </nav>\n\n    <script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n    toggleAvatarMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleMobileMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n\n    toggleInlineDropdown = () => {\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n\n    toggleAppLauncher = () => {\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__app-launcher--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n      document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n\n    closeDropdownsFromOverlay = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n\n    toggleSearchbar = () => {\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__searchbar--opened\");\n      document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n  }\n    </script>\n    `,\n  );\n\nexport const SearchbarMenu = SearchbarMenuTemplate.bind({});\n"]}

package/dist/collection/components/header/header-toolbar.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-toolbar.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-toolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;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,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2J/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Header',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    siteName: {\n      name: 'Site name',\n      description: 'Sets a custom title for the header.',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst ToolbarMenuTemplate = ({ siteName }) =>\n  formatHtmlPreview(\n    `\n    <nav class='sdds-nav'>\n        <div class='sdds-nav__left'>\n          <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n              <span id='sdds-nav__mob-menu-icon'>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n              </span>\n          </button>\n          <div class='sdds-nav__app-name'>${siteName}</div>\n        </div>\n\n        <div class='sdds-nav__center'>\n          <ul class='sdds-nav__inline-menu'>\n\n              <li class='sdds-nav__item'>\n                  <a class='sdds-nav__item-core' href='#'>\n                      <span class='span'>Item 1</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__item--active'>\n                  <a class='sdds-nav__item-core ' href='#'>\n                      <span class='sdds-nav__item-core-text'>Item 2</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__dropdown'>\n              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n                  <span class='sdds-nav__item-core-text'>Item 3</span>\n                  <span class='sdds-nav__dropdown-icon'>\n                    <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n                  </span>\n              </button>\n              <ul class='sdds-nav__dropdown-menu'>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>\n                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n              </ul>\n              </li>\n          </ul>\n\n          <ul class='sdds-nav__toolbar-menu'>\n\n              <li class='sdds-nav__item sdds-nav__avatar' >\n                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>\n                      <img class=\"sdds-nav__avatar-img\" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>\n                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>\n                          <span class='sdds-nav__avatar-title'>Employee Name</span>\n                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                      </span>\n                  </button>\n\n                  <ul class='sdds-nav__avatar-menu'>\n                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>\n                          <span class='sdds-nav__avatar-info'>\n                              <span class='sdds-nav__avatar-title'>Employee Name</span>\n                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                          </span>\n                      </li>\n                      <li class='sdds-nav__avatar-item'>\n                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>\n                      </li>\n                      <li class='sdds-nav__avatar-item'>\n                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>\n                      </li>\n                  </ul>\n              </li>\n          </ul>\n        </div>\n\n        <div class='sdds-nav__right'>\n          <div class='sdds-nav__item sdds-nav__app-launcher'>\n              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>\n                <sdds-icon class=\"sdds-nav__app-launcher-btn-svg\" name=\"bento\" size=\"20px\"></sdds-icon> \n              </button>\n              <ul class='sdds-nav__app-launcher-menu'>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n              </ul>\n          </div>\n          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n        </div>\n    </nav>\n\n    <script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n    toggleAvatarMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleMobileMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleAppLauncher = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleInlineDropdown = () => {\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n    closeDropdownsFromOverlay = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n\n    </script>\n    `,\n  );\n\nexport const ToolbarMenu = ToolbarMenuTemplate.bind({});\n"]}

package/dist/collection/components/icon/icon-font.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-font.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon-font.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,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;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,UAAU;KACpB;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;OACR;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE,CAChC,iBAAiB,CAAC;;;;8BAIU,IAAI,CAAC,IAAI;;;wBAGf,IAAI,CAAC,IAAI;GAC9B,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from './iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Foundations/Icons',\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=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    icon: {\n      name: 'Icon name',\n      description: 'Select icon to display',\n      control: {\n        type: 'select',\n      },\n      options: iconsNames,\n    },\n    size: {\n      name: 'Size in pixels',\n      description: 'Set the size of the icon',\n      control: {\n        type: 'range',\n        min: 16,\n        max: 100,\n        step: 4,\n      },\n    },\n  },\n  args: {\n    size: 32,\n    icon: 'truck',\n  },\n};\n\nconst IconFontTemplate = (args) =>\n  formatHtmlPreview(`\n  <style>\n    /* Demo code for presentation purposes */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    .sdds-icon { font-size: ${args.size}px; }\n  </style>\n\n  <i class=\"sdds-icon ${args.icon}\"></i>\n  `);\n\nexport const Native = IconFontTemplate.bind({});\n\nNative.args = {};\n"]}

package/dist/collection/components/icon/icon-web-component.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-web-component.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon-web-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,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;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,UAAU;KACpB;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;OACR;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE,CAC5B,iBAAiB,CAAC;qBACC,IAAI,CAAC,IAAI,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI;GACjE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,YAAY,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from './iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Foundations/Icons',\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=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    icon: {\n      name: 'Icon name',\n      description: 'Select icon to display',\n      control: {\n        type: 'select',\n      },\n      options: iconsNames,\n    },\n    size: {\n      name: 'Size in pixels',\n      description: 'Set the size of the icon',\n      control: {\n        type: 'range',\n        min: 16,\n        max: 100,\n        step: 4,\n      },\n    },\n  },\n  args: {\n    size: 32,\n    icon: 'truck',\n  },\n};\n\nconst IconTemplate = (args) =>\n  formatHtmlPreview(`\n  <sdds-icon name=\"${args.icon}\" size=\"${`${args.size.toString()}px`}\"></sdds-icon> \n  `);\n\nexport const WebComponent = IconTemplate.bind({});\n\nWebComponent.args = {};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;MAC9B,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,qBAAkB,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAC5I,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAhCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAcD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map(element => {\n      if (element.name === this.name) {\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-labelledby={`icon ${element.name}`} role=\"img\" style={{ fontSize: this.size }}>\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CACf;4BACwB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAChD,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBACnB;;;GAGD,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Link',\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=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, disabled }) =>\n  formatHtmlPreview(\n    `\n      <a class=\"sdds-link ${disabled ? 'disabled' : ''} ${\n      underline ? '' : 'sdds-link--no-underline'\n    }\" href=\"#\">\n        This is a link.\n      </a>\n  `,\n  );\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/link/sdds-link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-link.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,OAAO,CACL,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;MAEb,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/link/sdds-link.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;MAC/C,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,iBAAiB,CACf;;UAEM,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;kBAE5B,MAAM;;;;GAIrB,CACA,CAAC;AACJ,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/Link',\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=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    target: {\n      name: 'Target',\n      description: 'Sets where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    target: '_self',\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, target, disabled }) =>\n  formatHtmlPreview(\n    `\n    <sdds-link\n        ${disabled ? 'disabled' : ''}\n        ${underline ? '' : 'underline=\"false\"'}\n        href=\"#\"\n        target=\"${target}\"\n        >\n        This is a link.\n    </sdds-link>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"message.stories.js","sourceRoot":"","sources":["../../../src/components/message/message.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Message',\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=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&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    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'Information' },\n      },\n    },\n    showExtendedMessage: {\n      name: 'Extended message',\n      description: 'Shows an extended message.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Web Component' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    showExtendedMessage: true,\n    noIcon: false,\n    iconType: 'Web Component',\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ \n  modeVariant, \n  messageType, \n  showExtendedMessage, \n  noIcon, \n  iconType \n}) => {\n  const messageTypeClass =\n    messageType === 'Information'\n      ? 'sdds-message-type-informative'\n      : `sdds-message-type-${messageType.toLowerCase()}`;\n  const iconClass =\n    messageType === 'Information'\n      ? 'sdds-message-icon-informative'\n      : `sdds-message-icon-${messageType.toLowerCase()}`;\n  const iconHtml =\n    iconType === 'Native'\n      ? `<i class=\"sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}\"></i>`\n      : `<div><sdds-icon class=\"sdds-message-icon ${iconClass}\" name=\"${nativeIconNameLookup[messageType]}\" size=\"20\"></sdds-icon></div>`;\n\n  return formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n\n    ${\n      iconType === 'Native'\n        ? `<style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    </style>`\n        : ''\n    }\n    <div class=\"demo-wrapper\">\n      <div class=\"sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${\n        showExtendedMessage ? 'sdds-message-extended-active' : ''\n      } \n      ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}\">\n      ${noIcon ? '' : iconHtml}\n      <h4 class=\"sdds-message-single\">\n        Single line message goes here.\n      </h4>\n      ${\n        showExtendedMessage\n          ? '<p class=\"sdds-message-extended\">Longer message text can be placed here. Longer message text can be placed here.</p>'\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/message/sdds-message.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-message.js","sourceRoot":"","sources":["../../../src/components/message/sdds-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;IAgBtB,gBAAW,GAAG,GAAG,EAAE;MACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;IACH,CAAC,CAAC;;uBAxB6C,IAAI;gBAGa,aAAa;kBAGnD,KAAK;mBAGJ,KAAK;;EAiBhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;0BACS,IAAI,CAAC,IAAI;UACzB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;QAExE,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa;QAC9E,WAAK,KAAK,EAAE,iBAAiB;UAC1B,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO;UAC9D,CAAC,IAAI,CAAC,OAAO,IAAI,CAChB,WAAK,KAAK,EAAC,0BAA0B;YACnC,eAAa,CACT,CACP,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-message',\n  styleUrl: 'sdds-message.scss',\n  shadow: true,\n})\nexport class SddsMessage {\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Type of message. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Removes the icon in the message. */\n  @Prop() noIcon: boolean = false;\n\n  /** Minimal message styling. */\n  @Prop() minimal: boolean = false;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`\n        message-wrapper ${this.type}\n        ${this.minimal ? 'message-minimal' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n        >\n          {!this.noIcon && <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>}\n          <div class={`message-content`}>\n            {this.header && <div class=\"message-header\">{this.header}</div>}\n            {!this.minimal && (\n              <div class=\"message-extended-message\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/message/sdds-message.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-message.stories.js","sourceRoot":"","sources":["../../../src/components/message/sdds-message.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,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;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;OACzC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,0BAA0B;MAChC,WAAW,EAAE,0CAA0C;MACvD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iBAAiB;MAC9B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,gBAAgB;IACxB,eAAe,EAAE,iFAAiF;IAClG,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,OAAO,EACP,MAAM,EACP,EAAE,EAAE,CACH,iBAAiB,CACf;;;;;;;;kBAQc,WAAW,CAAC,WAAW,EAAE;oBACvB,MAAM;YACd,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YACvB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;0BACV,WAAW,CAAC,WAAW,EAAE;YACvC,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;QAE7F,eAAe;;;KAGlB,CACF,CAAC;AAEJ,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/Message',\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=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&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    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'information' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets the header for the message.',\n      control: {\n        type: 'text',\n      },\n    },\n    extendedMessage: {\n      name: 'Extended message content',\n      description: 'Sets the content of an extended message.',\n      control: {\n        type: 'text',\n      },\n    },\n    minimal: {\n      name: 'Minimal',\n      description: 'Applies minimal message styling.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    header: 'Message header',\n    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',\n    minimal: false,\n    noIcon: false,\n  },\n};\n\nconst Template = ({ \n  modeVariant, \n  messageType, \n  header, \n  extendedMessage, \n  minimal, \n  noIcon\n}) =>\n  formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n    <div class=\"demo-wrapper\">\n      <sdds-message\n          type=\"${messageType.toLowerCase()}\"\n          header=\"${header}\"\n          ${noIcon ? 'no-icon' : ''}\n          ${minimal ? 'minimal' : ''}\n          mode-variant=\"${modeVariant.toLowerCase()}\"\n          ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}\n      >\n      ${extendedMessage}\n      </sdds-message>\n    </div>\n    `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"modal-native.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,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,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EAAE,wNAAwN;IAClO,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACV,EAAE,EAAE,CACH,iBAAiB,CACf;;;;;;;;;;;;;;;;;;oDAkBgD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0CAEvE,UAAU,CAAC,IAAI,CACjB,wBAAwB,OAAO,CAAC,WAAW,EAAE;;4CAEP,QAAQ;;;;;;+CAML,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'Static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst Template = ({ \n  actions, \n  size, \n  headline, \n  bodyText, \n  showModal \n}) =>\n  formatHtmlPreview(\n    `    <style>\n  /* demo-wrapper and demo-styles is for demonstration purposes only*/\n  .demo-wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    height: 100vh;\n  }\n  .demo-styles {\n    position: absolute;\n    margin-bottom: 20px;\n  }\n  </style>\n\n  <div class=\"demo-wrapper\">\n    <button id=\"modal-button\" class=\"sdds-btn sdds-btn-primary sdds-btn-lg\">\n      <span class=\"sdds-btn-text\">Open modal</span>\n    </button>\n    <div id=\"my-modal\" class=\"sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles\">\n      <div class=\"sdds-modal sdds-modal-${\n        sizeLookUp[size]\n      } sdds-modal__actions-${actions.toLowerCase()}\">\n        <div class=\"sdds-modal-header\">\n          <h5 class=\"sdds-modal-headline\">${headline}</h5>\n          <button class=\"sdds-modal-close\" aria-label=\"close\">\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n          <div class=\"sdds-modal-body\">\n            <p class=\"sdds-u-mb0 sdds-u-mt0\">${bodyText}</p>\n          </div>\n          <div class=\"sdds-modal-actions\">\n              <button class=\"sdds-btn sdds-btn-primary sdds-btn-md\">Save</button>\n              <button class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  modal = document.getElementById('my-modal');\n  buttons = modal.getElementsByTagName('button');\n  for (const button of buttons) {\n    button.addEventListener('click', () => {\n      modal.classList.replace('show', 'hide')\n    })\n  }\n\n  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {\n    modal.classList.replace('show', 'hide');\n  })\n\n  document.getElementById('modal-button').addEventListener('click', () => {\n    modal.classList.replace('hide', 'show')\n  })\n  </script>\n  `,\n  );\n\nexport const Native = Template.bind({});"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"modal-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,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;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CACzE,iBAAiB,CACf;;4CAEwC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,wBAC7D,UAAU,CAAC,IAAI,CACjB,cAAc,OAAO,CAAC,WAAW,EAAE;mEAC4B,QAAQ;;YAE/D,QAAQ;;;;;;;;;;;GAWjB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Modal',\n  parameters: {\n    layout: 'fullscreen',\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=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'md' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst ModalTemplate = ({ actions, size, headline, bodyText, showModal }) =>\n  formatHtmlPreview(\n    `\n  <button id=\"my-modal-button\" class=\"sdds-btn sdds-btn-primary\">Open modal</button>\n  <sdds-modal selector=\"#my-modal-button\" ${showModal ? 'show' : ''} id=\"my-modal\" size=\"${\n      sizeLookUp[size]\n    }\" actions=\"${actions.toLowerCase()}\">\n      <h5 class=\"sdds-modal-headline\" slot=\"sdds-modal-headline\">${headline}</h5>\n      <span slot=\"sdds-modal-body\">\n          ${bodyText}\n      </span>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-danger sdds-btn-md\">Delete</button>\n      <button slot=\"sdds-modal-actions\" data-dismiss-modal class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n  </sdds-modal>\n  <script>\n    modal = document.querySelector('sdds-modal')\n    modal.addEventListener('sddsClose', (event) => {\n      console.log(event)\n    })\n  </script>\n  `,\n  );\n\nexport const WebComponent = ModalTemplate.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover-canvas/popover-canvas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-canvas.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover-canvas/popover-canvas.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-canvas.stories.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;GACd;EACD,QAAQ,EAAE;IACR,cAAc,EAAE;MACd,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,0CAA0C;MACvD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,cAAc,EAAE,MAAM;GACvB;CACF,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;EACpD,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;;qBAaiB,eAAe,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;KAoB/C,CACF,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Popover Canvas',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n  },\n  argTypes: {\n    canvasPosition: {\n      name: 'Canvas position',\n      description: 'Sets the position of the popover canvas.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n        'Auto',\n      ],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n  },\n  args: {\n    canvasPosition: 'Auto',\n  },\n};\n\nconst ComponentPopoverCanvas = ({ canvasPosition }) => {\n  const canvasPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n    'Auto': 'auto',\n  };\n\n  return formatHtmlPreview(\n    `\n      <style>\n        /* demo-wrapper and demo-styles is for demonstration purposes only */\n        .demo-wrapper {\n          display: flex;\n          flex-wrap; nowrap;\n          align-items: center;\n        }\n      </style>\n\n      <!-- The 'referenceEl' prop can be used instead of 'selector', \n      wich might be preferable in frameworks like React -->\n      <sdds-popover-canvas\n        placement=\"${canvasPosLookup[canvasPosition]}\"\n        selector=\"#trigger\"\n        class=\"sdds-u-p2\">\n        <h2>A popover canvas!</h2>\n        <p>\n          Where you can put anything you want!\n        </p>\n        <p>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Even links!</a>\n        </p>\n      </sdds-popover-canvas>\n\n      <!-- demo-wrapper code below is for demonstration purposes only -->\n      <div class=\"demo-wrapper\">\n        <span class=\"sdds-u-mr2\">Click icon for popover canvas</span>\n        \n        <sdds-button aria-label=\"menu\" onlyIcon id=\"trigger\" type=\"ghost\" size=\"sm\">\n          <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n        </sdds-button>\n      </div>\n    `,\n  );\n};\nexport const Default = ComponentPopoverCanvas.bind({});"]}

package/dist/collection/components/popover-menu/popover-menu-icons.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu-icons.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu-icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,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;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;mBAWe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,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/Popover Menu',\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=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    menuPosition: {\n      name: 'Menu position',\n      description: 'Sets the position of the popover menu.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n        'Auto',\n      ],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n  },\n  args: {\n    menuPosition: 'Auto',\n  },\n};\n\nconst Template = ({ menuPosition }) => {\n  const menuPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n    'Auto': 'auto',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n      /* demo-wrapper styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n      }\n    </style>\n\n    <sdds-popover-menu\n      placement=\"${menuPosLookup[menuPosition]}\"\n      id=\"my-popover-menu\">\n      <ul class=\"sdds-popover-menu-wrapper\">\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 1\n          </a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 2\n          </a>\n        </li>\n        <li class=\"divider\"></li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 4\n          </a>\n        </li>\n      </ul>\n    </sdds-popover-menu>\n\n    <!-- demo-wrapper code below is for demonstration purposes only -->\n    <div class=\"demo-wrapper\">\n      <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n      \n      <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n        <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n      </sdds-button>\n    </div>\n\n    <script>\n      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n    </script>\n    `,\n  );\n};\n\nexport const WithIcons = Template.bind({});"]}

package/dist/collection/components/popover-menu/popover-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,OAAO,WAAW;;oBAIK,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE;MACvE,QAAQ,EAAE,OAAO;MACjB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,QAAQ,EAAE,CAAC;OACZ;WAAM;QACL,QAAQ,EAAE,CAAC;OACZ;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACxC,iEAAiE;MACjE,yBAAyB;MACzB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;MAC3E,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-menu',\n  styleUrl: 'popover-menu.scss',\n  shadow: true,\n})\nexport class PopoverMenu {\n  @Element() popoverMenuElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Menu should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Menu */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showMenu = () => {\n      this.show = true;\n    };\n\n    const hideMenu = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideMenu();\n      } else {\n        showMenu();\n      }\n    });\n\n    this.popoverMenuElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverMenuElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/popover-menu/popover-menu.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,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;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;mBAYe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,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/Popover Menu',\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=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    menuPosition: {\n      name: 'Menu position',\n      description: 'Sets the position of the popover menu.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n        'Auto',\n      ],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n  },\n  args: {\n    menuPosition: 'Auto',\n  },\n};\n\nconst Template = ({ menuPosition }) => {\n  const menuPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n    'Auto': 'auto',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n      /* demo-wrapper styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n      }\n    </style>\n\n    <sdds-popover-menu\n      id=\"my-popover-menu\"\n      placement=\"${menuPosLookup[menuPosition]}\">\n      <ul class=\"sdds-popover-menu-wrapper\">\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 1</a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            Menu item 2\n          </a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 3</a>\n        </li>\n        <li class=\"divider\"></li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 4</a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 5</a>\n        </li>\n      </ul>\n    </sdds-popover-menu>\n\n    <!-- demo-wrapper code below is for demonstration purposes only -->\n    <div class=\"demo-wrapper\">\n      <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n      \n      <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n        <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n      </sdds-button>\n    </div>\n\n    <script>\n      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n    </script>\n    `,\n  );\n};\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/radio-button/radio-button-component.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;;;;;;;;MAgBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;MAG1B,KAAK;;;;;;;;MAQL,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;MAE1B,KAAK;;;;;;;;;;;GAWR,CAAC,CAAC;AAEL,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/Radio Button',\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=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the radio button.',\n      controls: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({label, disabled}) =>\n  formatHtmlPreview(`\n  <style>\n  .demo-fieldset-reset { \n    border: 0;\n    margin: 0;\n    min-width: 0;\n    padding: 0; \n  }\n</style>\n\n  <fieldset class=\"demo-fieldset-reset\">\n  <sdds-radio-button \n    name=\"rb-example\"\n    value=\"option1\"\n    radio-id=\"option-1\"\n    required=false\n    ${disabled ? 'disabled' : ''}\n    checked=\"true\" \n  >\n    ${label} 1\n  </sdds-radio-button>\n\n  <sdds-radio-button\n    name=\"rb-example\"\n    value=\"option2\"\n    radio-id=\"option-2\"\n    required=false\n    ${disabled ? 'disabled' : ''} \n  >\n    ${label} 2\n  </sdds-radio-button>\n    \n  </fieldset>\n\n  <!-- Script tag with eventlistener for demo purposes. -->\n  <script>\n  document.addEventListener('sddsChange', (event) => {\n    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')\n  })\n  </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/radio-button/radio-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;QAE1B,8DAA8D;QAC9D,yCAAyC;QACzC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;WACnB,CAAC,CAAA;QACJ,CAAC,GAAI;MACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,eAAa,CACP,CACF,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        // aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/radio-button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;0CASsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAKxD,KAAK;;;;;;;;YAQL,KAAK;;;;;GAKd,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Radio Button',\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=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the radio button.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({label, disabled}) =>\n  formatHtmlPreview(`\n  <style>\n    .demo-fieldset-reset { \n      border: 0;\n      margin: 0;\n      min-width: 0;\n      padding: 0; \n    }\n  </style>\n  <fieldset class=\"demo-fieldset-reset\" ${disabled ? 'disabled' : ''}>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n        <label class=\"sdds-form-label\" for=\"rb-option-1\">\n          ${label} 1\n        </label>\n      </div>\n    </div>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n        <label class=\"sdds-form-label\" for=\"rb-option-2\">\n          ${label} 2\n        </label>\n      </div>\n    </div>\n  </fieldset>\n  `);\n\n  export const Native = Template.bind({});\n"]}

package/dist/collection/components/side-menu/side-menu.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"side-menu.stories.js","sourceRoot":"","sources":["../../../src/components/side-menu/side-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;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,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;EAC5C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;EAE1E,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;uCAyBY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;yDAMV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqG3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    collapsed: {\n      name: 'Collapsed',\n      description: 'Toggle the side menus collapsed state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showIcons: {\n      name: 'Show icons',\n      description: 'Toggle if icons for side menu options are displayed.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'collapsed', neq: true },\n    },\n  },\n  args: {\n    collapsed: false,\n    showIcons: false,\n  },\n};\n\nconst Template = ({ showIcons, collapsed }) => {\n  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    align-items: stretch;\n    height: 100vh;\n  }\n  .sdds-container {\n    overflow-y: auto;\n    max-width: 10000px;\n  }\n</style>\n\n<nav class=\"sdds-nav\">\n  <div class=\"sdds-nav__left\">\n    <button class=\"sdds-nav__mob-menu-btn\">\n      <sdds-icon name=\"burger\" size=\"20px\"></sdds-icon>\n    </button>\n    <div class=\"sdds-nav__app-name\">My application</div>\n  </div>\n  <div class=\"sdds-nav__right\">\n    <a class=\"sdds-nav__item sdds-nav__app-logo\" href=\"#\"></a>\n  </div>\n</nav>\n<div class=\"sdds-push demo-wrapper\">\n  <div class=\"sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}\">\n    <div class=\"sdds-sidebar-mheader\">\n    <button class=\"sdds-sidebar-mheader__close\">\n      <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n    </button>\n    </div>\n    <ul class=\"sdds-sidebar-nav sdds-sidebar-nav--main ${icons}\">\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n        <button class=\"sdds-sidebar-nav__item-link\">\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n          </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n          </div>\n        </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n      <button class=\"sdds-sidebar-nav__item-link\">\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n      <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n      </div>\n      </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"sdds-container\" style=\"padding-top: 30px\">\n  </div>\n</div>\n\n\n<script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');\n  for (let i = 0; i < expandableListItems.length; i++) {\n    expandableListItems[i].addEventListener('click', () => {\n      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');\n    });\n  }\n</script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-slider',\n  styleUrl: 'slider.scss',\n  shadow: false,\n})\nexport class Slider {\n  /** Text for label */\n  @Prop() label: string = '';\n\n  /** Initial value */\n  @Prop() value: string = '0';\n\n  /** Minimum value */\n  @Prop() min: string = '0';\n\n  /** Maximum value */\n  @Prop() max: string = '100';\n\n  /** Number of tick markers (tick for min- and max-value will be added automatically) */\n  @Prop() ticks: string = '0';\n\n  /** Decide to show numbers above the tick markers or not  */\n  @Prop() showTickNumbers: boolean = false;\n\n  /** Decide to show the tooltip or not */\n  @Prop() tooltip: boolean = false;\n\n  /** Sets the disabled state for the whole component  */\n  @Prop() disabled: boolean = false;\n\n  /** Sets the read only state for the whole component  */\n  @Prop() readOnly: boolean = false;\n\n  /** Decide to show the controls or not */\n  @Prop() controls: boolean = false;\n\n  /** Decide to show the input field or not */\n  @Prop() input: boolean = false;\n\n  /** Defines how much to increment/decrement the value when using controls */\n  @Prop() step: string = '1';\n\n  /** Name property (will be inherited by the native slider component) */\n  @Prop() name: string = '';\n\n  /** Sets the size of the scrubber */\n  @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n  /** Snap to the ticks grid */\n  @Prop() snap: boolean = false;\n\n  /** Id for the sliders input element, randomly generated if not specified. */\n  @Prop() sliderId: string = crypto.randomUUID();\n\n  wrapperElement: HTMLElement = null;\n\n  scrubberElement: HTMLElement = null;\n\n  scrubberInnerElement: HTMLElement = null;\n\n  dividersElement: HTMLElement = null;\n\n  trackElement: HTMLElement = null;\n\n  trackFillElement: HTMLElement = null;\n\n  minusElement: HTMLElement = null;\n\n  plusElement: HTMLElement = null;\n\n  inputElement: HTMLInputElement = null;\n\n  nativeRangeInputElement: HTMLInputElement = null;\n\n  scrubberGrabPos: object = { x: 0, y: 0 };\n\n  scrubberGrabbed: boolean = false;\n\n  scrubberLeft: number = 0;\n\n  tickValues: Array<number> = [];\n\n  disabledState: boolean = false;\n\n  readonlyState: boolean = false;\n\n  useControls: boolean = false;\n\n  useInput: boolean = false;\n\n  useSmall: boolean = false;\n\n  useSnapping: boolean = false;\n\n  supposedValueSlot: number = -1;\n\n  eventListenersAdded: boolean = false;\n\n  resizeObserverAdded: boolean = false;\n\n  /** Sends unique checkbox identifier and value when the slider has a change in value. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    value: string;\n  }>;\n\n  /** Public method to re-initialise the slider if some configuration props are changed */\n  @Method() async reset() {\n    // @TODO: maybe refactor to use watch-decorators instead\n    this.componentWillLoad();\n    this.componentDidLoad();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.stepLeft();\n        break;\n\n      case 'ArrowRight':\n        this.stepRight();\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('touchend', { target: 'window' })\n  handleTouchEnd() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(event) {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.clientX - trackRect.left;\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  @Listen('touchmove', { target: 'window' })\n  handleTouchMove(event) {\n    event.preventDefault();\n\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.touches[0].clientX - trackRect.left;\n\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  updateTrack() {\n    const trackWidth = this.getTrackWidth();\n    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n    this.trackFillElement.style.width = `${percentageFilled}%`;\n  }\n\n  dispatchChangeEvent() {\n    this.sddsChange.emit({ value: this.value });\n  }\n\n  updateValue() {\n    const trackWidth = this.getTrackWidth();\n\n    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */\n    if (this.supposedValueSlot > 0) {\n      const supposedValue = this.tickValues[this.supposedValueSlot];\n      this.value = `${supposedValue}`;\n    } else {\n      const percentage = this.scrubberLeft / trackWidth;\n      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n    }\n\n    this.dispatchChangeEvent();\n  }\n\n  updateValueForced(value) {\n    this.value = value;\n    this.dispatchChangeEvent();\n  }\n\n  getMin() {\n    return parseFloat(this.min);\n  }\n\n  getMax() {\n    return parseFloat(this.max);\n  }\n\n  constrainScrubber(x) {\n    const width = this.getTrackWidth();\n\n    if (x < 0) {\n      return 0;\n    }\n\n    if (x > width) {\n      return width;\n    }\n\n    return x;\n  }\n\n  getTrackWidth() {\n    const trackRect = this.trackElement.getBoundingClientRect();\n    return trackRect.right - trackRect.left;\n  }\n\n  calculateScrubberLeftFromValue(value) {\n    const initValue = value;\n    const trackWidth = this.getTrackWidth();\n\n    const normalizedValue = initValue - this.getMin();\n    const normalizedMax = this.getMax() - this.getMin();\n\n    const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n    this.scrubberLeft = calculatedLeft;\n\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n  }\n\n  componentDidLoad() {\n    if (!this.resizeObserverAdded) {\n      this.resizeObserverAdded = true;\n\n      const resizeObserver = new ResizeObserver((/* entries */) => {\n        this.calculateScrubberLeftFromValue(this.value);\n        this.updateTrack();\n      });\n\n      resizeObserver.observe(this.wrapperElement);\n    }\n\n    if (!this.eventListenersAdded) {\n      this.eventListenersAdded = true;\n\n      this.scrubberElement.addEventListener('mousedown', (event) => {\n        event.preventDefault();\n        this.grabScrubber(event.offsetX, event.offsetY);\n      });\n\n      this.scrubberElement.addEventListener('touchstart', (event) => {\n        const rect = this.scrubberElement.getBoundingClientRect();\n        const x = event.targetTouches[0].pageX - rect.left;\n        const y = event.targetTouches[0].pageY - rect.top;\n        this.grabScrubber(x, y);\n      });\n\n      if (this.useControls) {\n        this.minusElement.addEventListener('click', () => {\n          this.stepLeft();\n        });\n\n        this.plusElement.addEventListener('click', () => {\n          this.stepRight();\n        });\n      }\n\n      if (this.inputElement) {\n        this.inputElement.addEventListener('keydown', (event) => {\n          event.stopPropagation();\n\n          if (event.key === 'Enter') {\n            let newValue = parseInt(this.inputElement.value);\n\n            if (newValue < this.getMin()) {\n              newValue = this.getMin();\n            } else if (newValue > this.getMax()) {\n              newValue = this.getMax();\n            }\n\n            this.calculateScrubberLeftFromValue(newValue);\n            this.updateValueForced(newValue);\n            this.updateTrack();\n\n            this.inputElement.blur();\n            this.wrapperElement.focus();\n          }\n        });\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(this.value);\n    this.updateTrack();\n  }\n\n  grabScrubber(xOffset, yOffset) {\n    if (this.readonlyState) {\n      return;\n    }\n\n    this.scrubberGrabPos = {\n      x: xOffset,\n      y: yOffset,\n    };\n\n    this.scrubberGrabbed = true;\n    this.scrubberInnerElement.classList.add('pressed');\n  }\n\n  calculateInputSizeFromMax() {\n    return this.max.length;\n  }\n\n  controlsStep(delta) {\n    if (this.readonlyState || this.disabled) {\n      return;\n    }\n\n    const trackWidth = this.getTrackWidth();\n    const percentage = this.scrubberLeft / trackWidth;\n    const numTicks = parseInt(this.ticks);\n\n    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n    currentValue += delta;\n\n    if (currentValue < this.getMin()) {\n      currentValue = this.getMin();\n    } else if (currentValue > this.getMax()) {\n      currentValue = this.getMax();\n    }\n\n    this.value = `${currentValue}`;\n\n    /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n    if (this.useSnapping && numTicks > 0) {\n      const stepDir = delta > 0 ? 1 : -1;\n      this.supposedValueSlot += stepDir;\n\n      if (this.supposedValueSlot < 0) {\n        this.supposedValueSlot = 0;\n      } else if (this.supposedValueSlot > numTicks + 1) {\n        this.supposedValueSlot = numTicks + 1;\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(currentValue);\n    this.updateTrack();\n    this.updateValue();\n  }\n\n  stepLeft() {\n    this.controlsStep(-parseInt(this.step));\n  }\n\n  stepRight() {\n    this.controlsStep(parseInt(this.step));\n  }\n\n  componentWillLoad() {\n    const numTicks = parseInt(this.ticks);\n\n    if (numTicks > 0) {\n      this.tickValues = [this.getMin()];\n\n      const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n      for (let i = 1; i < numTicks + 1; i++) {\n        this.tickValues.push(this.getMin() + Math.round(step * i));\n      }\n\n      this.tickValues.push(this.getMax());\n    }\n\n    if (this.disabled !== null) {\n      this.disabledState = true;\n    } else {\n      this.disabledState = false;\n    }\n\n    if (this.readOnly !== null) {\n      this.readonlyState = true;\n    } else {\n      this.readonlyState = false;\n    }\n\n    this.useInput = false;\n    this.useControls = false;\n\n    if (this.controls !== null) {\n      this.useControls = true;\n    } else if (this.input !== null) {\n      this.useInput = true;\n    }\n\n    this.useSmall = false;\n\n    if (this.scrubberSize === 'sm') {\n      this.useSmall = true;\n    }\n\n    this.useSnapping = false;\n\n    if (this.snap !== null) {\n      this.useSnapping = true;\n    }\n\n    const min = this.getMin();\n    const max = this.getMax();\n\n    if (min > max) {\n      console.warn(\n        'min-prop must have a higher value than max-prop for the component to work correctly.',\n      );\n      this.disabledState = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n        <input\n          ref={(el) => {\n            this.nativeRangeInputElement = el as HTMLInputElement;\n          }}\n          class=\"sdds-slider-native-element\"\n          type=\"range\"\n          value={this.value}\n          name={this.name}\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n          id={this.sliderId}\n        ></input>\n\n        <div\n          class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n            this.useSmall ? 'sdds-slider-small' : ''\n          }`}\n          ref={(el) => {\n            this.wrapperElement = el as HTMLElement;\n          }}\n        >\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.min}\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.minusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-minus\"\n              >\n                <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n\n          <div class=\"sdds-slider-inner\">\n            <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n            {this.tickValues.length > 0 && (\n              <div class=\"sdds-slider__value-dividers-wrapper\">\n                <div\n                  ref={(el) => {\n                    this.dividersElement = el as HTMLElement;\n                  }}\n                  class=\"sdds-slider__value-dividers\"\n                >\n                  {this.tickValues.map((value) => (\n                    <div class=\"sdds-slider__value-divider\">\n                      {this.showTickNumbers && <span>{value}</span>}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div\n              class=\"sdds-slider__track\"\n              ref={(el) => {\n                this.trackElement = el as HTMLElement;\n              }}\n              tabindex={this.disabled ? '-1' : '0'}\n            >\n              <div\n                class=\"sdds-slider__track-fill\"\n                ref={(el) => {\n                  this.trackFillElement = el as HTMLElement;\n                }}\n              ></div>\n\n              <div\n                class=\"sdds-slider__scrubber\"\n                ref={(el) => {\n                  this.scrubberElement = el as HTMLElement;\n                }}\n              >\n                {this.tooltip !== null && (\n                  <div class=\"sdds-slider__value\">\n                    {this.value}\n                    <svg\n                      width=\"18\"\n                      height=\"14\"\n                      viewBox=\"0 0 18 14\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n                        fill=\"#37414F\"\n                      />\n                    </svg>\n                  </div>\n                )}\n\n                <div\n                  class=\"sdds-slider__scrubber-inner\"\n                  ref={(el) => {\n                    this.scrubberInnerElement = el as HTMLElement;\n                  }}\n                ></div>\n              </div>\n            </div>\n          </div>\n\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.max}\n              </div>\n              <div class=\"sdds-slider__input-field-wrapper\">\n                <input\n                  onFocus={(e) => {\n                    if (this.readonlyState) {\n                      e.preventDefault();\n                      this.inputElement.blur();\n                    }\n                  }}\n                  size={this.calculateInputSizeFromMax()}\n                  class=\"sdds-slider__input-field\"\n                  value={this.value}\n                  ref={(el) => {\n                    this.inputElement = el as HTMLInputElement;\n                  }}\n                />\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.plusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-plus\"\n              >\n                <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.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/Slider',\n  argTypes: {\n    min: {\n      name: 'Min. value',\n      description: 'Sets the minimum value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    max: {\n      name: 'Max. value',\n      description: 'Sets the maximum value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 100 },\n      },\n    },\n    initialValue: {\n      name: 'Initial value',\n      description: 'Sets the initial value for the slider.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    showLabel: {\n      name: 'Show label',\n      description: 'Toggles if the lable should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Sets the text for the label.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'showLabel', eq: true },\n    },\n    showTicks: {\n      name: 'Show ticks',\n      description: 'Toggles if ticks should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    numTicks: {\n      name: 'Number of ticks',\n      description: 'Sets the number of ticks to be displayed.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'showTicks', eq: true },\n      \n      table: {\n        defaultValue: { summary: 0 },\n      },\n    },\n    showTickNumbers: {\n      name: 'Show tick numbers',\n      description: 'Toggles if tick numbers should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showTicks', eq: true },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    snapToTicks: {\n      name: 'Snap to ticks',\n      description: 'Snaps the scrubber to the closest tick when dragging.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showTicks', eq: true },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    showTooltip: {\n      name: 'Show tooltip',\n      description: 'Toggles if the tooltip should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    showControls: {\n      name: 'Show controls (not compatible with input field)',\n      description: 'Toggles if controls should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    step: {\n      name: 'Step value',\n      description: 'Sets the value to increment/decrement with when using controls.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'showControls', eq: true },\n      table: {\n        defaultValue: { summary: 1 },\n      },\n    },\n    showInput: {\n      name: 'Show value input field (not compatible with controls)',\n      description: 'Toggles if the values input field should be shown or hidden.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'showControls', eq: false },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    scrubberSize: {\n      name: 'Scrubber size',\n      description: 'Switches between the large and small version of the scrubber.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    readonly: {\n      name: 'Read Only',\n      description: 'Puts the control in a 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 slider.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\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=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  args: {\n    min: '0',\n    max: '100',\n    initialValue: '50',\n    showLabel: false,\n    labelText: 'Label',\n    showTicks: false,\n    numTicks: '3',\n    showTickNumbers: false,\n    snapToTicks: false,\n    showTooltip: true,\n    showControls: false,\n    step: '1',\n    showInput: false,\n    scrubberSize: 'Large',\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Small': 'sm',\n};\n\nconst Template = ({\n  min,\n  max,\n  initialValue,\n  showLabel,\n  labelText,\n  showTicks,\n  numTicks,\n  showTickNumbers,\n  snapToTicks,\n  showTooltip,\n  showControls,\n  step,\n  showInput,\n  scrubberSize,\n  readonly,\n  disabled,\n}) =>\n  formatHtmlPreview(`\n    <sdds-slider id=\"sdds-slider\"\n      min=\"${min}\" \n      max=\"${max}\" \n      ${showControls && step ? `step=\"${step}\"` : ''}\n      value=\"${initialValue}\" \n      ${showTicks ? `ticks=\"${numTicks}\"` : ''} \n      ${showTickNumbers ? 'show-tick-numbers' : ''} \n      ${snapToTicks ? 'snap' : ''} \n      ${showLabel ? `label=\"${labelText}\"` : ''} \n      ${showTooltip ? 'tooltip' : ''} \n      ${showControls ? 'controls' : ''} \n      ${showInput ? 'input' : ''} \n      ${disabled ? 'disabled' : ''} \n      scrubber-size=\"${sizeLookUp[scrubberSize]}\"\n      ${readonly ? 'read-only' : ''} \n      >\n\n    </sdds-slider>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n    slider = document.querySelectorAll('sdds-slider')[0]\n\n    slider.removeEventListener('sddsChange', null)\n    slider.addEventListener('sddsChange', (event) => {\n      console.log('Slider changed, value:', event.detail.value);\n    });\n\n    </script>\n  `);\n\nexport const Default = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;;gBAEwB,IAAI;mBAGH,UAAU;;EAErD,MAAM;IACJ,OAAO,CACL,wBAAe,WAAW,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS;MAC3D,WAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,IAAI,EAAE,iBAAc,MAAM;QAC9E,cAAQ,KAAK,EAAE,2CAA2C,IAAI,CAAC,OAAO,EAAE,GAAI,CACxE,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: false,\n})\nexport class Spinner {\n  /** Size of spinner */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Variant of spinner */\n  @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n  render() {\n    return (\n      <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n        <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n          <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n        </svg>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.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,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;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;OACtC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;EACrC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;EACzF,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;EAErE,OAAO,iBAAiB,CACtB;;YAEQ,UAAU,CAAC,IAAI,CAAC;eACb,aAAa,CAAC,OAAO,CAAC;;GAElC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,UAAU;CACpB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Spinner',\n  parameters: {\n    layout: 'centered', // Center the component horizontally and vertically in the Canvas\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=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    variant: {\n      name: 'Variant',\n      description: 'Switches the variant of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Standard', 'Inverted'],\n      table: {\n        defaultValue: { summary: 'standard' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n  },\n  args: {\n    variant: 'Standard',\n    size: 'Large',\n  },\n};\n\nconst Template = ({ size, variant }) => {\n  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };\n  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };\n\n  return formatHtmlPreview(\n    `\n  <sdds-spinner \n    size=\"${sizeLookup[size]}\"  \n    variant=\"${variantLookup[variant]}\">\n  </sdds-spinner>\n  `,\n  );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n\nexport const Inverted = Template.bind({});\nInverted.args = {\n  variant: 'Inverted',\n};\n"]}

package/dist/collection/components/stepper/sdds-stepper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/sdds-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO5D,MAAM,OAAO,WAAW;;qBAEyB,YAAY;yBAGhB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;iBAEV,CAAC;;EAM1B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;MAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAsC,CAAC;MACpF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC7B,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;UACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/B;MACH,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC5D;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,+BAA+B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;QAExF,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** The direction the children are layed out. */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  @State() width: number = 0;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsStepperItemElement>;\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.direction === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  componentDidLoad() {\n    if (this.labelPosition === 'below') {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n      this.children.forEach((item) => {\n        if (item.offsetWidth > this.width) {\n          this.width = item.offsetWidth;\n        }\n      });\n      this.children.forEach((item) => item.setWidth(this.width));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ol\n          role=\"list\"\n          class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,WAAW;;qBAEM,EAAE;iBAGgC,UAAU;;;;;;;EAgBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,CAAC;EAED,2GAA2G;EAE3G,KAAK,CAAC,QAAQ,CAAC,KAAK;IAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;EACrC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACnC,EAAE;QAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CACpD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAC/B,CACd,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,uBAAuB;UAChC,eAAa,CACT,CACP,CACG;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,SAAS,CAAO,CACvE,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Label text for the stepper-item. */\n  @Prop() labelText: string = '';\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: string;\n\n  @State() iconSize: string;\n\n  @State() direction: string;\n\n  @State() labelPosition: string;\n\n  @Element() el: HTMLElement;\n\n  stepperEl: HTMLSddsStepperElement;\n\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.direction = this.stepperEl.direction;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n  }\n\n  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n  @Method()\n  async setWidth(width) {\n    this.el.style.width = `${width}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              <div class=\"number sdds-detail-05\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}