npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.69 → 0.8.71 - Mend

@itcenteratunihelsinki/huds-lib 0.8.69 → 0.8.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.item.js DELETED Viewed

@@ -1,87 +0,0 @@
-import { h } from "@stencil/core";
-export class HyDropdownPanelItem {
-  constructor() {
-    this.isLast = false;
-    this.dropdownItemId = undefined;
-    this.dropdownItemValue = undefined;
-    this.dropdownItemLabel = undefined;
-  }
-  render() {
-    return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? "is-last" : ""}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))));
-  }
-  static get is() { return "hy-dropdown-panel-item"; }
-  static get properties() {
-    return {
-      "isLast": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-last",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "dropdownItemId": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-item-id",
-        "reflect": false
-      },
-      "dropdownItemValue": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-item-value",
-        "reflect": false
-      },
-      "dropdownItemLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-item-label",
-        "reflect": false
-      }
-    };
-  }
-}
-//# sourceMappingURL=hy-dropdown.panel.item.js.map

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.item.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hy-dropdown.panel.item.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,mBAAmB;;kBACH,KAAK;;;;;EAKhC,MAAM;IACJ,OAAO,CACL,UAAI,KAAK,EAAE,2BAA2B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;MAClE,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,uBAAuB,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAC5B,KAAK,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAClC;MACF,aAAO,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE;QAChE,IAAI,CAAC,iBAAiB;QACvB,eAAS,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACxF,CACL,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string | number;\n @Prop() dropdownItemValue: string | number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"]}

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.js DELETED Viewed

@@ -1,32 +0,0 @@
-import { h } from "@stencil/core";
-export class HyDropdownPanel {
-  constructor() {
-    this.isHidden = undefined;
-  }
-  render() {
-    return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? "is-hidden" : ""}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
-  }
-  static get is() { return "hy-dropdown-panel"; }
-  static get properties() {
-    return {
-      "isHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-hidden",
-        "reflect": false
-      }
-    };
-  }
-}
-//# sourceMappingURL=hy-dropdown.panel.js.map

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hy-dropdown.panel.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,eAAe;;;;EAG1B,MAAM;IACJ,OAAO,CACL,UACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,sBAAsB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,iBAClD,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,EACxC,IAAI,EAAC,QAAQ,qBACG,gBAAgB;MAEhC,eAAQ,CACL,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden || false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n"]}

package/dist/esm/hy-dropdown_3.entry.js DELETED Viewed

@@ -1,135 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
-const hyDropdownCss = ":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-light:#f9a21a;--additional-yellow:#c47f1b;--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}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
-const HyDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.single = false;
-    this.dropdownLabel = null;
-    this.dropdownId = "dropdownToggle";
-    this.dropdownOptions = undefined;
-    this.defaultLabel = "All";
-    this.defaultOption = null;
-    this.isPanelOpen = false;
-    this.isChecked = false;
-    this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
-  }
-  async componentWillLoad() {
-    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
-  }
-  componentWillUpdate() {
-    const items = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    if (items) {
-      if ([...items].some((item) => item.checked == true)) {
-        this.isChecked = true;
-      }
-      else {
-        this.isChecked = false;
-      }
-    }
-  }
-  watchPropHandler(newValue, oldValue) {
-    if (!this.single)
-      return;
-    if (newValue !== oldValue) {
-      const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-      Array.from(dropdownPanelCheckboxElements).filter((item) => {
-        if (item.id == newValue) {
-          item.checked = true;
-          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
-          return;
-        }
-        return null;
-      });
-    }
-  }
-  handlePanelToggle() {
-    this.isPanelOpen = !this.isPanelOpen;
-  }
-  handleClick(event) {
-    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
-    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
-    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    const dropdownToggleButtonIconElement = this.el.querySelector(".hy-dropdown__icon");
-    const { target } = event;
-    const allowedElements = [
-      dropdownToggleButtonElement,
-      dropdownPanelElement,
-      dropdownToggleButtonIconElement,
-      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
-    ];
-    if (this.isPanelOpen && !allowedElements.includes(target)) {
-      this.isPanelOpen = false;
-    }
-    event.stopPropagation();
-  }
-  handleSingleClick(event) {
-    if (!this.single || !this.isPanelOpen)
-      return;
-    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-    const allowedElements = [...dropdownPanelCheckboxElements];
-    const { target } = event;
-    if (!allowedElements.includes(target))
-      return;
-    Array.from(dropdownPanelCheckboxElements).filter((item) => {
-      if (item.id == target.id) {
-        if (!item.checked) {
-          this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
-          return;
-        }
-        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
-        return;
-      }
-      if (item.id !== target.id && item.checked) {
-        item.checked = false;
-        return;
-      }
-      return null;
-    });
-    event.stopPropagation();
-  }
-  render() {
-    const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
-    const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
-    if (this.single) {
-      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
-    }
-    else {
-      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
-    }
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "defaultOption": ["watchPropHandler"]
-  }; }
-};
-HyDropdown.style = hyDropdownCss;
-const HyDropdownPanel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isHidden = undefined;
-  }
-  render() {
-    return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? "is-hidden" : ""}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
-  }
-};
-const HyDropdownPanelItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isLast = false;
-    this.dropdownItemId = undefined;
-    this.dropdownItemValue = undefined;
-    this.dropdownItemLabel = undefined;
-  }
-  render() {
-    return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? "is-last" : ""}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))));
-  }
-};
-export { HyDropdown as hy_dropdown, HyDropdownPanel as hy_dropdown_panel, HyDropdownPanelItem as hy_dropdown_panel_item };
-//# sourceMappingURL=hy-dropdown_3.entry.js.map

package/dist/esm/hy-dropdown_3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":[".hy-dropdown {\n display: inline-block;\n min-width: 100%;\n position: relative;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n\n label.hy-dropdown__button-label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n margin-bottom: 8px;\n }\n\n &--single {\n .hy-dropdown__panel {\n width: max-content;\n max-width: 330px;\n min-width: 100%;\n }\n }\n}\n\n.hy-dropdown__toggle {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n height: auto;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 0 0 16px;\n text-align: left;\n max-width: 280px;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n min-height: 44px;\n }\n\n @include breakpoint($extrawide) {\n min-height: 48px;\n }\n\n &:hover {\n border-color: var(--brand-main-light);\n cursor: pointer;\n }\n\n &:focus {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n\n svg {\n pointer-events: none;\n }\n\n &.is-open {\n .hy-dropdown__icon {\n background-color: var(--brand-main-light);\n transform: rotate(180deg);\n\n &::before {\n display: none;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n\n.hy-dropdown__icon {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n margin: 0 0 0 16px;\n position: relative;\n width: 40px;\n\n &::before {\n //border-left: 1px dashed var(--grayscale-medium-dark);\n //Line weight 0,5 px; Line color #979797\n border-left: 0.5px solid var(--grayscale-medium-dark);\n content: \"\";\n display: inline-block;\n height: 65%;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @include breakpoint($narrow) {\n height: 44px;\n width: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n width: 48px;\n }\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n\n.hy-dropdown__panel {\n background-color: var(--grayscale-white);\n box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n list-style: none;\n margin: 0;\n padding: 6px;\n position: absolute;\n width: 100%;\n z-index: 11;\n\n &.is-hidden {\n display: none;\n visibility: hidden;\n }\n}\n\n.hy-dropdown__panel-item {\n position: relative;\n\n &:not(.is-last) {\n margin-bottom: 6px;\n }\n}\n\n.hy-dropdown__label {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n}\n\n.hy-dropdown__label-icon {\n align-items: center;\n display: none !important;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n position: relative;\n visibility: hidden;\n width: 40px;\n}\n\n.hy-dropdown__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border-color: var(--grayscale-black);\n border-style: solid inset solid solid;\n border-width: 2px;\n color: var(--grayscale-black);\n outline: 0;\n text-indent: -1px; // Text stays in place.\n\n .hy-dropdown__label-icon {\n display: inline-flex !important;\n visibility: visible;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n border-color: var(--brand-main-light);\n }\n }\n\n &:focus {\n & + label {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string | number;\n label: string;\n value: string | number;\n}\n\nexport interface DefaultValue {\n id: string | number;\n label: string;\n value: string | number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] | string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string | number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single || !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden || false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string | number;\n @Prop() dropdownItemValue: string | number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"],"version":3}

package/dist/huds-lib/hy-dropdown_3.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as i,H as t,g as o}from"./index-f84f2a7d.js";import{j as n}from"./globalScript-5a4b7abf.js";const a=':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-light:#f9a21a;--additional-yellow:#c47f1b;--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}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:"";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}';const r=class{constructor(i){e(this,i);this.single=false;this.dropdownLabel=null;this.dropdownId="dropdownToggle";this.dropdownOptions=undefined;this.defaultLabel="All";this.defaultOption=null;this.isPanelOpen=false;this.isChecked=false;this.currentSingle=[{id:0,label:this.defaultLabel,value:0}]}async componentWillLoad(){this._dropdownOptions=await n(this.dropdownOptions)}componentWillUpdate(){const e=this.el.querySelectorAll(".hy-dropdown__checkbox");if(e){if([...e].some((e=>e.checked==true))){this.isChecked=true}else{this.isChecked=false}}}watchPropHandler(e,i){if(!this.single)return;if(e!==i){const i=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(i).filter((i=>{if(i.id==e){i.checked=true;this.currentSingle=this._dropdownOptions.filter((i=>i.id==e));return}return null}))}}handlePanelToggle(){this.isPanelOpen=!this.isPanelOpen}handleClick(e){const i=this.el.querySelector(`#${this.dropdownId}`);const t=this.el.querySelector(".hy-dropdown__panel");const o=this.el.querySelectorAll(".hy-dropdown__checkbox");const n=this.el.querySelector(".hy-dropdown__icon");const{target:a}=e;const r=[i,t,n,...o];if(this.isPanelOpen&&!r.includes(a)){this.isPanelOpen=false}e.stopPropagation()}handleSingleClick(e){if(!this.single\|\|!this.isPanelOpen)return;const i=this.el.getElementsByClassName("hy-dropdown__checkbox");const t=[...i];const{target:o}=e;if(!t.includes(o))return;Array.from(i).filter((e=>{if(e.id==o.id){if(!e.checked){this.currentSingle=[{id:null,label:this.defaultLabel,value:null}];return}this.currentSingle=this._dropdownOptions.filter((e=>e.id==o.id));return}if(e.id!==o.id&&e.checked){e.checked=false;return}return null}));e.stopPropagation()}render(){const{label:e,id:o,value:n}=this.currentSingle[0];const a=["hy-dropdown",this.single?"hy-dropdown--single":""].join(" ");if(this.single){return i(t,{class:a},this.dropdownLabel&&i("label",{class:"hy-dropdown__button-label",htmlFor:this.dropdownId},this.dropdownLabel),i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen\|\|false}`,"aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":this.dropdownLabel,"data-current-id":o,"data-current-value":n,value:o,type:"button"},e,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:t,value:o},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":t,"dropdown-item-value":o,"is-last":this._dropdownOptions.length-1===n})))))}else{return i(t,{class:a},i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen\|\|false}`,"aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":this.dropdownLabel,type:"button"},this.dropdownLabel&&this.dropdownLabel,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:t,value:o},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":t,"dropdown-item-value":o,"is-last":this._dropdownOptions.length-1===n})))))}}get el(){return o(this)}static get watchers(){return{defaultOption:["watchPropHandler"]}}};r.style=a;const d=class{constructor(i){e(this,i);this.isHidden=undefined}render(){return i("ul",{id:"dropdownPanel",class:`hy-dropdown__panel ${this.isHidden?"is-hidden":""}`,"aria-hidden":`${this.isHidden\|\|false}`,role:"region","aria-labelledby":"dropdownToggle"},i("slot",null))}};const l=class{constructor(i){e(this,i);this.isLast=false;this.dropdownItemId=undefined;this.dropdownItemValue=undefined;this.dropdownItemLabel=undefined}render(){return i("li",{class:`hy-dropdown__panel-item ${this.isLast?"is-last":""}`},i("input",{type:"checkbox",class:"hy-dropdown__checkbox",id:`${this.dropdownItemId}`,value:`${this.dropdownItemValue}`}),i("label",{class:"hy-dropdown__label",htmlFor:`${this.dropdownItemId}`},this.dropdownItemLabel,i("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))}};export{r as hy_dropdown,d as hy_dropdown_panel,l as hy_dropdown_panel_item};
2	- //# sourceMappingURL=hy-dropdown_3.entry.js.map

package/dist/huds-lib/hy-dropdown_3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","handlePanelToggle","isPanelOpen","handleClick","event","dropdownToggleButtonElement","querySelector","dropdownId","dropdownPanelElement","dropdownToggleButtonIconElement","target","allowedElements","includes","stopPropagation","handleSingleClick","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","onClick","type","icon","size","map","index","length","HyDropdownPanel","isHidden","role","HyDropdownPanelItem","isLast","dropdownItemId","dropdownItemValue","dropdownItemLabel"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":[".hy-dropdown {\n display: inline-block;\n min-width: 100%;\n position: relative;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n\n label.hy-dropdown__button-label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n margin-bottom: 8px;\n }\n\n &--single {\n .hy-dropdown__panel {\n width: max-content;\n max-width: 330px;\n min-width: 100%;\n }\n }\n}\n\n.hy-dropdown__toggle {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n height: auto;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 0 0 16px;\n text-align: left;\n max-width: 280px;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n min-height: 44px;\n }\n\n @include breakpoint($extrawide) {\n min-height: 48px;\n }\n\n &:hover {\n border-color: var(--brand-main-light);\n cursor: pointer;\n }\n\n &:focus {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n\n svg {\n pointer-events: none;\n }\n\n &.is-open {\n .hy-dropdown__icon {\n background-color: var(--brand-main-light);\n transform: rotate(180deg);\n\n &::before {\n display: none;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n\n.hy-dropdown__icon {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n margin: 0 0 0 16px;\n position: relative;\n width: 40px;\n\n &::before {\n //border-left: 1px dashed var(--grayscale-medium-dark);\n //Line weight 0,5 px; Line color #979797\n border-left: 0.5px solid var(--grayscale-medium-dark);\n content: \"\";\n display: inline-block;\n height: 65%;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @include breakpoint($narrow) {\n height: 44px;\n width: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n width: 48px;\n }\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n\n.hy-dropdown__panel {\n background-color: var(--grayscale-white);\n box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n list-style: none;\n margin: 0;\n padding: 6px;\n position: absolute;\n width: 100%;\n z-index: 11;\n\n &.is-hidden {\n display: none;\n visibility: hidden;\n }\n}\n\n.hy-dropdown__panel-item {\n position: relative;\n\n &:not(.is-last) {\n margin-bottom: 6px;\n }\n}\n\n.hy-dropdown__label {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n}\n\n.hy-dropdown__label-icon {\n align-items: center;\n display: none !important;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n position: relative;\n visibility: hidden;\n width: 40px;\n}\n\n.hy-dropdown__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border-color: var(--grayscale-black);\n border-style: solid inset solid solid;\n border-width: 2px;\n color: var(--grayscale-black);\n outline: 0;\n text-indent: -1px; // Text stays in place.\n\n .hy-dropdown__label-icon {\n display: inline-flex !important;\n visibility: visible;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n border-color: var(--brand-main-light);\n }\n }\n\n &:focus {\n & + label {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string | number;\n label: string;\n value: string | number;\n}\n\nexport interface DefaultValue {\n id: string | number;\n label: string;\n value: string | number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] | string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string | number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single || !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden || false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string | number;\n @Prop() dropdownItemValue: string | number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"],"mappings":"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"}

package/dist/types/components/hy-dropdown/hy-dropdown.panel.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export declare class HyDropdownPanel {
-  isHidden: boolean;
-  render(): any;
-}

package/dist/types/components/hy-dropdown/hy-dropdown.panel.item.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-export declare class HyDropdownPanelItem {
-  isLast?: boolean;
-  dropdownItemId: string | number;
-  dropdownItemValue: string | number;
-  dropdownItemLabel: string;
-  render(): any;
-}