@scania/tegel 1.40.0 → 1.41.0-angular-patch-types-beta.0

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

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

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

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

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

@@ -10,13 +10,8 @@ const propToStateMap = {
  */
 export class TdsStep {
     constructor() {
-        this.index = undefined;
+        /** State of the Step */
         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() {
@@ -70,8 +65,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
                 },
-                "attribute": "index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
             },
             "state": {
                 "type": "string",
@@ -87,8 +84,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "State of the Step"
                 },
-                "attribute": "state",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "state",
                 "defaultValue": "'upcoming'"
             },
             "tdsAriaCurrent": {
@@ -105,8 +104,10 @@ export class TdsStep {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tds-aria-current",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-current"
             }
         };
     }

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

@@ -5,11 +5,21 @@ 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() {
@@ -76,8 +86,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "The orientation the Steps"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "labelPosition": {
@@ -94,8 +106,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Text position, only available on a direction: horizontal"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'below'"
             },
             "size": {
@@ -112,8 +126,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Size of the component and it's children."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "hideLabels": {
@@ -130,8 +146,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Hides the label for the child components if true."
                 },
-                "attribute": "hide-labels",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hide-labels",
                 "defaultValue": "false"
             },
             "stepperId": {
@@ -148,8 +166,10 @@ 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."
                 },
-                "attribute": "stepper-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "stepper-id",
                 "defaultValue": "generateUniqueId()"
             },
             "tdsAriaLabel": {
@@ -166,8 +186,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Label for the stepper component, for screen reader users"
                 },
-                "attribute": "tds-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-label",
                 "defaultValue": "'Progress steps'"
             }
         };

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

@@ -7,15 +7,32 @@ 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;
-        this.noMinWidth = undefined;
+        // 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.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;
@@ -134,8 +151,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style with vertical dividers between columns"
                 },
-                "attribute": "vertical-dividers",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "vertical-dividers",
                 "defaultValue": "false"
             },
             "compactDesign": {
@@ -152,8 +171,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style where Table toolbar, rows and footer are less high"
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             },
             "noMinWidth": {
@@ -170,8 +191,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables to customize width on Table columns"
                 },
-                "attribute": "no-min-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-min-width"
             },
             "multiselect": {
                 "type": "boolean",
@@ -187,8 +210,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables multiselect feature of Table"
                 },
-                "attribute": "multiselect",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "multiselect",
                 "defaultValue": "false"
             },
             "expandableRows": {
@@ -205,8 +230,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables extended row feature of Table"
                 },
-                "attribute": "expandable-rows",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expandable-rows",
                 "defaultValue": "false"
             },
             "responsive": {
@@ -223,8 +250,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables Table to take 100% available width with equal spacing of columns"
                 },
-                "attribute": "responsive",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "responsive",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -241,8 +270,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "zebraMode": {
@@ -259,8 +290,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables zebra stripe mode on the table rows or columns."
                 },
-                "attribute": "zebra-mode",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "zebra-mode",
                 "defaultValue": "'none'"
             },
             "horizontalScrollWidth": {
@@ -277,8 +310,10 @@ 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"
                 },
-                "attribute": "horizontal-scroll-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "horizontal-scroll-width",
                 "defaultValue": "null"
             },
             "tableId": {
@@ -295,8 +330,10 @@ 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."
                 },
-                "attribute": "table-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "table-id",
                 "defaultValue": "generateUniqueId()"
             }
         };

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

@@ -9,20 +9,19 @@ 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) {