@scania/tegel 1.3.3 → 1.5.0

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

@@ -5,167 +5,167 @@ import { Fragment, h, Host } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For injection of the <code>tds-side-menu-dropdown-list</code> subcomponent.
  * */
 export class TdsSideMenuDropdown {
-  constructor() {
-    this.defaultOpen = false;
-    this.buttonLabel = undefined;
-    this.selected = false;
-    this.open = false;
-    this.hoverState = undefined;
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  onEventPointerEnter() {
-    this.setHoverStateOpen();
-  }
-  onEventFocus() {
-    this.setHoverStateOpen();
-  }
-  onEventPointerLeave() {
-    this.setHoverStateClosed();
-  }
-  onEventBlur() {
-    this.setHoverStateClosed();
-  }
-  setHoverStateOpen() {
-    this.hoverState = { isHovered: true, updatedAt: Date.now() };
-  }
-  setHoverStateClosed() {
-    const leftAt = Date.now();
-    const toleranceInMilliseconds = 150;
-    setTimeout(() => {
-      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
-        this.hoverState = { isHovered: false, updatedAt: Date.now() };
-      }
-    }, toleranceInMilliseconds);
-  }
-  getIsOpenState() {
-    var _a;
-    return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
-    this.open = this.defaultOpen;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'wrapper': true,
-        'state-open': this.getIsOpenState(),
-        'state-collapsed': this.collapsed,
-      } }, h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
-        this.open = !this.open;
-      } }, h("button", null, h("slot", { name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", null)))));
-  }
-  static get is() { return "tds-side-menu-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "defaultOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the dropdown should be open from the start."
-        },
-        "attribute": "default-open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "buttonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
-        },
-        "attribute": "button-label",
-        "reflect": false
-      },
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the button that opens the dropdown should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "hoverState": {},
-      "collapsed": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalTdsSideMenuPropChange",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "pointerenter",
-        "method": "onEventPointerEnter",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "focusin",
-        "method": "onEventFocus",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "pointerleave",
-        "method": "onEventPointerLeave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "focusout",
-        "method": "onEventBlur",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    constructor() {
+        this.defaultOpen = false;
+        this.buttonLabel = undefined;
+        this.selected = false;
+        this.open = false;
+        this.hoverState = undefined;
+        this.collapsed = false;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    onEventPointerEnter() {
+        this.setHoverStateOpen();
+    }
+    onEventFocus() {
+        this.setHoverStateOpen();
+    }
+    onEventPointerLeave() {
+        this.setHoverStateClosed();
+    }
+    onEventBlur() {
+        this.setHoverStateClosed();
+    }
+    setHoverStateOpen() {
+        this.hoverState = { isHovered: true, updatedAt: Date.now() };
+    }
+    setHoverStateClosed() {
+        const leftAt = Date.now();
+        const toleranceInMilliseconds = 150;
+        setTimeout(() => {
+            if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
+                this.hoverState = { isHovered: false, updatedAt: Date.now() };
+            }
+        }, toleranceInMilliseconds);
+    }
+    getIsOpenState() {
+        var _a;
+        return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
+    }
+    connectedCallback() {
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = this.sideMenuEl.collapsed;
+        this.open = this.defaultOpen;
+    }
+    render() {
+        return (h(Host, null, h("div", { class: {
+                'wrapper': true,
+                'state-open': this.getIsOpenState(),
+                'state-collapsed': this.collapsed,
+            } }, h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+                this.open = !this.open;
+            } }, h("button", null, h("slot", { name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", null)))));
+    }
+    static get is() { return "tds-side-menu-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the dropdown should be open from the start."
+                },
+                "attribute": "default-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
+                },
+                "attribute": "button-label",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button that opens the dropdown should appear selected."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "hoverState": {},
+            "collapsed": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsSideMenuPropChange",
+                "method": "collapsedSideMenuEventHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerenter",
+                "method": "onEventPointerEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusin",
+                "method": "onEventFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerleave",
+                "method": "onEventPointerLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusout",
+                "method": "onEventBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -3,47 +3,47 @@ import { Host, h } from "@stencil/core";
  * @slot <default>  - <b>Unnamed slot.</b> For injection of <code>tds-side-menu-dropdown-list-item</code> subcomponents.
  * */
 export class TdsSideMenuDropdownList {
-  constructor() {
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    var _a;
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "list" }, h("div", { class: {
-        'state-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  static get is() { return "tds-side-menu-dropdown-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-dropdown-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-dropdown-list.css"]
-    };
-  }
-  static get states() {
-    return {
-      "collapsed": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalTdsSideMenuPropChange",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    constructor() {
+        this.collapsed = false;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        var _a;
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+    }
+    render() {
+        return (h(Host, { role: "list" }, h("div", { class: {
+                'state-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    static get is() { return "tds-side-menu-dropdown-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu-dropdown-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu-dropdown-list.css"]
+        };
+    }
+    static get states() {
+        return {
+            "collapsed": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsSideMenuPropChange",
+                "method": "collapsedSideMenuEventHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -3,86 +3,86 @@ import { h, Host } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button></code> or <code>&lt;a></code> element.
  * */
 export class TdsSideMenuDropdownListItem {
-  constructor() {
-    this.selected = false;
-    this.dropdownHasIcon = false;
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    var _a;
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
-  }
-  componentDidLoad() {
-    var _a;
-    const dropdownEl = this.host.closest('tds-side-menu-dropdown');
-    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
-    const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
-    const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
-    const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
-    if (hasBtnIcon && !btnIconIsUserImage) {
-      this.dropdownHasIcon = true;
+    constructor() {
+        this.selected = false;
+        this.dropdownHasIcon = false;
+        this.collapsed = false;
+    }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        var _a;
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+    }
+    componentDidLoad() {
+        var _a;
+        const dropdownEl = this.host.closest('tds-side-menu-dropdown');
+        const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
+        const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
+        const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
+        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+        if (hasBtnIcon && !btnIconIsUserImage) {
+            this.dropdownHasIcon = true;
+        }
+    }
+    render() {
+        return (h(Host, { role: "listitem" }, h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-dropdown-has-icon': this.dropdownHasIcon,
+                'component-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    static get is() { return "tds-side-menu-dropdown-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu-dropdown-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu-dropdown-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the item should appear selected."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dropdownHasIcon": {},
+            "collapsed": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsSideMenuPropChange",
+                "method": "collapseSideMenuEventHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
     }
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-dropdown-has-icon': this.dropdownHasIcon,
-        'component-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  static get is() { return "tds-side-menu-dropdown-list-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-dropdown-list-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-dropdown-list-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the item should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "dropdownHasIcon": {},
-      "collapsed": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalTdsSideMenuPropChange",
-        "method": "collapseSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }