@scania/tegel 0.0.6 → 0.0.8

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

@@ -1,243 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Slider',
-  argTypes: {
-    min: {
-      name: 'Min. value',
-      description: 'Sets the minimum value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    max: {
-      name: 'Max. value',
-      description: 'Sets the maximum value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 100 },
-      },
-    },
-    initialValue: {
-      name: 'Initial value',
-      description: 'Sets the initial value for the slider.',
-      control: {
-        type: 'number',
-      },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    showLabel: {
-      name: 'Show label',
-      description: 'Toggles if the lable should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      description: 'Sets the text for the label.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'showLabel', eq: true },
-    },
-    showTicks: {
-      name: 'Show ticks',
-      description: 'Toggles if ticks should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    numTicks: {
-      name: 'Number of ticks',
-      description: 'Sets the number of ticks to be displayed.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: 0 },
-      },
-    },
-    showTickNumbers: {
-      name: 'Show tick numbers',
-      description: 'Toggles if tick numbers should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    snapToTicks: {
-      name: 'Snap to ticks',
-      description: 'Snaps the scrubber to the closest tick when dragging.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showTicks', eq: true },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    showTooltip: {
-      name: 'Show tooltip',
-      description: 'Toggles if the tooltip should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    showControls: {
-      name: 'Show controls (not compatible with input field)',
-      description: 'Toggles if controls should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    step: {
-      name: 'Step value',
-      description: 'Sets the value to increment/decrement with when using controls.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'showControls', eq: true },
-      table: {
-        defaultValue: { summary: 1 },
-      },
-    },
-    showInput: {
-      name: 'Show value input field (not compatible with controls)',
-      description: 'Toggles if the values input field should be shown or hidden.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'showControls', eq: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    scrubberSize: {
-      name: 'Scrubber size',
-      description: 'Switches between the large and small version of the scrubber.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    readonly: {
-      name: 'Read Only',
-      description: 'Puts the control in a read-only state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the slider.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  args: {
-    min: '0',
-    max: '100',
-    initialValue: '50',
-    showLabel: false,
-    labelText: 'Label',
-    showTicks: false,
-    numTicks: '3',
-    showTickNumbers: false,
-    snapToTicks: false,
-    showTooltip: true,
-    showControls: false,
-    step: '1',
-    showInput: false,
-    scrubberSize: 'Large',
-    readonly: false,
-    disabled: false,
-  },
-};
-const sizeLookUp = {
-  Large: 'lg',
-  Small: 'sm',
-};
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, scrubberSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </style>
-
-   <div class="demo-wrapper">
-     <sdds-slider id="sdds-slider"
-        min="${min}"
-        max="${max}"
-        ${showControls && step ? `step="${step}"` : ''}
-        value="${initialValue}"
-        ${showTicks ? `ticks="${numTicks}"` : ''}
-        ${showTickNumbers ? 'show-tick-numbers' : ''}
-        ${snapToTicks ? 'snap' : ''}
-        ${showLabel ? `label="${labelText}"` : ''}
-        ${showTooltip ? 'tooltip' : ''}
-        ${showControls ? 'controls' : ''}
-        ${showInput ? 'input' : ''}
-        ${disabled ? 'disabled' : ''}
-        scrubber-size="${sizeLookUp[scrubberSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </sdds-slider>
-    </div>
-
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelectorAll('sdds-slider')[0]
-
-      slider.removeEventListener('sddsChange', null)
-      slider.addEventListener('sddsChange', (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});
-//# sourceMappingURL=slider.stories.js.map

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

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

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

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

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

@@ -1,66 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Spinner',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    variant: {
-      name: 'Variant',
-      description: 'Switches the variant of the spinner.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Standard', 'Inverted'],
-      table: {
-        defaultValue: { summary: 'standard' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the spinner.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-  },
-  args: {
-    variant: 'Standard',
-    size: 'Large',
-  },
-};
-const Template = ({ size, variant }) => {
-  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
-  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
-  return formatHtmlPreview(`
-  <sdds-spinner 
-    size="${sizeLookup[size]}"  
-    variant="${variantLookup[variant]}">
-  </sdds-spinner>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};
-export const Inverted = Template.bind({});
-Inverted.args = {
-  variant: 'Inverted',
-};
-//# sourceMappingURL=spinner.stories.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/sdds-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAA6B,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAmB1E,MAAM,OAAO,WAAW;;uBAI2B,YAAY;yBAGlB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;qBAMP,MAAM,CAAC,UAAU,EAAE;;EAE/C,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;MACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;EACH,CAAC;EAWD,qBAAqB;IACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,aAAa,CAAC;MACxB,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC,CAAC;EACL,CAAC;EAGD,yBAAyB;IACvB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,eAAe,CAAC;MAC1B,aAAa,EAAE,IAAI,CAAC,aAAa;KAClC,CAAC,CAAC;EACL,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,MAAM,CAAC;MACjB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;EACL,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,YAAY,CAAC;MACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;QAE7E,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event } from '@stencil/core';\nimport { EventEmitter, HostElement, Watch } from '@stencil/core/internal';\n\ntype SddsStepperProps = {\n  orientation: 'horizontal' | 'vertical';\n  labelPosition: 'aside' | 'below';\n  size: 'sm' | 'lg';\n  hideLabels: boolean;\n};\n\nexport type InternalSddsStepperPropChange = {\n  stepperId: string;\n  changed: Array<keyof SddsStepperProps>;\n} & Partial<SddsStepperProps>;\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  @Element() host: HostElement;\n\n  /** The orientation the children are layed out. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  /** ID used for internal stepper functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time.\n   */\n  @Prop() stepperId: string = crypto.randomUUID();\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.orientation === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  @Event({\n    eventName: 'internalSddsPropsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  internalSddsPropsChange: EventEmitter<InternalSddsStepperPropChange>;\n\n  @Watch('orientation')\n  handleDirectionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['orientation'],\n      orientation: this.orientation,\n    });\n  }\n\n  @Watch('labelPosition')\n  handleLabelPositionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['labelPosition'],\n      labelPosition: this.labelPosition,\n    });\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['size'],\n      size: this.size,\n    });\n  }\n\n  @Watch('hideLabels')\n  handleHideLabelsChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['hideLabels'],\n      hideLabels: this.hideLabels,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"list\"\n          class={`${this.orientation} text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,WAAW;;;iBAKwC,UAAU;;;;;;EAgBxE,mDAAmD;EACnD,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;IAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;EAC5C,CAAC;EAGD,iBAAiB,CAAC,KAAiD;IACjE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;MAC7C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;QAC3C,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,UAAU,EAAE;UACtF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;MAChD,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,SAAS,IAAI,CAAC,aAAa,IAChE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACnC,EAAE;QAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CACpD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAC/B,CACd,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,KAAK,CACX,CACG;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;UAC5C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { InternalSddsStepperPropChange } from '../sdds-stepper';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Index of the step. Will be displayed in the step if state is current/upcoming. */\n  @Prop() index: string;\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: 'sm' | 'lg';\n\n  @State() orientation: 'horizontal' | 'vertical';\n\n  @State() labelPosition: 'aside' | 'below';\n\n  @Element() el: HTMLElement;\n\n  private stepperEl: HTMLSddsStepperElement;\n\n  private stepperId: string;\n\n  /* Needs to be onload to do this on any updates. */\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.orientation = this.stepperEl.orientation;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n    this.stepperId = this.stepperEl.stepperId;\n  }\n\n  @Listen('internalSddsPropsChange', { target: 'body' })\n  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>) {\n    if (this.stepperId === event.detail.stepperId) {\n      event.detail.changed.forEach((changedProp) => {\n        if (typeof this[changedProp] === 'undefined') {\n          throw new Error(`Table prop is not supported: ${changedProp}`);\n        }\n        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {\n          this.labelPosition = 'aside';\n        }\n        this[changedProp] = event.detail[changedProp];\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.orientation} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              this.index\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>\n              <slot name=\"label\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,130 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Stepper',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    style: {
-      name: 'Style',
-      description: 'Sets the style of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Text on side', 'Vertical'],
-      table: {
-        defaultValue: { summary: 'Default' },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      table: {
-        defaultValue: { summary: 'Native' },
-      },
-    },
-    hideLabels: {
-      name: 'Hide labels',
-      description: 'Hides the labels for all stepper items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    style: 'Default',
-    iconType: 'Native',
-    hideLabels: false,
-  },
-};
-const Template = ({ size, style, iconType, hideLabels }) => {
-  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
-  const styleLookup = {
-    'Default': '',
-    'Text on side': 'sdds-stepper--sidetext',
-    'Vertical': 'sdds-stepper--vertical',
-  };
-  return formatHtmlPreview(`
-
-    ${iconType === 'Native'
-    ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
-  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>
-    `
-    : ''}
-
-
-    <div class="sdds-stepper ${sizeClass} ${styleLookup[style]}">
-
-      <div class="sdds-stepper__step sdds-stepper__step--value">
-        <div class="sdds-stepper__step-icon">
-          <span class="sdds-stepper__step-icon-value">1</span>
-        </div>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step value</label>'}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--warning">
-        <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
-    ? `<i class="sdds-icon warning"></i>
-        `
-    : `<sdds-icon name="warning" size="${size === 'Small' ? '16px' : '18px'}"></sdds-icon> `}
-        </div>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step warning</label>'}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--inactive">
-        <div class="sdds-stepper__step-icon">
-          <span class="sdds-stepper__step-icon-value">3</span>
-        </div>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step inactive with text</label>'}
-      </div>
-
-      <div class="sdds-stepper__step sdds-stepper__step--success">
-        <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
-    ? `<i class="sdds-icon tick"></i>
-        `
-    : `<div>
-        <sdds-icon name="tick" size="${size === 'Small' ? '16px' : '20px'}"></sdds-icon> 
-        </div>`}
-        </div>
-        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step success</label>'}
-      </div>
-
-    </div>
-    `);
-};
-export const Native = Template.bind({});
-Native.args = {};
-//# sourceMappingURL=stepper.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Stepper',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    style: {\n      name: 'Style',\n      description: 'Sets the style of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Text on side', 'Vertical'],\n      table: {\n        defaultValue: { summary: 'Default' },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n    hideLabels: {\n      name: 'Hide labels',\n      description: 'Hides the labels for all stepper items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    style: 'Default',\n    iconType: 'Native',\n    hideLabels: false,\n  },\n};\n\nconst Template = ({ \n  size, \n  style, \n  iconType, \n  hideLabels \n}) => {\n  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';\n\n  const styleLookup = {\n    'Default': '',\n    'Text on side': 'sdds-stepper--sidetext',\n    'Vertical': 'sdds-stepper--vertical',\n  };\n  return formatHtmlPreview(\n    `\n\n    ${\n      iconType === 'Native'\n        ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>\n    `\n        : ''\n    }\n\n\n    <div class=\"sdds-stepper ${sizeClass} ${styleLookup[style]}\">\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--value\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">1</span>\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step value</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--warning\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon warning\"></i>\n        `\n            : `<sdds-icon name=\"warning\" size=\"${size === 'Small' ? '16px' : '18px'}\"></sdds-icon> `\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step warning</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--inactive\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">3</span>\n        </div>\n        ${\n          hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step inactive with text</label>'\n        }\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--success\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon tick\"></i>\n        `\n            : `<div>\n        <sdds-icon name=\"tick\" size=\"${size === 'Small' ? '16px' : '20px'}\"></sdds-icon> \n        </div>`\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step success</label>'}\n      </div>\n\n    </div>\n    `,\n  );\n};\n\nexport const Native = Template.bind({});\nNative.args = {};\n"]}

package/dist/collection/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-folder-tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,aAAa;;oBAEI,KAAK;oBAEJ,KAAK;;;EAIlC,mFAAmF;EAEnF,KAAK,CAAC,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAED,kFAAkF;EAElF,KAAK,CAAC,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;oBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;iBAClC,EACP,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE;QAEtC,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Method, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tab',\n  styleUrl: 'sdds-folder-tab.scss',\n  shadow: true,\n})\nexport class SddsFolderTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`${this.disabled ? 'disabled' : ''}\n                  ${this.selected ? 'selected' : ''}\n                `}\n          style={{ width: `${this.tabWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"folder-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/folder-tabs/folder-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  State,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @State() buttonWidth: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsFolderTabElement>;\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  calculateButtonWidth() {\n    this.children = this.children.map((tab: HTMLSddsFolderTabElement) => {\n      if (tab.offsetWidth > this.buttonWidth) {\n        this.buttonWidth = tab.offsetWidth;\n      }\n      return tab;\n    });\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\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  addResizeObserver = () => {\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\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\n  addEventListenerToTabs = () => {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n      this.children = this.children.map((item, index) => {\n        item.addEventListener('click', () => {\n          const sddsChangeEvent = this.sddsChange.emit({\n            selectedTabIndex: this.children.indexOf(item)\n          });\n\n          if(!sddsChangeEvent.defaultPrevented) {\n            if (!item.disabled) {\n              this.children.forEach((element) => element.setSelected(false));\n              item.setSelected(true);\n              this.selectedIndex = index;\n            }\n          }\n        });\n        return item;\n      });\n    \n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLDivElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}