@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.js

@@ -3,14 +3,8 @@ import { h, Host } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
  * */
 export class TdsSideMenuUser {
-    constructor() {
-        this.heading = undefined;
-        this.subheading = undefined;
-        this.imgSrc = undefined;
-        this.imgAlt = undefined;
-    }
     render() {
-        return (h(Host, { key: '768662a142cf0f40f24566fedff52e1e25df8bee' }, h("tds-side-menu-user-image", { key: 'fb02fcf45d21aa198bcba356f0502a3aa8cf3d0b', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '658ba6d53ded1f760c2ec2327de765374ba5b6b9', name: "image" })), h("tds-side-menu-user-label", { key: '1ab756a2538fd7bdde5a1714e25dc0d0fae9f7ea', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }
@@ -40,8 +34,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The heading text."
                 },
-                "attribute": "heading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
             },
             "subheading": {
                 "type": "string",
@@ -57,8 +53,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The subheading text."
                 },
-                "attribute": "subheading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheading"
             },
             "imgSrc": {
                 "type": "string",
@@ -74,8 +72,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The image source."
                 },
-                "attribute": "img-src",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-src"
             },
             "imgAlt": {
                 "type": "string",
@@ -91,8 +91,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The image alt text."
                 },
-                "attribute": "img-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-alt"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.js

@@ -7,12 +7,8 @@ import { h, Host } from "@stencil/core";
  * <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
  * */
 export class TdsSideMenuUserImage {
-    constructor() {
-        this.src = undefined;
-        this.alt = undefined;
-    }
     render() {
-        return (h(Host, { key: 'f673e69a1f9064b9b70def6942bb357b0fbbef1a' }, h("slot", { key: 'd2b6b1b29dd8ab033e229aac63aa864a2d866be6' }), this.src && h("img", { key: 'f72afa71088d565a19d43dec0646f657eba9c5c3', src: this.src, alt: this.alt })));
+        return (h(Host, { key: '62b6a38f0705b052cb4d5b9379bc77662f66c505' }, h("slot", { key: '99aeba48272e512ce419a934cb4147052a5e0190' }), this.src && h("img", { key: '352e0a3f93558b298835afbfe72193cdbebcffa4', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }
@@ -42,8 +38,10 @@ export class TdsSideMenuUserImage {
                     "tags": [],
                     "text": "The image source."
                 },
-                "attribute": "src",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
             },
             "alt": {
                 "type": "string",
@@ -59,8 +57,10 @@ export class TdsSideMenuUserImage {
                     "tags": [],
                     "text": "The image alt text."
                 },
-                "attribute": "alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.js

@@ -1,11 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuUserLabel {
-    constructor() {
-        this.heading = undefined;
-        this.subheading = undefined;
-    }
     render() {
-        return (h(Host, { key: 'fcd180821724e5e7ad1d8574a3adaf428f124b47' }, this.heading, this.subheading && h("div", { key: 'f1d86f3f1f200de394e771ea71839e5e9a94ba10', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }
@@ -35,8 +31,10 @@ export class TdsSideMenuUserLabel {
                     "tags": [],
                     "text": "The heading text."
                 },
-                "attribute": "heading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
             },
             "subheading": {
                 "type": "string",
@@ -52,8 +50,10 @@ export class TdsSideMenuUserLabel {
                     "tags": [],
                     "text": "The subheading text."
                 },
-                "attribute": "subheading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheading"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu.js

@@ -10,6 +10,19 @@ const GRID_LG_BREAKPOINT = 992;
  * */
 export class TdsSideMenu {
     constructor() {
+        /** Applicable only for mobile. If the Side Menu is open or not. */
+        this.open = false;
+        /** Applicable only for desktop. If the Side Menu should always be shown. */
+        this.persistent = false;
+        /** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
+         * NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
+        this.collapsed = false;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        /* To preserved initial state of collapsed prop as it is changed in runtime */
+        this.initialCollapsedState = false;
+        /** @internal Tracks the currently focused element index for keyboard navigation */
+        this.activeElementIndex = 0;
         this.handleMatchesLgBreakpointChange = (e) => {
             const isBelowLg = !e.matches;
             if (isBelowLg) {
@@ -20,13 +33,6 @@ export class TdsSideMenu {
                 this.open = false;
             }
         };
-        this.open = false;
-        this.persistent = false;
-        this.collapsed = false;
-        this.isUpperSlotEmpty = false;
-        this.isCollapsed = false;
-        this.initialCollapsedState = false;
-        this.activeElementIndex = 0;
     }
     handleKeyDown(event) {
         if (event.key === 'Escape' && this.open) {
@@ -177,8 +183,10 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "Applicable only for mobile. If the Side Menu is open or not."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "persistent": {
@@ -195,8 +203,10 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "Applicable only for desktop. If the Side Menu should always be shown."
                 },
-                "attribute": "persistent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "persistent",
                 "defaultValue": "false"
             },
             "collapsed": {
@@ -213,8 +223,10 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event."
                 },
-                "attribute": "collapsed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "collapsed",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/slider/slider.css

@@ -27,12 +27,6 @@ tds-slider .sr-only {
   pointer-events: none;
 }
 
-.tds-slider-wrapper:focus-within {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: 2px;
-  border-radius: var(--tds-spacing-element-4);
-}
-
 .tds-slider {
   width: 100%;
   display: flex;
@@ -44,6 +38,12 @@ tds-slider .sr-only {
   height: 20px;
   position: relative;
 }
+.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner {
+  outline: var(--tds-slider-thumb-focus-outline);
+  box-shadow: var(--tds-slider-thumb-focus-box-shadow);
+  outline-offset: var(--tds-slider-thumb-focus-outline-offset);
+  z-index: 1;
+}
 .tds-slider .tds-slider__controls {
   position: relative;
   top: -25px;
@@ -81,30 +81,23 @@ tds-slider .sr-only {
   justify-content: center;
   border-radius: 4px 4px 0 0;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-slider-inputfield-number-color);
-  border: 0;
-  background-color: transparent;
-  text-align: center;
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number] {
+  width: auto;
   padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
-  border-radius: 4px 4px 0 0;
+  text-align: center;
   appearance: textfield;
 }
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
-  box-shadow: inset 0 -1px 0 var(--tds-grey-600);
-}
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus {
-  box-shadow: inset 0 -2px 0 var(--tds-blue-400);
-  outline: 0;
-}
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,
-.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button {
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only {
+  text-align: left;
+}
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly {
+  right: 12px;
+}
 .tds-slider label {
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);
@@ -122,7 +115,7 @@ tds-slider .sr-only {
   letter-spacing: var(--tds-detail-01-ls);
   user-select: none;
   border-radius: 4px;
-  padding: 8px;
+  padding: 8px 11px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
@@ -139,6 +132,9 @@ tds-slider .sr-only {
 .tds-slider .tds-slider__thumb {
   position: absolute;
 }
+.tds-slider .tds-slider__thumb:hover .tds-slider__value {
+  display: block;
+}
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner {
   width: 20px;
   height: 20px;
@@ -164,7 +160,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before {
   display: block;
-  opacity: 0.08;
+  background-color: var(--tds-slider-thumb-hover);
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed {
   width: 24px;
@@ -172,7 +168,7 @@ tds-slider .sr-only {
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before {
   display: block;
-  opacity: 0.16 !important;
+  background-color: var(--tds-slider-thumb-pressed);
 }
 .tds-slider .tds-slider__value-dividers-wrapper {
   position: relative;
@@ -307,7 +303,7 @@ tds-slider .sr-only {
 }
 
 .tds-slider .tds-slider__controls .tds-slider__control {
-  cursor: default;
+  cursor: pointer;
 }
 .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
   color: var(--tds-slider-controls-color);