@itcenteratunihelsinki/huds-lib 0.6.5 → 0.6.7

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

@@ -1,557 +0,0 @@
-import { Component, Element, Event, h, Host, Listen, Prop } from '@stencil/core';
-import { MenuType } from '../../../utils/utils';
-export class MenuItem {
-  constructor() {
-    this.inActiveTrail = false;
-    this.isActive = false;
-    this.isActiveChild = false;
-    this.isHeading = false;
-    this.isParent = false;
-    this.isDemo = false;
-    this.isExternal = false;
-    //@Prop() depth: number = 0;
-    this.menuItemAlternative = false;
-    this.menuLinkId = '';
-    this.menuType = MenuType.desktop;
-    this.menuButtonSubmenuExpand = '';
-    this.ariaExpanded = false;
-    this.depth = 0;
-    this.hasChildren = null;
-    this.label = '';
-    this.parentAsHeading = '';
-    this.parentExpanded = false;
-    this.url = '';
-  }
-  // Listener for submenu expand button. Listener will toggle menu level
-  // container and add its parent to breadcrumbs.
-  handleClick() {
-    this.menuContainerToggled.emit({
-      triggerItem: this.menuLinkId,
-      triggerType: 'add',
-    });
-    const currentParent = this.el.parentNode;
-    let parentLabel = currentParent.parentElement.getAttribute('label')
-      ? currentParent.parentElement.getAttribute('label')
-      : this.menuButtonBreadcrumbMain;
-    let isMainMenu = parentLabel == this.menuButtonBreadcrumbMain;
-    this.addBreadcrumb.emit({
-      url: this.url,
-      label: parentLabel,
-      bid: this.menuLinkId,
-      isMainMenu: isMainMenu,
-    });
-  }
-  componentWillLoad() {
-    // 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;
-    }
-    // Notify breadcrumbs if item is in active trail.
-    if (this.inActiveTrail && !this.isActive) {
-      const currentParent = this.el.parentNode;
-      let parentLabel = currentParent.parentElement.getAttribute('label')
-        ? currentParent.parentElement.getAttribute('label')
-        : this.menuButtonBreadcrumbMain;
-      this.addBreadcrumb.emit({
-        url: this.url,
-        label: parentLabel,
-        bid: this.menuLinkId,
-      });
-    }
-    // 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') {
-          elem = elem.parentNode;
-          parents.push(elem);
-        }
-        return parents;
-      };
-      const parents = getParents(this.el);
-      parents.forEach((element) => {
-        if (element.tagName.toLowerCase() === 'hy-menu-item') {
-          this.menuContainerActiveTrail.emit({
-            triggerItem: element.getAttribute('menu-link-id'),
-          });
-        }
-      });
-    }
-    this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;
-  }
-  render() {
-    switch (this.menuType) {
-      case MenuType.desktop:
-        return (h(Host, { class: {
-            'is-active': this.isActive,
-            'hy-menu-item': true,
-            'hy-menu-item--alternative': this.menuItemAlternative,
-            'hy-menu-item--desktop': true,
-            'is-demo': this.isDemo,
-          } },
-          h("a", { "aria-current": this.isHeading.toString(), href: this.url, class: {
-              'is-active': this.isActive,
-              'in-active-trail': this.inActiveTrail,
-              'is-heading': this.isHeading,
-              'hy-menu-item--desktop': true,
-              'is-demo': this.isDemo,
-            } },
-            this.depth == 1 && (h("span", { class: "hy-menu-item__heading__icon" },
-              h("hy-icon", { icon: 'hy-icon-arrow-right', size: 40 }))),
-            this.depth == 2 && (h("span", { class: "hy-menu-item__heading__icon" },
-              h("hy-icon", { icon: 'hy-icon-caret-right', size: 12 }))),
-            h("span", { class: 'hy-menu-item__label' }, this.label)),
-          this.hasChildren && h("slot", null)));
-      case MenuType.mobile:
-        return (h(Host, { class: {
-            'is-active': this.isActive,
-            'hy-menu-item': true,
-            'hy-menu-item--alternative': this.menuItemAlternative,
-            'hy-menu-item--mobile': true,
-            'is-demo': this.isDemo,
-          } },
-          h("a", { "aria-current": this.isHeading.toString(), href: this.url, class: {
-              'is-active': this.isActive,
-              'in-active-trail': this.inActiveTrail,
-              'is-heading': this.isHeading,
-              'hy-menu-item--mobile': true,
-              'is-demo': this.isDemo,
-              'is-external': this.isExternal,
-              first: this.depth == 1,
-            } },
-            this.depth !== 1 && !this.isHeading && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
-            h("span", { class: 'hy-menu-item__label' },
-              this.label,
-              this.isExternal && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 }))),
-          this.hasChildren && (h("button", { "aria-haspopup": 'true', "aria-label": `Open submenu for ${this.label}`, onClick: () => this.handleClick(), class: 'hy-menu-item__button' },
-            h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 }))),
-          this.hasChildren && h("slot", null)));
-    }
-  }
-  static get is() { return "hy-menu-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu-item.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"
-    },
-    "isExternal": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-external",
-      "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.tablet",
-        "references": {
-          "MenuType": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-type",
-      "reflect": false,
-      "defaultValue": "MenuType.desktop"
-    },
-    "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": "''"
-    },
-    "menuButtonBreadcrumbMain": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-breadcrumb-main",
-      "reflect": 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": "handleClick",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/navigation/menu-level-container/menu-level-container.css

@@ -1,129 +0,0 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-soft: #b1e7ff;
-  --brand-main-bright: #48c5f8;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --link-blue: #0479a4;
-  --link-disabled: #767676;
-  --grayscale-white: #fff;
-  --grayscale-slightly-gray: #fefefe;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-background-box: #f5f5f5;
-  --grayscale-tabs-border: #e6e6e6;
-  --grayscale-background-arrow: #dfdfdf;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-dark-text: #222222;
-  --grayscale-black: #000000;
-  --additional-red-light: #e5053a;
-  --additional-red-dark: #a31621;
-  --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
-  --additional-skyblue: #48c5f8;
-  --additional-orange: #d14600;
-  --additional-green-light: #96ba3c;
-  --additional-green-dark: #006400;
-  --hover-gray: #eaeaea;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --gutter-mobile: 16px;
-  --gutter-narrow: 24px;
-  --gutter-medium: 24px;
-  --gutter-wide: 24px;
-  --gutter-extrawide: 32px;
-}
-
-/**
- * Mixin for fluid type.
- * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
- */
-
-:root {
-  --breakpoint-extrawide: 75.0625rem;
-  --breakpoint-max-width: 75.0625rem;
-  --breakpoint-medium: 48rem;
-  --breakpoint-narrow: 30rem;
-  --breakpoint-wide: 60rem;
-}
-
-.hy-menu-level-container--mobile {
-  background-color: var(--grayscale-white);
-  display: block;
-  height: 0;
-  left: 0;
-  position: absolute;
-  top: 0;
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
-  -webkit-transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-  visibility: hidden !important;
-  width: 100%;
-}
-
-.hy-menu-level-container--mobile.is-open {
-  height: auto;
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
-  visibility: visible !important;
-  padding-bottom: 96px;
-}
-
-.hy-menu-level-container--mobile.hy-menu-level-container--level-0 {
-  padding-top: 8px;
-  position: relative;
-}
-
-.hy-menu-level-container--mobile.hy-menu-level-container--level-0:before {
-  background-color: var(--brand-main-light);
-  content: "";
-  display: block;
-  height: 3px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.hy-menu-level-container--mobile:focus {
-  outline: 0;
-}
-
-.hy-menu-level-container--desktop {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
-  flex-flow: column;
-  width: 100%;
-}
-
-.hy-menu-level-container--desktop.is-open {
-  display: block;
-  visibility: visible;
-}
-
-.hy-menu-level-container--desktop:not(.hy-menu-level-container--level-0):not(.hy-menu-level-container--level-2) {
-  display: none;
-}
-
-.hy-menu-level-container--desktop.hy-menu-level-container--level-2 {
-  background-color: var(--grayscale-background-box);
-}