@itcenteratunihelsinki/huds-lib 0.5.44 → 0.6.0

package/dist/collection/components/navigation/menu-item-sidebar/menu-item-sidebar.js

@@ -1,580 +0,0 @@
-import { Component, Element, Event, h, Prop, Listen } from '@stencil/core';
-import { MenuType } from '../../../utils/utils';
-import ResizeObserver from 'resize-observer-polyfill';
-export class MenuItemSidebar {
-  constructor() {
-    this.inActiveTrail = false;
-    this.isActive = false;
-    this.isActiveChild = false;
-    this.isHeading = false;
-    this.isParent = false;
-    this.isDemo = false;
-    this.menuItemAlternative = false;
-    this.menuLinkId = '';
-    this.menuType = MenuType.sidenav;
-    this.pageSize = MenuType.mobile;
-    this.menuButtonSubmenuExpand = '';
-    this.menuIsOpen = false;
-    this.ariaExpanded = false;
-    this.depth = 0;
-    this.hasChildren = null;
-    this.label = '';
-    this.parentAsHeading = '';
-    this.parentExpanded = false;
-    this.url = '';
-  }
-  sidebarTopLevelToggle(e) {
-    if (this.depth !== 0) {
-      return;
-    }
-    const body = document.querySelector('body');
-    const container = document.querySelector('.hy-menu-sidebar--container');
-    const menuItem = e.target.closest('.hy-menu-item-sidebar');
-    if (container.classList.contains('sidebar-open') && menuItem.classList.contains('is-active-item')) {
-      container.classList.remove('sidebar-open');
-      body.classList.remove('hy-menu-sidebar__no-scroll');
-    }
-    else {
-      container.classList.add('sidebar-open');
-      body.classList.add('hy-menu-sidebar__no-scroll');
-    }
-    e.preventDefault();
-  }
-  async componentWillLoad() {
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.applySize(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(document.body);
-    // If is-active class is added by system, add it to menu component as well.
-    if (this.el.classList.contains('is-active')) {
-      this.isActive = true;
-    }
-    // If current menu item is active, trigger all parent menuLevelContainer
-    // elements in the same active-trail to open the menu.
-    if (this.isActive) {
-      const getParents = (elem) => {
-        let parents = [];
-        while (elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'hy-menu-sidebar') {
-          elem = elem.parentNode;
-          parents.push(elem);
-        }
-        return parents;
-      };
-      const parents = getParents(this.el);
-      for (let i = 0; i < parents.length; i++) {
-        const element = parents[i];
-        if (element.tagName.toLowerCase() === 'hy-menu-item-sidebar') {
-          element.classList.add('is-hidden--child');
-          this.menuContainerActiveTrail.emit({
-            triggerItem: element.getAttribute('menu-link-id'),
-          });
-        }
-      }
-      // If current active menu item have children, set the child
-      // menu-level-container open.
-      if (this.el.children.length > 0) {
-        this.el.children[0].setAttribute('class', 'is-open-on-top');
-      }
-    }
-    if (this.inActiveTrail) {
-      const currentParent = this.el.parentNode;
-      if (this.menuType === MenuType.sidepanel) {
-        currentParent.classList.add('is-open');
-        const childList = this.el.querySelector('.hy-menu-level-container');
-        if (childList) {
-          childList.classList.add('is-open');
-        }
-      }
-    }
-    // Assign depth value to current menu item instance; 1st level, 2nd level, etc.
-    this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;
-    if (this.menuType === MenuType.sidenav) {
-      let parentMenuItem = this.el.closest('hy-menu-item-sidebar');
-      let nextParentMenuItem;
-      if (parentMenuItem) {
-        nextParentMenuItem = parentMenuItem.parentElement.closest('hy-menu-item-sidebar');
-        if (nextParentMenuItem === parentMenuItem) {
-          return;
-        }
-        else {
-          if (nextParentMenuItem !== null) {
-            this.parentAsHeading = nextParentMenuItem;
-          }
-        }
-      }
-    }
-  }
-  applySize(size) {
-    // Set the menu-type based on the width of the browser.
-    if (size <= 960) {
-      this.pageSize = MenuType.mobile;
-    }
-    else {
-      this.pageSize = MenuType.desktop;
-    }
-  }
-  componentWillRender() {
-    if (this.pageSize === MenuType.mobile)
-      return;
-  }
-  render() {
-    let classAttributes = [
-      'hy-menu-item-sidebar',
-      this.menuType ? `hy-menu-item-sidebar--${this.menuType}` : '',
-      this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
-      this.isDemo ? 'is-demo' : '',
-      this.isActive ? 'is-current-page' : '',
-      this.isParent ? 'is-parent' : '',
-      this.hasChildren ? 'has-children' : '',
-      this.inActiveTrail ? 'is-active-item' : '',
-      this.isActive && this.hasChildren ? 'is-active--heading' : '',
-    ];
-    let anchorClassAttributes = ['hy-menu-item-sidebar__label'];
-    classAttributes = [...classAttributes];
-    if (this.url) {
-      return (h("li", { "data-link-id": `menu-link-sidebar-${this.menuLinkId}`, class: classAttributes.join(' '), "aria-current": this.isActive ? 'true' : 'false', "item-level": this.depth },
-        this.isParent && (h("span", { class: 'hy-menu-item__parent__icon' },
-          h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }))),
-        h("div", { class: "hy-menu-item-sidebar--label-container" },
-          this.isActive ? (h("span", { class: anchorClassAttributes.join(' ') }, this.label)) : (h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label)),
-          this.hasChildren && (h("button", { "aria-labelledby": this.label, "aria-expanded": this.inActiveTrail && !this.isActive ? 'true' : 'false', type: "button", class: 'hy-menu-item__label__icon', onClick: (e) => this.sidebarTopLevelToggle(e) },
-            h("hy-icon", { class: 'hy-menu-item__label__icon__svg', icon: 'hy-icon-caret-right', fill: 'currentColor', size: 18 })))),
-        this.hasChildren && h("slot", null)));
-    }
-    else {
-      return;
-    }
-  }
-  static get is() { return "hy-menu-item-sidebar"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu-item-sidebar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu-item-sidebar.css"]
-  }; }
-  static get properties() { return {
-    "inActiveTrail": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "in-active-trail",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isActive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-active",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isActiveChild": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-active-child",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isHeading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-heading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isParent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-parent",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isDemo": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-demo",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "menuItemAlternative": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-item-alternative",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "menuLinkId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-link-id",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "menuType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
-        "references": {
-          "MenuType": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-type",
-      "reflect": false,
-      "defaultValue": "MenuType.sidenav"
-    },
-    "pageSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
-        "references": {
-          "MenuType": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "page-size",
-      "reflect": false,
-      "defaultValue": "MenuType.mobile"
-    },
-    "menuButtonSubmenuExpand": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-submenu-expand",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "menuIsOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-is-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "ariaExpanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "aria-expanded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "depth": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "depth",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "hasChildren": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "has-children",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "parentAsHeading": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "parent-as-heading",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "parentExpanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "parent-expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "url": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "url",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get events() { return [{
-      "method": "addBreadcrumb",
-      "name": "addBreadcrumb",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "menuContainerActiveTrail",
-      "name": "menuContainerActiveTrail",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "menuContainerToggled",
-      "name": "menuContainerToggled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "routeClicked",
-      "name": "routeClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "sidebarTopLevelToggle",
-      "method": "sidebarTopLevelToggle",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}