@scania/tegel 1.3.3 → 1.5.0

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

@@ -1,60 +1,60 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuUserLabel {
-  constructor() {
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
-  }
-  static get is() { return "tds-side-menu-user-label"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-user-label.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-user-label.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The heading text."
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "subheading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The subheading text."
-        },
-        "attribute": "subheading",
-        "reflect": false
-      }
-    };
-  }
+    constructor() {
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+    }
+    static get is() { return "tds-side-menu-user-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu-user-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu-user-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text."
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subheading text."
+                },
+                "attribute": "subheading",
+                "reflect": false
+            }
+        };
+    }
 }

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-const GRID_LG_BREAKPOINT = '992px';
+const GRID_LG_BREAKPOINT = 992;
 /**
  * @slot overlay - Used of injection of tds-side-menu-overlay
  * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
@@ -9,220 +9,229 @@ const GRID_LG_BREAKPOINT = '992px';
  * @slot sticky-end - Used for tds-side-menu-collapse-button component
  * */
 export class TdsSideMenu {
-  constructor() {
-    this.handleMatchesLgBreakpointChange = (e) => {
-      const isBelowLg = !e.matches;
-      if (isBelowLg) {
+    constructor() {
+        this.handleMatchesLgBreakpointChange = (e) => {
+            const isBelowLg = !e.matches;
+            if (isBelowLg) {
+                this.collapsed = false;
+            }
+            else {
+                this.collapsed = this.initialCollapsedState;
+            }
+        };
+        this.open = false;
+        this.persistent = false;
         this.collapsed = false;
-      }
-    };
-    this.open = false;
-    this.persistent = false;
-    this.collapsed = false;
-    this.isUpperSlotEmpty = false;
-    this.isCollapsed = false;
-  }
-  connectedCallback() {
-    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
-    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
-    this.isCollapsed = this.collapsed;
-  }
-  componentDidLoad() {
-    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
-    const upperSlotElements = upperSlot.assignedElements();
-    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
-    if (!hasUpperSlotElements) {
-      this.isUpperSlotEmpty = true;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        this.initialCollapsedState = false;
     }
-  }
-  disconnectedCallback() {
-    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
-  }
-  onCollapsedChange(newVal) {
-    /** Emits the internal collapse event when the prop has changed. */
-    this.internalTdsSideMenuPropChange.emit({
-      changed: ['collapsed'],
-      collapsed: newVal,
-    });
-    this.isCollapsed = newVal;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "navigation", class: {
-        'menu-opened': this.open,
-        'menu-persistent': this.persistent,
-        'menu-collapsed': this.collapsed,
-      } }, h("div", { class: {
-        'wrapper': true,
-        'state-upper-slot-empty': this.isUpperSlotEmpty,
-        'state-open': this.open,
-        'state-closed': !this.open,
-      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
-  }
-  static get is() { return "tds-side-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for mobile. If the Side Menu is open or not."
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "persistent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for desktop. If the Side Menu should always be shown."
-        },
-        "attribute": "persistent",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "collapsed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "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 tds-Collapse event."
-        },
-        "attribute": "collapsed",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isUpperSlotEmpty": {},
-      "isCollapsed": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsCollapse",
-        "name": "tdsCollapse",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event that is emitted when the Side Menu is collapsed."
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
-            }
-          }
+    connectedCallback() {
+        this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
+        this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+        this.isCollapsed = this.collapsed;
+        this.initialCollapsedState = this.collapsed;
+    }
+    componentDidLoad() {
+        const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+        const upperSlotElements = upperSlot.assignedElements();
+        const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+        if (!hasUpperSlotElements) {
+            this.isUpperSlotEmpty = true;
         }
-      }, {
-        "method": "internalTdsCollapse",
-        "name": "internalTdsCollapse",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
-            }
-          }
+        if (window.innerWidth < GRID_LG_BREAKPOINT) {
+            this.collapsed = false;
         }
-      }, {
-        "method": "internalTdsSideMenuPropChange",
-        "name": "internalTdsSideMenuPropChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "InternalTdsSideMenuPropChange",
-          "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
-          "references": {
-            "InternalTdsSideMenuPropChange": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
+    }
+    disconnectedCallback() {
+        this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+    }
+    onCollapsedChange(newVal) {
+        /** Emits the internal collapse event when the prop has changed. */
+        this.internalTdsSideMenuPropChange.emit({
+            changed: ['collapsed'],
+            collapsed: newVal,
+        });
+        this.isCollapsed = newVal;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    render() {
+        return (h(Host, { role: "navigation", class: {
+                'menu-opened': this.open,
+                'menu-persistent': this.persistent,
+                'menu-collapsed': this.collapsed,
+            } }, h("div", { class: {
+                'wrapper': true,
+                'state-upper-slot-empty': this.isUpperSlotEmpty,
+                'state-open': this.open,
+                'state-closed': !this.open,
+            } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+    }
+    static get is() { return "tds-side-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applicable only for mobile. If the Side Menu is open or not."
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "persistent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applicable only for desktop. If the Side Menu should always be shown."
+                },
+                "attribute": "persistent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "collapsed",
-        "methodName": "onCollapsedChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "internalTdsCollapse",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isUpperSlotEmpty": {},
+            "isCollapsed": {},
+            "initialCollapsedState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsCollapse",
+                "name": "tdsCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the Side Menu is collapsed."
+                },
+                "complexType": {
+                    "original": "CollapseEvent",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {
+                        "CollapseEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "internalTdsCollapse",
+                "name": "internalTdsCollapse",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Broadcasts collapsed state to child components."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CollapseEvent",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {
+                        "CollapseEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "internalTdsSideMenuPropChange",
+                "name": "internalTdsSideMenuPropChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Broadcasts collapsed state to child components."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "InternalTdsSideMenuPropChange",
+                    "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
+                    "references": {
+                        "InternalTdsSideMenuPropChange": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "collapsed",
+                "methodName": "onCollapsedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "internalTdsCollapse",
+                "method": "collapsedSideMenuEventHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }