@scania/tegel 0.0.6 → 0.0.8

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

@@ -1,266 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
-const SearchbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
-    <nav class='sdds-nav'>
-        <div class='sdds-nav__left'>
-          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
-          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
-              <span id='sdds-nav__mob-menu-icon'>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
-              </span>
-          </button>
-          <div class='sdds-nav__app-name'>${siteName}</div>
-        </div>
-
-        <div class='sdds-nav__center sdds-nav__center-withsearch'>
-        <ul class='sdds-nav__inline-menu'>
-
-        <li class='sdds-nav__item'>
-            <a class='sdds-nav__item-core' href='#'>
-                <span class='span'>Item 1</span>
-            </a>
-        </li>
-
-        <li class='sdds-nav__item sdds-nav__item--active'>
-            <a class='sdds-nav__item-core ' href='#'>
-                <span class='sdds-nav__item-core-text'>Item 2</span>
-            </a>
-        </li>
-
-        <li class='sdds-nav__item sdds-nav__dropdown'>
-        <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
-            <span class='sdds-nav__item-core-text'>Item 3</span>
-            <span class='sdds-nav__dropdown-icon'>
-              <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
-            </span>
-        </button>
-        <ul class='sdds-nav__dropdown-menu'>
-            <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-            <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>
-            <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>
-        </ul>
-        </li>
-      </ul>
-      <div class="sdds-nav__app-searchbar-container">
-      <div class="sdds-nav__app-searchbar">
-        <div class="sdds-nav__searchbar-input-expanded">
-          <ul class='sdds-nav__searchbar-menu'>
-              <li class='sdds-nav__searchbar-item--top' tabindex="0">
-                    <p class='sdds-nav__searchbar-all-results'>
-                    <sdds-icon name="search" class="sdds-nav__app-searchbar-results-mgl-svg"></sdds-icon>
-                    See all search results <span>(press enter)</span>
-                    </p>
-              </li>
-            <ul class='sdds-nav__searchbar-results--category'>
-              <p class='sdds-nav__searchbar-results-category-title'>USERS</p>
-            <li class='sdds-nav__searchbar-results-item'>
-              <a href='' class='sdds-nav__searchbar-results-item-core'>User – Eric Mattsson – IXCD Visual designer </a>
-              <button class="sdds-nav__app-searchbar-results-x-btn">
-                <div>
-                  <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
-                </div>
-              </button>
-            </li>
-            <li class='sdds-nav__searchbar-results-item'>
-              <a href='' class='sdds-nav__searchbar-results-item-core'>User– Eric Mattsson – IXCD Visual designer </a>
-              <button class="sdds-nav__app-searchbar-results-x-btn">
-              <div>
-              <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
-            </div>              </button>
-              </li>
-            </ul>
-            <ul class='sdds-nav__searchbar-results--category'>
-              <p class='sdds-nav__searchbar-results-category-title'>TEAMS</p>
-
-            <li class='sdds-nav__searchbar-results-item'>
-              <a href='' class='sdds-nav__searchbar-results-item-core'>Team– Eric Mattsson – IXCD Visual designer </a>
-              <button class="sdds-nav__app-searchbar-results-x-btn">
-              <div>
-              <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
-            </div>             </button>
-              </li>
-          </ul>
-        </ul>
-        <input class="sdds-nav__searchbar-input" type="text" placeholder="Search">
-          <button class="sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-x-btn" onclick="toggleSearchbar()">
-            <sdds-icon class="sdds-nav__app-searchbar-btn-svg" name="cross" size="20px"></sdds-icon> 
-          </button>
-
-      </div>
-       <button class="sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-mgl-btn" onclick="toggleSearchbar()">
-          <sdds-icon class="sdds-nav__app-searchbar-btn-svg" name="search" size="20px"></sdds-icon> 
-      </button>
-    </div>
-  </div>
-    <ul class='sdds-nav__toolbar-menu'>
-
-        <li class='sdds-nav__item sdds-nav__avatar'>
-            <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
-                <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
-                <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
-                    <span class='sdds-nav__avatar-title'>Employee Name</span>
-                    <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                </span>
-            </button>
-
-            <ul class='sdds-nav__avatar-menu'>
-                <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
-                    <span class='sdds-nav__avatar-info'>
-                        <span class='sdds-nav__avatar-title'>Employee Name</span>
-                        <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                    </span>
-                </li>
-                <li class='sdds-nav__avatar-item'>
-                    <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
-                </li>
-                <li class='sdds-nav__avatar-item'>
-                    <button class='sdds-nav__avatar-item-core'>Logout</button>
-                </li>
-            </ul>
-        </li>
-        </ul>
-        </div>
-        <div class='sdds-nav__right'>
-          <div class='sdds-nav__item sdds-nav__app-launcher'>
-              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
-                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
-              </button>
-              <ul class='sdds-nav__app-launcher-menu'>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-              </ul>
-          </div>
-          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
-        </div>
-    </nav>
-
-    <script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-    toggleAvatarMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleMobileMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-
-    toggleInlineDropdown = () => {
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    toggleAppLauncher = () => {
-      document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-      document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-
-    closeDropdownsFromOverlay = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    toggleSearchbar = () => {
-      document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__searchbar--opened");
-      document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-  }
-    </script>
-    `);
-export const SearchbarMenu = SearchbarMenuTemplate.bind({});
-//# sourceMappingURL=header-search.stories.js.map

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,0BAA0B;EACjC,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/Native',\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

@@ -1,207 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
-const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
-    <nav class='sdds-nav'>
-        <div class='sdds-nav__left'>
-          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
-          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
-              <span id='sdds-nav__mob-menu-icon'>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
-              </span>
-          </button>
-          <div class='sdds-nav__app-name'>${siteName}</div>
-        </div>
-
-        <div class='sdds-nav__center'>
-          <ul class='sdds-nav__inline-menu'>
-
-              <li class='sdds-nav__item'>
-                  <a class='sdds-nav__item-core' href='#'>
-                      <span class='span'>Item 1</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__item--active'>
-                  <a class='sdds-nav__item-core ' href='#'>
-                      <span class='sdds-nav__item-core-text'>Item 2</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__dropdown'>
-              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
-                  <span class='sdds-nav__item-core-text'>Item 3</span>
-                  <span class='sdds-nav__dropdown-icon'>
-                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
-                  </span>
-              </button>
-              <ul class='sdds-nav__dropdown-menu'>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
-                  <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>
-              </ul>
-              </li>
-          </ul>
-
-          <ul class='sdds-nav__toolbar-menu'>
-
-              <li class='sdds-nav__item sdds-nav__avatar' >
-                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
-                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
-                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
-                          <span class='sdds-nav__avatar-title'>Employee Name</span>
-                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                      </span>
-                  </button>
-
-                  <ul class='sdds-nav__avatar-menu'>
-                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
-                          <span class='sdds-nav__avatar-info'>
-                              <span class='sdds-nav__avatar-title'>Employee Name</span>
-                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                          </span>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>
-                      </li>
-                  </ul>
-              </li>
-          </ul>
-        </div>
-
-        <div class='sdds-nav__right'>
-          <div class='sdds-nav__item sdds-nav__app-launcher'>
-              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
-                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
-              </button>
-              <ul class='sdds-nav__app-launcher-menu'>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-              </ul>
-          </div>
-          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
-        </div>
-    </nav>
-
-    <script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-    toggleAvatarMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleMobileMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleAppLauncher = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleInlineDropdown = () => {
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-    closeDropdownsFromOverlay = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    </script>
-    `);
-export const ToolbarMenu = ToolbarMenuTemplate.bind({});
-//# sourceMappingURL=header-toolbar.stories.js.map

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,0BAA0B;EACjC,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/Native',\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/header/webcomponent/core-header-item/core-header-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-header-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/core-header-item/core-header-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,cAAc;EACzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,MAAM;QACf,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-core-header-item',\n  styleUrl: 'core-header-item.scss',\n  shadow: true,\n})\nexport class CoreHeaderItem {\n  render() {\n    return (\n      <Host>\n        <div class=\"item\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-brand-symbol.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,iBAAiB;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH;QACE,yBAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-brand-symbol',\n  styleUrl: 'header-brand-symbol.scss',\n  shadow: true,\n})\nexport class HeaderBrandSymbol {\n  @Element() host: HTMLElement;\n\n  /** The href for the logo link. */\n  @Prop() linkHref: string = 'https://www.scania.com';\n\n  render() {\n    const inheritedLinkProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <sdds-header-item>\n          <a {...inheritedLinkProps} href={this.linkHref}></a>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header-component.js","sourceRoot":"","sources":["../../../../src/components/header/webcomponent/header-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAOtF,MAAM,OAAO,UAAU;EAKrB;IACE,MAAM,QAAQ,GAAqB,CAAC,aAAa,EAAE,EAAE;MACnD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SAC1C;MACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;EACjD,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9B,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE;MAChC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,uBAAuB,CAAC,UAAU,CAAC,CAAC;EACtC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,MAAM,aAAa,qBACd,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,WAAW,GAAQ;MAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ;MAC1B,2BAAS,aAAa;QACpB,UAAI,KAAK,EAAC,4BAA4B;UACpC,eAAa;UACb,UAAI,KAAK,EAAC,2BAA2B,GAAM;UAC3C,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}