@scania/tegel 0.0.34 → 0.0.52

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

@@ -1 +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"]}
+{"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,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,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;;;4BAGR,KAAK;;;;;;;;;;;;;;;;GAgB9B,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    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, checked, disabled }) =>\n  formatHtmlPreview(`\n    <sdds-checkbox\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        value=\"checkbox-value\"\n        >\n        <div slot=\"label\">${label}</div>\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

@@ -17,66 +17,80 @@ export default {
     ],
   },
   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: 'Set custom chip text',
+      description: 'Sets custom chip text.',
       control: {
         type: 'text',
       },
     },
     icon: {
       name: 'Icon',
-      description: 'Add an icon to the chip.',
+      description: 'Adds an icon to the chip.',
       control: {
         type: 'boolean',
       },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Choose what icon type to use',
-      control: {
-        type: 'radio',
+      table: {
+        defaultValue: { summary: false },
       },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
     },
     iconPosition: {
       name: 'Icon position',
-      description: 'Set the placement of the icon',
+      description: 'Sets 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',
+      table: {
+        defaultValue: { summary: 'Icon right' },
       },
-      options: ['Default', 'Active'],
     },
-    size: {
-      name: 'Size',
-      description: 'Set the chip size',
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
       control: {
         type: 'radio',
       },
-      options: ['Default', 'Small'],
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
     },
   },
   args: {
+    active: false,
+    size: 'Large',
     placeholderText: 'Chip text',
     icon: false,
-    iconType: 'Native',
     iconPosition: 'Icon right',
-    state: 'Default',
-    size: 'Default',
+    iconType: 'Native',
   },
 };
-const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
-  const stateValue = state === 'Active' ? 'sdds-chip-active' : '';
+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',
@@ -85,8 +99,8 @@ const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }
   // 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>'}
+    ? '<i class=" sdds-icon notification"></i>'
+    : '<sdds-icon name="notification" size="16px"></sdds-icon>'}
     `;
   return formatHtmlPreview(`
   ${iconType === 'Native'
@@ -98,8 +112,14 @@ const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }
     : ''}
     <!-- 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 class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${activeValue} ${sizeValue}">
+      ${icon
+    ? `
+      <div class="sdds-chip-icon">
+        ${iconSvg}
+      </div>
+      `
+    : ''}<span class="sdds-chip-text">${placeholderText}</span>
     </button>
     `);
 };

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

@@ -1 +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"]}
+{"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    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/data-table/native-table.stories.js

@@ -2,132 +2,110 @@ 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.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'text',
+        type: 'radio',
       },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: {
-          summary: '',
-        },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    isCompact: {
+    compactDesign: {
       name: 'Compact design',
       description: 'Enables compact design of the table, rows with less height.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    dividers: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    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,
-        },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    tableTitle: {
+      name: 'Table title',
+      description: 'Sets text that appears in table caption area.',
       control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        type: 'text',
       },
     },
-    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. ',
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    noMinWidthArg: {
+    noMinWidth: {
       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.',
+      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,
-        },
+        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',
-        },
+      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: 'noMinWidthArg', eq: true },
+      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 too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      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: 'noMinWidthArg', eq: true },
+      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 too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      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: 'noMinWidthArg', eq: true },
+      if: { arg: 'noMinWidth', eq: true },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
     tableTitle: 'Native table',
-    isCompact: false,
-    dividers: false,
-    noMinWidthArg: false,
-    responsiveTable: false,
+    verticalDivider: false,
+    noMinWidth: false,
     column1Width: '',
     column2Width: '',
     column3Width: '',
   },
 };
-const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg, responsiveTable, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
+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' : ''}
-        ${isCompact ? 'sdds-table--compact' : ''}
-        ${dividers ? 'sdds-table--divider' : ''}
-        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}
-        ${responsiveTable ? 'sdds-table--responsive' : ''}
+        ${compactDesign ? 'sdds-table--compact' : ''}
+        ${verticalDivider ? 'sdds-table--divider' : ''}
+        ${noMinWidth ? 'sdds-table--no-min-width' : ''}
+        ${responsiveDesign ? 'sdds-table--responsive' : ''}
     ">
     ${tableTitle && `<caption>${tableTitle}</caption>`}
     <thead>
@@ -157,5 +135,4 @@ const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg,
   </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

@@ -1 +1 @@
-{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,QAAQ,EAAE;IACR,UAAU,EAAE;MACV,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,0CAA0C;MACvD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,EAAE;SACZ;OACF;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,6DAA6D;MAC1E,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,4DAA4D;MACzE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,kBAAkB;MACxB,WAAW,EACT,oHAAoH;MACtH,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,kBAAkB;MACxB,WAAW,EACT,6JAA6J;MAC/J,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,yKAAyK;MAC3K,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,OAAO;SACjB;OACF;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE;KACvC;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,UAAU,EAAE,cAAc;IAC1B,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,KAAK;IACpB,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,EAAE,EAAE,CACH,iBAAiB,CAAC;;;UAGV,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;UAC5D,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE;UAChE,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UACtC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;UACrC,aAAa,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;UAC/C,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;MAEnD,UAAU,IAAI,YAAY,UAAU,YAAY;;;cAGxC,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;cACrD,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;cACrD,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,IAAI,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;KAqB9D,CAAC,CAAC;AAEP,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","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"]}
+{"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

@@ -12,30 +12,30 @@ export class Table {
     this.modeVariant = null;
     this.tableId = crypto.randomUUID();
   }
-  emitTablePropsChangedEvent(changedValueName, changedValue) {
-    this.tablePropsChangedEvent.emit({
+  emitInternalSddsPropChange(changedValueName, changedValue) {
+    this.internalSddsTablePropChange.emit({
       tableId: this.tableId,
       changed: [changedValueName],
       [changedValueName]: changedValue,
     });
   }
   enableMultiselectChanged(newValue) {
-    this.emitTablePropsChangedEvent('enableMultiselect', newValue);
+    this.emitInternalSddsPropChange('enableMultiselect', newValue);
   }
   enableExpandableRowsChanged(newValue) {
-    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);
+    this.emitInternalSddsPropChange('enableExpandableRows', newValue);
   }
   compactDesignChanged(newValue) {
-    this.emitTablePropsChangedEvent('compactDesign', newValue);
+    this.emitInternalSddsPropChange('compactDesign', newValue);
   }
   verticalDividersChanged(newValue) {
-    this.emitTablePropsChangedEvent('verticalDividers', newValue);
+    this.emitInternalSddsPropChange('verticalDividers', newValue);
   }
   noMinWidthChanged(newValue) {
-    this.emitTablePropsChangedEvent('noMinWidth', newValue);
+    this.emitInternalSddsPropChange('noMinWidth', newValue);
   }
   modeVariantChanged(newValue) {
-    this.emitTablePropsChangedEvent('modeVariant', newValue);
+    this.emitInternalSddsPropChange('modeVariant', newValue);
   }
   render() {
     return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
@@ -207,20 +207,23 @@ export class Table {
   }
   static get events() {
     return [{
-        "method": "tablePropsChangedEvent",
-        "name": "tablePropsChangedEvent",
+        "method": "internalSddsTablePropChange",
+        "name": "internalSddsTablePropChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Broadcasts changes to the tables props"
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts changes to the tables props"
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "TablePropsChangedEvent",
+          "original": "InternalSddsTablePropChange",
           "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
           "references": {
-            "TablePropsChangedEvent": {
+            "InternalSddsTablePropChange": {
               "location": "local",
               "path": "/Users/martin.jarsater/Documents/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;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"]}
+{"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"]}