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

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

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: '3b6baf50c44b45c9b31d90512fcf06e0f7bfec25', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '56e8ee677d733e9a0198856cb97a270fab78d69a', class: {
+        return (h(Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'f9fe71e7c9b14c9791d51b758b495c56fa95f8e6' }))));
+            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -92,6 +92,7 @@
   outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: inset 0 0 0 3px var(--tds-white);
   outline-offset: -2px;
+  z-index: 1;
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdownListItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -33,13 +34,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
+        return (h(Host, { key: '7d711b603579ec67a9f0312071519e31f4a15709', role: "listitem" }, h("div", { key: 'db890287036e3e85f10f7c76454e8ca91ada6f7c', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
+            } }, h("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -69,8 +70,10 @@ export class TdsSideMenuDropdownListItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -45,6 +45,7 @@
   outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: inset 0 0 0 3px var(--tds-white);
   outline-offset: -2px;
+  z-index: 1;
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button),

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

@@ -5,7 +5,10 @@ import dfs from "../../../utils/dfs";
  * */
 export class TdsSideMenuItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
+        /** If the item should appear active. Can be used when the item is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
@@ -69,13 +72,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
+        return (h(Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
+            } }, h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -105,8 +108,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "active": {
@@ -123,8 +128,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "active",
                 "defaultValue": "false"
             }
         };

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: '3ead27185a3cba465ce4789a58d9f5081a3ba476' }, h("div", { key: '5da2afb06899169815745785b3c9dc766a7b51bd' })));
+        return (h(Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

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"
             }
         };