@itcenteratunihelsinki/huds-lib 0.6.5 → 0.6.7

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

@@ -1,300 +0,0 @@
-import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
-import { MenuType } from '../../../utils/utils';
-export class MenuLevelContainer {
-  constructor() {
-    this.menuType = MenuType.mobile;
-    this.activeTrailTriggered = false;
-    this.depth = 0;
-    this.menuIsOpen = false;
-  }
-  // Add/Remove is-hidden class from each upper level menu-items
-  // to make browsing more accessible.
-  assignMenuItemClass(parentMenu, type) {
-    if (!parentMenu)
-      return;
-    const items = Array.from(parentMenu.children);
-    items.forEach((item) => {
-      if (type === 'remove') {
-        item.classList.remove('is-hidden');
-      }
-      else {
-        item.classList.add('is-hidden');
-      }
-    });
-  }
-  // Listener for assigning active-trail for parent menu level container.
-  menuContainerActiveTrail(data) {
-    const currentMenuContainer = this.el.getAttribute('trigger-item');
-    if (currentMenuContainer === data.detail.triggerItem) {
-      this.activeTrailTriggered = true;
-      this.menuIsOpen = true;
-      this.assignMenuItemClass(this.el.parentElement.closest('hy-menu-level-container'), 'add');
-    }
-  }
-  // Listener for opening and closing menu level container.
-  menuContainerToggled(data) {
-    // Toggle submenu.
-    if (this.triggerItem == data.detail.triggerItem) {
-      this.activeTrailTriggered = false;
-      this.menuIsOpen = data.detail.triggerType != 'remove';
-      this.assignMenuItemClass(this.el.parentElement.closest('hy-menu-level-container'), data.detail.triggerType);
-      // Scroll to .hy-menu top.
-      let hyMenu = this.el.parentElement.closest('hy-menu');
-      hyMenu.shadowRoot.querySelector('.hy-menu').scrollTop = 0;
-    }
-  }
-  componentWillUpdate() {
-    // Pass the menu type and menu-button-submenu-expand attributes to
-    // the child menu item component.
-    if (this.menuType) {
-      const items = Array.from(this.el.children);
-      items.forEach((item) => {
-        item.setAttribute('menu-type', this.menuType);
-        item.setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
-      });
-    }
-  }
-  componentWillLoad() {
-    // Set trigger item for each mobile menu level container and handle only submenus.
-    // Add a heading element foreach level.
-    if (this.menuType === MenuType.mobile) {
-      if (this.menuLevel > 1) {
-        const parentMenuItem = this.el.closest('hy-menu-item');
-        this.triggerItem = parentMenuItem.getAttribute('menu-link-id');
-        this.headingItem = Object.assign(Object.assign({}, this.headingItem), { url: parentMenuItem.getAttribute('url') });
-        this.headingItem = Object.assign(Object.assign({}, this.headingItem), { label: parentMenuItem.getAttribute('label') });
-        this.headingItem = Object.assign(Object.assign({}, this.headingItem), { isActive: window.location.pathname === this.headingItem.url });
-      }
-      else {
-        this.triggerItem = 'home';
-      }
-    }
-  }
-  render() {
-    let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
-    switch (this.menuType) {
-      case MenuType.desktop:
-        classAttributes = [...classAttributes, 'hy-menu-level-container--desktop'];
-        return (h(Host, { class: classAttributes.join(' ') },
-          h("slot", null)));
-      case MenuType.mobile:
-        classAttributes = [...classAttributes, 'hy-menu-level-container--mobile'];
-        if (this.depth === 1) {
-          classAttributes = [...classAttributes, 'is-open'];
-          return (h(Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' },
-            h("slot", null)));
-        }
-        else {
-          classAttributes = [...classAttributes, this.menuIsOpen ? 'is-open' : null];
-          return (h(Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' },
-            h("hy-menu-item", { label: this.headingItem.label, url: this.headingItem.url, isHeading: true, isActive: this.headingItem.isActive, "menu-type": 'mobile', depth: this.menuLevel }),
-            h("slot", null),
-            h("slot", { name: "shortcuts" })));
-        }
-    }
-  }
-  static get is() { return "hy-menu-level-container"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu-level-container.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu-level-container.css"]
-  }; }
-  static get properties() { return {
-    "labelFrontPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-front-page",
-      "reflect": false
-    },
-    "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
-    },
-    "menuLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-level",
-      "reflect": false
-    },
-    "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.mobile"
-    },
-    "activeTrailTriggered": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "active-trail-triggered",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "depth": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "depth",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "headingItem": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "heading-item",
-      "reflect": false
-    },
-    "triggerItem": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "trigger-item",
-      "reflect": true
-    },
-    "frontUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Url to front page for panel first parent"
-      },
-      "attribute": "front-url",
-      "reflect": false
-    },
-    "frontLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "label for front page for panel first parent"
-      },
-      "attribute": "front-label",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "menuIsOpen": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "menuContainerActiveTrail",
-      "method": "menuContainerActiveTrail",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "menuContainerToggled",
-      "method": "menuContainerToggled",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.css

@@ -1,90 +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-mobile-breadcrumb {
-  font-size: 0.9375rem;
-  line-height: 22px;
-  font-weight: 400;
-  color: var(--brand-main-light);
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: transparent;
-  border: 0 none;
-  cursor: pointer;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-family: var(--main-font-family);
-  text-decoration: none;
-  padding: 11px 0;
-  text-align: left;
-}
-
-.hy-menu-mobile-breadcrumb:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: 2px;
-}
-
-.hy-menu-mobile-breadcrumb hy-icon {
-  margin-right: 8px;
-}
-
-.hy-menu-mobile-breadcrumb hy-icon svg {
-  fill: var(--grayscale-black);
-}

package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.js

@@ -1,151 +0,0 @@
-import { Component, Prop, Event, h, Listen } from '@stencil/core';
-export class MenuMobileBreadcrumb {
-  constructor() {
-    this.isFirst = false;
-  }
-  // Listener for a click. The current breadcrumb will be remove from the list.
-  handleClick() {
-    this.removeBreadcrumb.emit({ bid: this.bid });
-  }
-  render() {
-    return this.isFirst ? (h("a", { "aria-label": `${this.labelBack}: ${this.labelFrontPage}`, class: 'hy-menu-mobile-breadcrumb', href: this.logoUrl },
-      h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label))) : (h("button", { "aria-label": `${this.labelBack}: ${this.label}`, class: 'hy-menu-mobile-breadcrumb', onClick: () => this.handleClick() },
-      h("hy-icon", { icon: 'hy-icon-caret-left', size: 10 }),
-      h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label)));
-  }
-  static get is() { return "hy-menu-mobile-breadcrumb"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu-mobile-breadcrumb.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu-mobile-breadcrumb.css"]
-  }; }
-  static get properties() { return {
-    "bid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "bid",
-      "reflect": false
-    },
-    "isFirst": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-first",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "labelBack": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-back",
-      "reflect": false
-    },
-    "labelFrontPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-front-page",
-      "reflect": false
-    },
-    "logoUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "logo-url",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "removeBreadcrumb",
-      "name": "removeBreadcrumb",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get listeners() { return [{
-      "name": "handleClick",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.css

@@ -1,140 +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;
-}
-
-:host(.hy-mobile-menu-shortcuts) {
-  margin-top: 24px;
-}
-
-:host(.hy-mobile-menu-shortcuts) > h2 {
-  font-size: 1rem;
-  line-height: 20px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.32px;
-  margin: 0 15px 8px;
-}
-
-:host(.hy-mobile-menu-shortcuts.is-hidden) {
-  visibility: hidden !important;
-}
-
-:host(.hy-mobile-menu-shortcuts.is-hidden):focus {
-  outline: none;
-}
-
-.hy-mobile-menu-shortcuts__links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 4px;
-}
-
-.hy-mobile-menu-shortcuts__link {
-  font-size: 1rem;
-  line-height: 20px;
-  font-weight: 600;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: var(--brand-main);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font-family: var(--main-font-family);
-  letter-spacing: -0.5px;
-  text-decoration: none;
-  width: 100%;
-  padding: 12px 16px;
-}
-
-.hy-mobile-menu-shortcuts__link:focus {
-  outline: solid 2px var(--additional-yellow);
-  outline-offset: -2px;
-}
-
-.hy-mobile-menu-shortcuts__link:hover {
-  text-decoration: underline;
-}
-
-.hy-mobile-menu-shortcuts__link > hy-icon {
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-  margin-top: 10px;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.hy-mobile-menu-shortcuts__link > hy-icon + span {
-  margin-left: 10px;
-}
-
-.hy-mobile-menu-shortcuts__link span hy-icon {
-  display: -webkit-inline-box !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
-  margin-left: 6px;
-  margin-right: 0;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.hy-mobile-menu-shortcuts__link span hy-icon svg {
-  fill: var(--brand-main);
-}