@scania/tegel 0.0.6 → 0.0.7

package/dist/collection/foundations-stories/grid/grid.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/grid/grid.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Grid',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  args: {\n    fluidContainer: false,\n    padding: true,\n  },\n  argTypes: {\n    fluidContainer: {\n      name: 'Fluid container',\n      description: 'Set container to fluid or not',\n      control: {\n        type: 'boolean',\n      },\n    },\n    padding: {\n      name: 'Fluid container',\n      description: 'Toggle padding on columns',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n};\n\n// Styling for grid templates\nconst style = formatHtmlPreview(`\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-container,\n    .sdds-container-fluid {\n      background-color: #ff00009e;\n      color: black;\n      outline: 1px solid red;\n    }\n\n    .sdds-row > div {\n      outline: 1px solid #ef1919;\n      background: #fbc5c5;\n      min-height: 50px;\n    }\n\n    .sdds-sidebar {\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .inside-demo {\n      background: #ef9191;\n      height: 100%;\n      word-break: break-word;\n    }\n\n    .container-demo {\n      margin-top: 16px;\n    }\n\n  </style>`);\n\nconst GridTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n  <h4>Grid</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">12</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-11 sdds-col-xxlg-11 sdds-col-xlg-11 sdds-col-lg-11 sdds-col-md-11 sdds-col-sm-11 sdds-col-xs-11\">\n        <div class=\"inside-demo\">11</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-10 sdds-col-xxlg-10 sdds-col-xlg-10 sdds-col-lg-10 sdds-col-md-10 sdds-col-sm-10 sdds-col-xs-10\">\n        <div class=\"inside-demo\">10</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-9 sdds-col-xxlg-9 sdds-col-xlg-9 sdds-col-lg-9 sdds-col-md-9 sdds-col-sm-9 sdds-col-xs-9\">\n        <div class=\"inside-demo\">9</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n        <div class=\"inside-demo\">8</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-7 sdds-col-xxlg-7 sdds-col-xlg-7 sdds-col-lg-7 sdds-col-md-7 sdds-col-sm-7 sdds-col-xs-7\">\n        <div class=\"inside-demo\">7</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n        <div class=\"inside-demo\">6</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-5 sdds-col-xxlg-5 sdds-col-xlg-5 sdds-col-lg-5 sdds-col-md-5 sdds-col-sm-5 sdds-col-xs-5\">\n        <div class=\"inside-demo\">5</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-4 sdds-col-xxlg-4 sdds-col-xlg-4 sdds-col-lg-4 sdds-col-md-4 sdds-col-sm-4 sdds-col-xs-4\">\n        <div class=\"inside-demo\">4</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-3 sdds-col-xxlg-3 sdds-col-xlg-3 sdds-col-lg-3 sdds-col-md-3 sdds-col-sm-3 sdds-col-xs-3\">\n        <div class=\"inside-demo\">3</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-2 sdds-col-xxlg-2 sdds-col-xlg-2 sdds-col-lg-2 sdds-col-md-2 sdds-col-sm-2 sdds-col-xs-2\">\n        <div class=\"inside-demo\">2</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-1 sdds-col-xxlg-1 sdds-col-xlg-1 sdds-col-lg-1 sdds-col-md-1 sdds-col-sm-1 sdds-col-xs-1\">\n        <div class=\"inside-demo\">1</div>\n      </div>\n    </div>\n  </div>\n  `);\n\n// Controls for the grid\nexport const Default = GridTemplate.bind({});\n\nconst GridAutoColTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Auto columns</h4>\n  <h5>Container 1</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 2</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 3</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Auto = GridAutoColTemplate.bind({});\n\nconst GridPushTemplate = ({ fluidContainer, collapse, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Push</h4>\n\n  <div class=\"sdds-push\">\n    <div class=\"sdds-sidebar ${collapse ? 'sdds-sidebar-collapse' : ''}\">\n    </div>\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Push = GridPushTemplate.bind({});\n\nPush.args = {\n  collapse: false,\n};\n\nconst GridOffsetTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Offset</h4>\n\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-2 sdds-col-max-2-offset sdds-col-xxlg-2 sdds-col-xxlg-2-offset sdds-col-xlg-2 sdds-col-xlg-2-offset sdds-col-lg-2 sdds-col-lg-2-offset sdds-col-md-2 sdds-col-md-2-offset sdds-col-sm-2 sdds-col-sm-2-offset sdds-col-xs-2 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Offset = GridOffsetTemplate.bind({});\n\nconst GridNoPaddingTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid no-padding</h4>\n\n    <div class=\"${\n      fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'\n    } demo-example-cols\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-no-padding sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"sdds-no-padding sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const NoPadding = GridNoPaddingTemplate.bind({});\n\nNoPadding.args = {\n  padding: true,\n};\n\nconst GridFluidTemplate = ({ fluidContainer = true, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid fluid</h4>\n\n    <div class=\"sdds-container-fluid ${padding === false ? 'sdds-no-padding' : ''}\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container fluid</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"${fluidContainer ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  } container-demo\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Fluid = GridFluidTemplate.bind({});\n\nconst GridNestedTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n ${style}\n\n <h4>Nested</h4>\n\n <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n   <div class=\"sdds-row\">\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n       <div class=\"inside-demo\">12</div>\n     </div>\n   </div>\n   <div class=\"sdds-row\">\n     <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n      <div class=\"sdds-row\">\n        <div class=\"${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n        <div class=\" ${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n      </div>\n     </div>\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n       <div class=\"inside-demo\">6</div>\n     </div>\n   </div>\n  </div>\n `);\n\nexport const Nested = GridNestedTemplate.bind({});\n\nconst GridHideShow = ({ fluidContainer }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Hide/show element</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xlg sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Hide on xlg and wider</div>\n      </div>\n    </div>\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xs sdds-show-md sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Show on md and wider</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const ShowHide = GridHideShow.bind({});\n"]}

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-element.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-element.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-spacing-element-demo-box {\n      background-color: var(--sdds-red-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n      text-align: center;\n    }\n\n    th:last-child {\n        text-align: left;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <h4>Spacing Element</h4>\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>2px</td>\n      <td><code>$spacing-element-2</code></td>\n      <td><code>.sdds-spacing-element-2</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)\"></span></td>\n    </tr>\n    <tr>\n      <td>4px</td>\n      <td><code>$spacing-element-4</code></td>\n      <td><code>.sdds-spacing-element-4</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)\"></span></td>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-element-8</code></td>\n      <td><code>.sdds-spacing-element-8</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>12px</td>\n      <td><code>$spacing-element-12</code></td>\n      <td><code>.sdds-spacing-element-12</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-element-16</code></td>\n      <td><code>.sdds-spacing-element-16</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>20px</td>\n      <td><code>$spacing-element-20</code></td>\n      <td><code>.sdds-spacing-element-20</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-element-24</code></td>\n      <td><code>.sdds-spacing-element-24</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-element-32</code></td>\n      <td><code>.sdds-spacing-element-32</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>40px</td>\n      <td><code>$spacing-element-40</code></td>\n      <td><code>.sdds-spacing-element-40</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-element-48</code></td>\n      <td><code>.sdds-spacing-element-48</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingElement = Template.bind({});\nSpacingElement.args = {};\n"]}

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-layout.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-layout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n   /* Demo code for presentation purposes */\n    .demo-wrapper {\n      background-color: var(--sdds-blue-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-layout-8</code></td>\n      <td><code>.sdds-spacing-layout-8</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-layout-16</code></td>\n      <td><code>.sdds-spacing-layout-16</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-layout-24</code></td>\n      <td><code>.sdds-spacing-layout-24</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-layout-32</code></td>\n      <td><code>.sdds-spacing-layout-32</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-layout-48</code></td>\n      <td><code>.sdds-spacing-layout-48</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);\"></span></td>\n    </tr>\n    <tr>\n      <td>64px</td>\n      <td><code>$spacing-layout-64</code></td>\n      <td><code>.sdds-spacing-layout-64</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);\"></span></td>\n    </tr>\n    <tr>\n      <td>72px</td>\n      <td><code>$spacing-layout-72</code></td>\n      <td><code>.sdds-spacing-layout-72</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);\"></span></td>\n    </tr>\n    <tr>\n      <td>96px</td>\n      <td><code>$spacing-layout-96</code></td>\n      <td><code>.sdds-spacing-layout-96</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);\"></span></td>\n    </tr>\n    <tr>\n      <td>128px</td>\n      <td><code>$spacing-layout-128</code></td>\n      <td><code>.sdds-spacing-layout-128</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);\"></span></td>\n    </tr>\n    <tr>\n      <td>160px</td>\n      <td><code>$spacing-layout-160</code></td>\n      <td><code>.sdds-spacing-layout-160</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingLayout = Template.bind({});\nSpacingLayout.args = {};\n"]}

package/dist/collection/foundations-stories/typography/typography-body.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-body.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-body.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;GAOD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-body-01'>\n  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.\n  </p>\n  <p class='sdds-body-02'>\n  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.\n  </p>\n  `,\n  );\n\nexport const Body = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-detail.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-detail.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-detail.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;GAQD,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: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>\n  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>\n  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>\n  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>\n  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>\n  `,\n  );\n\nexport const Detail = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-headline.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-headline.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-headline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8CAA8C;MAC3D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE;KAChE;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,iBAAiB,CACf;;;;;;;;;0BASsB,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BACvC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BAEvD,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;;GAEL,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,IAAI,EAAE,YAAY;CACnB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'The type of headline. Functional/Expressive.',\n      control: {\n        type: 'radio',\n      },\n      options: { Functional: 'functional', Expressive: 'expressive' },\n    },\n  },\n};\n\nconst Template = ({ type }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Demo code for presentation purposes */\n    .demo-wrapper h1 {\n        margin: 0;\n    }\n    </style>\n\n    <div class=\"demo-wrapper\">\n        <h1 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-01\">Headline</h1>\n        <h2 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-02\">Headline</h2>\n        <h3 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-03\">A headline for page layouts</h3>\n        <h4 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-04\">A headline for page layouts</h4>\n        <h5 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-05\">A sub headline, which is most commonly paired with body-01</h5>\n        <h6 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-06\">A sub headline, which is most commonly paired with body-02</h6>\n        <h7 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-07\">A sub headline, which is most commonly paired with detail-02 </h7>\n    </div>\n  `,\n  );\n\nexport const Headlines = Template.bind({});\nHeadlines.args = {\n  type: 'functional',\n};\n"]}

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-paragraph.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-paragraph.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;GAGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>\n        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>\n  `,\n  );\n\nexport const Paragraph = Template.bind({});\n"]}

package/dist/collection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-basic.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-basic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,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,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\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  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <sdds-header>\n    <sdds-header-title>\n      Example: default\n    </sdds-header-title>\n    <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n    </sdds-header-launcher>\n  \n    <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n    </sdds-header-brand-symbol>\n\n  </sdds-header>\n  \n  <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>\n  </main>\n  `,\n  );\n\nexport const Basic = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-fewitems.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-fewitems.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-fewitems.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,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,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ND,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\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  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n    <script>\n      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n      window.demoSideMenu = document.querySelector('#demo-side-menu');\n      window.demoHamburger = document.querySelector('#demo-hamburger');\n    </script>\n    <style>\n\n      /* Note: to make the layout fill the entire viewport height you'll need to set the */\n      /* height of the parent element and all of its ancestors to 100%. */\n      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */\n      .demo-layout {\n        min-height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .demo-main {\n        flex-grow: 1;\n      }\n    \n      /* If an extra button in the header is required except on \n      very narrow screens, you can use classes like these: */\n      .demo-hide {\n        display: none;\n      }\n\n      @media (min-width: 375px) {\n        .demo-xs-hide {\n          display: none;\n        }\n        .demo-xs-show {\n          display: block;\n        }\n      }\n    </style>\n\n\n    <div class=\"demo-layout\">\n      <sdds-header>\n        <!-- TODO setting aria-expanded=\"true\" on the hamburger button does not work, as it is not\n          copied to the button element -->\n        <sdds-header-hamburger id=\"demo-hamburger\" onclick=\"demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);\" aria-label=\"Open application drawer\" aria-haspopup=\"true\" aria-expanded=\"false\"></sdds-header-hamburger>\n\n        <sdds-header-title>\n          Example: Few items\n        </sdds-header-title>\n\n        <sdds-header-item>\n          <button onclick=\"alert('About us clicked');\">\n            About us\n          </button>\n        </sdds-header-item>\n\n        <sdds-header-item>\n          <a href=\"https://www.google.se\">\n            Truck types\n          </a>\n        </sdds-header-item>\n\n        <sdds-header-dropdown>\n          <span slot=\"button-label\">Wheel types</span>\n          <sdds-header-dropdown-list>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://tegel.scania.com\">Hub-centric wheel</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://tegel.scania.com\">Rim wheel</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-item slot=\"end\">\n          <button onclick=\"alert('Calendar button clicked')\">\n            <sdds-icon name=\"calendar\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n\n        <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n          <sdds-header-launcher-grid-title>Operations and Logistics</sdds-header-launcher-grid-title>\n          <sdds-header-launcher-grid>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaCare\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaInsight\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"fuel_gauge\" size=\"32\"></sdds-icon>\n                ScaniaConnect\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaPlan\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaTrack\n              </a>\n            </sdds-header-launcher-grid-item>\n          </sdds-header-launcher-grid>\n          <sdds-header-launcher-grid-title>Customer Service</sdds-header-launcher-grid-title>\n          <sdds-header-launcher-grid>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaNet\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaRisk\n              </a>\n            </sdds-header-launcher-grid-item>\n          </sdds-header-launcher-grid>\n\n        </sdds-header-launcher>\n\n        <sdds-header-dropdown slot=\"end\" placement=\"end\" no-dropdown-icon class=\"demo-hide demo-xs-show\" selected>\n          <img slot=\"button-icon\" src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" alt=\"User menu.\"/>\n          <sdds-header-dropdown-list type=\"lg\">\n            <sdds-header-dropdown-list-user\n              heading=\"Name Nameson\"\n              subheading=\"Company name\">\n            </sdds-header-dropdown-list-user>\n            <sdds-header-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-brand-symbol slot=\"end\" href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n        </sdds-header-brand-symbol>\n\n      </sdds-header>\n\n\n      <sdds-side-menu id=\"demo-side-menu\" aria-label=\"Side menu\">\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"info\" size=\"24\"></sdds-icon>\n            About\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item>\n          <a href=\"https://www.scania.com\">\n            <sdds-icon name=\"truck\" size=\"24\"></sdds-icon>\n            Truck types\n          </a>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-dropdown>\n          <sdds-icon slot=\"button-icon\" name=\"tool\" size=\"24\"></sdds-icon>\n          <span slot=\"button-label\">\n            Wheel types\n          </span>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Hub-centric wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Rim wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n        <sdds-side-menu-item slot=\"end\" onclick=\"alert('Calendar button clicked')\">\n          <button>\n            <sdds-icon name=\"calendar\" size=\"24px\"></sdds-icon>\n            Calendar\n          </button>\n        </sdds-side-menu-item>\n        \n        <sdds-side-menu-dropdown slot=\"end\" class=\"demo-xs-hide\" selected>\n          <sdds-side-menu-user \n            slot=\"button-label\" \n            heading=\"Name Namesson\" \n            subheading=\"Company name\" \n            img-src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" \n            img-alt=\"\">\n          </sdds-side-menu-user>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://design.scania.com\">My Instructions</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Task List</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n      \n\n      </sdds-side-menu>\n\n      <main class=\"demo-main sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If the header contains navigational items like links or buttons, a side menu is needed for small screens.</p>\n        <br/>\n        <p><i>Tip: Resize the window to see the buttons move in to the side menu drawer.</i></p>\n        <p><i>Note: This example has an alterate launcher menu with a grid layout.</i></p>\n      </main>\n    </div>\n  `,\n  );\n\nexport const FewNavigationItems = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-manyitems.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-manyitems.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-manyitems.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,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,eAAe;MACrB,WAAW,EAAE,2CAA2C;MACxD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,kqPAAkqP;GAC9qP;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACjC,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAoMM,SAAS;;;;GAIhB,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\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    dummyHtml: {\n      name: 'Dummy content',\n      description: 'Some html to try out in the main section.',\n      control: {\n        type: 'text',\n      },\n      table: {\n        defaultValue: { summary: null },\n      },\n    },\n  },\n  args: {\n    dummyHtml: `<br /><p style=\"color:#f3f3f3\">\"I have seen the will of the deceased wife,\" said he. \"To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need.\"</p><p style=\"color:#f3f3f3\">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style=\"color:#f3f3f3\">\"Look there!\" said he.</p><p style=\"color:#f3f3f3\">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style=\"color:#f3f3f3\">\"Stoke Moran?\" said he.</p><p style=\"color:#f3f3f3\">\"Yes, sir, that be the house of Dr. Grimesby Roylott,\" remarked the driver.</p><p style=\"color:#f3f3f3\">\"There is some building going on there,\" said Holmes; \"that is where we are going.\"</p><p style=\"color:#f3f3f3\">\"There's the village,\" said the driver, pointing to a cluster of roofs some distance to the left; \"but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking.\"</p><p style=\"color:#f3f3f3\">\"And the lady, I fancy, is Miss Stoner,\" observed Holmes, shading his eyes. \"Yes, I think we had better do as you suggest.\"</p><p style=\"color:#f3f3f3\">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style=\"color:#f3f3f3\">\"I thought it as well,\" said Holmes as we climbed the stile, \"that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word.\"</p><p style=\"color:#f3f3f3\">Our client of the morning had hurried forward to meet us with a face which spoke her joy. \"I have been waiting so eagerly for you,\" she cried, shaking hands with us warmly. \"All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening.\"</p><p style=\"color:#f3f3f3\">\"We have had the pleasure of making the doctor's acquaintance,\" said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p><p style=\"color:#f3f3f3\">\"I have seen the will of the deceased wife,\" said he. \"To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need.\"</p><p style=\"color:#f3f3f3\">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style=\"color:#f3f3f3\">\"Look there!\" said he.</p><p style=\"color:#f3f3f3\">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style=\"color:#f3f3f3\">\"Stoke Moran?\" said he.</p><p style=\"color:#f3f3f3\">\"Yes, sir, that be the house of Dr. Grimesby Roylott,\" remarked the driver.</p><p style=\"color:#f3f3f3\">\"There is some building going on there,\" said Holmes; \"that is where we are going.\"</p><p style=\"color:#f3f3f3\">\"There's the village,\" said the driver, pointing to a cluster of roofs some distance to the left; \"but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking.\"</p><p style=\"color:#f3f3f3\">\"And the lady, I fancy, is Miss Stoner,\" observed Holmes, shading his eyes. \"Yes, I think we had better do as you suggest.\"</p><p style=\"color:#f3f3f3\">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style=\"color:#f3f3f3\">\"I thought it as well,\" said Holmes as we climbed the stile, \"that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word.\"</p><p style=\"color:#f3f3f3\">Our client of the morning had hurried forward to meet us with a face which spoke her joy. \"I have been waiting so eagerly for you,\" she cried, shaking hands with us warmly. \"All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening.\"</p><p style=\"color:#f3f3f3\">\"We have had the pleasure of making the doctor's acquaintance,\" said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p>`,\n  },\n};\n\nconst Template = ({ dummyHtml }) =>\n  formatHtmlPreview(\n    `\n    <script>\n      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n      window.demoSideMenu = document.querySelector('#demo-side-menu');\n      window.demoHamburger = document.querySelector('#demo-hamburger');\n    </script>\n    <style>\n      :root {\n        --app-bar-height: 64px;\n      }\n      /* Note: to make the layout fill the entire viewport height you'll need to set the */\n      /* height of the parent element and all of its ancestors to 100%. */\n      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */\n      .demo-layout {\n        min-height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n      .demo-header {\n        position: sticky;\n        top: 0;\n      }\n      .demo-wrap-side-menu-and-main {\n        display: flex;\n        flex-grow: 1;\n      }\n\n      /* The lg breakpoint is used here to match the breakpoint used in the header & sidemenu. */\n      @media (min-width: 992px) {\n        #demo-side-menu {\n          /* We suggest you attach the persistent side menu to your layout like this: */\n          height: calc(100vh - var(--app-bar-height));\n          position: sticky;\n          top: var(--app-bar-height);\n          left: 0px;\n        }\n      }\n\n      /* If an extra button in the header is required except on */\n      /* very narrow screens, you can use classes like these: */\n      .demo-hide {\n        display: none;\n      }\n\n      @media (min-width: 375px) {\n        .demo-xs-hide {\n          display: none;\n        }\n        .demo-xs-show {\n          display: block;\n        }\n      }\n    </style>\n\n  <div class=\"demo-layout\">\n    <sdds-header class=\"demo-header\">\n      <sdds-header-hamburger onclick=\"demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);\" aria-label=\"Open application drawer\" aria-haspopup=\"true\" aria-expanded=\"false\"></sdds-header-hamburger>\n\n      <sdds-header-title>\n        Example: Many items\n      </sdds-header-title>\n\n      <sdds-header-item slot=\"end\">\n        <button onclick=\"alert('clicked')\">\n          <sdds-icon name=\"calendar\" size=\"20px\"></sdds-icon>\n        </button>\n      </sdds-header-item>\n\n      <sdds-header-launcher slot=\"end\">\n        <sdds-header-launcher-list-title>Good</sdds-header-launcher-list-title>\n        <sdds-header-launcher-list>\n          <sdds-header-launcher-list-item>\n            <a href=\"https://tegel.scania.com\">Spider-Man</a>\n          </sdds-header-launcher-list-item>\n          <sdds-header-launcher-list-item>\n            <a href=\"https://tegel.scania.com\">Groot</a>\n          </sdds-header-launcher-list-item>\n        </sdds-header-launcher-list>\n        <sdds-header-launcher-list-title>Evil</sdds-header-launcher-list-title>\n        <sdds-header-launcher-list>\n          <sdds-header-launcher-list-item>\n            <a href=\"https://tegel.scania.com\">Dr Octopus</a>\n          </sdds-header-launcher-list-item>\n          <sdds-header-launcher-list-item>\n            <a href=\"https://tegel.scania.com\">Apocalypse</a>\n          </sdds-header-launcher-list-item>\n          <sdds-header-launcher-list-item>\n            <a href=\"https://tegel.scania.com\">Scarlet Witch</a>\n          </sdds-header-launcher-list-item>\n        </sdds-header-launcher-list>\n      </sdds-header-launcher>\n      \n      <sdds-header-dropdown slot=\"end\" placement=\"end\" no-dropdown-icon class=\"demo-hide demo-xs-show\">\n        <img slot=\"button-icon\" src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" alt=\"User menu.\"/>\n        <sdds-header-dropdown-list type=\"lg\">\n          <sdds-header-dropdown-list-user\n            heading=\"Name Nameson\"\n            subheading=\"Company name\">\n          </sdds-header-dropdown-list-user>\n          <sdds-header-dropdown-list-item>\n            <a href=\"https://www.scania.com\">Link here</a>\n          </sdds-header-dropdown-list-item>\n          <sdds-header-dropdown-list-item>\n            <a href=\"https://www.scania.com\">Link there</a>\n          </sdds-header-dropdown-list-item>\n        </sdds-header-dropdown-list>\n      </sdds-header-dropdown>\n      \n      \n      <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n      </sdds-header-brand-symbol>\n\n    </sdds-header>\n\n    <div class=\"demo-wrap-side-menu-and-main\">\n      <!-- Note: the \"persistent\" property keeps the menu open on desktop -->\n      <sdds-side-menu id=\"demo-side-menu\" aria-label=\"Side menu\" persistent>\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"timer\" size=\"24\"></sdds-icon>\n            About us\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item>\n          <a href=\"https://www.scania.com\">\n            <sdds-icon name=\"truck\" size=\"24\"></sdds-icon>\n            Trucks\n          </a>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"wifi\" size=\"24\"></sdds-icon>\n            Our services\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-dropdown default-open selected>\n          <sdds-icon slot=\"button-icon\" name=\"profile\" size=\"24\"></sdds-icon>\n          <span slot=\"button-label\">\n            Wheel types\n          </span>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Hub-centric wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">Rim wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"star\" size=\"24\"></sdds-icon>\n            Values\n          </button>\n        </sdds-side-menu-item>\n\n\n        <sdds-side-menu-item slot=\"end\">\n          <button>\n            <sdds-icon name=\"calendar\" size=\"24\"></sdds-icon>\n            My Calendar\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item slot=\"end\" class=\"demo-xs-hide\">\n          <button>\n            <sdds-side-menu-user heading=\"Name Namesson\" subheading=\"Company name\">\n              <img\n                slot=\"image\"\n                src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\"\n                alt=\"User menu.\"\n              />\n            </sdds-side-menu-user>\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-collapse-button slot=\"sticky-end\" onclick=\"demoSideMenu.collapsed = !demoSideMenu.collapsed;\"></sdds-side-menu-collapse-button>\n\n      </sdds-side-menu>\n\n      <main class=\"sdds-u-h-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If there are more than a few buttons and/or links in the header, they might not fit on medium size screens. \n        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>\n\n        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>\n\n        <p><i>Note: The collapse button is optional.</i></p>\n\n        ${dummyHtml}\n      </main>\n    </div>\n  </div>\n  `,\n  );\n\nexport const ManyNavigationItems = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-user-menu.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-user-menu.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-user-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,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,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\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: 'Set a custom title for the header',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n    <script>\n      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n      window.demoSideMenu = document.querySelector('#demo-side-menu');\n      window.demoHamburger = document.querySelector('#demo-hamburger');\n    </script>\n    <style>\n      /* If an extra button in the header is required except on \n      very narrow screens, you can use classes like these: */\n      .demo-hide {\n        display: none;\n      }\n\n      @media (min-width: 375px) {\n        .demo-xs-hide {\n          display: none;\n        }\n        .demo-xs-show {\n          display: block;\n        }\n      }\n    </style>\n\n\n    <div class=\"demo-layout\">\n      <sdds-header>\n        <sdds-header-hamburger class=\"demo-xs-hide\" onclick=\"demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);\" aria-label=\"Open application drawer\" aria-haspopup=\"true\" aria-expanded=\"false\"></sdds-header-hamburger>\n\n        <sdds-header-title>\n          Example: User menu\n        </sdds-header-title>\n\n        <sdds-header-launcher slot=\"end\">\n          <sdds-header-launcher-list-title>Sustainable tools</sdds-header-launcher-list-title>\n          <sdds-header-launcher-list>\n            <sdds-header-launcher-list-item>\n              <a href=\"https://tegel.scania.com\">Button</a>\n            </sdds-header-launcher-list-item>\n            <sdds-header-launcher-list-item>\n              <a href=\"https://tegel.scania.com\">Button</a>\n            </sdds-header-launcher-list-item>\n          </sdds-header-launcher-list>\n        </sdds-header-launcher>\n        \n        <sdds-header-dropdown slot=\"end\" class=\"demo-hide demo-xs-show\" no-dropdown-icon selected>\n          <img slot=\"button-icon\" src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" alt=\"User menu.\"/>\n          <sdds-header-dropdown-list type=\"lg\">\n            <sdds-header-dropdown-list-user\n              heading=\"Name Nameson\"\n              subheading=\"Company name\">\n            </sdds-header-dropdown-list-user>\n            <sdds-header-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n        </sdds-header-brand-symbol>\n\n      </sdds-header>\n\n      <sdds-side-menu id=\"demo-side-menu\" aria-label=\"Side menu\">\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-dropdown slot=\"end\" class=\"demo-xs-hide\" selected default-open>\n          <sdds-side-menu-user \n            slot=\"button-label\" \n            heading=\"Name Namesson\" \n            subheading=\"Company name\" \n            img-src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" \n            img-alt=\"\">\n          </sdds-side-menu-user>\n          <sdds-side-menu-dropdown-list type=\"lg\">\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n\n      </sdds-side-menu>\n\n      <main class=\"demo-main sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>\n        <br/>\n        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>\n      </main>\n    </div>\n  `,\n  );\n\nexport const UserMenu = Template.bind({});\n"]}

package/dist/collection/utils/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import prettier from 'prettier/standalone';\nimport parserBabel from 'prettier/parser-babel';\nimport parserHtml from 'prettier/parser-html';\nimport { Options } from 'prettier';\n\nconst prettierOptions: Options = {\n  bracketSameLine: false,\n  htmlWhitespaceSensitivity: 'ignore',\n  printWidth: 100,\n};\n\nexport const formatHtmlPreview = (htmlStr) =>\n  prettier.format(htmlStr, {\n    parser: 'html',\n    plugins: [parserBabel, parserHtml],\n    ...prettierOptions,\n  });\n\nexport function demoFormat(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\n/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346\n *\n * Appends a hidden input element to allow the component\n * work within and get picked up by a <form>.\n * @param element The element on which the input with be appended.\n * @param name Name of the input.\n * @param value The value of the input.\n * @param disabled Disables the input if true.\n * @param additionalAttributes Additional attributes that should be passed to the input.\n */\nexport const appendHiddenInput = (\n  element: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean,\n  additionalAttributes: Array<{ key: string; value: string }>,\n) => {\n  const input = element.ownerDocument!.createElement('input');\n  input.type = 'hidden';\n  element.appendChild(input);\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n  if (additionalAttributes) {\n    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));\n  }\n};\n\nexport type Attributes = { [key: string]: any };\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `ion-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n  const attributeObject: Attributes = {};\n\n  attributes.forEach((attr) => {\n    if (el.hasAttribute(attr)) {\n      const value = el.getAttribute(attr);\n      if (value !== null) {\n        attributeObject[attr] = el.getAttribute(attr);\n      }\n      el.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n  let attributesToInherit = ariaAttributes;\n  if (ignoreList && ignoreList.length > 0) {\n    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n  }\n  return inheritAttributes(el, attributesToInherit);\n};\n\n/**\n * Recursively finds the first matching element or child based on a provided condition.\n *\n * @param {ParentNode} parentNode - The starting element or shadow root to search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.\n * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.\n * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.\n */\nexport function dfs(\n  parentNode: ParentNode,\n  searchPredicate: (el: HTMLElement) => boolean,\n  pierceShadow = false,\n): HTMLElement | null {\n  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {\n    return parentNode;\n  }\n\n  const childElements =\n    parentNode instanceof HTMLSlotElement\n      ? parentNode.assignedElements({ flatten: true })\n      : Array.from(parentNode.children);\n\n  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {\n    childElements.push(...Array.from(parentNode.shadowRoot.children));\n  }\n\n  let foundElement: HTMLElement | null = null;\n  childElements.some((child: HTMLElement) => {\n    foundElement = dfs(child, searchPredicate, pierceShadow);\n    return foundElement !== null;\n  });\n\n  return foundElement;\n}\n\n// A higher-order function to find the nested child of siblings matching a predicate,\n// based on a sibling traversal function (getNextSibling or getPreviousSibling).\nfunction getNestedChildOfSiblingsMatching(\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n  siblingTraversalFn: (el: HTMLElement) => HTMLElement | null,\n): HTMLElement | null {\n  // Start with the sibling of the provided element.\n  let sibling = siblingTraversalFn(element);\n\n  // Iterate through the siblings until there are no more siblings.\n  while (sibling) {\n    // Use the dfs helper function to find the deeply nested child\n    // that matches the given criteria within the current sibling.\n    const nestedChild = dfs(sibling, searchPredicate);\n\n    // If a matching deeply nested child is found, return it.\n    if (nestedChild) {\n      return nestedChild;\n    }\n\n    // Move on to the next sibling.\n    sibling = siblingTraversalFn(sibling);\n  }\n\n  // If no matching deeply nested child is found, return null.\n  return null;\n}\n\n// Functions to get the next and previous sibling elements.\nconst getNextSibling = (element: HTMLElement) => element.nextElementSibling as HTMLElement;\nconst getPreviousSibling = (element: HTMLElement) => element.previousElementSibling as HTMLElement;\n\n/**\n * Searches for a next sibling element that has a nested child element matching the provided search predicate.\n * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.\n *\n * @param {HTMLElement} element - The starting element to begin the search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.\n * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.\n *\n * @example\n * // HTML structure:\n * // <div>\n * //   <h1>Heading 1</h1>\n * //   <ul role=\"list\">\n * //     <li>Item 1</li>\n * //   </ul>\n * // </div>\n * // <div>\n * //   <h2>Heading 2</h2>\n * //   <ul role=\"list\">\n * //     <li>Item 2</li>\n * //   </ul>\n * // </div>\n *\n * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';\n * const startingElement = document.querySelector('[role=\"list\"]');\n * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);\n * console.log(headingEl); // Logs the <h2>Heading 2</h2> element\n */\nexport const getNextNestedChildOfSiblingsMatching = (\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n) => getNestedChildOfSiblingsMatching(element, searchPredicate, getNextSibling);\n\n/**\n * Searches for a previous sibling element that has a nested child element matching the provided search predicate.\n * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.\n *\n * @param {HTMLElement} element - The starting element to begin the search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.\n * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.\n *\n * @example\n * // HTML structure:\n * // <div>\n * //   <h1>Heading 1</h1>\n * //   <ul role=\"list\">\n * //     <li>Item 1</li>\n * //   </ul>\n * // </div>\n * // <div>\n * //   <h2>Heading 2</h2>\n * //   <ul role=\"list\">\n * //     <li>Item 2</li>\n * //   </ul>\n * // </div>\n *\n * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';\n * const startingElement = document.querySelector('[role=\"list\"]');\n * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);\n * console.log(headingEl); // Logs the <h2>Heading 2</h2> element\n */\nexport const getPreviousNestedChildOfSiblingsMatching = (\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);\n\n/**\n * Checks if the given element is a heading element (h1-h6) or has a role of \"heading\".\n *\n * @param {HTMLElement} el - The element to check.\n * @returns {boolean} - True if the element is a heading element, false otherwise.\n */\nexport const isHeadingElement = (el: HTMLElement) => {\n  const tagName = el.tagName.toLowerCase();\n  const role = el.getAttribute('role');\n  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';\n};\n\n/**\n * Loop through the children and add the 'listitem' role if needed.\n * @param {Node} targetNode The node being updated.\n * */\nexport const updateListChildrenRoles = (targetNode: Node): void => {\n  targetNode.childNodes.forEach((node: Node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      const element = node as Element;\n      if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {\n        element.setAttribute('role', 'listitem');\n      }\n    }\n  });\n};\n\nexport function isFocusable(element: HTMLElement): boolean {\n  if (!element || element.nodeType !== Node.ELEMENT_NODE) {\n    return false;\n  }\n\n  const focusableSelectors = [\n    'a[href]',\n    'area[href]',\n    'input:not([disabled]):not([type=\"hidden\"])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ];\n\n  // Check if the element matches any of the focusable elements selectors\n  if (focusableSelectors.some((selector) => element.matches(selector))) {\n    return true;\n  }\n\n  // Check if the element is contenteditable\n  if (element.hasAttribute('contenteditable')) {\n    const contentEditableValue = element.getAttribute('contenteditable').toLowerCase();\n    if (contentEditableValue === 'true' || contentEditableValue === '') {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}

package/dist/components/core-header-item.js.map

@@ -1 +0,0 @@
-{"file":"core-header-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,8YAA8Y;;MCO3Z,cAAc;;;;;;EACzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,IACf,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/core-header-item/core-header-item.scss?tag=sdds-core-header-item&encapsulation=shadow","./src/components/header/webcomponent/core-header-item/core-header-item.tsx"],"sourcesContent":["@import '../../../../mixins/box-sizing';\n\n:host {\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  color: var(--sdds-header-nav-item-color);\n\n  .item {\n    all: unset;\n    @include sdds-box-sizing;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sdds-header-height);\n    height: var(--sdds-header-height);\n    margin: 0;\n  }\n\n  slot {\n    white-space: nowrap;\n  }\n\n  ::slotted(svg) {\n    font-size: 20px;\n  }\n}\n","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"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dropdown-option.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-option&encapsulation=shadow","./src/components/dropdown/dropdown-option/dropdown-option.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  .sdds-dropdown-label-outside {\n    color: var(--sdds-dropdown-label-outside);\n    text-decoration: none;\n  } \n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  /** @internal Fires on click on one of the dropdown items */\n  @Event({\n    eventName: 'internalSddsSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSelect: EventEmitter<{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.handleClick({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  handleClick(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.internalSddsSelect.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          if (this.isMultiSelectOption) {\n            event.stopPropagation();\n          }\n          return this.handleClick({\n            value: this.value,\n            label: this.host.innerText,\n            parent: event.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/dropdown.js.map

@@ -1 +0,0 @@
-{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  .sdds-dropdown-label-outside {\n    color: var(--sdds-dropdown-label-outside);\n    text-decoration: none;\n  } \n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Host,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  textInput?: HTMLInputElement;\n\n  /** Set the variant of the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placeholder text for dropdown with no selectedLabel item */\n  @Prop() placeholder: string;\n\n  /** Add the value of the option as string to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Set to true for disabled states */\n  @Prop() disabled: boolean = false;\n\n  /** `Controls type of dropdown. */\n  @Prop() type: 'default' | 'multiselect' | 'filter' = 'default';\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Controls position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Label text for label inside & outside */\n  @Prop() label: string;\n\n  /** Support `error` state */\n  @Prop() state: boolean = false;\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Direction that the dropdown will open. Default is auto. */\n  @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  @State() optionValues: Array<any> = [];\n\n  @State() optionLabels: Array<any> = [];\n\n  @State() open: boolean = false;\n\n  @State() node: HTMLElement;\n\n  @State() selectedLabel: string = '';\n\n  @State() selectedValue: string = '';\n\n  @State() selectedValuesArray: Array<any> = [];\n\n  @State() selectedLabelsArray: Array<any> = [];\n\n  @State() dropdownUniqueClass: string = '';\n\n  @State() openUpwards: boolean = false;\n\n  @State() dropdownMenuHeight: number = 0;\n\n  @State() dropdownMenuSelector: HTMLElement;\n\n  @State() listItemIndex: any = -1;\n\n  @State() listItemArray: any;\n\n  @State() listItemObject: any;\n\n  @Element() host: HTMLElement;\n\n  componentWillLoad() {\n    // If default option is set, update the default selectedLabel value\n    // this.host.children is a HTMLCollection type, cannot use forEach\n    this.listItemObject = this.host.children;\n    this.listItemArray = Array.from(this.listItemObject);\n    this.listItemArray.map((listItem) => {\n      this.optionValues.push(listItem.value);\n      this.optionLabels.push(listItem.innerText.trim());\n    });\n    this.setOptionFromOutside(this.defaultOption);\n\n    if (this.size === 'small') {\n      this.size = 'sm';\n      console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n    }\n    if (this.size === 'medium') {\n      this.size = 'md';\n      console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n    }\n    if (this.size === 'large') {\n      this.size = 'lg';\n      console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n    }\n  }\n\n  setOptionFromOutside(optionValue) {\n    if (optionValue) {\n      this.deselectAll();\n      // TODO\n      // eslint-disable-next-line no-param-reassign\n      optionValue = optionValue.split(',');\n      for (let i = 0; i < this.host.children.length; i++) {\n        // Todo - specify type\n        const el: any = this.host.children[i];\n        if (optionValue.includes(el.value.trim())) {\n          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n          this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n          this.selectedLabel = el.textContent;\n          this.selectedValue = el.value;\n          el.setAttribute('selectedLabel', 'true');\n          el.setAttribute('selected', 'true');\n        } else {\n          el.setAttribute('selectedLabel', 'false');\n          el.setAttribute('selected', 'false');\n        }\n      }\n    }\n  }\n\n  @Watch('selectedOption')\n  changeSelectedOption() {\n    if (this.selectedValuesArray.includes(this.selectedOption)) {\n      this.resetOption();\n    }\n    this.setOptionFromOutside(this.selectedOption);\n    this.host.setAttribute('selected-option', '');\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(ev) {\n    // To stop bubble click\n    ev.stopPropagation();\n    const target = ev ? ev.composedPath()[0] : window.event.target[0];\n    if (this.node !== undefined && this.node.contains(target)) {\n      if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n        this.textInput.focus();\n      }\n    } else {\n      this.tabbingLabelReset();\n      this.open = false;\n    }\n  }\n\n  @Listen('keydown')\n  keyListener(ev: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (ev.key) {\n        case 'ArrowDown':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex < this.listItemArray.length - 1) {\n              this.listItemIndex++;\n            } else {\n              this.listItemIndex = 0;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n        case 'ArrowUp':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex > 0) {\n              this.listItemIndex--;\n            } else {\n              this.listItemIndex = this.listItemArray.length - 1;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n\n        case 'Tab':\n          this.open = false;\n          break;\n\n        case 'Escape':\n          this.open = false;\n          this.node.focus();\n          break;\n\n        default:\n          break;\n      }\n    }\n  }\n\n  handleClick() {\n    this.open = this.open === false;\n    if (this.openDirection === 'auto') {\n      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n      const distanceToBottom = this.host.getBoundingClientRect().top;\n      const viewportHeight = window.innerHeight;\n      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n      // Additional 57px is added as compensation for dropdown element own input/button height\n      // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n    } else {\n      this.openUpwards = this.openDirection === 'up';\n    }\n  }\n\n  tabbingLabelReset() {\n    if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n      if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n        this.textInput.value = '';\n        this.internalSddsSearch.emit('');\n      }\n      if (this.selectedLabel !== this.textInput.value) {\n        this.textInput.value = this.selectedLabel;\n      }\n    }\n  }\n\n  @Listen('internalSddsSelect')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.open = this.type === 'multiselect';\n    if (this.type !== 'multiselect') {\n      this.selectedLabel = event.detail.label;\n      this.selectedValue = event.detail.value;\n      this.tabbingLabelReset();\n    } else {\n      if (this.selectedValuesArray.includes(event.detail.value)) {\n        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n        this.selectedValuesArray = this.selectedValuesArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n        this.selectedLabelsArray = this.selectedLabelsArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n      } else {\n        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n      }\n    }\n  }\n\n  /** @internal Search event that is emitted to the sdds-dropdown-filter */\n  @Event({\n    eventName: 'internalSddsSearch',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSearch: EventEmitter<any>;\n\n  handleSearch(ev) {\n    const searchTerm = ev.target.value;\n    this.internalSddsSearch.emit(searchTerm);\n    this.open = true;\n  }\n\n  deselectAll() {\n    this.selectedLabel = '';\n    this.selectedValue = '';\n    this.selectedLabelsArray = [];\n    this.selectedValuesArray = [];\n    this.listItemArray = this.listItemArray.map((optionItem) => ({\n      ...optionItem,\n      selected: false,\n    }));\n  }\n\n  @Method() async resetOption() {\n    this.deselectAll();\n    this.open = false;\n\n    if (this.defaultOption) {\n      this.setOptionFromOutside(this.defaultOption);\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`\n        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n        ${this.inline ? 'sdds-dropdown-inline' : ''}\n        ${\n          this.selectedLabel.length > 0 || this.selectedLabel === ''\n            ? 'sdds-dropdown--selected'\n            : ''\n        }\n        ${this.state ? 'sdds-dropdown--error' : ''}\n        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n        ${\n          this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n            ? 'sdds-dropdown--label-inside-position'\n            : ''\n        }\n       `}\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n        multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n      >\n        <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n          {this.labelPosition === 'outside' && this.label.length > 0 ? (\n            <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n          ) : (\n            ''\n          )}\n          <button\n            part={this.disabled ? 'dropdown-filter-disabled' : ''}\n            disabled={this.disabled}\n            tabindex={this.disabled ? '-1' : null}\n            class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n              this.selectedValue !== '' || this.selectedLabelsArray.length > 0\n                ? 'sdds-dropdown-toggle--selected'\n                : ''\n            }\n                ${\n                  this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n                    ? `sdds-dropdown-toggle-label-inside-${this.size}`\n                    : `sdds-dropdown-toggle-${this.size}`\n                }`}\n            type=\"button\"\n            onClick={() => this.handleClick()}\n            ref={(node) => (this.node = node)}\n          >\n            <span class=\"sdds-dropdown-label\">\n              {this.type === 'filter' ? (\n                <input\n                  part={this.disabled ? 'dropdown-filter-disabled' : ''}\n                  disabled={this.disabled}\n                  tabindex=\"-1\"\n                  ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n                  class=\"sdds-dropdown-filter\"\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                  value={this.selectedLabel}\n                  onInput={(event) => this.handleSearch(event)}\n                  autoComplete=\"off\"\n                />\n              ) : (\n                <span\n                  class={{\n                    'sdds-dropdown-label-container': true,\n                    'sdds-dropdown-label-container--label-inside':\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),\n                  }}\n                >\n                  {this.size !== 'sm' &&\n                    (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&\n                    this.labelPosition === 'inside' &&\n                    this.label.length > 0 && (\n                      <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n                    )}\n                  <span\n                    class={`sdds-dropdown-label-main ${\n                      (this.selectedLabel.length === 0 ||\n                        (this.labelPosition === 'inside' && this.label.length < 0)) &&\n                      'sdds-dropdown-placeholder'\n                    }`}\n                  >\n                    {this.selectedLabel.length > 0 &&\n                      this.type !== 'multiselect' &&\n                      this.selectedLabel}\n\n                    {this.type === 'multiselect' && (\n                      <span class=\"sdds-dropdown-multiselect-result\">\n                        {this.labelPosition !== 'inside' &&\n                          this.selectedLabelsArray.toString().length < 1 &&\n                          this.placeholder}\n                        {this.selectedLabelsArray.toString().length > 0 &&\n                          this.selectedLabelsArray.toString().split(',').join(', ')}\n                      </span>\n                    )}\n                    {!this.selectedLabel &&\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      this.label}\n\n                    {!this.selectedLabel &&\n                      this.type !== 'multiselect' &&\n                      this.labelPosition !== 'inside' &&\n                      this.placeholder}\n\n                    {!this.selectedLabel &&\n                      this.size === 'sm' &&\n                      this.labelPosition === 'inside' &&\n                      this.placeholder}\n                  </span>\n                </span>\n              )}\n            </span>\n            <svg\n              class=\"sdds-dropdown-arrow\"\n              width=\"12\"\n              height=\"7\"\n              viewBox=\"0 0 12 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1L6 6L11 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n          <span\n            class=\"sdds-dropdown-menu\"\n            // Need to have reference in order to calc height and distance from bottom\n            ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n          >\n            <slot />\n          </span>\n        </span>\n        <p class=\"sdds-dropdown-helper\">\n          <svg\n            class=\"sdds-dropdown-error-icon\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <span>{this.helper}</span>\n        </p>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/header-dropdown-list-item.js.map

@@ -1 +0,0 @@
-{"file":"header-dropdown-list-item.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,ozCAAozC;;MCOz0C,sBAAsB;;;;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.scss?tag=sdds-header-dropdown-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  height: var(--sdds-header-list-item-md-height);\n  width: 100%;\n\n  .component {\n    height: 100%;\n\n    ::slotted(a),\n    ::slotted(button) {\n      all: unset;\n      box-sizing: border-box;\n      border: none;\n      display: flex;\n      align-items: center;\n      height: 100%;\n      padding: 0 24px;\n      width: 100%;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      background-color: var(--sdds-header-nav-item-dropdown-opened-background);\n      color: var(--sdds-header-nav-item-dropdown-opened-color);\n    }\n\n    ::slotted(a:hover) {\n      background-color: var(--sdds-nav-item-background-hover);\n      cursor: pointer;\n    }\n\n    ::slotted(a:focus-visible) {\n      @include sdds-focus-state;\n    }\n\n    &-selected {\n      background-color: var(--sdds-nav-item-background-selected);\n      padding-right: 4px;\n      border-left-width: 4px;\n      border-left-style: solid;\n      border-left-color: var(--sdds-nav-item-border-color-active);\n\n      ::slotted(a),\n      ::slotted(button) {\n        background-color: var(--sdds-nav-item-background-selected);\n      }\n    }\n  }\n}\n\n:host(:not(:last-child)) {\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n\n:host([type='lg']) {\n  height: var(--sdds-header-height);\n\n  ::slotted(a),\n  ::slotted(button) {\n    padding: 0 16px;\n    color: var(--sdds-header-app-launcher-item-color);\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-item',\n  styleUrl: 'header-dropdown-list-item.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListItem {\n  @Element() host: HTMLElement;\n\n  /** If the link should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** The type of the list. */\n  @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/header-dropdown-list.js.map

@@ -1 +0,0 @@
-{"file":"header-dropdown-list.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,mOAAmO;;MCWpP,kBAAkB;;;;;;IAIrB,kBAAa,GAAwC,IAAI,GAAG,EAAE,CAAC;gBAE1B,IAAI;;;EAIjD,iBAAiB;IACf,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;;IAG/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAQ,CAAC;MAEjC,IAAI,MAAM,IAAI,KAAK,EAAE;QACnB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;OACxB;KACF;IAED,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,EAAE;MACjF,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KACpC;IAED,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAEvF,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAqB;;MAE1E,MAAM,YAAY,GAAkB,CAAC,CAAQ;QAC3C,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;OAC3D,CAAC;MAEF,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;MAElD,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,CAAC,CAAC;;MAGnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;GACJ;EAED,uBAAuB,CAAC,IAAqB;IAC3C,MAAM,KAAK,GAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAa;;MAE1B,IACE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI;QACnC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM;QACrC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EACxC;QACA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC;;MAGD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;QACzC,IAAI,CAAC,uBAAuB,CAAC,IAAuB,CAAC,CAAC;OACvD;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAuB,EAAE,IAAqB;;MAExE,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;MACjD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,MAAM,UAAU,GAAG;MACjB,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IAEF,QACE,EAAC,IAAI,oBAAK,UAAU,GAClB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.scss?tag=sdds-header-dropdown-list&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"sourcesContent":["@import '../../../../global/_variables.scss';\n\n:host {\n  display: block;\n  width: 190px;\n\n  @media all and (max-width: $media-fullwidth) {\n    width: 100vw;\n  }\n\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-radius: none;\n  background-color: var(--sdds-header-app-launcher-menu-bg);\n}\n\n:host([type='lg']) {\n  width: 320px;\n}\n","import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-dropdown-list',\n  styleUrl: 'header-dropdown-list.scss',\n  shadow: true,\n})\nexport class HeaderDropdownList {\n  @Element() host: HTMLElement;\n\n  // A Map to store the slots and their associated slotchange listeners.\n  private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n  @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const { children } = this.host;\n\n    // Set the type prop for each child, if they have such a property\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i] as any;\n\n      if ('type' in child) {\n        child.type = this.type;\n      }\n    }\n\n    let listRoot = this.host;\n    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n      listRoot = this.host.parentElement;\n    }\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  componentDidLoad() {\n    this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n      // Add the slotchange event listener.\n      const onSlotChange: EventListener = (e: Event) => {\n        this.processAssignedElements(e.target as HTMLSlotElement);\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      onSlotChange({ target: slot } as unknown as Event);\n\n      // Store the slot and its listener in the Map.\n      this.slotListeners.set(slot, onSlotChange);\n    });\n  }\n\n  processAssignedElements(slot: HTMLSlotElement): void {\n    const nodes: Element[] = slot.assignedElements();\n    nodes.forEach((node: Element) => {\n      // Add a listitem role to the assigned element if needed.\n      if (\n        node.tagName.toLowerCase() !== 'li' &&\n        node.tagName.toLowerCase() !== 'slot' &&\n        node.getAttribute('role') !== 'listitem'\n      ) {\n        node.setAttribute('role', 'listitem');\n      }\n\n      // If the assigned element is a slot, process its assigned elements recursively.\n      if (node.tagName.toLowerCase() === 'slot') {\n        this.processAssignedElements(node as HTMLSlotElement);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n      // Remove the slotchange event listener and delete the entry from the Map.\n      slot.removeEventListener('slotchange', listener);\n      this.slotListeners.delete(slot);\n    });\n  }\n\n  render() {\n    const attributes = {\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n\n    return (\n      <Host {...attributes}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/header-item.js.map

@@ -1 +0,0 @@
-{"file":"header-item.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,uqCAAuqC;;MCQhrC,UAAU;;;;;kBAKK,KAAK;oBAGH,KAAK;;EAIjC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;GACF;;;;EAKD,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,KAC1B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;MACnF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;MAE9C,MAAM,OAAO,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MACrE,MAAM,aAAa,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACrF,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC5C;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACxE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,6BACE,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,MAAM;QAC/B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACS,CACnB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-item/header-item.scss?tag=sdds-header-item&encapsulation=shadow","./src/components/header/webcomponent/header-item/header-item.tsx"],"sourcesContent":["@import '../../../../mixins/box-sizing';\n@import '../../../../mixins/focus-state';\n\n:host {\n  ::slotted(button),\n  ::slotted(a) {\n    all: unset;\n    @include sdds-box-sizing;\n\n    background-color: var(--sdds-header-background);\n    border-right: 1px solid var(--sdds-header--basic-element-border);\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    padding: 0 24px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  ::slotted(button:hover),\n  ::slotted(a:hover) {\n    background-color: var(--sdds-header--basic-element-background-hover);\n  }\n\n  ::slotted(button:focus-visible),\n  ::slotted(a:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .component-active {\n    ::slotted(button),\n    ::slotted(a) {\n      background-color: var(--sdds-header--basic-element-background-open);\n      color: var(--sdds-header-nav-item-dropdown-opened-color);\n      border-color: var(--sdds-header--basic-element-border-open);\n    }\n  }\n\n  .component-selected:not(.component-active) {\n    ::slotted(button),\n    ::slotted(a) {\n      background-color: var(--sdds-header--basic-element-background-selected);\n      padding-top: 4px;\n      border-bottom-style: solid;\n      border-bottom-width: 4px;\n      border-bottom-color: var(--sdds-nav-item-border-color-active);\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-item',\n  styleUrl: 'header-item.scss',\n  shadow: true,\n})\nexport class HeaderItem {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  /** If the button should appear selected. */\n  @Prop() selected: boolean = false;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');\n      this.updateSlotted(isIconOrSvg, addIconClass);\n\n      const isImage = (element) => element.tagName.toLowerCase() === 'img';\n      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');\n      this.updateSlotted(isImage, addImageClass);\n    }\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  render() {\n    return (\n      <Host>\n        <sdds-core-header-item\n          class={{\n            'component-active': this.active,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </sdds-core-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/header-launcher-button.js.map

@@ -1 +0,0 @@
-{"file":"header-launcher-button.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,mJAAmJ;;MCQtK,oBAAoB;;;;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM,IACnC,8BAAY,WAAW,GACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-button/header-launcher-button.scss?tag=sdds-header-launcher-button&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  sdds-header-item {\n    display: block; // launcher button is always visible, regular header buttons are not.\n  }\n\n  .icon {\n    position: relative;\n    margin-left: -6px;\n    left: 3px;\n    transition: all 0.2s ease-in-out;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-button',\n  styleUrl: 'header-launcher-button.scss',\n  shadow: true,\n})\nexport class HeaderLauncherButton {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active = false;\n\n  private ariaAttributes: Attributes;\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n    const buttonProps = {\n      ...this.ariaAttributes,\n    };\n\n    return (\n      <Host>\n        <sdds-header-item active={this.active}>\n          <button {...buttonProps}>\n            <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}