@scania/tegel 1.47.2 → 1.48.0

package/dist/collection/components/radio-button/radio-button.js

@@ -5,20 +5,20 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsRadioButton {
     constructor() {
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId();
+        /** Decides if the Radio Button is checked or not. */
+        this.checked = false;
+        /** Decides if the Radio Button is required or not. */
+        this.required = false;
+        /** Decides if the Radio Button is disabled or not. */
+        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.value = undefined;
-        this.radioId = generateUniqueId();
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -60,8 +60,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Name of Radio Button, used for reference."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -77,8 +79,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Value of input."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "radioId": {
                 "type": "string",
@@ -94,8 +98,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Unique Radio Button identifier."
                 },
-                "attribute": "radio-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "radio-id",
                 "defaultValue": "generateUniqueId()"
             },
             "checked": {
@@ -112,8 +118,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is checked or not."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "required": {
@@ -130,8 +138,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is required or not."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -148,8 +158,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is disabled or not."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -166,8 +178,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides an accessible name for the component"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "tdsTabIndex": {
                 "type": "number",
@@ -183,8 +197,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides a tabindex used when radio buttons are grouped"
                 },
-                "attribute": "tds-tab-index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-tab-index"
             }
         };
     }

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

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuCollapseButton {
     constructor() {
+        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -18,7 +19,6 @@ export class TdsSideMenuCollapseButton {
                 });
             }
         };
-        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -71,7 +71,8 @@ export class TdsSideMenuCollapseButton {
                         "CollapseEvent": {
                             "location": "import",
                             "path": "../side-menu",
-                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent",
+                            "referenceLocation": "CollapseEvent"
                         }
                     }
                 }
@@ -95,7 +96,8 @@ export class TdsSideMenuCollapseButton {
                         "CollapseEvent": {
                             "location": "import",
                             "path": "../side-menu",
-                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent",
+                            "referenceLocation": "CollapseEvent"
                         }
                     }
                 }

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

@@ -6,9 +6,11 @@ import { Fragment, h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdown {
     constructor() {
+        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        this.buttonLabel = undefined;
+        /** If the button that opens the dropdown should appear selected. */
         this.selected = false;
+        /** Toggle open state programmatically */
         this.open = false;
         this.hoverState = {
             isHovered: false,
@@ -96,8 +98,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the dropdown should be open from the start."
                 },
-                "attribute": "default-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-open",
                 "defaultValue": "false"
             },
             "buttonLabel": {
@@ -114,8 +118,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
                 },
-                "attribute": "button-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label"
             },
             "selected": {
                 "type": "boolean",
@@ -131,8 +137,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the button that opens the dropdown should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "open": {
@@ -149,8 +157,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "Toggle open state programmatically"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };

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;
@@ -73,8 +74,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.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;
@@ -111,8 +114,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": {
@@ -129,8 +134,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-user/side-menu-user.js

@@ -3,12 +3,6 @@ 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: '029f8e80bd9eb56ba1826280e6c64fdddbba918c' }, h("tds-side-menu-user-image", { key: 'ee277efe9180b8013596cae3ccebf801c47d7573', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: 'bfd0ee76f3c8903f033417ab917796ab9a2bc941', name: "image" })), h("tds-side-menu-user-label", { key: '0a1e257454854db6e670a68a3a085430e4e5187c', heading: this.heading, subheading: this.subheading })));
     }
@@ -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,10 +7,6 @@ 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: '22bb496463e8548ddf2ce55f95f112dae1afa181' }, h("slot", { key: 'ebbe1e06c9b27b41f9f206f65890654be3866d03' }), this.src && h("img", { key: '2a378a8e56cb54a5c300123e156ecadf04d92459', src: this.src, alt: this.alt })));
     }
@@ -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,9 +1,5 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuUserLabel {
-    constructor() {
-        this.heading = undefined;
-        this.subheading = undefined;
-    }
     render() {
         return (h(Host, { key: '30326793059e4e25b3c769e94b22780a37754ba4' }, this.heading, this.subheading && h("div", { key: 'e3912bf0571bb8ef67ebea53d37547a0a9284bf7', class: "subheading" }, this.subheading)));
     }
@@ -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) {
@@ -180,8 +186,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": {
@@ -198,8 +206,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": {
@@ -216,8 +226,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"
             }
         };