@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/sdds-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,uBAAuB;MACpC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,4BAA4B;MACzC,IAAI,EAAE,QAAQ;KACf;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,OAAO;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;UAG1B,KAAK;;;;;;;;;;;;;;;;GAgBZ,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Checkbox',\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    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox',\n      control: {\n        type: 'boolean',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox',\n      control: {\n        type: 'boolean',\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'The label of the component',\n      type: 'string',\n    },\n  },\n  args: {\n    disabled: false,\n    checked: false,\n    label: 'Label',\n  },\n};\n\nconst Template = ({ checked, disabled, label }) =>\n  formatHtmlPreview(`\n    <sdds-checkbox\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        value=\"checkbox-value\"\n        >\n        ${label}\n    </sdds-checkbox>\n    \n    <!-- Script tag with event listener for demo purposes. -->\n    <script>\n        checkboxElement = document.querySelector('sdds-checkbox')\n        checkboxElement.addEventListener('sddsChange', (event) => {\n            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)\n        })\n        checkboxElement.addEventListener('sddsFocus',(event) => {\n          console.log(event)\n        })\n        checkboxElement.addEventListener('sddsBlur',(event) => {\n          console.log(event)\n        })\n    </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -0,0 +1,107 @@
+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: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Set custom chip text',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Add an icon to the chip.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Choose what icon type to use',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+    },
+    iconPosition: {
+      name: 'Icon position',
+      description: 'Set the placement of the icon',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon left', 'Icon right'],
+      if: { arg: 'icon', eq: true },
+    },
+    state: {
+      name: 'State',
+      description: 'Set the chips state as active or default',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Active'],
+    },
+    size: {
+      name: 'Size',
+      description: 'Set the chip size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Small'],
+    },
+  },
+  args: {
+    placeholderText: 'Chip text',
+    icon: false,
+    iconType: 'Native',
+    iconPosition: 'Icon right',
+    state: 'Default',
+    size: 'Default',
+  },
+};
+const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
+  const stateValue = state === 'Active' ? '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-chip-icon sdds-icon notification"></i>'
+    : '<sdds-icon class="sdds-chip-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] : ''} ${stateValue} ${sizeValue}">
+      ${icon ? iconSvg : ''}<span class="sdds-chip-text">${placeholderText}</span>
+    </button>
+    `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=chips.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chips.stories.js","sourceRoot":"","sources":["../../../src/components/chips/chips.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    placeholderText: {\n      name: 'Placeholder',\n      description: 'Set custom chip text',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Add an icon to the chip.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Choose what icon type to use',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n    },\n    iconPosition: {\n      name: 'Icon position',\n      description: 'Set the placement of the icon',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon left', 'Icon right'],\n      if: { arg: 'icon', eq: true },\n    },\n    state: {\n      name: 'State',\n      description: 'Set the chips state as active or default',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Active'],\n    },\n    size: {\n      name: 'Size',\n      description: 'Set the chip size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Small'],\n    },\n  },\n  args: {\n    placeholderText: 'Chip text',\n    icon: false,\n    iconType: 'Native',\n    iconPosition: 'Icon right',\n    state: 'Default',\n    size: 'Default',\n  },\n};\n\nconst Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {\n  const stateValue = state === 'Active' ? '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-chip-icon sdds-icon notification\"></i>'\n        : '<sdds-icon class=\"sdds-chip-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    } ${stateValue} ${sizeValue}\">\n      ${icon ? iconSvg : ''}<span class=\"sdds-chip-text\">${placeholderText}</span>\n    </button>\n    `);\n};\n\nexport const Native = Template.bind({});\n"]}

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

@@ -0,0 +1,161 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Data Table/Native',
+  argTypes: {
+    tableTitle: {
+      name: 'Table title',
+      description: 'Text that appears in table caption area.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    isCompact: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    dividers: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    responsiveTable: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidthArg: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns 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 too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', 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 too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', 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 too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    tableTitle: 'Native table',
+    isCompact: false,
+    dividers: false,
+    noMinWidthArg: false,
+    responsiveTable: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+  },
+};
+const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg, responsiveTable, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
+    <table class="
+        sdds-table
+        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}
+        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}
+        ${isCompact ? 'sdds-table--compact' : ''}
+        ${dividers ? 'sdds-table--divider' : ''}
+        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}
+        ${responsiveTable ? '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({});
+Default.args = {};
+//# sourceMappingURL=native-table.stories.js.map

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

@@ -0,0 +1 @@
+{"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    tableTitle: {\n      name: 'Table title',\n      description: 'Text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n      table: {\n        defaultValue: {\n          summary: '',\n        },\n      },\n    },\n    isCompact: {\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: {\n          summary: false,\n        },\n      },\n    },\n    dividers: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveTable: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidthArg: {\n      name: 'No minimum width',\n      description:\n        'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:\n        '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 too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description:\n        '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 too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description:\n        '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 too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tableTitle: 'Native table',\n    isCompact: false,\n    dividers: false,\n    noMinWidthArg: false,\n    responsiveTable: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  tableTitle,\n  isCompact,\n  dividers,\n  noMinWidthArg,\n  responsiveTable,\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        ${isCompact ? 'sdds-table--compact' : ''}\n        ${dividers ? 'sdds-table--divider' : ''}\n        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}\n        ${responsiveTable ? '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({});\nDefault.args = {};\n"]}

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

@@ -0,0 +1,15 @@
+:host,
+.sdds-table {
+  border-collapse: collapse;
+  display: table;
+  box-sizing: border-box;
+}
+:host *,
+.sdds-table * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-table--responsive),
+.sdds-table--responsive {
+  width: 100%;
+}

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

@@ -0,0 +1,254 @@
+// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js
+// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
+import { h, Host } from '@stencil/core';
+export class Table {
+  constructor() {
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = undefined;
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.enableResponsive = false;
+    this.modeVariant = null;
+    this.tableId = crypto.randomUUID();
+  }
+  emitTablePropsChangedEvent(changedValueName, changedValue) {
+    this.tablePropsChangedEvent.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitTablePropsChangedEvent('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitTablePropsChangedEvent('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitTablePropsChangedEvent('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitTablePropsChangedEvent('modeVariant', newValue);
+  }
+  render() {
+    return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
+        'sdds-table': true,
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--no-min-width': this.noMinWidth,
+        'sdds-table--responsive': this.enableResponsive,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "verticalDividers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style with vertical dividers between columns"
+        },
+        "attribute": "vertical-dividers",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "compactDesign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style where data-table toolbar, rows and footer are less high"
+        },
+        "attribute": "compact-design",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables to customise width on data-table columns"
+        },
+        "attribute": "no-min-width",
+        "reflect": true
+      },
+      "enableMultiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables multiselect feature of data-table"
+        },
+        "attribute": "enable-multiselect",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableExpandableRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables extended row feature of data-table"
+        },
+        "attribute": "enable-expandable-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables table to take 100% available width with equal spacing of columns"
+        },
+        "attribute": "enable-responsive",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "tableId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "table-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tablePropsChangedEvent",
+        "name": "tablePropsChangedEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Broadcasts changes to the tables props"
+        },
+        "complexType": {
+          "original": "TablePropsChangedEvent",
+          "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
+          "references": {
+            "TablePropsChangedEvent": {
+              "location": "local",
+              "path": "/Users/martin.jarsater/Documents/scania/sdds/tegel/src/components/data-table/table/table.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "enableMultiselect",
+        "methodName": "enableMultiselectChanged"
+      }, {
+        "propName": "enableExpandableRows",
+        "methodName": "enableExpandableRowsChanged"
+      }, {
+        "propName": "compactDesign",
+        "methodName": "compactDesignChanged"
+      }, {
+        "propName": "verticalDividers",
+        "methodName": "verticalDividersChanged"
+      }, {
+        "propName": "noMinWidth",
+        "methodName": "noMinWidthChanged"
+      }, {
+        "propName": "modeVariant",
+        "methodName": "modeVariantChanged"
+      }];
+  }
+}
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +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;AAsB9F,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,sBAAsB,CAAC,IAAI,CAAC;MAC/B,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};\n\nexport type TablePropsChangedEvent = {\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  /** Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'tablePropsChangedEvent',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n  emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.tablePropsChangedEvent.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitTablePropsChangedEvent('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.css

@@ -0,0 +1,22 @@
+:host,
+sdds-table-body {
+  box-sizing: border-box;
+  display: table-row-group;
+}
+:host *,
+sdds-table-body * {
+  box-sizing: border-box;
+}
+:host .sdds-table__info-message,
+sdds-table-body .sdds-table__info-message {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: table-cell;
+  box-sizing: border-box;
+  color: var(--sdds-data-table-color);
+  padding: var(--sdds-spacing-element-16);
+  min-width: 192px;
+  vertical-align: top;
+  background-color: transparent;
+  transition: background-color 200ms ease;
+}