@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1,240 @@
+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: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Which type of textfield',
+      control: {
+        type: 'radio',
+        options: ['Password', 'Text'],
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        options: ['Large', 'Medium', 'Small'],
+      },
+    },
+    minWidth: {
+      name: 'No minimum width',
+      description: 'Toggle the minimum width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read only',
+      name: 'Read Only',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    prefix: {
+      name: 'Prefix',
+      description: 'Add prefix symbol/text before the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    prefixType: {
+      name: 'Prefix type',
+      description: 'Choose icon or text for prefix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'prefix', eq: true },
+    },
+    suffix: {
+      name: 'Suffix',
+      description: 'Add suffix symbol/text after the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    suffixType: {
+      name: 'Suffix type',
+      description: 'Choose icon or text for suffix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'suffix', eq: true },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+  },
+  args: {
+    placeholderText: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    state: 'Default',
+    suffix: false,
+    suffixType: 'Icon',
+    prefix: false,
+    prefixType: 'Icon',
+    minWidth: 'Default',
+    size: 'Large',
+    type: 'Text',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, helper, prefix, prefixType, suffix, suffixType, maxLength, modeVariant, }) => {
+  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' : ''}
+      ${minWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
+        ${prefix
+    ? `
+        <span slot="sdds-prefix">
+          ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        ${suffix
+    ? `
+        <span slot="sdds-suffix">
+          ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        </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

@@ -0,0 +1 @@
+{"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    placeholderText: {\n      name: 'Placeholder',\n      description: 'Placeholder text',\n      control: {\n        type: 'text',\n      },\n    },\n    type: {\n      name: 'Type',\n      description: 'Which type of textfield',\n      control: {\n        type: 'radio',\n        options: ['Password', 'Text'],\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Switch between different sizes',\n      control: {\n        type: 'radio',\n        options: ['Large', 'Medium', 'Small'],\n      },\n    },\n    minWidth: {\n      name: 'No minimum width',\n      description: 'Toggle the minimum width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      description: 'Set textfield to disabled state',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n    },\n    readonly: {\n      description: 'Set textfield to read only',\n      name: 'Read Only',\n      control: {\n        type: 'boolean',\n      },\n    },\n    label: {\n      description: 'Label text for specific textfield',\n      name: 'Label text',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    prefix: {\n      name: 'Prefix',\n      description: 'Add prefix symbol/text before the textfield',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    prefixType: {\n      name: 'Prefix type',\n      description: 'Choose icon or text for 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: 'Add suffix symbol/text after the textfield',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    suffixType: {\n      name: 'Suffix type',\n      description: 'Choose icon or text for suffix.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon', 'Text'],\n      if: { arg: 'suffix', eq: true },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Add helper text for the textfield',\n      control: {\n        type: 'text',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Set a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switch between success or error state',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n    },\n  },\n  args: {\n    placeholderText: 'Placeholder',\n    disabled: false,\n    readonly: false,\n    label: 'Label',\n    labelPosition: 'None',\n    helper: '',\n    maxLength: 0,\n    state: 'Default',\n    suffix: false,\n    suffixType: 'Icon',\n    prefix: false,\n    prefixType: 'Icon',\n    minWidth: 'Default',\n    size: 'Large',\n    type: 'Text',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({\n  type,\n  placeholderText,\n  size,\n  minWidth,\n  disabled,\n  readonly,\n  label,\n  labelPosition,\n  state,\n  helper,\n  prefix,\n  prefixType,\n  suffix,\n  suffixType,\n  maxLength,\n  modeVariant,\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      ${minWidth ? 'no-min-width' : ''}\n      placeholder=\"${placeholderText}\" >\n        ${\n          prefix\n            ? `\n        <span slot=\"sdds-prefix\">\n          ${prefixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n        </span>`\n            : ''\n        }\n        ${\n          suffix\n            ? `\n        <span slot=\"sdds-suffix\">\n          ${suffixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n        </span>`\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.css

@@ -0,0 +1,102 @@
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host {
+  z-index: 700;
+}
+:host .toast-wrapper {
+  display: flex;
+  width: 348px;
+  background-color: var(--sdds-toast-background-color);
+  border-radius: 4px;
+}
+:host .toast-wrapper.information {
+  border-left: 4px solid var(--sdds-information);
+}
+:host .toast-wrapper.information sdds-icon {
+  color: var(--sdds-information);
+}
+:host .toast-wrapper.success {
+  border-left: 4px solid var(--sdds-positive);
+}
+:host .toast-wrapper.success sdds-icon {
+  color: var(--sdds-positive);
+}
+:host .toast-wrapper.error {
+  border-left: 4px solid var(--sdds-negative);
+}
+:host .toast-wrapper.error sdds-icon {
+  color: var(--sdds-negative);
+}
+:host .toast-wrapper.warning {
+  border-left: 4px solid var(--sdds-warning);
+}
+:host .toast-wrapper.warning sdds-icon {
+  color: var(--sdds-warning);
+}
+:host .toast-wrapper button.toast-close {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 14px 14px 0 0;
+  border: none;
+  background: transparent;
+}
+:host .toast-wrapper button.toast-close:hover {
+  cursor: pointer;
+}
+:host .toast-wrapper button.toast-close:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .toast-wrapper button.toast-close sdds-icon {
+  color: var(--sdds-toast-dissmiss-color);
+  padding: 0;
+}
+:host sdds-icon {
+  padding: 14px 0 0 12px;
+}
+:host .toast-content {
+  padding: 16px 0 16px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+:host .toast-content .toast-header {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-toast-headline-color);
+}
+:host .toast-content .toast-header.no-subheader {
+  margin-bottom: 4px;
+}
+:host .toast-content .toast-header.only-header {
+  margin-bottom: 0;
+}
+:host .toast-content .toast-subheader slot::slotted(*) {
+  margin-top: 4px;
+  color: var(--sdds-toast-subheadline-color);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding-bottom: 16px;
+  max-width: 252px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .toast-content .toast-subheader.no-link slot::slotted(*) {
+  padding-bottom: 0;
+}
+:host slot[name=toast-link]::slotted(*) {
+  color: var(--sdds-toast-link-color);
+}
+:host .sdds-mode-variant-primary {
+  --sdds-toast-background: var(--sdds-toast-background-primary);
+}
+:host .sdds-mode-variant-secondary {
+  --sdds-toast-background: var(--sdds-toast-background-secondary);
+}

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

@@ -0,0 +1,257 @@
+import { Host, h } from '@stencil/core';
+export class SddsToast {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.getHeaderClasses = () => {
+      if (!this.hasSubheader && !this.hasLink) {
+        return 'only-header';
+      }
+      if (!this.hasSubheader) {
+        return 'no-subheader';
+      }
+      return '';
+    };
+    this.toastId = crypto.randomUUID();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.type = 'information';
+    this.hidden = false;
+    this.toastRole = 'alert';
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
+  }
+  /** Hides the toast. */
+  async hideToast() {
+    this.hidden = true;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  /** Shows the toast. */
+  async showToast() {
+    this.hidden = false;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+  }
+  render() {
+    return (h(Host, { role: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            toast-wrapper
+            ${this.type}
+            ` }, h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
+              ${this.getHeaderClasses()}
+              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
+  }
+  static get is() { return "sdds-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "toastId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the toast. Randomly generated if not specified."
+        },
+        "attribute": "toast-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text for the component."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of toast."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the toast."
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toastRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'alert' | 'log' | 'status'",
+          "resolved": "\"alert\" | \"log\" | \"status\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ARIA toastRole for the toast."
+        },
+        "attribute": "toast-role",
+        "reflect": false,
+        "defaultValue": "'alert'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique toast identifier component is closed."
+        },
+        "complexType": {
+          "original": "{\n    toastId: string;\n  }",
+          "resolved": "{ toastId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Hides the toast.",
+          "tags": []
+        }
+      },
+      "showToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Shows the toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-toast.js.map

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

@@ -0,0 +1 @@
+{"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 toastRole 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.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\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  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        role={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"]}