@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/components/{chips/chips.stories.js → chip/chip.stories.js}

@@ -124,4 +124,4 @@ const Template = ({ active, size, placeholderText, icon, iconPosition, iconType
     `);
 };
 export const Native = Template.bind({});
-//# sourceMappingURL=chips.stories.js.map
+//# sourceMappingURL=chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Chips',\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=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    active: {\n      name: 'Active',\n      description: 'Toggles if the chip is active or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Sets custom chip text.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the chip.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon position',\n      description: 'Sets the placement of the icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon left', 'Icon right'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Icon right' },\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      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n  },\n  args: {\n    active: false,\n    size: 'Large',\n    placeholderText: 'Chip text',\n    icon: false,\n    iconPosition: 'Icon right',\n    iconType: 'Native',\n  },\n};\n\nconst Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {\n  const activeValue = active === true ? 'sdds-chip-active' : '';\n  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';\n  const iconPositionLookup = {\n    'Icon left': 'sdds-chip-icon-left',\n    'Icon right': 'sdds-chip-icon-right',\n  };\n\n  // TODO - Add dark theme to story\n  const iconSvg = `\n    ${\n      iconType === 'Native'\n        ? '<i class=\" sdds-icon notification\"></i>'\n        : '<sdds-icon name=\"notification\" size=\"16px\"></sdds-icon>'\n    }\n    `;\n\n  return formatHtmlPreview(`\n  ${\n    iconType === 'Native'\n      ? `<style>\n/* Note: In case you are 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    <!-- Below is a chip button implementation. Please use the proper html element \n    depending on usage (button, checkbox, radio, etc) -->\n    <button class=\"sdds-chip ${\n      icon ? iconPositionLookup[iconPosition] : ''\n    } ${activeValue} ${sizeValue}\">\n      ${\n        icon\n          ? `\n      <div class=\"sdds-chip-icon\">\n        ${iconSvg}\n      </div>\n      `\n          : ''\n      }<span class=\"sdds-chip-text\">${placeholderText}</span>\n    </button>\n    `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/chip/sdds-chip.css

@@ -0,0 +1,58 @@
+/* Styling for slotted content */
+::slotted(*) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:host([size=sm]) ::slotted(*) {
+  gap: 6px;
+}
+
+:host([size=lg]) ::slotted(*) {
+  gap: 8px;
+}
+
+/* Component styling */
+.component .sdds-chip-component {
+  display: inline-flex;
+}
+.component .sdds-chip-component label {
+  background-color: var(--sdds-chips-background);
+  color: var(--sdds-chips-color);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.component .sdds-chip-component label:hover {
+  background-color: var(--sdds-chips-background-hover);
+}
+.component .sdds-chip-component.lg label {
+  height: 32px;
+  padding: 1px 16px 0;
+  gap: 8px;
+}
+.component .sdds-chip-component.sm label {
+  height: 24px;
+  padding: 1px 12px 0;
+  gap: 6px;
+}
+.component .sdds-chip-component input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.component .sdds-chip-component input:focus-visible + label {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.component .sdds-chip-component input:checked + label {
+  background-color: var(--sdds-chips-background-active);
+  color: var(--sdds-chips-color-active);
+}
+.component .sdds-chip-component input:checked + label:hover {
+  background-color: var(--sdds-chips-background-active-hover);
+}

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

@@ -0,0 +1,195 @@
+import { Host, h } from '@stencil/core';
+export class SddsChip {
+  constructor() {
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        chipId: this.chipId,
+        value: this.value,
+      });
+    };
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        chipId: this.chipId,
+      });
+    };
+    this.type = 'button';
+    this.size = 'lg';
+    this.chipId = crypto.randomUUID();
+    this.checked = false;
+    this.name = undefined;
+    this.value = undefined;
+  }
+  renderInputAttributes() {
+    if (this.type !== 'button') {
+      return {
+        value: this.value,
+        checked: this.checked,
+        name: this.name,
+        onChange: () => this.handleChange(),
+      };
+    }
+    return {
+      onClick: () => this.handleClick(),
+    };
+  }
+  render() {
+    const inputAttributes = this.renderInputAttributes();
+    return (h(Host, null, h("div", { class: "component" }, h("div", { class: `sdds-chip-component ${this.size}` }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, h("slot", { name: "label" }))))));
+  }
+  static get is() { return "sdds-chip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'radio' | 'checkbox'",
+          "resolved": "\"button\" | \"checkbox\" | \"radio\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of chip, depends on usage"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the chip component"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "chipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time."
+        },
+        "attribute": "chip-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Setting it to true set component state to checked. Valid only for type checkbox and radio."
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of input. Valid only for type checkbox and radio."
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n    value: string;\n  }",
+          "resolved": "{ chipId: string; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsClick",
+        "name": "sddsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier when chip is clicked. Valid only for type button. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n  }",
+          "resolved": "{ chipId: string; }",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=sdds-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-chip.js","sourceRoot":"","sources":["../../../src/components/chip/sdds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,QAAQ;;IAkCX,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAaM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;IACL,CAAC,CAAC;gBAtD8C,QAAQ;gBAG5B,IAAI;kBAMP,MAAM,CAAC,UAAU,EAAE;mBAGjB,KAAK;;;;EA4CxB,qBAAqB;IAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;OACpC,CAAC;KACH;IACD,OAAO;MACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;KAClC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAErD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,WAAW;QACpB,WAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,EAAE;UAC5C,2BAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAM,eAAe,EAAU;UACtE,aAAO,OAAO,EAAE,IAAI,CAAC,MAAM;YACzB,YAAM,IAAI,EAAC,OAAO,GAAG,CACf,CACJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-chip',\n  styleUrl: 'sdds-chip.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsChip {\n  /** Type of chip, depends on usage */\n  @Prop() type: 'button' | 'radio' | 'checkbox' = 'button';\n\n  /** Size of the chip component */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** ID used for internal chip functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time.\n   */\n  @Prop() chipId: string = crypto.randomUUID();\n\n  /** Setting it to true set component state to checked. Valid only for type checkbox and radio. */\n  @Prop() checked: boolean = false;\n\n  /** Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio. */\n  @Prop() name: string;\n\n  /** Value of input. Valid only for type checkbox and radio. */\n  @Prop() value: string;\n\n  /** Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    chipId: string;\n    value: string;\n  }>;\n\n  private handleChange = () => {\n    this.sddsChange.emit({\n      chipId: this.chipId,\n      value: this.value,\n    });\n  };\n\n  /** Sends unique chip identifier when chip is clicked. Valid only for type button. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    chipId: string;\n  }>;\n\n  private handleClick = () => {\n    this.sddsClick.emit({\n      chipId: this.chipId,\n    });\n  };\n\n  private renderInputAttributes() {\n    if (this.type !== 'button') {\n      return {\n        value: this.value,\n        checked: this.checked,\n        name: this.name,\n        onChange: () => this.handleChange(),\n      };\n    }\n    return {\n      onClick: () => this.handleClick(),\n    };\n  }\n\n  render() {\n    const inputAttributes = this.renderInputAttributes();\n\n    return (\n      <Host>\n        <div class=\"component\">\n          <div class={`sdds-chip-component ${this.size}`}>\n            <input type={this.type} id={this.chipId} {...inputAttributes}></input>\n            <label htmlFor={this.chipId}>\n              <slot name=\"label\" />\n            </label>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,230 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    inputType: {
+      name: 'Type',
+      description: 'Sets the chip type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Radio', 'Checkbox'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the chip size.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Adds an icon to the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconPosition: {
+      name: 'Icon Position',
+      description: 'Sets the icon position.',
+      if: { arg: 'icon', eq: true },
+      control: {
+        type: 'radio',
+      },
+      options: ['Prefix', 'Suffix'],
+      table: {
+        defaultValue: { summary: 'Prefix' },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        // TODO: Remove line below after we make design for disabled state, it hides control
+        disable: true,
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    inputType: 'Button',
+    size: 'Large',
+    label: 'Label',
+    icon: false,
+    iconPosition: 'Prefix',
+    disabled: false,
+  },
+};
+const Template = ({ inputType, size, label, icon, iconPosition }) => {
+  const sizeLookUp = {
+    Large: 'lg',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+  ${inputType === 'Button'
+    ? `<sdds-chip type="button" size="${sizeLookUp[size]}">
+            <span slot="label">
+                ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+                ${label}
+                ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+            </span>
+        </sdds-chip>
+
+        <!-- Script tag for demo purposes -->
+        <script>
+          document.addEventListener('sddsClick', (event)=>{
+          console.log(event)
+          })
+        </script>`
+    : ''}
+  ${inputType === 'Checkbox'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+  ${inputType === 'Radio'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+
+
+  `);
+};
+export const Chip = Template.bind({});
+//# sourceMappingURL=sdds-chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/sdds-chip.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',\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=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    inputType: {\n      name: 'Type',\n      description: 'Sets the chip type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Radio', 'Checkbox'],\n      table: {\n        defaultValue: { summary: 'button' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the component.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon Position',\n      description: 'Sets the icon position.',\n      if: { arg: 'icon', eq: true },\n      control: {\n        type: 'radio',\n      },\n      options: ['Prefix', 'Suffix'],\n      table: {\n        defaultValue: { summary: 'Prefix' },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        // TODO: Remove line below after we make design for disabled state, it hides control\n        disable: true,\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    inputType: 'Button',\n    size: 'Large',\n    label: 'Label',\n    icon: false,\n    iconPosition: 'Prefix',\n    disabled: false,\n  },\n};\n\nconst Template = ({ inputType, size, label, icon, iconPosition }) => {\n  const sizeLookUp = {\n    Large: 'lg',\n    Small: 'sm',\n  };\n\n  return formatHtmlPreview(`\n  ${\n    inputType === 'Button'\n      ? `<sdds-chip type=\"button\" size=\"${sizeLookUp[size]}\">\n            <span slot=\"label\">\n                ${\n                  icon && iconPosition === 'Prefix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n                ${label}\n                ${\n                  icon && iconPosition === 'Suffix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n            </span>\n        </sdds-chip>\n\n        <!-- Script tag for demo purposes -->\n        <script>\n          document.addEventListener('sddsClick', (event)=>{\n          console.log(event)\n          })\n        </script>`\n      : ''\n  }\n  ${\n    inputType === 'Checkbox'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" checked value=\"checkbox-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n  ${\n    inputType === 'Radio'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" checked value=\"radio-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n\n\n  `);\n};\n\nexport const Chip = Template.bind({});\n"]}

package/dist/collection/components/data-table/table/table.js

@@ -210,7 +210,7 @@ export class Table {
         "method": "internalSddsTablePropChange",
         "name": "internalSddsTablePropChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -225,7 +225,7 @@ export class Table {
           "references": {
             "InternalSddsTablePropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/sdds/tegel/src/components/data-table/table/table.tsx"
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/data-table/table/table.tsx"
             }
           }
         }

package/dist/collection/components/data-table/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/data-table/table/table.tsx"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,sFAAsF;AAEtF,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9F,MAAM,OAAO,KAAK;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,CAAC,EAAE,YAAY;KACjC,CAAC,CAAC;EACL,CAAC;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;EACjE,CAAC;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;EACpE,CAAC;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;EAC7D,CAAC;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;EAChE,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;EAC1D,CAAC;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE;MAC9D,aACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;UACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;UAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;UAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;SAChD;QAED,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n  textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** @internal Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'internalSddsTablePropChange',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n  emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.internalSddsTablePropChange.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitInternalSddsPropChange('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/data-table/table/table.tsx"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,sFAAsF;AAEtF,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9F,MAAM,OAAO,KAAK;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,CAAC,EAAE,YAAY;KACjC,CAAC,CAAC;EACL,CAAC;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;EACjE,CAAC;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;EACpE,CAAC;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;EAC7D,CAAC;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;EAChE,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;EAC1D,CAAC;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE;MAC9D,aACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;UACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;UAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;UAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;SAChD;QAED,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n  textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** @internal Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'internalSddsTablePropChange',\n    bubbles: true,\n    composed: true,\n    cancelable: false,\n  })\n  internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n  emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.internalSddsTablePropChange.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitInternalSddsPropChange('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}