npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.66 → 0.8.68 - Mend

@itcenteratunihelsinki/huds-lib 0.8.66 → 0.8.68

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 (59) hide show

package/dist/cjs/hy-dropdown_3.cjs.entry.js CHANGED Viewed

@@ -98,10 +98,10 @@ const HyDropdown = class {
     const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
     const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
     if (this.single) {
-      return (index.h(index.Host, { class: classAttributes }, this.dropdownLabel && (index.h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), index.h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? "Open" : "Close"} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
+      return (index.h(index.Host, { class: classAttributes }, this.dropdownLabel && (index.h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), index.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, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
     }
     else {
-      return (index.h(index.Host, { class: classAttributes }, index.h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? "Open" : "Close"} dropdown`, type: "button" }, this.dropdownLabel && this.dropdownLabel, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
+      return (index.h(index.Host, { class: classAttributes }, index.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, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
     }
   }
   get el() { return index.getElement(this); }

package/dist/cjs/hy-dropdown_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"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-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\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-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\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}
1	+ {"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"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/cjs/hy-hero-carousel.cjs.entry.js CHANGED Viewed

@@ -3865,330 +3865,6 @@ Object.keys(prototypes).forEach(prototypeGroup => {
 });
 Swiper.use([Resize, Observer]);
-function Virtual({
-  swiper,
-  extendParams,
-  on,
-  emit
-}) {
-  extendParams({
-    virtual: {
-      enabled: false,
-      slides: [],
-      cache: true,
-      renderSlide: null,
-      renderExternal: null,
-      renderExternalUpdate: true,
-      addSlidesBefore: 0,
-      addSlidesAfter: 0
-    }
-  });
-  let cssModeTimeout;
-  const document = getDocument();
-  swiper.virtual = {
-    cache: {},
-    from: undefined,
-    to: undefined,
-    slides: [],
-    offset: 0,
-    slidesGrid: []
-  };
-  const tempDOM = document.createElement('div');
-  function renderSlide(slide, index) {
-    const params = swiper.params.virtual;
-    if (params.cache && swiper.virtual.cache[index]) {
-      return swiper.virtual.cache[index];
-    }
-    // eslint-disable-next-line
-    let slideEl;
-    if (params.renderSlide) {
-      slideEl = params.renderSlide.call(swiper, slide, index);
-      if (typeof slideEl === 'string') {
-        tempDOM.innerHTML = slideEl;
-        slideEl = tempDOM.children[0];
-      }
-    } else if (swiper.isElement) {
-      slideEl = createElement('swiper-slide');
-    } else {
-      slideEl = createElement('div', swiper.params.slideClass);
-    }
-    slideEl.setAttribute('data-swiper-slide-index', index);
-    if (!params.renderSlide) {
-      slideEl.innerHTML = slide;
-    }
-    if (params.cache) swiper.virtual.cache[index] = slideEl;
-    return slideEl;
-  }
-  function update(force) {
-    const {
-      slidesPerView,
-      slidesPerGroup,
-      centeredSlides,
-      loop: isLoop
-    } = swiper.params;
-    const {
-      addSlidesBefore,
-      addSlidesAfter
-    } = swiper.params.virtual;
-    const {
-      from: previousFrom,
-      to: previousTo,
-      slides,
-      slidesGrid: previousSlidesGrid,
-      offset: previousOffset
-    } = swiper.virtual;
-    if (!swiper.params.cssMode) {
-      swiper.updateActiveIndex();
-    }
-    const activeIndex = swiper.activeIndex || 0;
-    let offsetProp;
-    if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
-    let slidesAfter;
-    let slidesBefore;
-    if (centeredSlides) {
-      slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
-      slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
-    } else {
-      slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
-      slidesBefore = (isLoop ? slidesPerView : slidesPerGroup) + addSlidesBefore;
-    }
-    let from = activeIndex - slidesBefore;
-    let to = activeIndex + slidesAfter;
-    if (!isLoop) {
-      from = Math.max(from, 0);
-      to = Math.min(to, slides.length - 1);
-    }
-    let offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
-    if (isLoop && activeIndex >= slidesBefore) {
-      from -= slidesBefore;
-      if (!centeredSlides) offset += swiper.slidesGrid[0];
-    } else if (isLoop && activeIndex < slidesBefore) {
-      from = -slidesBefore;
-      if (centeredSlides) offset += swiper.slidesGrid[0];
-    }
-    Object.assign(swiper.virtual, {
-      from,
-      to,
-      offset,
-      slidesGrid: swiper.slidesGrid,
-      slidesBefore,
-      slidesAfter
-    });
-    function onRendered() {
-      swiper.updateSlides();
-      swiper.updateProgress();
-      swiper.updateSlidesClasses();
-      emit('virtualUpdate');
-    }
-    if (previousFrom === from && previousTo === to && !force) {
-      if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
-        swiper.slides.forEach(slideEl => {
-          slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
-        });
-      }
-      swiper.updateProgress();
-      emit('virtualUpdate');
-      return;
-    }
-    if (swiper.params.virtual.renderExternal) {
-      swiper.params.virtual.renderExternal.call(swiper, {
-        offset,
-        from,
-        to,
-        slides: function getSlides() {
-          const slidesToRender = [];
-          for (let i = from; i <= to; i += 1) {
-            slidesToRender.push(slides[i]);
-          }
-          return slidesToRender;
-        }()
-      });
-      if (swiper.params.virtual.renderExternalUpdate) {
-        onRendered();
-      } else {
-        emit('virtualUpdate');
-      }
-      return;
-    }
-    const prependIndexes = [];
-    const appendIndexes = [];
-    const getSlideIndex = index => {
-      let slideIndex = index;
-      if (index < 0) {
-        slideIndex = slides.length + index;
-      } else if (slideIndex >= slides.length) {
-        // eslint-disable-next-line
-        slideIndex = slideIndex - slides.length;
-      }
-      return slideIndex;
-    };
-    if (force) {
-      swiper.slidesEl.querySelectorAll(`.${swiper.params.slideClass}, swiper-slide`).forEach(slideEl => {
-        slideEl.remove();
-      });
-    } else {
-      for (let i = previousFrom; i <= previousTo; i += 1) {
-        if (i < from || i > to) {
-          const slideIndex = getSlideIndex(i);
-          swiper.slidesEl.querySelectorAll(`.${swiper.params.slideClass}[data-swiper-slide-index="${slideIndex}"], swiper-slide[data-swiper-slide-index="${slideIndex}"]`).forEach(slideEl => {
-            slideEl.remove();
-          });
-        }
-      }
-    }
-    const loopFrom = isLoop ? -slides.length : 0;
-    const loopTo = isLoop ? slides.length * 2 : slides.length;
-    for (let i = loopFrom; i < loopTo; i += 1) {
-      if (i >= from && i <= to) {
-        const slideIndex = getSlideIndex(i);
-        if (typeof previousTo === 'undefined' || force) {
-          appendIndexes.push(slideIndex);
-        } else {
-          if (i > previousTo) appendIndexes.push(slideIndex);
-          if (i < previousFrom) prependIndexes.push(slideIndex);
-        }
-      }
-    }
-    appendIndexes.forEach(index => {
-      swiper.slidesEl.append(renderSlide(slides[index], index));
-    });
-    if (isLoop) {
-      for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {
-        const index = prependIndexes[i];
-        swiper.slidesEl.prepend(renderSlide(slides[index], index));
-      }
-    } else {
-      prependIndexes.sort((a, b) => b - a);
-      prependIndexes.forEach(index => {
-        swiper.slidesEl.prepend(renderSlide(slides[index], index));
-      });
-    }
-    elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {
-      slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
-    });
-    onRendered();
-  }
-  function appendSlide(slides) {
-    if (typeof slides === 'object' && 'length' in slides) {
-      for (let i = 0; i < slides.length; i += 1) {
-        if (slides[i]) swiper.virtual.slides.push(slides[i]);
-      }
-    } else {
-      swiper.virtual.slides.push(slides);
-    }
-    update(true);
-  }
-  function prependSlide(slides) {
-    const activeIndex = swiper.activeIndex;
-    let newActiveIndex = activeIndex + 1;
-    let numberOfNewSlides = 1;
-    if (Array.isArray(slides)) {
-      for (let i = 0; i < slides.length; i += 1) {
-        if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
-      }
-      newActiveIndex = activeIndex + slides.length;
-      numberOfNewSlides = slides.length;
-    } else {
-      swiper.virtual.slides.unshift(slides);
-    }
-    if (swiper.params.virtual.cache) {
-      const cache = swiper.virtual.cache;
-      const newCache = {};
-      Object.keys(cache).forEach(cachedIndex => {
-        const cachedEl = cache[cachedIndex];
-        const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
-        if (cachedElIndex) {
-          cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
-        }
-        newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
-      });
-      swiper.virtual.cache = newCache;
-    }
-    update(true);
-    swiper.slideTo(newActiveIndex, 0);
-  }
-  function removeSlide(slidesIndexes) {
-    if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
-    let activeIndex = swiper.activeIndex;
-    if (Array.isArray(slidesIndexes)) {
-      for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
-        swiper.virtual.slides.splice(slidesIndexes[i], 1);
-        if (swiper.params.virtual.cache) {
-          delete swiper.virtual.cache[slidesIndexes[i]];
-        }
-        if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
-        activeIndex = Math.max(activeIndex, 0);
-      }
-    } else {
-      swiper.virtual.slides.splice(slidesIndexes, 1);
-      if (swiper.params.virtual.cache) {
-        delete swiper.virtual.cache[slidesIndexes];
-      }
-      if (slidesIndexes < activeIndex) activeIndex -= 1;
-      activeIndex = Math.max(activeIndex, 0);
-    }
-    update(true);
-    swiper.slideTo(activeIndex, 0);
-  }
-  function removeAllSlides() {
-    swiper.virtual.slides = [];
-    if (swiper.params.virtual.cache) {
-      swiper.virtual.cache = {};
-    }
-    update(true);
-    swiper.slideTo(0, 0);
-  }
-  on('beforeInit', () => {
-    if (!swiper.params.virtual.enabled) return;
-    let domSlidesAssigned;
-    if (typeof swiper.passedParams.virtual.slides === 'undefined') {
-      const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));
-      if (slides && slides.length) {
-        swiper.virtual.slides = [...slides];
-        domSlidesAssigned = true;
-        slides.forEach((slideEl, slideIndex) => {
-          slideEl.setAttribute('data-swiper-slide-index', slideIndex);
-          swiper.virtual.cache[slideIndex] = slideEl;
-          slideEl.remove();
-        });
-      }
-    }
-    if (!domSlidesAssigned) {
-      swiper.virtual.slides = swiper.params.virtual.slides;
-    }
-    swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
-    swiper.params.watchSlidesProgress = true;
-    swiper.originalParams.watchSlidesProgress = true;
-    if (!swiper.params.initialSlide) {
-      update();
-    }
-  });
-  on('setTranslate', () => {
-    if (!swiper.params.virtual.enabled) return;
-    if (swiper.params.cssMode && !swiper._immediateVirtual) {
-      clearTimeout(cssModeTimeout);
-      cssModeTimeout = setTimeout(() => {
-        update();
-      }, 100);
-    } else {
-      update();
-    }
-  });
-  on('init update resize', () => {
-    if (!swiper.params.virtual.enabled) return;
-    if (swiper.params.cssMode) {
-      setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
-    }
-  });
-  Object.assign(swiper.virtual, {
-    appendSlide,
-    prependSlide,
-    removeSlide,
-    removeAllSlides,
-    update
-  });
-}
 function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
   if (swiper.params.createElements) {
     Object.keys(checkProps).forEach(key => {
@@ -5379,7 +5055,7 @@ const HyHeroCarousel = class {
   }
   componentDidLoad() {
     new Swiper(".swiper", {
-      modules: [Navigation, Pagination, A11y, EffectFade, Virtual],
+      modules: [Navigation, Pagination, A11y, EffectFade],
       enabled: true,
       effect: 'fade',
       fadeEffect: {
@@ -5388,12 +5064,6 @@ const HyHeroCarousel = class {
       direction: "horizontal",
       loop: false,
       spaceBetween: 50,
-      virtual: {
-        enabled: true,
-        cache: true,
-        addSlidesAfter: 0,
-        addSlidesBefore: 0,
-      },
       navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",