@itcenteratunihelsinki/huds-lib 0.8.68 → 0.8.70

package/dist/collection/components/hy-dropdown/hy-dropdown.js

@@ -7,10 +7,13 @@ export class HyDropdown {
     this.dropdownId = "dropdownToggle";
     this.dropdownOptions = undefined;
     this.defaultLabel = "All";
+    this.type = null;
     this.defaultOption = null;
     this.isPanelOpen = false;
     this.isChecked = false;
     this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
+    this.currentMulti = undefined;
+    this.focusedOptionIndex = 0;
   }
   async componentWillLoad() {
     this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
@@ -41,59 +44,164 @@ export class HyDropdown {
       });
     }
   }
-  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)) {
+  panelListener(e) {
+    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
       this.isPanelOpen = false;
     }
+  }
+  handleMultiClick(event, option) {
     event.stopPropagation();
+    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+    Array.from(dropdownPanelCheckboxElements).filter((i) => {
+      const item = i.closest("li");
+      if (item.dataset.id == option.id && !item.hasAttribute("aria-selected")) {
+        item.setAttribute("aria-selected", "true");
+        this.currentMulti =
+          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];
+        return;
+      }
+      if (item.dataset.id === option.id && item.hasAttribute("aria-selected")) {
+        item.removeAttribute("aria-selected");
+        if (this.currentMulti.length > 0) {
+          const index = this.currentMulti.indexOf(option);
+          this.currentMulti = this.currentMulti.splice(index, 1);
+        }
+        return;
+      }
+      return null;
+    });
   }
-  handleSingleClick(event) {
+  handleSingleClick(event, option) {
     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) {
+    event.stopPropagation();
+    Array.from(dropdownPanelCheckboxElements).filter((i) => {
+      const item = i.closest("li");
+      if (item.dataset.id == option.id) {
+        if (item.hasAttribute("aria-selected")) {
+          item.removeAttribute("aria-selected");
           this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
           return;
         }
-        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
+        item.setAttribute("aria-selected", "true");
+        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id);
         return;
       }
-      if (item.id !== target.id && item.checked) {
-        item.checked = false;
+      if (item.dataset.id !== option.id && item.hasAttribute("aria-selected")) {
+        item.removeAttribute("aria-selected");
         return;
       }
       return null;
     });
+  }
+  handleKeyDown(event) {
     event.stopPropagation();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.isPanelOpen) {
+          this.handlePanelToggle(event);
+          return;
+        }
+        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;
+        break;
+      case "ArrowUp":
+        this.focusedOptionIndex =
+          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;
+        event.preventDefault();
+        break;
+      case "Enter":
+      case " ":
+        if (!this.isPanelOpen) {
+          event.preventDefault();
+          this.handlePanelToggle(event);
+          return;
+        }
+        if (this.single) {
+          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+        }
+        else {
+          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+        }
+        const emitDetails = {
+          id: this.dropdownId,
+          type: this.type,
+          data: this._dropdownOptions[this.focusedOptionIndex],
+        };
+        this.dropdownKeyPress.emit(emitDetails);
+        event.preventDefault();
+        break;
+      case "Escape":
+      case "Tab":
+        this.isPanelOpen = false;
+        break;
+      default:
+        break;
+    }
+  }
+  handlePanelToggle(e) {
+    e.stopPropagation();
+    this.isPanelOpen = !this.isPanelOpen;
+    const emitDetails = {
+      dropdownId: this.dropdownId,
+      panelOpen: this.isPanelOpen,
+    };
+    this.dropdownPanelToggled.emit(emitDetails);
+  }
+  handlePanelClickOutside(e) {
+    e.stopPropagation();
+    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
+    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
+    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__panel-item");
+    const dropdownPanelCheckboxes = this.el.querySelectorAll(".hy-dropdown__checkbox");
+    const dropdownToggleButtonIconElement = this.el.querySelectorAll(".hy-dropdown__icon");
+    const { target } = e;
+    const allowedElements = [
+      this.el,
+      dropdownToggleButtonElement,
+      dropdownPanelElement,
+      ...dropdownPanelCheckboxes,
+      dropdownToggleButtonIconElement,
+      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
+    ];
+    if (this.isPanelOpen && !allowedElements.includes(target)) {
+      this.isPanelOpen = false;
+    }
+  }
+  handleOptionSingleClick(event, option) {
+    event.stopPropagation();
+    this.handleSingleClick(event, option);
+    const emitDetails = {
+      id: this.dropdownId,
+      type: this.type,
+      data: option,
+    };
+    this.dropdropValueChange.emit(emitDetails);
+  }
+  handleMultiOptionClick(event, option) {
+    event.stopPropagation();
+    this.handleMultiClick(event, option);
+    const emitDetails = {
+      id: this.dropdownId,
+      type: this.type,
+      data: this.currentMulti,
+    };
+    this.dropdropMultiValueChange.emit(emitDetails);
+  }
+  handleOptionHover(index) {
+    this.focusedOptionIndex = index;
   }
   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 }))))));
+      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("div", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), onKeyDown: (event) => this.handleKeyDown(event), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, "data-value": currentId, tabIndex: 0 }, h("input", { "aria-hidden": "true", class: "hy-dropdown__hidden-input", type: "hidden", value: currentId }), currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleOptionSingleClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
     }
     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 }))))));
+      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", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), "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("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleMultiOptionClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
     }
   }
   static get is() { return "hy-dropdown"; }
@@ -203,6 +311,24 @@ export class HyDropdown {
         "reflect": false,
         "defaultValue": "\"All\""
       },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "defaultOption": {
         "type": "any",
         "mutable": true,
@@ -227,9 +353,74 @@ export class HyDropdown {
     return {
       "isPanelOpen": {},
       "isChecked": {},
-      "currentSingle": {}
+      "currentSingle": {},
+      "currentMulti": {},
+      "focusedOptionIndex": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "dropdownPanelToggled",
+        "name": "dropdownPanelToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "dropdropValueChange",
+        "name": "dropdownValueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "dropdropMultiValueChange",
+        "name": "dropdownMultiValueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "dropdownKeyPress",
+        "name": "dropdownKeyPress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
@@ -239,16 +430,22 @@ export class HyDropdown {
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "handleClick",
+        "name": "dropdownPanelToggled",
+        "method": "panelListener",
         "target": "window",
         "capture": false,
         "passive": false
       }, {
-        "name": "click",
-        "method": "handleSingleClick",
+        "name": "keydown",
+        "method": "handleKeyDown",
         "target": undefined,
-        "capture": true,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handlePanelClickOutside",
+        "target": "window",
+        "capture": false,
         "passive": false
       }];
   }

package/dist/collection/components/hy-dropdown/hy-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"hy-dropdown.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"hy-dropdown.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Event, EventEmitter, h, State, 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() type: string = null;\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  @State() currentMulti: IDropdownItem[];\n\n  @State() focusedOptionIndex: number = 0;\n\n  @Event({\n    eventName: `dropdownPanelToggled`,\n    composed: true,\n    bubbles: true,\n  })\n  dropdownPanelToggled: EventEmitter;\n\n  @Event({\n    eventName: `dropdownValueChanged`,\n    composed: true,\n  })\n  dropdropValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownMultiValueChanged`,\n    composed: true,\n  })\n  dropdropMultiValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownKeyPress`,\n    composed: true,\n  })\n  dropdownKeyPress: EventEmitter;\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  @Listen(\"dropdownPanelToggled\", {target: \"window\"})\n  panelListener(e) {\n    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {\n      this.isPanelOpen = false;\n    }\n  }\n\n  private handleMultiClick(event, option) {\n    event.stopPropagation();\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id && !item.hasAttribute(\"aria-selected\")) {\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentMulti =\n          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];\n        return;\n      }\n      if (item.dataset.id === option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        if (this.currentMulti.length > 0) {\n          const index = this.currentMulti.indexOf(option);\n          this.currentMulti = this.currentMulti.splice(index, 1);\n        }\n        return;\n      }\n      return null;\n    });\n  }\n\n  private handleSingleClick(event, option) {\n    if (!this.single || !this.isPanelOpen) return;\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    event.stopPropagation();\n\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id) {\n        if (item.hasAttribute(\"aria-selected\")) {\n          item.removeAttribute(\"aria-selected\");\n          this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n          return;\n        }\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id) as any;\n        return;\n      }\n      if (item.dataset.id !== option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        return;\n      }\n      return null;\n    });\n  }\n\n  @Listen(\"keydown\", {capture: false})\n  handleKeyDown(event: KeyboardEvent) {\n    event.stopPropagation();\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!this.isPanelOpen) {\n          this.handlePanelToggle(event);\n          return;\n        }\n        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;\n        break;\n      case \"ArrowUp\":\n        this.focusedOptionIndex =\n          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;\n        event.preventDefault();\n        break;\n      case \"Enter\":\n      case \" \":\n        if (!this.isPanelOpen) {\n          event.preventDefault();\n          this.handlePanelToggle(event);\n          return;\n        }\n        if (this.single) {\n          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        } else {\n          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        }\n        const emitDetails = {\n          id: this.dropdownId,\n          type: this.type,\n          data: this._dropdownOptions[this.focusedOptionIndex],\n        };\n        this.dropdownKeyPress.emit(emitDetails);\n        event.preventDefault();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        this.isPanelOpen = false;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private handlePanelToggle(e) {\n    e.stopPropagation();\n    this.isPanelOpen = !this.isPanelOpen;\n\n    const emitDetails = {\n      dropdownId: this.dropdownId,\n      panelOpen: this.isPanelOpen,\n    };\n    this.dropdownPanelToggled.emit(emitDetails);\n  }\n\n  @Listen(\"click\", {target: \"window\"})\n  handlePanelClickOutside(e) {\n    e.stopPropagation();\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__panel-item\");\n    const dropdownPanelCheckboxes = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n    const dropdownToggleButtonIconElement = this.el.querySelectorAll(\".hy-dropdown__icon\");\n\n    const {target} = e;\n\n    const allowedElements = [\n      this.el,\n      dropdownToggleButtonElement,\n      dropdownPanelElement,\n      ...dropdownPanelCheckboxes,\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  }\n\n  private handleOptionSingleClick(event, option) {\n    event.stopPropagation();\n    this.handleSingleClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: option,\n    };\n    this.dropdropValueChange.emit(emitDetails);\n  }\n\n  private handleMultiOptionClick(event, option) {\n    event.stopPropagation();\n    this.handleMultiClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: this.currentMulti,\n    };\n    this.dropdropMultiValueChange.emit(emitDetails);\n  }\n\n  private handleOptionHover(index) {\n    this.focusedOptionIndex = index;\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    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          <div\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\n            onKeyDown={(event) => this.handleKeyDown(event)}\n            aria-label={this.dropdownLabel}\n            data-current-id={currentId}\n            data-current-value={currentValue}\n            data-value={currentId}\n            tabIndex={0}\n          >\n            <input aria-hidden=\"true\" class=\"hy-dropdown__hidden-input\" type=\"hidden\" value={currentId}></input>\n            {currentLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </div>\n          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleOptionSingleClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\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            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\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          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleMultiOptionClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\n        </Host>\n      );\n    }\n  }\n}\n"]}

package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css

@@ -931,7 +931,7 @@ swiper-container .swiper-notification {
 
 .hero-carousel-container {
   border-bottom: 1px solid var(--grayscale-medium-dark);
-  margin: 1.5rem 1rem;
+  margin: 1.5rem 0;
   --button-size: 35px;
   --button-offset: 0px;
 }
@@ -1056,6 +1056,7 @@ swiper-container .swiper-notification {
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin: 30px 0;
+  padding: 0 1rem;
   position: relative;
   width: 100%;
 }
@@ -1064,6 +1065,7 @@ swiper-container .swiper-notification {
   .hero-carousel--controls {
     display: block;
     margin: 0;
+    padding: 0;
     position: initial;
     width: auto;
   }
@@ -1175,13 +1177,13 @@ swiper-container .swiper-notification {
   -ms-hyphens: auto;
   hyphens: auto;
   letter-spacing: -0.36px;
-  opacity: 0.25;
+  opacity: 0.8;
   text-align: left;
 }
 
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button:is(:hover, :focus) {
   cursor: pointer;
-  opacity: 0.5;
+  opacity: 1;
 }
 
 .hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button button .hero-carousel--item__pagination__button__theme {
@@ -1199,6 +1201,14 @@ swiper-container .swiper-notification {
   opacity: 1;
 }
 
+.hero-carousel--item__pagination ul li.hero-carousel--item__pagination__button.is-current button:after {
+  border-bottom: 4px solid var(--grayscale-white, #FFF);
+  content: "";
+  display: block;
+  margin-top: 0.45rem;
+  width: 33.3333333333%;
+}
+
 .hero-carousel--item {
   display: grid;
   -webkit-box-orient: vertical;

package/dist/collection/components/hy-video/hy-video.css

@@ -66,6 +66,7 @@ a.hy-video {
 }
 
 .hy-video__video-container {
+  aspect-ratio: 16/9;
   display: inline-block;
   margin-bottom: 22px;
   position: relative;
@@ -215,20 +216,6 @@ a.hy-video {
   }
 }
 
-.hy-video__video-container > *:not(.hy-video__label, .hy-video__play, .hy-video__play__simple) {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.hy-video__video-container:after {
-  content: "";
-  display: block;
-  padding-top: 56.25%;
-}
-
 .hy-video:not(.hy-video--horizontal) {
   display: -webkit-box;
   display: -ms-flexbox;