@scania/tegel 1.47.2 → 1.48.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;
@@ -24,24 +60,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);
@@ -493,8 +511,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Text for label"
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "value": {
@@ -511,8 +531,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Initial value"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "'0'"
             },
             "min": {
@@ -529,8 +551,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Minimum value"
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "'0'"
             },
             "max": {
@@ -547,8 +571,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Maximum value"
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "'100'"
             },
             "ticks": {
@@ -565,8 +591,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": {
@@ -583,8 +611,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": {
@@ -601,8 +631,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": {
@@ -619,8 +651,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": {
@@ -637,8 +671,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": {
@@ -655,8 +691,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": {
@@ -673,8 +711,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": {
@@ -691,8 +731,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": {
@@ -709,8 +751,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": {
@@ -727,8 +771,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": {
@@ -745,8 +791,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": {
@@ -763,8 +811,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": {
@@ -781,8 +831,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": {
@@ -799,8 +851,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.css

@@ -41,28 +41,45 @@
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  left: calc(50% + 24px);
+  left: calc(50% + 16px + 16px);
   right: 0;
-  top: 18px;
+  top: 16px;
 }
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  right: calc(50% + 24px);
+  right: calc(50% + 16px + 16px);
   left: 0;
-  top: 18px;
+  top: 16px;
 }
-:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
+:host [role=listitem].lg.horizontal.hide-labels::after {
   content: " ";
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
+  left: calc(50% + 16px + 8px);
+  right: 0;
   top: 16px;
-  width: 10px;
+}
+:host [role=listitem].lg.horizontal.hide-labels::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 16px + 8px);
+  left: 0;
+  top: 16px;
+}
+:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
   left: auto;
   right: -10px;
+  width: 10px;
 }
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
@@ -70,9 +87,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
-  width: 10px;
   left: -10px;
   right: auto;
+  width: 10px;
 }
 :host [role=listitem].sm {
   padding: 0 20px;
@@ -115,7 +132,7 @@
   position: absolute;
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
-  left: calc(50% + 16px + 8px);
+  left: calc(50% + 12px + 16px);
   right: 0;
   top: 13px;
 }
@@ -125,7 +142,25 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
-  right: calc(50% + 24px);
+  right: calc(50% + 12px + 16px);
+  top: 13px;
+}
+:host [role=listitem].sm.horizontal.hide-labels::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 8px);
+  right: 0;
+  top: 13px;
+}
+:host [role=listitem].sm.horizontal.hide-labels::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  right: calc(50% + 12px + 8px);
+  left: 0;
   top: 13px;
 }
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
@@ -134,9 +169,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
-  width: 10px;
   left: auto;
   right: -10px;
+  width: 10px;
 }
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
@@ -144,9 +179,9 @@
   background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
-  width: 10px;
   left: -10px;
   right: auto;
+  width: 10px;
 }
 :host [role=listitem] .content-container {
   border-radius: 100px;
@@ -164,7 +199,7 @@
   color: var(--tds-white);
 }
 :host [role=listitem] .content-container.current {
-  background-color: var(--tds-stepper-background);
+  background-color: var(--tds-stepper-icon-step-border-color-current);
   color: var(--tds-stepper-color);
 }
 :host [role=listitem] .content-container.upcoming {
@@ -188,8 +223,25 @@
   opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 
-:host(:last-of-type) [role=listitem].horizontal {
+:host(:last-of-type) [role=listitem].horizontal.text-aside {
   padding-right: 0;
+  padding-left: 20px;
+}
+:host(:last-of-type) [role=listitem].horizontal.text-aside::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-divider-line);
+  height: 1px;
+  width: 20px;
+  left: -10px;
+  right: auto;
+  top: 16px;
+}
+:host(:last-of-type) [role=listitem].horizontal.text-aside.sm.hide-labels::before {
+  top: 13px;
+  width: 13px;
+  left: 0;
+  right: calc(50% + 20px);
 }
 :host(:last-of-type) [role=listitem].sm::after, :host(:last-of-type) [role=listitem].lg::after {
   display: none;
@@ -198,9 +250,6 @@
   display: none;
 }
 
-:host(:first-of-type) [role=listitem].horizontal {
-  padding-left: 0;
-}
 :host(:first-of-type) [role=listitem].sm::before, :host(:first-of-type) [role=listitem].lg::before {
   display: none;
 }

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() {
@@ -72,8 +67,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",
@@ -89,8 +86,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "State of the Step"
                 },
-                "attribute": "state",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "state",
                 "defaultValue": "'upcoming'"
             },
             "tdsAriaCurrent": {
@@ -107,8 +106,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'"
             }
         };