@scania/tegel 1.41.0-stencil-core-beta.0 → 1.42.0

package/dist/collection/components/slider/slider.js

@@ -2,42 +2,6 @@ import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
     constructor() {
-        /** Text for label */
-        this.label = '';
-        /** Initial value */
-        this.value = '0';
-        /** Minimum value */
-        this.min = '0';
-        /** Maximum value */
-        this.max = '100';
-        /** Number of tick markers (tick for min- and max-value will be added automatically) */
-        this.ticks = '0';
-        /** Decide to show numbers above the tick markers or not  */
-        this.showTickNumbers = false;
-        /** Decide to show the tooltip or not */
-        this.tooltip = false;
-        /** Sets the disabled state for the whole component  */
-        this.disabled = false;
-        /** Sets the read only state for the whole component  */
-        this.readOnly = false;
-        /** Decide to show the controls or not */
-        this.controls = false;
-        /** Decide to show the input field or not */
-        this.input = false;
-        /** Defines how much to increment/decrement the value when using controls */
-        this.step = '1';
-        /** Name property (will be inherited by the native slider component) */
-        this.name = '';
-        /** Sets the size of the thumb */
-        this.thumbSize = 'lg';
-        /** Snap to the tick's grid */
-        this.snap = false;
-        /** Sets the aria-label for the slider control. */
-        this.tdsAriaLabel = '';
-        /** ID for the Slider's input element, randomly generated if not specified. */
-        this.sliderId = generateUniqueId();
-        /** Sets the read only aria label for the input field */
-        this.tdsReadOnlyAriaLabel = '';
         this.wrapperElement = null;
         this.thumbElement = null;
         this.thumbInnerElement = null;
@@ -59,6 +23,24 @@ export class TdsSlider {
             this.forceValueUpdate(this.initialValue);
             this.reset();
         };
+        this.label = '';
+        this.value = '0';
+        this.min = '0';
+        this.max = '100';
+        this.ticks = '0';
+        this.showTickNumbers = false;
+        this.tooltip = false;
+        this.disabled = false;
+        this.readOnly = false;
+        this.controls = false;
+        this.input = false;
+        this.step = '1';
+        this.name = '';
+        this.thumbSize = 'lg';
+        this.snap = false;
+        this.tdsAriaLabel = '';
+        this.sliderId = generateUniqueId();
+        this.tdsReadOnlyAriaLabel = '';
     }
     roundToStep(val) {
         const stepNum = parseFloat(this.step);
@@ -500,10 +482,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Text for label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
@@ -520,10 +500,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Initial value"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "value",
+                "reflect": false,
                 "defaultValue": "'0'"
             },
             "min": {
@@ -540,10 +518,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Minimum value"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "min",
+                "reflect": false,
                 "defaultValue": "'0'"
             },
             "max": {
@@ -560,10 +536,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Maximum value"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "max",
+                "reflect": false,
                 "defaultValue": "'100'"
             },
             "ticks": {
@@ -580,10 +554,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Number of tick markers (tick for min- and max-value will be added automatically)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "ticks",
+                "reflect": false,
                 "defaultValue": "'0'"
             },
             "showTickNumbers": {
@@ -600,10 +572,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show numbers above the tick markers or not"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "show-tick-numbers",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tooltip": {
@@ -620,10 +590,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the tooltip or not"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tooltip",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
@@ -640,10 +608,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the disabled state for the whole component"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "readOnly": {
@@ -660,10 +626,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the read only state for the whole component"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "read-only",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "controls": {
@@ -680,10 +644,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the controls or not"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "controls",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "input": {
@@ -700,10 +662,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the input field or not"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "input",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
@@ -720,10 +680,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Defines how much to increment/decrement the value when using controls"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "step",
+                "reflect": false,
                 "defaultValue": "'1'"
             },
             "name": {
@@ -740,10 +698,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Name property (will be inherited by the native slider component)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "thumbSize": {
@@ -760,10 +716,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the size of the thumb"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "thumb-size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "snap": {
@@ -780,10 +734,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Snap to the tick's grid"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "snap",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -800,10 +752,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the aria-label for the slider control."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-aria-label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "sliderId": {
@@ -820,10 +770,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "ID for the Slider's input element, randomly generated if not specified."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "slider-id",
+                "reflect": false,
                 "defaultValue": "generateUniqueId()"
             },
             "tdsReadOnlyAriaLabel": {
@@ -840,10 +788,8 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the read only aria label for the input field"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-read-only-aria-label",
+                "reflect": false,
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/spinner/spinner.js

@@ -1,9 +1,7 @@
 import { h } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
-        /** Size of the Spinner */
         this.size = 'lg';
-        /** Variant of the Spinner */
         this.variant = 'standard';
     }
     render() {
@@ -36,10 +34,8 @@ export class TdsSpinner {
                     "tags": [],
                     "text": "Size of the Spinner"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "variant": {
@@ -56,10 +52,8 @@ export class TdsSpinner {
                     "tags": [],
                     "text": "Variant of the Spinner"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "variant",
+                "reflect": false,
                 "defaultValue": "'standard'"
             }
         };

package/dist/collection/components/stepper/step/step.js

@@ -10,8 +10,13 @@ const propToStateMap = {
  */
 export class TdsStep {
     constructor() {
-        /** State of the Step */
+        this.index = undefined;
         this.state = 'upcoming';
+        this.tdsAriaCurrent = undefined;
+        this.hideLabels = undefined;
+        this.size = undefined;
+        this.orientation = undefined;
+        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
@@ -65,10 +70,8 @@ export class TdsStep {
                     "tags": [],
                     "text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "index"
+                "attribute": "index",
+                "reflect": false
             },
             "state": {
                 "type": "string",
@@ -84,10 +87,8 @@ export class TdsStep {
                     "tags": [],
                     "text": "State of the Step"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "state",
+                "reflect": false,
                 "defaultValue": "'upcoming'"
             },
             "tdsAriaCurrent": {
@@ -104,10 +105,8 @@ export class TdsStep {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-current"
+                "attribute": "tds-aria-current",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/stepper/stepper.js

@@ -5,21 +5,11 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsStepper {
     constructor() {
-        /** The orientation the Steps */
         this.orientation = 'horizontal';
-        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
-        /** Size of the component and it's children. */
         this.size = 'lg';
-        /** Hides the label for the child components if true. */
         this.hideLabels = false;
-        /** ID used for internal Stepper functionality and events, must be unique.
-         *
-         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
-         * as the default ID is random and will be different every time.
-         */
         this.stepperId = generateUniqueId();
-        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -86,10 +76,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "The orientation the Steps"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "orientation",
+                "reflect": false,
                 "defaultValue": "'horizontal'"
             },
             "labelPosition": {
@@ -106,10 +94,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Text position, only available on a direction: horizontal"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label-position",
+                "reflect": false,
                 "defaultValue": "'below'"
             },
             "size": {
@@ -126,10 +112,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Size of the component and it's children."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "hideLabels": {
@@ -146,10 +130,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Hides the label for the child components if true."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hide-labels",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "stepperId": {
@@ -166,10 +148,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "stepper-id",
+                "reflect": false,
                 "defaultValue": "generateUniqueId()"
             },
             "tdsAriaLabel": {
@@ -186,10 +166,8 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Label for the stepper component, for screen reader users"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-aria-label",
+                "reflect": false,
                 "defaultValue": "'Progress steps'"
             }
         };

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

@@ -7,32 +7,15 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  */
 export class TdsTable {
     constructor() {
-        /** Enables style with vertical dividers between columns */
         this.verticalDividers = false;
-        /** Enables style where Table toolbar, rows and footer are less high */
         this.compactDesign = false;
-        // 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 Table.
-        //  Try setting it and observe text-align set on header cell
-        /** Enables multiselect feature of Table */
+        this.noMinWidth = undefined;
         this.multiselect = false;
-        /** Enables extended row feature of Table */
         this.expandableRows = false;
-        /** Enables Table to take 100% available width with equal spacing of columns */
         this.responsive = false;
-        /** Variant of the component, based on current mode. */
         this.modeVariant = null;
-        /** Enables zebra stripe mode on the table rows or columns. */
         this.zebraMode = 'none';
-        /** Width of the table, used as the constraint for horizontal scrolling.
-         * **NOTE**: this will disable usage of the responsive flag
-         * */
         this.horizontalScrollWidth = null;
-        /** ID used for internal Table functionality and events, must be unique.
-         *
-         * **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.
-         */
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
         this.enableHorizontalScrollFooterDesign = false;
@@ -151,10 +134,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style with vertical dividers between columns"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "vertical-dividers",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "compactDesign": {
@@ -171,10 +152,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style where Table toolbar, rows and footer are less high"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "compact-design",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "noMinWidth": {
@@ -191,10 +170,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables to customize width on Table columns"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "no-min-width"
+                "attribute": "no-min-width",
+                "reflect": true
             },
             "multiselect": {
                 "type": "boolean",
@@ -210,10 +187,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables multiselect feature of Table"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "multiselect",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "expandableRows": {
@@ -230,10 +205,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables extended row feature of Table"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "expandable-rows",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "responsive": {
@@ -250,10 +223,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables Table to take 100% available width with equal spacing of columns"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "responsive",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -270,10 +241,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "mode-variant",
+                "reflect": true,
                 "defaultValue": "null"
             },
             "zebraMode": {
@@ -290,10 +259,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables zebra stripe mode on the table rows or columns."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "zebra-mode",
+                "reflect": true,
                 "defaultValue": "'none'"
             },
             "horizontalScrollWidth": {
@@ -310,10 +277,8 @@ export class TdsTable {
                     "tags": [],
                     "text": "Width of the table, used as the constraint for horizontal scrolling.\n**NOTE**: this will disable usage of the responsive flag"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "horizontal-scroll-width",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "tableId": {
@@ -330,10 +295,8 @@ export class TdsTable {
                     "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,\nas the default ID is random and will be different every time."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "table-id",
+                "reflect": false,
                 "defaultValue": "generateUniqueId()"
             }
         };

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

@@ -9,19 +9,20 @@ const relevantTableProps = [
  */
 export class TdsTableBody {
     constructor() {
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
         this.multiselectArray = [];
+        this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {