@scania/tegel 0.0.34 → 0.0.51

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

@@ -1,254 +1,257 @@
-// 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
+// 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();
+  }
+  emitInternalSddsPropChange(changedValueName, changedValue) {
+    this.internalSddsTablePropChange.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitInternalSddsPropChange('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitInternalSddsPropChange('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitInternalSddsPropChange('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitInternalSddsPropChange('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitInternalSddsPropChange('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitInternalSddsPropChange('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": "internalSddsTablePropChange",
+        "name": "internalSddsTablePropChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts changes to the tables props"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalSddsTablePropChange",
+          "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
+          "references": {
+            "InternalSddsTablePropChange": {
+              "location": "local",
+              "path": "C:/Users/nliglf/Repos/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

@@ -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"]}