@scania/tegel 0.0.61 → 0.0.71-beta

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

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textarea',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switches between success and error state.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label text.',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets the helper text.',\n      control: {\n        type: 'text',\n      },\n    },\n    rows: {\n      name: 'Rows',\n      description: 'Sets the number of rows.',\n      control: {\n        type: 'number',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Sets a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Enables component to shrink below 208px which is the default width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      name: 'Read only',\n      description: 'Sets the textarea to 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 textarea.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: 'Default',\n    label: 'Label',\n    labelPosition: 'No label',\n    placeholder: 'Placeholder',\n    helper: '',\n    rows: 5,\n    maxLength: 0,\n    noMinWidth: false,\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state,\n  label,\n  labelPosition,\n  placeholder,\n  helper,\n  rows,\n  maxLength,\n  noMinWidth,\n  readonly,\n  disabled,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const labelPosLookup = {\n    'No label': 'no-label',\n    'Inside': 'inside',\n    'Outside': 'outside',\n  };\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n      width: 400px;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n        <sdds-textarea\n          rows=\"${rows}\"\n          state=\"${stateValue}\"\n          label=\"${label}\"\n          helper=\"${helper}\"\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\"`\n              : ''\n          }\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${disabled ? 'disabled' : ''}\n          ${readonly ? 'read-only' : ''}\n          ${noMinWidth ? 'no-min-width' : ''}\n          placeholder=\"${placeholder}\"\n          ${maxlength}>\n        </sdds-textarea>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textarea')\n\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"textfield.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n        ${this.value ? 'textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'form-textfield-disabled' : ''}\n        ${this.readOnly ? 'form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n          <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n            <slot name=\"prefix\" />\n          </div>\n\n          <div class=\"textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={`textfield-input textfield-input-${this.size}`}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"textfield-bar\"></div>\n\n          <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n            <slot name=\"suffix\" />\n          </div>\n          <span class=\"textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,254 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Textfield',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switches between success and error state.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Which type of textfield',
-      control: {
-        type: 'radio',
-      },
-      options: ['Text', 'Password'],
-      table: {
-        defaultValue: { summary: 'text' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switches between different sizes.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    label: {
-      name: 'Label text',
-      description: 'Sets the label text.',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Sets the label text position.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No label', 'Inside', 'Outside'],
-      table: {
-        defaultValue: { summary: 'no-label' },
-      },
-    },
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Sets the placeholder text.',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Sets the helper text.',
-      control: {
-        type: 'text',
-      },
-    },
-    prefix: {
-      name: 'Prefix',
-      description: 'Adds a prefix symbol or text before the textfield.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    prefixType: {
-      name: 'Prefix type',
-      description: 'Switches between icon and text for the prefix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'prefix', eq: true },
-    },
-    suffix: {
-      name: 'Suffix',
-      description: 'Adds a suffix symbol or text after the textfield.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    suffixType: {
-      name: 'Suffix type',
-      description: 'Swithces between icon or text for the suffix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'suffix', eq: true },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Sets a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Enables component to shrink below 208px which is the default width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    readonly: {
-      description: 'Sets the textfield to read-only state.',
-      name: 'Read Only',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      description: 'Disables the textfield.',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    state: 'Default',
-    type: 'Text',
-    size: 'Large',
-    label: 'Label',
-    labelPosition: 'No label',
-    placeholderText: 'Placeholder',
-    helper: '',
-    prefix: false,
-    prefixType: 'Icon',
-    suffix: false,
-    suffixType: 'Icon',
-    maxLength: 0,
-    noMinWidth: 'Default',
-    readonly: false,
-    disabled: false,
-  },
-};
-const Template = ({ modeVariant, state, type, size, label, labelPosition, placeholderText, helper, prefix, prefixType, suffix, suffixType, maxLength, noMinWidth, readonly, disabled, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const stateValue = state.toLowerCase();
-  const sizeLookUp = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 200px;
-    height: 150px;
-  }
-    </style>
-
-  <div class="demo-wrapper">
-    <sdds-textfield
-      type="${type}"
-      size="${sizeLookUp[size]}"
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      state="${stateValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${helper ? `helper="${helper}"` : ''}
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'read-only' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
-        ${prefix
-    ? `
-          ${prefixType === 'Text'
-      ? '<span slot="prefix">$</span>'
-      : '<sdds-icon slot="prefix" name="truck" size="20px"></sdds-icon>'}
-        `
-    : ''}
-        ${suffix
-    ? `
-          ${suffixType === 'Text'
-      ? '<span slot="suffix">$</span>'
-      : '<sdds-icon slot="suffix" name="truck" size="20px"></sdds-icon>'}        `
-    : ''}
-        </sdds-textfield>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('sdds-textfield')
-    textElement.addEventListener('sddsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('sddsChange',(event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-};
-// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
-export const Default = Template.bind({});
-Default.args = {};
-//# sourceMappingURL=textfield.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"textfield.stories.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textfield',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switches between success and error state.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    type: {\n      name: 'Type',\n      description: 'Which type of textfield',\n      control: {\n        type: 'radio',\n      },\n      options: ['Text', 'Password'],\n      table: {\n        defaultValue: { summary: 'text' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Switches between different sizes.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label text.',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets the helper text.',\n      control: {\n        type: 'text',\n      },\n    },\n    prefix: {\n      name: 'Prefix',\n      description: 'Adds a prefix symbol or text before the textfield.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    prefixType: {\n      name: 'Prefix type',\n      description: 'Switches between icon and text for the prefix.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon', 'Text'],\n      if: { arg: 'prefix', eq: true },\n    },\n    suffix: {\n      name: 'Suffix',\n      description: 'Adds a suffix symbol or text after the textfield.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    suffixType: {\n      name: 'Suffix type',\n      description: 'Swithces between icon or text for the suffix.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon', 'Text'],\n      if: { arg: 'suffix', eq: true },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Sets a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Enables component to shrink below 208px which is the default width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    readonly: {\n      description: 'Sets the textfield to read-only state.',\n      name: 'Read Only',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      description: 'Disables the textfield.',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: 'Default',\n    type: 'Text',\n    size: 'Large',\n    label: 'Label',\n    labelPosition: 'No label',\n    placeholderText: 'Placeholder',\n    helper: '',\n    prefix: false,\n    prefixType: 'Icon',\n    suffix: false,\n    suffixType: 'Icon',\n    maxLength: 0,\n    noMinWidth: 'Default',\n    readonly: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state,\n  type,\n  size,\n  label,\n  labelPosition,\n  placeholderText,\n  helper,\n  prefix,\n  prefixType,\n  suffix,\n  suffixType,\n  maxLength,\n  noMinWidth,\n  readonly,\n  disabled,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const sizeLookUp = {\n    Large: 'lg',\n    Medium: 'md',\n    Small: 'sm',\n  };\n  return formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 200px;\n    height: 150px;\n  }\n    </style>\n\n  <div class=\"demo-wrapper\">\n    <sdds-textfield\n      type=\"${type}\"\n      size=\"${sizeLookUp[size]}\"\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n      state=\"${stateValue}\"\n      label=\"${label}\"\n      label-position=\"${labelPosition.toLowerCase()}\"\n      ${helper ? `helper=\"${helper}\"` : ''}\n      ${maxlength}\n      ${disabled ? 'disabled' : ''}\n      ${readonly ? 'read-only' : ''}\n      ${noMinWidth ? 'no-min-width' : ''}\n      placeholder=\"${placeholderText}\" >\n        ${\n          prefix\n            ? `\n          ${\n            prefixType === 'Text'\n              ? '<span slot=\"prefix\">$</span>'\n              : '<sdds-icon slot=\"prefix\" name=\"truck\" size=\"20px\"></sdds-icon>'\n          }\n        `\n            : ''\n        }\n        ${\n          suffix\n            ? `\n          ${\n            suffixType === 'Text'\n              ? '<span slot=\"suffix\">$</span>'\n              : '<sdds-icon slot=\"suffix\" name=\"truck\" size=\"20px\"></sdds-icon>'\n          }        `\n            : ''\n        }\n        </sdds-textfield>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textfield')\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `,\n  );\n};\n\n// ${true ? '<sdds-icon name=\"cross\" slot=\"sdds-prefix\"></sdds-icon>' : ''}\n\nexport const Default = Template.bind({});\n\nDefault.args = {};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.handleClose();\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.handleShow();\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/sdds-toast.stories.js

@@ -1,87 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Success', 'Warning', 'Error'],
-      table: {
-        defaultValue: {
-          summary: 'information',
-        },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    type: 'Information',
-    header: 'Header',
-    subheader: '',
-    link: false,
-  },
-};
-const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds-toast
-        type="${type.toLowerCase()}"
-        header="${header}"
-    >
-      ${subheader
-  ? `
-      <div  slot="toast-subheader">
-        ${subheader}
-      </div>
-      `
-  : ''}
-       ${link
-  ? `<a slot="toast-link" href="#">This is a link.</a>
-       `
-  : ''}
-    </sdds-toast>
-        <script>
-        document.addEventListener('sddsClose', (event) => {
-            console.log(event)
-        })
-    </script>
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-toast.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toast',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n      table: {\n        defaultValue: {\n          summary: 'information',\n        },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n  },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n  formatHtmlPreview(\n    `<sdds-toast\n        type=\"${type.toLowerCase()}\"\n        header=\"${header}\"\n    >\n      ${\n        subheader\n          ? `\n      <div  slot=\"toast-subheader\">\n        ${subheader}\n      </div>\n      `\n          : ''\n      }\n       ${\n         link\n           ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n       `\n           : ''\n       }\n    </sdds-toast>\n        <script>\n        document.addEventListener('sddsClose', (event) => {\n            console.log(event)\n        })\n    </script>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,132 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Success', 'Warning', 'Error'],
-    },
-    header: {
-      name: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'recommended', ...iconsNames],
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-  },
-  args: {
-    type: 'Information',
-    header: 'Header',
-    subheader: '',
-    link: false,
-    icon: 'recommended',
-    iconType: 'Web Component',
-  },
-};
-const typeLookup = {
-  Success: 'success',
-  Information: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const iconLookup = {
-  Success: 'tick',
-  Information: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const Template = ({ type, header, subheader, link, iconType, icon }) => {
-  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;
-  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-toast sdds-toast-${typeLookup[type]}">
-  ${icon === 'none'
-    ? ''
-    : `
-    <div class="sdds-toast-icon">
-      ${iconType === 'Native'
-      ? `<i class="sdds-icon ${iconValue}"></i>`
-      : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
-      `}
-    </div>
-  `}
-    <div class="sdds-toast-content">
-      <div class="sdds-toast-header">
-        <span class="sdds-toast-headline">${header}</span>
-        <button type="button" aria-label="close" class="sdds-toast-close">
-          ${iconType === 'Native'
-    ? `<i class="sdds-icon cross"></i>`
-    : `<sdds-icon name="cross" size="20px"></sdds-icon>
-          `}
-        </button>
-      </div>
-      ${subheader || link
-    ? `\n<div class="sdds-toast-body">\
-          ${subheader ? `\n<span class="sdds-toast-subheadline">${subheader}</span>` : ''}\
-          ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
-          </div> `
-    : ''}
-    </div>
-  </div>
-  `);
-};
-export const Native = Template.bind({});
-//# sourceMappingURL=toast.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\n\nexport default {\n  title: 'Components/Toast',\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=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description:\n        'Icon to display on the button. Choose \"none\" to exclude the icon, or choose \"recommended\" to pick the icon that is recommended for the type of toast.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'recommended', ...iconsNames],\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    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n    icon: 'recommended',\n    iconType: 'Web Component',\n  },\n};\nconst typeLookup = {\n  Success: 'success',\n  Information: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\nconst iconLookup = {\n  Success: 'tick',\n  Information: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\n\nconst Template = ({ type, header, subheader, link, iconType, icon }) => {\n  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;\n  return formatHtmlPreview(\n    `\n      ${\n        iconType === 'Native'\n          ? `\n    <style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n\n    </style>\n      `\n          : ''\n      }\n  <div class=\"sdds-toast sdds-toast-${typeLookup[type]}\">\n  ${\n    icon === 'none'\n      ? ''\n      : `\n    <div class=\"sdds-toast-icon\">\n      ${\n        iconType === 'Native'\n          ? `<i class=\"sdds-icon ${iconValue}\"></i>`\n          : `<sdds-icon name=\"${iconValue}\" size=\"20px\"></sdds-icon>\n      `\n      }\n    </div>\n  `\n  }\n    <div class=\"sdds-toast-content\">\n      <div class=\"sdds-toast-header\">\n        <span class=\"sdds-toast-headline\">${header}</span>\n        <button type=\"button\" aria-label=\"close\" class=\"sdds-toast-close\">\n          ${\n            iconType === 'Native'\n              ? `<i class=\"sdds-icon cross\"></i>`\n              : `<sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          `\n          }\n        </button>\n      </div>\n      ${\n        subheader || link\n          ? `\\n<div class=\"sdds-toast-body\">\\\n          ${subheader ? `\\n<span class=\"sdds-toast-subheadline\">${subheader}</span>` : ''}\\\n          ${link ? '\\n<a class=\"sdds-toast-link\" href=\"#\">Link example</a>' : ''}\n          </div> `\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AASzF,MAAM,OAAO,UAAU;;IA8CrB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;IACL,CAAC,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;EAI9C,0BAA0B;EAE1B,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAsBD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B;MAClC,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF;MACD,iCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb;MACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;QACxE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}