@scania/tegel 0.0.61 → 0.0.71-beta

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

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

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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,230 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/native-table.stories.js

@@ -1,138 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Data Table/Native',
-  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' },
-      },
-    },
-    compactDesign: {
-      name: 'Compact design',
-      description: 'Enables compact design of the table, rows with less height.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    responsiveDesign: {
-      name: 'Responsive table',
-      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    tableTitle: {
-      name: 'Table title',
-      description: 'Sets text that appears in table caption area.',
-      control: {
-        type: 'text',
-      },
-    },
-    verticalDivider: {
-      name: 'Vertical dividers',
-      description: 'Enables vertical dividers between table columns.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    noMinWidth: {
-      name: 'No minimum width',
-      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    column1Width: {
-      name: 'Column 1 width',
-      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'noMinWidth', eq: true },
-    },
-    column2Width: {
-      name: 'Column 2 width',
-      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'noMinWidth', eq: true },
-    },
-    column3Width: {
-      name: 'Column 3 width',
-      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'noMinWidth', eq: true },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    compactDesign: false,
-    responsiveDesign: false,
-    tableTitle: 'Native table',
-    verticalDivider: false,
-    noMinWidth: false,
-    column1Width: '',
-    column2Width: '',
-    column3Width: '',
-  },
-};
-const Template = ({ modeVariant, compactDesign, responsiveDesign, tableTitle, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
-    <table class="
-        sdds-table
-        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}
-        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}
-        ${compactDesign ? 'sdds-table--compact' : ''}
-        ${verticalDivider ? 'sdds-table--divider' : ''}
-        ${noMinWidth ? 'sdds-table--no-min-width' : ''}
-        ${responsiveDesign ? 'sdds-table--responsive' : ''}
-    ">
-    ${tableTitle && `<caption>${tableTitle}</caption>`}
-    <thead>
-      <tr>
-        <th ${column1Width ? `style="width: ${column1Width};"` : ''}>Header</th>
-        <th ${column2Width ? `style="width: ${column2Width};"` : ''}>Header</th>
-        <th ${column3Width ? `style="width: ${column3Width};"` : ''}>Header</th>
-      </tr>
-    </thead>
-     <tbody>
-      <tr>
-        <td>Text</td>
-        <td>Text</td>
-        <td>Text</td>
-      </tr>
-      <tr>
-        <td>Text</td>
-        <td>Text</td>
-        <td>Text</td>
-      </tr>
-      <tr>
-        <td>Text</td>
-        <td>Text</td>
-        <td>Text</td>
-      </tr>
-    </tbody>
-  </table>
-    `);
-export const Default = Template.bind({});
-//# sourceMappingURL=native-table.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Data Table/Native',\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    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    tableTitle: {\n      name: 'Table title',\n      description: 'Sets text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n    },\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'Enables vertical dividers between table columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    responsiveDesign: false,\n    tableTitle: 'Native table',\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  tableTitle,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n}) =>\n  formatHtmlPreview(`\n    <table class=\"\n        sdds-table\n        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}\n        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}\n        ${compactDesign ? 'sdds-table--compact' : ''}\n        ${verticalDivider ? 'sdds-table--divider' : ''}\n        ${noMinWidth ? 'sdds-table--no-min-width' : ''}\n        ${responsiveDesign ? 'sdds-table--responsive' : ''}\n    \">\n    ${tableTitle && `<caption>${tableTitle}</caption>`}\n    <thead>\n      <tr>\n        <th ${column1Width ? `style=\"width: ${column1Width};\"` : ''}>Header</th>\n        <th ${column2Width ? `style=\"width: ${column2Width};\"` : ''}>Header</th>\n        <th ${column3Width ? `style=\"width: ${column3Width};\"` : ''}>Header</th>\n      </tr>\n    </thead>\n     <tbody>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n    `);\n\nexport const Default = Template.bind({});"]}

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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-body/table-body.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst jsonData = [\n  {\n    truck: 'L-series',\n    driver: 'Sonya Bruce',\n    country: 'Brazil',\n    mileage: 123987,\n  },\n  {\n    truck: 'P-series',\n    driver: 'Guerra Bowman',\n    country: 'Sweden',\n    mileage: 2000852,\n  },\n  {\n    truck: 'G-series',\n    driver: 'Ferrell Wallace',\n    country: 'Germany',\n    mileage: 564,\n  },\n  {\n    truck: 'R-series',\n    driver: 'Cox Burris',\n    country: 'Spain',\n    mileage: 1789357,\n  },\n  {\n    truck: 'S-series',\n    driver: 'Montgomery Cervantes',\n    country: 'Croatia',\n    mileage: 65,\n  },\n  {\n    truck: 'L-series',\n    driver: 'Sheryl Nielsen',\n    country: 'Greece',\n    mileage: 365784,\n  },\n  {\n    truck: 'G-series',\n    driver: 'Benton Gomez',\n    country: 'France',\n    mileage: 80957,\n  },\n];\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n];\n\n@Component({\n  tag: 'sdds-table-body',\n  styleUrl: 'table-body.scss',\n  shadow: false,\n})\nexport class TableBody {\n  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n  @Prop() disableFilteringFunction: boolean = false;\n\n  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n  @Prop() disableSortingFunction: boolean = false;\n\n  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */\n  @Prop({ mutable: true }) bodyData: any;\n\n  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n  @Prop() enableDummyData: boolean = false;\n\n  @State() jsonData: any = JSON.stringify(jsonData);\n\n  @Element() host: HTMLElement;\n\n  @State() rowsPerPage: number = 1;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enablePaginationTableBody: boolean = false;\n\n  @State() enableExpandableRows: boolean = true;\n\n  @State() innerBodyData = [];\n\n  @State() bodyDataManipulated = [];\n\n  @State() bodyDataOriginal = [];\n\n  @State() multiselectArray = [];\n\n  @State() multiselectArrayJSON: string;\n\n  @State() mainCheckboxStatus: boolean = false;\n\n  @State() columnsNumber: number = 0;\n\n  @State() disableAllSorting: boolean = false;\n\n  @State() numberOfPages: number = 0;\n\n  @State() paginationValue: number = 1;\n\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() showNoResultsMessage: boolean = false;\n\n  @State() tableId: string = '';\n\n  tableEl: HTMLSddsTableElement;\n\n  @Watch('bodyData')\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.innerBodyData = JSON.parse(newValue);\n    } else {\n      this.innerBodyData = newValue;\n    }\n    this.bodyDataManipulated = [...this.innerBodyData];\n    this.bodyDataOriginal = [...this.innerBodyData];\n  }\n\n  /** @internal Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'internalSddsSortingChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSortingChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'internalSddsCheckboxChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsCheckboxChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n  @Event({\n    eventName: 'internalSddsMainCheckboxChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsMainCheckboxChange: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  static compareValues(key, order = 'asc') {\n    return function innerSort(a, b) {\n      // eslint-disable-next-line no-prototype-builtins\n      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n        // property doesn't exist on either object\n        return 0;\n      }\n\n      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n      let comparison = 0;\n      if (varA > varB) {\n        comparison = 1;\n      } else if (varA < varB) {\n        comparison = -1;\n      }\n      return order === 'desc' ? comparison * -1 : comparison;\n    };\n  }\n\n  uncheckAll = () => {\n    this.mainCheckboxStatus = false;\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n    this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n  };\n\n  sortData(keyValue, sortingDirection) {\n    if (!this.disableSortingFunction) {\n      if (this.enableMultiselect) {\n        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n        this.uncheckAll();\n      }\n\n      // use spread operator to make enable sorting and modifying array, same as using .slice()\n      this.bodyDataManipulated = [...this.bodyDataManipulated];\n      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n    }\n  }\n\n  // Listen to sortColumnData from data-table-header-element - TODO\n  @Listen('sddsSortChange', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n    if (this.tableId === receivedID) {\n      this.sortData(receivedKeyValue, receivedSortingDirection);\n    }\n  }\n\n  selectedDataExporter = () => {\n    const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n    this.multiselectArray = [];\n    for (let j = 0; j < selectedRows.length; j++) {\n      const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n      const selectedObject = {};\n      for (let i = 0; i < rowCells.length; i++) {\n        const currentCellKey = rowCells[i].getAttribute('cell-key');\n        const currentCellValue = rowCells[i].getAttribute('cell-value');\n        selectedObject[currentCellKey] = currentCellValue;\n      }\n      this.multiselectArray.push(selectedObject);\n    }\n    this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n  };\n\n  @Listen('internalSddsMainCheckboxChange', { target: 'body' }) // -\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      [, this.mainCheckboxStatus] = event.detail;\n      this.selectedDataExporter();\n    }\n  }\n\n  bodyCheckBoxClicked = () => {\n    const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n    const numberOfRowsSelected = this.host.getElementsByClassName(\n      'sdds-table__row--selected',\n    ).length;\n\n    this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n\n    this.selectedDataExporter();\n  };\n\n  // No need to read the value, event is here just to trigger another function\n  @Listen('internalSddsRowChange', { target: 'body' })\n  bodyCheckboxListener() {\n    this.bodyCheckBoxClicked();\n  }\n\n  searchFunction(searchTerm) {\n    if (!this.disableFilteringFunction) {\n      /*\n      // Logic for filtering JSON data on all columns\n      // Really nice solution, do not delete, might be needed in future\n      // Reason to go with upper one is not to lose selected state on checkboxes\n      if (searchTerm.length > 0) {\n        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n          Object.keys(option).some(\n            (key) =>\n              String(option[key] ?? '')\n                .toLowerCase()\n                .indexOf(searchTerm) >= 0\n          )\n        );\n      } else {\n        this.bodyDataManipulated = this.bodyDataOriginal;\n      }\n  */\n\n      // grab all rows in body\n      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n      if (searchTerm.length > 0) {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = true;\n        }\n\n        dataRowsFiltering.forEach((item) => {\n          const cells = item.querySelectorAll('sdds-body-cell');\n          const cellValuesArray = [];\n\n          // go through cells and save cell-values in array\n          cells.forEach((cellItem) => {\n            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n            cellValuesArray.push(cellValue);\n          });\n\n          // iterate over array of values and see if one matches search string\n          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n          // if matches, show parent row, otherwise hide the row\n          if (matchCounter) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        });\n\n        this.disableAllSorting = true;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n\n        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n        // If same, info message will be shown\n        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n      } else {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = false;\n        }\n\n        // Check if pagination is ON in order to prevent showing all rows\n        if (this.enablePaginationTableBody) {\n          // TODO: EMIT PAGINATION\n        } else {\n          dataRowsFiltering.forEach((item) => {\n            item.classList.remove('sdds-table__row--hidden');\n          });\n        }\n\n        this.disableAllSorting = false;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to sddsFilter from tableToolbar component\n  @Listen('sddsFilter', { target: 'body' })\n  sddsFilterListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.searchFunction(event.detail[1]);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    if (this.enableDummyData) {\n      this.bodyData = this.jsonData;\n    } else if (this.bodyData) {\n      this.arrayDataWatcher(this.bodyData);\n    }\n  }\n\n  componentWillRender() {\n    const headerColumnsNo =\n      this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n    // multiselect and expended features requires one extra column for controls...\n    if (this.enableMultiselect || this.enableExpandableRows) {\n      this.columnsNumber = headerColumnsNo + 1;\n    } else {\n      this.columnsNumber = headerColumnsNo;\n    }\n  }\n\n  render() {\n    return (\n      <Host data-selected-rows={this.multiselectArrayJSON}>\n        {this.bodyDataManipulated.map((row) => (\n          <sdds-table-body-row>\n            {Object.keys(row).map((cellData) => (\n              <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n            ))}\n          </sdds-table-body-row>\n        ))}\n        {this.showNoResultsMessage && (\n          <tr>\n            <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n              Unfortunately, no data matches your search term &#128533;\n            </td>\n          </tr>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}