@scania/tegel 0.0.72 → 1.0.1

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css

@@ -0,0 +1,22 @@
+:host button {
+  height: 64px;
+  width: 100%;
+  text-align: left;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--tds-sidebar-side-menu-background-cover);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host button:hover {
+  cursor: pointer;
+  background-color: var(--tds-sidebar-item-state-hover);
+}
+:host button:focus-visible {
+  cursor: pointer;
+  border: 1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from "@stencil/core";
+import { inheritAriaAttributes } from "../../../utils/utils";
+export class TdsSideMenuCloseButton {
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+  }
+  static get is() { return "tds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  position: sticky;
+  bottom: 0;
+  display: none;
+  height: 68px;
+  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .icon {
+  transform: rotateZ(90deg);
+  transition: all 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+}
+:host .state-collapsed .icon {
+  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  margin-left: 0;
+  position: absolute;
+  left: 50%;
+}
+
+@media (min-width: 992px) {
+  :host {
+    display: block;
+  }
+}

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

@@ -0,0 +1,115 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> For the text label of the button.
+ * */
+export class TdsSideMenuCollapseButton {
+  constructor() {
+    this.handleClick = () => {
+      /** Emit a public event that the user can prevent. */
+      const tdsCollapseEvent = this.tdsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!tdsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalTdsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
+    this.collapsed = false;
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("tds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
+  }
+  static get is() { return "tds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsCollapse",
+        "name": "tdsCollapse",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is broadcast when the collapse button is clicked.\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu",
+              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+            }
+          }
+        }
+      }, {
+        "method": "internalTdsCollapse",
+        "name": "internalTdsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Event that is broadcast when the internal collapse state changes. Contains the future of the collapse state."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu",
+              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host .dropdown-icon {
+  margin-left: auto;
+  transition: all 0.2s ease-in-out;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .menu {
+  display: block;
+}
+:host .state-collapsed .menu {
+  --side-menu-width: 68px;
+  position: absolute;
+  left: var(--side-menu-width);
+  box-shadow: var(--tds-nav-dropdown-menu-box);
+  background-color: var(--tds-sidebar-side-menu-subnav-background);
+}
+:host .state-collapsed .menu .heading-collapsed {
+  all: unset;
+  box-sizing: border-box;
+  padding: 16px 24px 15px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+}
+:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
+  width: 100%;
+}
+:host .menu {
+  display: none;
+  flex-direction: column;
+}

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

@@ -0,0 +1,170 @@
+import { Fragment, h, Host } from "@stencil/core";
+/**
+ * @slot icon - Used for injecting the icon that compliments the dropdown title
+ * @slot label - Used for injecting the text, aka dropdown title
+ * @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.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.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  width: 190px;
+}
+:host [role=list] {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--tds-header-app-launcher-menu-bg);
+}
+:host .state-collapsed ::slotted(*) {
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}

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

@@ -0,0 +1,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() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  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.css

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  height: 48px;
+  width: 100%;
+}
+:host .component {
+  height: 100%;
+  width: 100%;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border-right: 1px solid var(--tds-nav-item-border-color);
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24px;
+  width: 100%;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  background-color: var(--tds-header-nav-item-dropdown-opened-background);
+  color: var(--tds-header-nav-item-dropdown-opened-color);
+  border: none;
+}
+:host .component ::slotted(a:hover),
+:host .component ::slotted(button:hover) {
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-hover);
+  cursor: pointer;
+}
+:host .component ::slotted(a:active),
+:host .component ::slotted(button:active) {
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-active) !important;
+  cursor: pointer;
+}
+:host .component ::slotted(a:focus-visible) {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .component.component-selected ::slotted(a),
+:host .component.component-selected ::slotted(button) {
+  border-left: 4px solid var(--tds-nav-item-border-color-active);
+  padding-left: 20px;
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
+}
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {
+  padding-left: 56px;
+}

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

@@ -0,0 +1,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() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  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
+      }];
+  }
+}

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

@@ -0,0 +1,61 @@
+/*
+  Contains spacing variables for the layout
+*/
+:host {
+  display: block;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  height: 68px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--tds-sidebar-side-menu-background-cover);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  cursor: pointer;
+}
+:host .component tds-icon {
+  color: red !important;
+}
+:host .component ::slotted(a:focus-visible),
+:host .component ::slotted(button:focus-visible) {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .component:hover ::slotted(a),
+:host .component:hover ::slotted(button) {
+  background-color: var(--tds-sidebar-item-state-hover);
+}
+:host .component:active ::slotted(a),
+:host .component:active ::slotted(button) {
+  background-color: var(--tds-sidemenu-item-state-active);
+}
+:host .component-collapsed ::slotted(a),
+:host .component-collapsed ::slotted(button) {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+:host .component-selected:not(:host .component-active) ::slotted(a),
+:host .component-selected:not(:host .component-active) ::slotted(button) {
+  border-left: 4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+  padding-left: 20px;
+  background-color: var(--tds-sidebar-item-state-selected);
+}
+
+@media (min-width: 992px) {
+  :host .component.component-collapsed ::slotted(a),
+  :host .component.component-collapsed ::slotted(button) {
+    color: rgba(90, 90, 90, 0);
+    overflow: hidden;
+  }
+}