@scania/tegel 0.0.34 → 0.0.52

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n  return name\n    .replace(/\\s/g, '-')\n    .replace(/[^a-z0-9-]/gi, '')\n    .toLowerCase();\n}\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n  @Prop() defaultTab: string = '';\n\n  /** different height settings. right now only supports \"auto\", otherwise ignored */\n  @Prop() autoHeight: boolean = false;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** array with metadata for slotted children */\n  @State() tabs: Array<any> = [];\n\n  /** current calculated width of each nav button (calculated from the largest one) */\n  @State() buttonWidth: number = 0;\n\n  /** current calculated tab height (calculated from the one with the most height) */\n  @State() tabHeight: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  /** used for switching to a tab programmatically */\n  @Method()\n  async showTab(key: string) {\n    this.switchToTab(key);\n  }\n\n  startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  tabWrapperElement: HTMLElement = null; // reference to container with slotted children\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  useAutoHeight: boolean = false; // set height for slotted children or not\n\n  componentWillLoad() {\n    this.initComponent();\n  }\n\n  initComponent(createInitialState = true) {\n    if (this.autoHeight) {\n      this.useAutoHeight = true;\n    }\n\n    this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n      const key = generateKeyFromName(name);\n      if (item.default) {\n        this.startingTab = key;\n      }\n      let disabled = false;\n      if (item.disabled) {\n        disabled = true;\n      }\n      return {\n        name,\n        key,\n        element: item,\n        disabled,\n        visible: true,\n        initialDisplay: window.getComputedStyle(item).display,\n      };\n    });\n\n    if (createInitialState) {\n      this.setInitialState();\n    }\n    this.tabs = Array.from(this.tabs);\n  }\n\n  calculateButtonWidth() {\n    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n    let best = 0;\n    Array.from(navButtons).forEach((navButton: HTMLElement) => {\n      const oldStyle = navButton.style.width;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = '';\n      const width = navButton.clientWidth;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = oldStyle;\n\n      if (navButton.clientWidth > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  calculateTabHeight() {\n    let best = 0;\n    this.tabs.forEach((_, tabIndex) => {\n      const tab = this.tabs[tabIndex];\n      // TODO: add comment on what this does\n      const oldStyle = tab.element.style.display;\n      tab.element.style.display = '';\n      const height = tab.element.clientHeight;\n      tab.element.style.display = oldStyle;\n\n      if (height > best) {\n        best = height;\n      }\n    });\n\n    this.tabHeight = best;\n  }\n\n  componentDidRender() {\n    this.calculateTabHeight();\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n      const visibleTab = this.tabs.find((tab) => tab.visible);\n      this.initComponent(false);\n      this.calculateTabHeight();\n      this.calculateButtonWidth();\n      if (visibleTab) {\n        this.switchToTab(visibleTab.key);\n      }\n    });\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n        Array.from(navButtons).forEach((navButton: HTMLElement) => {\n          buttonsWidth += navButton.clientWidth;\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n\n        this.calculateTabHeight();\n      });\n    });\n\n    mutationObserver.observe(this.host, {\n      childList: true,\n      attributes: true,\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n    this.calculateTabHeight();\n  }\n\n  setInitialState() {\n    if (this.defaultTab) {\n      this.startingTab = this.defaultTab;\n    }\n\n    this.tabs.forEach((tab, index) => {\n      if (this.startingTab) {\n        if (tab.key !== this.startingTab) {\n          this.hideTab(index);\n        }\n      } else {\n        if (index > 0) {\n          this.hideTab(index);\n        }\n      }\n    });\n  }\n\n  unhideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = '';\n    tab.visible = true;\n  }\n\n  hideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = 'none';\n    tab.visible = false;\n  }\n\n  switchToTab(key: string) {\n    this.tabs.forEach((tab, index) => {\n      if (tab.key === key) {\n        this.unhideTab(index);\n      } else {\n        this.hideTab(index);\n      }\n    });\n\n    this.tabs = Array.from(this.tabs);\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.useAutoHeight) {\n      style.height = `${this.tabHeight}px`;\n    }\n\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n          <nav class=\"sdds-inline-tabs-header\">\n            <div\n              ref={(el) => {\n                this.navWrapperElement = el as HTMLDivElement;\n              }}\n              class=\"sdds-inline-tabs-wrapper\"\n            >\n              {this.tabs.map((tab) => (\n                <button\n                  style={{ width: `${this.buttonWidth}px` }}\n                  disabled={tab.disabled}\n                  class={`sdds-inline-tabs--tab ${\n                    tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n                  }`}\n                  onClick={() => this.switchToTab(tab.key)}\n                >\n                  <span>{tab.name}</span>\n                </button>\n              ))}\n            </div>\n            <div class=\"sdds-inline-tabs-header-navigation\">\n              <button\n                class={`sdds-inline-tabs--forward ${\n                  this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showRightScroll}\n                onClick={() => this.scrollRight()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  />\n                </svg>\n              </button>\n              <button\n                class={`sdds-inline-tabs--back ${\n                  this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showLeftScroll}\n                onClick={() => this.scrollLeft()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </nav>\n          <div\n            ref={(el) => {\n              this.tabWrapperElement = el as HTMLElement;\n            }}\n            class=\"sdds-inline-tabs-main\"\n            style={style}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js

@@ -1,72 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeTab from './inline-tab/readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: { 'Inline Tabs': readme, 'Inline Tab': readmeTab },
-    backgrounds: { default: 'white' },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    autoHeight: {
-      name: 'Same height',
-      description: 'Make all tab panels as tall as the tallest tab panel',
-      control: {
-        type: 'boolean',
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    backgrounds: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    autoHeight: false,
-    modeVariant: 'Inherit from parent',
-  },
-};
-// eslint-disable-next-line arrow-body-style
-const Template = ({ autoHeight = false, modeVariant }) => {
-  return formatHtmlPreview(`
-    <sdds-inline-tabs ${autoHeight ? 'auto-height' : ''}  ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-    <sdds-inline-tab label="Tab with tall content">
-      <div data-name="Tab with tall content">
-        Tab panel 1
-        <div style="width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);"></div>
-      </div>
-        </sdds-inline-tab>
-      <sdds-inline-tab label="Default tab" default>
-        Tab panel 2
-      </sdds-inline-tab>
-      <sdds-inline-tab label="Disabled tab" disabled>
-        Tab panel 3
-      </sdds-inline-tab>
-    </sdds-inline-tabs>
-`);
-};
-export const InlineTabs = Template.bind({});
-InlineTabs.args = {};
-//# sourceMappingURL=inline-tabs.stories.js.map

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-default/inline-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE;IACzD,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;IACjC,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,UAAU,EAAE;MACV,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,WAAW,EAAE;MACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;EACD,IAAI,EAAE;IACJ,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AACF,4CAA4C;AAC5C,MAAM,QAAQ,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;EACvD,OAAO,iBAAiB,CAAC;wBAErB,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAC/B,KAAK,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;;;;;;;;;;;;;CAcjG,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeTab from './inline-tab/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: { 'Inline Tabs': readme, 'Inline Tab': readmeTab },\n    backgrounds: { default: 'white' },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    autoHeight: {\n      name: 'Same height',\n      description: 'Make all tab panels as tall as the tallest tab panel',\n      control: {\n        type: 'boolean',\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    backgrounds: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  args: {\n    autoHeight: false,\n    modeVariant: 'Inherit from parent',\n  },\n};\n// eslint-disable-next-line arrow-body-style\nconst Template = ({ autoHeight = false, modeVariant }) => {\n  return formatHtmlPreview(`\n    <sdds-inline-tabs ${\n      autoHeight ? 'auto-height' : ''\n    }  ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}>\n    <sdds-inline-tab label=\"Tab with tall content\">\n      <div data-name=\"Tab with tall content\">\n        Tab panel 1\n        <div style=\"width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);\"></div>\n      </div>\n        </sdds-inline-tab>\n      <sdds-inline-tab label=\"Default tab\" default>\n        Tab panel 2\n      </sdds-inline-tab>\n      <sdds-inline-tab label=\"Disabled tab\" disabled>\n        Tab panel 3\n      </sdds-inline-tab>\n    </sdds-inline-tabs>\n`);\n};\n\nexport const InlineTabs = Template.bind({});\nInlineTabs.args = {};\n"]}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css

@@ -1,141 +0,0 @@
-.sdds-inline-tabs-fullbleed {
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  /* tab */
-  /* tab states */
-}
-.sdds-inline-tabs-fullbleed * {
-  box-sizing: border-box;
-}
-.sdds-inline-tabs-fullbleed::after {
-  content: " ";
-  display: block;
-  border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);
-  opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-}
-.sdds-inline-tabs-fullbleed-wrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-  overflow-x: scroll;
-  scrollbar-width: none;
-}
-.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar {
-  display: none;
-}
-.sdds-inline-tabs-fullbleed--forward, .sdds-inline-tabs-fullbleed--back {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-inline-tabs-fullbleed--forward__show, .sdds-inline-tabs-fullbleed--back__show {
-  opacity: 1;
-  pointer-events: all;
-}
-.sdds-inline-tabs-fullbleed--forward:hover, .sdds-inline-tabs-fullbleed--back:hover {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);
-}
-.sdds-inline-tabs-fullbleed--forward:active, .sdds-inline-tabs-fullbleed--back:active {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);
-}
-.sdds-inline-tabs-fullbleed--forward:focus, .sdds-inline-tabs-fullbleed--back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-.sdds-inline-tabs-fullbleed--forward svg, .sdds-inline-tabs-fullbleed--back svg {
-  fill: var(--sdds-inline-tabs-scroll-btn-color);
-}
-.sdds-inline-tabs-fullbleed-centered {
-  justify-content: center;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab) {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-inline-tabs-fullbleed-tab-color);
-  opacity: 0.6;
-  padding: 16px 0;
-  margin-right: 32px;
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out;
-  white-space: nowrap;
-  text-align: left;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab)::after {
-  content: " ";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0;
-  margin-right: auto;
-  height: 2px;
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out;
-  z-index: 1;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-color-active);
-  opacity: 1;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after {
-  width: 100%;
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:first-child) {
-  margin-left: 32px;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:last-child) {
-  margin-right: 32px;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:hover) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);
-  opacity: 1;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after {
-  width: 100%;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:focus) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-  color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);
-  opacity: 1;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after {
-  width: 0;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after {
-  width: 100%;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__disabled) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);
-  pointer-events: none;
-  opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);
-}
-
-.sdds-inline-tabs-fullbleed {
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
-}
-.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward {
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
-}
-.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back {
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
-}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js

@@ -1,129 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class InlineTabsFullbleed {
-  constructor() {
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.modeVariant = null;
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this.calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this.calculateButtonWidth();
-  }
-  calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs-fullbleed` }, h("div", { class: "sdds-inline-tabs-fullbleed-wrapper", ref: (el) => {
-        this.navWrapperElement = el;
-      } }, h("slot", null)), h("div", { class: "sdds-inline-tabs-fullbleed-navigation" }, h("button", { class: `sdds-inline-tabs-fullbleed--forward ${this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z" }))), h("button", { class: `sdds-inline-tabs-fullbleed--back ${this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z" })))))));
-  }
-  static get is() { return "sdds-inline-tabs-fullbleed"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=inline-tabs-fullbleed.js.map

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs-fullbleed.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js

@@ -1,47 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-  },
-};
-const Template = ({ modeVariant }) => formatHtmlPreview(`
-  <sdds-inline-tabs-fullbleed id="inline-tabs-fullbleed-example" ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__active">Active tab</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__disabled" aria-disabled="true" tabindex="-1">Disabled tab</a>
-    </sdds-inline-tabs-fullbleed>
-`);
-export const InlineTabsFullbleed = Template.bind({});
-InlineTabsFullbleed.args = {};
-//# sourceMappingURL=inline-tabs-fullbleed.stories.js.map

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs-fullbleed.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,iBAAiB,CAAC;mEAC+C,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;;;;;;CAO3J,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,mBAAmB,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ modeVariant }) =>\n  formatHtmlPreview(`\n  <sdds-inline-tabs-fullbleed id=\"inline-tabs-fullbleed-example\" ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__active\">Active tab</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__disabled\" aria-disabled=\"true\" tabindex=\"-1\">Disabled tab</a>\n    </sdds-inline-tabs-fullbleed>\n`);\n\nexport const InlineTabsFullbleed = Template.bind({});\nInlineTabsFullbleed.args = {};\n"]}

package/dist/components/sdds-breadcrumb-item.js

@@ -1,45 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const breadcrumbItemCss = "@charset \"UTF-8\";li{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}li a{color:var(--sdds-breadcrumb-color);text-decoration:none}li:hover{cursor:pointer}li:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}li.sdds-breadcrumb-item-disabled a,li.sdds-breadcrumb-item-current a,li [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}li.sdds-breadcrumb-item-disabled:hover a,li.sdds-breadcrumb-item-current:hover a,li [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}li a::after{content:\"›\";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}li:last-child{color:red}:host(.sdds-breadcrumb-item-last) a::after{display:none}";
-
-const SddsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.current = false;
-    this.href = undefined;
-    this.disabled = false;
-  }
-  render() {
-    return (h("li", { class: `${this.current ? 'sdds-breadcrumb-item-current' : ''} 
-        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}` }, h("a", { "aria-current": this.current && 'page',
-      // eslint-disable-next-line no-script-url
-      href: this.disabled ? 'javascript:void(0)' : this.href }, h("slot", null))));
-  }
-  static get style() { return breadcrumbItemCss; }
-}, [1, "sdds-breadcrumb-item", {
-    "current": [4],
-    "href": [1],
-    "disabled": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-breadcrumb-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-breadcrumb-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsBreadcrumbItem$1);
-      }
-      break;
-  } });
-}
-
-const SddsBreadcrumbItem = SddsBreadcrumbItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsBreadcrumbItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-breadcrumb-item.js.map

package/dist/components/sdds-breadcrumb-item.js.map

@@ -1 +0,0 @@
-{"file":"sdds-breadcrumb-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0yBAA0yB;;MCOvzBA,oBAAkB;;;;;mBAEF,KAAK;;oBAMJ,KAAK;;EAEjC,MAAM;IACJ,QACE,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,8BAA8B,GAAG,EAAE;UAC1D,IAAI,CAAC,QAAQ,GAAG,+BAA+B,GAAG,EAAE,EAAE,IAExD,yBACgB,IAAI,CAAC,OAAO,IAAI,MAAM;;MAEpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,IAAI,CAAC,IAAI,IAEtD,eAAa,CACX,CACD,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumbItem"],"sources":["./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.scss?tag=sdds-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\nli {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.sdds-breadcrumb-item-disabled,\n  &.sdds-breadcrumb-item-current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  a::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n\n  &:last-child {\n    color: red;\n  }\n}\n\n:host(.sdds-breadcrumb-item-last) {\n  a::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <li\n        class={`${this.current ? 'sdds-breadcrumb-item-current' : ''} \n        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}`}\n      >\n        <a\n          aria-current={this.current && 'page'}\n          // eslint-disable-next-line no-script-url\n          href={this.disabled ? 'javascript:void(0)' : this.href}\n        >\n          <slot></slot>\n        </a>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tab.js

@@ -1,42 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const inlineTabCss = ":host{display:block}";
-
-const InlineTabsChild = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = undefined;
-    this.disabled = false;
-    this.default = false;
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get style() { return inlineTabCss; }
-}, [1, "sdds-inline-tab", {
-    "label": [1],
-    "disabled": [4],
-    "default": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InlineTabsChild);
-      }
-      break;
-  } });
-}
-
-const SddsInlineTab = InlineTabsChild;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsInlineTab, defineCustomElement };
-
-//# sourceMappingURL=sdds-inline-tab.js.map

package/dist/components/sdds-inline-tab.js.map

@@ -1 +0,0 @@
-{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sBAAsB;;MCO9B,eAAe;;;;;;oBAGE,KAAK;mBAEN,KAAK;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'inline-tab.scss',\n  shadow: true,\n})\nexport class InlineTabsChild {\n  @Prop() label: string;\n\n  @Prop() disabled: boolean = false;\n\n  @Prop() default: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs-fullbleed.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsInlineTabsFullbleed extends Components.SddsInlineTabsFullbleed, HTMLElement {}
-export const SddsInlineTabsFullbleed: {
-  prototype: SddsInlineTabsFullbleed;
-  new (): SddsInlineTabsFullbleed;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;