@scania/tegel 1.40.0 → 1.41.0-beta.0

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

@@ -5,18 +5,26 @@ import inheritAttributes from "../../utils/inheritAttributes";
  */
 export class TdsPopoverMenu {
     constructor() {
-        this.inheritedAttributes = [];
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = [];
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -28,15 +36,15 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ad39066c2a2f7d4e4696143095fa8a0032d7c148', class: {
+        return (h(Host, { key: '832a4f7840634b9e9cc9c7d29c86234839f4690a', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f261b18f6e1e26df1baf39628911cb885277b431', class: {
+            } }, h("tds-popover-core", { key: '98b2a20b9a423cc9b50f7fe3e300312445eedf7e', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'af5a21fd419ed88bb6aa5dbdddee5b0e13bde87f', role: "menu" }, h("slot", { key: '70811543fa73325aadcf11c5ebe7de7bf130b6cd' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -66,8 +74,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the pop-over"
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -87,7 +97,9 @@ export class TdsPopoverMenu {
                 "docs": {
                     "tags": [],
                     "text": "Element that will trigger the pop-over (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "show": {
                 "type": "boolean",
@@ -103,8 +115,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop."
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show",
                 "defaultValue": "null"
             },
             "defaultShow": {
@@ -121,8 +135,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides if the component should be visible from the start."
                 },
-                "attribute": "default-show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-show",
                 "defaultValue": "false"
             },
             "placement": {
@@ -145,8 +161,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides the placement of the Popover Menu"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'auto'"
             },
             "animation": {
@@ -163,8 +181,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Whether the popover should animate when being opened/closed or not"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "offsetSkidding": {
@@ -181,8 +201,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset skidding"
                 },
-                "attribute": "offset-skidding",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-skidding",
                 "defaultValue": "0"
             },
             "offsetDistance": {
@@ -199,8 +221,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset distance"
                 },
-                "attribute": "offset-distance",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-distance",
                 "defaultValue": "8"
             },
             "fluidWidth": {
@@ -217,8 +241,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "If true this unsets the width (160px) of the Popover Menu"
                 },
-                "attribute": "fluid-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "fluid-width",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -235,8 +261,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             }
         };

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() {
@@ -57,8 +57,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",
@@ -74,8 +76,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Value of input."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "radioId": {
                 "type": "string",
@@ -91,8 +95,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": {
@@ -109,8 +115,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": {
@@ -127,8 +135,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": {
@@ -145,8 +155,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": {
@@ -163,8 +175,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",
@@ -180,8 +194,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;

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

@@ -6,11 +6,12 @@ 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 = undefined;
         this.collapsed = false;
     }
     collapsedSideMenuEventHandler(event) {
@@ -92,8 +93,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": {
@@ -110,8 +113,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",
@@ -127,8 +132,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": {
@@ -145,8 +152,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;
@@ -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.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;
@@ -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-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: '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 })));
     }
@@ -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: '62b6a38f0705b052cb4d5b9379bc77662f66c505' }, h("slot", { key: '99aeba48272e512ce419a934cb4147052a5e0190' }), this.src && h("img", { key: '352e0a3f93558b298835afbfe72193cdbebcffa4', 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: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', 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) {
@@ -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"
             }
         };