@itcenteratunihelsinki/huds-lib 0.6.6 → 0.6.8

package/dist/collection/components/navigation/menu/menu.css

@@ -1,262 +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 {
-  margin: 0;
-  padding: 0;
-}
-
-.hy-mobile-menu__header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: 12px 16px;
-  gap: 16px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.hy-mobile-menu__menu-close-button {
-  font-size: 1rem;
-  line-height: 18px;
-  font-weight: 700;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  color: var(--brand-main);
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-family: var(--main-font-family);
-  letter-spacing: -0.3px;
-  padding: 16px;
-  margin-left: auto;
-  margin-right: -16px;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.hy-mobile-menu__menu-close-button:hover {
-  cursor: pointer;
-}
-
-.hy-mobile-menu__menu-close-button hy-icon {
-  margin-left: 8px;
-}
-
-.hy-mobile-menu__menu-close-button hy-icon svg {
-  fill: var(--brand-main);
-}
-
-.hy-menu-wrapper--mobile {
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  bottom: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
-  flex-flow: column;
-  justify-items: stretch;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 99;
-}
-
-.hy-menu-wrapper--mobile.is-open {
-  z-index: 101;
-}
-
-.hy-menu-wrapper--desktop {
-  padding: 0;
-}
-
-.hy-menu-wrapper--sidenav {
-  display: none;
-}
-
-.hy-menu-wrapper--sidenav.is-demo {
-  display: block;
-}
-
-@media (min-width: 30rem) {
-  .hy-menu-wrapper--sidenav {
-    display: block;
-  }
-}
-
-.hy-mobile-menu__menu-container {
-  min-height: calc(100vh - 126px);
-  overflow-x: hidden;
-  overflow-y: visible;
-}
-
-.hy-menu--mobile {
-  -webkit-overflow-scrolling: touch;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
-  flex-flow: column;
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
-  -webkit-transition: 0.45s;
-  transition: 0.45s;
-  width: 100%;
-  z-index: 100;
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-menu--mobile:not(.is-demo) {
-    min-height: 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    visibility: visible;
-  }
-}
-
-.hy-menu--mobile.is-open {
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);
-  transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);
-  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
-  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);
-}
-
-.hy-menu--mobile.is-open::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-.hy-menu-breadcrumb-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
-  flex-flow: column;
-}
-
-.hy-menu__logo-container {
-  display: inline-block;
-  padding: 16px;
-  z-index: 100;
-}
-
-@media (min-width: 30rem) {
-  .hy-menu__logo-container {
-    padding: 16px 28px;
-  }
-}
-
-.hy-mobile-menu__donate {
-  background-color: var(--grayscale-white);
-  bottom: 0;
-  -webkit-box-shadow: rgba(14, 104, 139, 0.2) 0px -20px 20px -20px;
-  box-shadow: rgba(14, 104, 139, 0.2) 0px -20px 20px -20px;
-  position: sticky;
-  z-index: 102;
-}
-
-.hy-mobile-menu__donate a {
-  font-size: 1rem;
-  line-height: 16px;
-  font-weight: 600;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: var(--grayscale-white);
-  color: var(--grayscale-black);
-  display: block;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font-family: var(--main-font-family);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  letter-spacing: -0.4px;
-  padding: 20px 0 16px;
-  text-align: center;
-  text-decoration: none;
-}
-
-.hy-mobile-menu__donate a:focus {
-  outline: solid 2px var(--additional-yellow);
-}
-
-.hy-mobile-menu__donate a svg {
-  margin-right: 5px;
-}
-
-.hy-menu__breadcrumbs {
-  display: block;
-  position: relative;
-}
-
-.hy-menu__breadcrumbs.is-empty {
-  min-height: 35px;
-}

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

@@ -1,431 +0,0 @@
-import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
-import { MenuType } from '../../../utils/utils';
-import { jsonParserWorker } from '../../../global/globalScript';
-let breadcrumbTimeout = null;
-let addbreadTimeout = null;
-export class Menu {
-  constructor() {
-    this.isGroup = false;
-    this.isDemo = false;
-    this.menuIsOpen = true;
-    this.menuType = null;
-  }
-  // Listener for removing a breadcrumb from mobile menu breadcrumbs.
-  async removeBreadcrumb(data) {
-    clearTimeout(breadcrumbTimeout);
-    let breadcrumbs = await jsonParserWorker(this.breadcrumbs);
-    breadcrumbTimeout = setTimeout(() => {
-      let currentBreadcrumb = breadcrumbs
-        .map(function (e) {
-        return e.bid;
-      })
-        .indexOf(data.detail.bid);
-      for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
-        this.menuContainerToggled.emit({
-          triggerItem: this.breadcrumbs[i].bid,
-          triggerType: 'remove',
-        });
-      }
-      this.breadcrumbs = [];
-      this.breadcrumbs = breadcrumbs.slice(0, -1);
-      // Reset if home breadcrumb link has been clicked.
-      if (currentBreadcrumb === 0) {
-        this.breadcrumbs = [];
-        // Notify menu-level-container toggle listener about closing all levels.
-        let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
-        elements.forEach((element) => {
-          if (!element.classList.contains('hy-menu-level-container--level-0')) {
-            this.menuContainerToggled.emit({
-              triggerItem: element.getAttribute('trigger-item'),
-              triggerType: 'remove',
-            });
-          }
-        });
-      }
-    }, 100);
-  }
-  // Listener for adding a breadcrumb to mobile menu breadcrumbs.
-  addBreadcrumb(event) {
-    clearTimeout(addbreadTimeout);
-    addbreadTimeout = setTimeout(() => {
-      this.breadcrumbs = [
-        ...this.breadcrumbs,
-        {
-          label: event.detail.label,
-          bid: event.detail.bid,
-          url: event.detail.url,
-        },
-      ];
-    }, 100);
-  }
-  async componentWillLoad() {
-    this.breadcrumbs = [];
-  }
-  disconnectedCallback() {
-    clearTimeout(breadcrumbTimeout);
-    clearTimeout(addbreadTimeout);
-  }
-  componentWillUpdate() {
-    // Pass the menu type and menu-button-submenu-expand attributes to
-    // the child menu-level-container component.
-    this.el.children[0].setAttribute('menu-type', this.menuType);
-    this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
-  }
-  componentWillRender() {
-    // Set the donate link data.
-    if (this.dataMenuDonate) {
-      this.donateLink = JSON.parse(this.dataMenuDonate);
-    }
-    // Set demo value to all children to provide better UI for DS users.
-    if (this.isDemo) {
-      const items = Array.from(this.el.children);
-      items.forEach((item) => {
-        item.setAttribute('is-demo', 'true');
-      });
-    }
-  }
-  render() {
-    if (this.menuType === null)
-      return;
-    switch (this.menuType) {
-      case MenuType.desktop:
-        return (h("div", { class: 'hy-wrapper' },
-          h("nav", { role: 'navigation', class: {
-              'hy-menu-wrapper--desktop': true,
-              'is-open': this.menuIsOpen,
-            } },
-            h("div", { class: 'hy-menu hy-menu--desktop' },
-              h("slot", null)))));
-      case MenuType.mobile:
-        return (h("nav", { "data-is-group": this.isGroup, role: 'navigation', class: "hy-mobile-menu" },
-          h("section", { class: "hy-mobile-menu__header" },
-            h("div", { id: 'menu-bc-container', class: {
-                'hy-mobile-menu__breadcrumbs': true,
-                'is-empty': this.breadcrumbs.length === 0,
-              } }, this.breadcrumbs.length ? (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: this.breadcrumbs[this.breadcrumbs.length - 1].label, bid: this.breadcrumbs[this.breadcrumbs.length - 1].bid })) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))),
-            h("button", { class: `hy-mobile-menu__menu-close-button`, "aria-label": "Close menu", disabled: true, "aria-hidden": "true" },
-              h("span", null, "Close"),
-              h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))),
-          h("section", { class: "hy-mobile-menu__menu-container" },
-            h("div", { "aria-hidden": `${!this.menuIsOpen}`, class: {
-                'hy-menu': true,
-                'hy-menu--mobile': true,
-                'is-open': this.menuIsOpen,
-                'is-demo': this.isDemo,
-              } },
-              h("slot", null))),
-          !this.isGroup && (h("div", { class: 'hy-mobile-menu__donate' }, this.donateLink
-            ? this.donateLink.map((i) => (h("a", { href: i.url },
-              h("hy-icon", { icon: 'hy-icon-heart-support', fill: 'currentColor', size: 16 }),
-              i.label)))
-            : ''))));
-    }
-  }
-  static get is() { return "hy-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu.css"]
-  }; }
-  static get properties() { return {
-    "dataMenuDonate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-menu-donate",
-      "reflect": false
-    },
-    "dataMenuLanguage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-menu-language",
-      "reflect": false
-    },
-    "isGroup": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-group",
-      "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"
-    },
-    "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": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "logo-url",
-      "reflect": false
-    },
-    "logoLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "logo-label",
-      "reflect": false
-    },
-    "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": "true"
-    },
-    "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": "null"
-    },
-    "menuButtonSubmenuExpand": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-submenu-expand",
-      "reflect": false
-    },
-    "menuButtonBreadcrumbReturn": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-breadcrumb-return",
-      "reflect": false
-    },
-    "menuButtonBreadcrumbHome": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-breadcrumb-home",
-      "reflect": false
-    },
-    "menuButtonBreadcrumbMain": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-breadcrumb-main",
-      "reflect": false
-    },
-    "menuButtonBreadcrumbLogourl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "menu-button-breadcrumb-logourl",
-      "reflect": false
-    },
-    "dataSiteHeaderLabels": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-site-header-labels",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "breadcrumbs": {}
-  }; }
-  static get events() { return [{
-      "method": "menuContainerToggled",
-      "name": "menuContainerToggled",
-      "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": "removeBreadcrumb",
-      "method": "removeBreadcrumb",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "addBreadcrumb",
-      "method": "addBreadcrumb",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}