@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/esm/hy-content-list_2.entry.js

@@ -0,0 +1,175 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { j as CourseVariants, k as CourseStateVariants } from './utils-7438924c.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyContentListCss = ":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}:host{display:block}.hy-content-list{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap}.hy-content-list--no-result{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-content-list--alert{margin-right:6px}.hy-content-list--alert svg{fill:var(--grayscale-dark)}@media (min-width: 1601px){.hy-content-list--alert svg{height:18px;width:18px}}@media (min-width: 87.5rem){.hy-content-list--alert--large svg{height:18px;width:18px}}.hy-content-list--alert-label{font-family:var(--main-font-family);font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark);font-style:italic;letter-spacing:0}@media (min-width: 30rem){.hy-content-list--alert-label{font-size:1rem;line-height:24px}}@media (min-width: 1601px){.hy-content-list--alert-label{font-size:1.0625rem;line-height:26px}}@media (min-width: 87.5rem){.hy-content-list--alert-label--large{font-size:1.0625rem;line-height:26px}}.hy-content-list.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-content-list.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}";
+
+const HyContentList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = CourseVariants.default;
+    this.linkLabel = "Go to course page";
+    this.noResultLabel = "No courses scheduled at the moment";
+    this.creditsLabel = "cr";
+    this.cancelledLabel = "Cancelled";
+    this.dataItems = undefined;
+    this.headerstyle = "common";
+    this.courseStateVariant = CourseStateVariants.default;
+    this.courseRealisations = [];
+  }
+  /**
+   * Data for links to be displayed.
+   */
+  dataWatcher(data) {
+    this._dataItems = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  componentWillLoad() {
+    this.dataWatcher(this.dataItems);
+  }
+  handleCardClick(e, id) {
+    e.preventDefault();
+    let card = this.el.querySelector(`#${id}`);
+    if (card) {
+      window.open(card.dataset.location, "_blank");
+    }
+  }
+  async componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  renderItems() {
+    let courseRealisations = [];
+    if (this._dataItems && this._dataItems.length > 0) {
+      this._dataItems.forEach((item) => {
+        const courseObject = JSON.parse(JSON.stringify(item));
+        const courseListType = courseObject["courseListType"];
+        this.variant = courseListType == "list" ? CourseVariants.row : CourseVariants.grid;
+        for (const courseProperty in courseObject) {
+          if (courseProperty == "courseListType")
+            continue;
+          const courseItem = courseObject[courseProperty];
+          const courseCode = courseItem["code"];
+          const courseCredits = courseItem["credits"];
+          // Course realisations.
+          if (courseItem["realisations"]) {
+            const realisations = JSON.parse(JSON.stringify(courseItem["realisations"]));
+            for (const realisationProperty in realisations) {
+              const realizationItem = realisations[realisationProperty];
+              const courseRealisationName = realizationItem["name"];
+              const courseRealisationFullName = courseRealisationName + ", " + courseCredits + " " + this.creditsLabel;
+              const courseStudyFormat = realizationItem["studyFormat"];
+              const courseCancelled = realizationItem["cancelled"];
+              const courseStartDate = realizationItem["startDate"];
+              const courseEndDate = realizationItem["endDate"];
+              const formattedTimeRange = realizationItem["formattedTimeRange"];
+              const courseEnrollmentLink = realizationItem["enrolmentLink"];
+              const courseTeachingLanguage = realizationItem["teachingLanguage"];
+              const courseOrganisation = realizationItem["organisation"];
+              let courseTags = [];
+              if (realizationItem["tags"]) {
+                let tags = JSON.parse(JSON.stringify(realizationItem["tags"]));
+                for (let z in tags) {
+                  let tagItem = { name: tags[z] };
+                  courseTags.push(tagItem);
+                }
+              }
+              const courseTagsJSON = JSON.stringify(courseTags);
+              const contentListItemClassAttributes = ["item", this.variant].join(" ");
+              courseRealisations.push(h("hy-content-list-item", { id: realisationProperty, class: contentListItemClassAttributes, variant: this.variant, "state-variant": this.courseStateVariant, "course-code": courseCode, "course-name": courseRealisationFullName, "is-cancelled": courseCancelled, "cancelled-label": this.cancelledLabel, "course-credits": courseCredits, "course-tags": courseTagsJSON, "course-start-date": courseStartDate, "course-end-date": courseEndDate, "formatted-time-range": formattedTimeRange, "course-study-format": courseStudyFormat, "course-organisation": courseOrganisation, "course-enrollment-link": courseEnrollmentLink, "course-teaching-language": courseTeachingLanguage, "course-link-label": this.linkLabel, "data-location": courseEnrollmentLink, onClick: (e) => this.handleCardClick(e, realisationProperty) }));
+            }
+          }
+        }
+      });
+    }
+    return courseRealisations;
+  }
+  render() {
+    const classAttributes = [this.variant, "hy-content-list"].join(" ");
+    const classAlertAttributes = ["hy-content-list--alert", `hy-content-list--alert--${this.headerstyle}`].join(" ");
+    const classAlertLabelAttributes = [
+      "hy-content-list--alert-label",
+      `hy-content-list--alert-label--${this.headerstyle}`,
+    ].join(" ");
+    this.courseRealisations = this.renderItems();
+    if (this.courseRealisations && this.courseRealisations.length > 0) {
+      return (h(Host, null, h("div", { class: classAttributes }, this.courseRealisations)));
+    }
+    else {
+      return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: "hy-content-list--no-result" }, h("span", { class: classAlertAttributes }, h("hy-icon", { icon: "hy-icon-info", size: 16 })), h("span", { class: classAlertLabelAttributes }, this.noResultLabel)))));
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "dataItems": ["dataWatcher"]
+  }; }
+};
+HyContentList.style = hyContentListCss;
+
+const hyContentListItemCss = ":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-content-list-item{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){hy-content-list-item{margin-bottom:24px}}hy-content-list-item[variant=row],hy-content-list-item.row{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item[variant=row],hy-content-list-item.row{padding:21px 0 12px 24px}}@media (min-width: 60rem){hy-content-list-item[variant=row],hy-content-list-item.row{margin-bottom:16px}}hy-content-list-item.grid{max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){hy-content-list-item.grid{margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){hy-content-list-item.grid{margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){hy-content-list-item.grid{margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:0}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){hy-content-list-item.grid:nth-of-type(2n+0){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){hy-content-list-item.grid:nth-of-type(3n+0){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:\"|\";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:\" \"}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+
+let keys = {
+  enter: "Enter",
+};
+const HyContentLstItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = CourseVariants.default;
+    this.stateVariant = CourseStateVariants.default;
+    this.courseCode = undefined;
+    this.courseName = undefined;
+    this.isCancelled = undefined;
+    this.cancelledLabel = "Cancelled";
+    this.courseCredits = undefined;
+    this.courseTags = undefined;
+    this.courseStartDate = undefined;
+    this.courseEndDate = undefined;
+    this.formattedTimeRange = undefined;
+    this.courseStudyFormat = undefined;
+    this.courseOrganisation = undefined;
+    this.courseEnrollmentLink = undefined;
+    this.courseTeachingLanguage = undefined;
+    this.courseLinkLabel = undefined;
+  }
+  async componentWillLoad() {
+    this._courseTags = await jsonParserWorker(this.courseTags);
+  }
+  handleKeyDown(event) {
+    const key = event.code;
+    if (key == keys.enter) {
+      let card = this.el;
+      window.open(card.dataset.location, "_blank", "noopener");
+    }
+  }
+  render() {
+    const classAttributes = [this.variant, "hy-content-list-item"].join(" ");
+    const target = "_blank";
+    const ariaLabel = "Link points outside the current website.";
+    const classItemName = [
+      "hy-content-list-item--item-name",
+      `hy-content-list-item--item-name--${this.stateVariant}`,
+    ].join(" ");
+    const classItemCancelled = ["cancelled", `cancelled--${this.stateVariant}`].join(" ");
+    return [
+      h("div", { class: classAttributes, tabindex: "0" }, h("div", { class: classItemName }, this.courseName), h("div", { class: "hy-content-list-item--metadata" }, this.isCancelled && (h("div", { class: classItemCancelled }, h("span", null, this.cancelledLabel))), h("div", { class: "hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first" }, h("span", null, this.formattedTimeRange)), this.courseOrganisation
+        ? [
+          h("div", { class: "hy-content-list-item--metadata--item" }, h("span", null, this.courseStudyFormat)),
+          h("div", { class: "hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last" }, h("span", null, this.courseOrganisation)),
+        ]
+        : [
+          h("div", { class: "hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last" }, h("span", null, this.courseStudyFormat)),
+        ]), this._courseTags && this._courseTags.length > 0 && (h("div", { class: "hy-content-list-item--tags" }, this._courseTags.map((x) => {
+        return h("hy-tag", null, x.name);
+      }))), this.isCancelled && (h("div", { class: "cancelled mobile" }, h("span", null, this.cancelledLabel))), h("div", { class: "hy-content-list-item--link" }, h("a", { href: this.courseEnrollmentLink, target: target, "aria-label": ariaLabel, class: "hy-content-list-item--link--link", tabindex: "-1" }, h("span", { class: "label" }, this.courseLinkLabel), h("span", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 40 })))))),
+    ];
+  }
+  get el() { return getElement(this); }
+};
+HyContentLstItem.style = hyContentListItemCss;
+
+export { HyContentList as hy_content_list, HyContentLstItem as hy_content_list_item };
+
+//# sourceMappingURL=hy-content-list_2.entry.js.map

package/dist/esm/hy-content-list_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-content-list.hy-content-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-content-list {\n  display: flex;\n  font-family: var(--main-font-family);\n  flex-wrap: wrap;\n\n  &--no-result {\n    align-items: center;\n    display: flex;\n  }\n  &--alert {\n    margin-right: 6px;\n    svg {\n      fill: var(--grayscale-dark);\n    }\n    @include breakpoint($xlarge) {\n      svg {\n        height: 18px;\n        width: 18px;\n      }\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        svg {\n          height: 18px;\n          width: 18px;\n        }\n      }\n    }\n  }\n\n  &--alert-label {\n    font-family: var(--main-font-family);\n    @include font-size(15px, 22px);\n    color: var(--grayscale-dark);\n    font-style: italic;\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px);\n    }\n    &--large {\n      @include breakpoint($overwide) {\n        @include font-size(17px, 26px);\n      }\n    }\n  }\n}\n\n.hy-content-list.row {\n  flex-direction: column;\n}\n\n.hy-content-list.grid {\n  flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-content-list\",\n  styleUrl: \"hy-content-list.scss\",\n  shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n  @Prop() linkLabel: string = \"Go to course page\";\n  @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n  @Prop() creditsLabel: string = \"cr\";\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() dataItems: string;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n  private _dataItems: [];\n  private variant: CourseVariants = CourseVariants.default;\n  @State() courseRealisations: Array<object> = [];\n  @Element() el: HTMLElement;\n  /**\n   * Data for links to be displayed.\n   */\n\n  @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n    this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.dataWatcher(this.dataItems);\n  }\n\n  handleCardClick(e, id) {\n    e.preventDefault();\n    let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n    if (card) {\n      window.open(card.dataset.location, \"_blank\");\n    }\n  }\n\n  async componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  renderItems() {\n    let courseRealisations = [];\n    if (this._dataItems && this._dataItems.length > 0) {\n      this._dataItems.forEach((item) => {\n        const courseObject = JSON.parse(JSON.stringify(item));\n\n        const courseListType = courseObject[\"courseListType\"];\n        this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n        for (const courseProperty in courseObject) {\n          if (courseProperty == \"courseListType\") continue;\n\n          const courseItem = courseObject[courseProperty];\n          const courseCode = courseItem[\"code\"];\n          const courseCredits = courseItem[\"credits\"];\n\n          // Course realisations.\n          if (courseItem[\"realisations\"]) {\n            const realisations = JSON.parse(JSON.stringify(courseItem[\"realisations\"]));\n            for (const realisationProperty in realisations) {\n              const realizationItem = realisations[realisationProperty];\n              const courseRealisationName = realizationItem[\"name\"];\n              const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n              const courseStudyFormat = realizationItem[\"studyFormat\"];\n              const courseCancelled = realizationItem[\"cancelled\"];\n              const courseStartDate = realizationItem[\"startDate\"];\n              const courseEndDate = realizationItem[\"endDate\"];\n              const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n              const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n              const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n              const courseOrganisation = realizationItem[\"organisation\"];\n\n              let courseTags = [];\n              if (realizationItem[\"tags\"]) {\n                let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n                for (let z in tags) {\n                  let tagItem = {name: tags[z]};\n                  courseTags.push(tagItem);\n                }\n              }\n              const courseTagsJSON = JSON.stringify(courseTags);\n\n              const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n              courseRealisations.push(\n                <hy-content-list-item\n                  id={realisationProperty}\n                  class={contentListItemClassAttributes}\n                  variant={this.variant}\n                  state-variant={this.courseStateVariant}\n                  course-code={courseCode}\n                  course-name={courseRealisationFullName}\n                  is-cancelled={courseCancelled}\n                  cancelled-label={this.cancelledLabel}\n                  course-credits={courseCredits}\n                  course-tags={courseTagsJSON}\n                  course-start-date={courseStartDate}\n                  course-end-date={courseEndDate}\n                  formatted-time-range={formattedTimeRange}\n                  course-study-format={courseStudyFormat}\n                  course-organisation={courseOrganisation}\n                  course-enrollment-link={courseEnrollmentLink}\n                  course-teaching-language={courseTeachingLanguage}\n                  course-link-label={this.linkLabel}\n                  data-location={courseEnrollmentLink}\n                  onClick={(e) => this.handleCardClick(e, realisationProperty)}\n                  //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n                ></hy-content-list-item>\n              );\n            }\n          }\n        }\n      });\n    }\n\n    return courseRealisations;\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n    const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n    const classAlertLabelAttributes = [\n      \"hy-content-list--alert-label\",\n      `hy-content-list--alert-label--${this.headerstyle}`,\n    ].join(\" \");\n\n    this.courseRealisations = this.renderItems();\n    if (this.courseRealisations && this.courseRealisations.length > 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>{this.courseRealisations}</div>\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class=\"hy-content-list--no-result\">\n              <span class={classAlertAttributes}>\n                <hy-icon icon={\"hy-icon-info\"} size={16} />\n              </span>\n              <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n  }\n}\n","hy-content-list-item {\n  background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n  cursor: pointer;\n  display: flex;\n  margin-bottom: 16px;\n  position: relative;\n  //width: 100%;\n\n  @include breakpoint($narrow) {\n    margin-bottom: 24px;\n  }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n  max-width: 100%;\n  padding: 21px 0 60px 12px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    padding: 21px 0 12px 24px;\n  }\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\nhy-content-list-item.grid {\n  max-width: 100%;\n  padding: 21px 0 60px 12px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    margin-right: var(--gutter-medium);\n    max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n    padding: 21px 0 60px 12px;\n    width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n  }\n  @include breakpoint($wide) {\n    margin-bottom: 27px;\n    margin-right: var(--gutter-wide);\n    max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n    width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n  }\n  @include breakpoint($extrawide) {\n    margin-bottom: 32px;\n    margin-right: var(--gutter-extrawide);\n    max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n    width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n  }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n  @include breakpoint($narrow) {\n    margin-right: 0;\n  }\n  @include breakpoint($wide) {\n    margin-right: var(--gutter-wide);\n  }\n  @include breakpoint($extrawide) {\n    margin-right: var(--gutter-extrawide);\n  }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n  @include breakpoint($wide) {\n    margin-right: 0;\n  }\n}\n\n.hy-content-list-item {\n  font-family: var(--main-font-family);\n  position: relative;\n  width: 100%;\n\n  a {\n    text-decoration: none;\n  }\n\n  &--container {\n    cursor: pointer;\n  }\n\n  &--item-name {\n    color: var(--link-blue);\n    @include font-size(20px, 24px);\n    @include font-weight($bold);\n    letter-spacing: -0.6px;\n    margin-bottom: 16px;\n    word-break: break-word;\n\n    &--past-courses {\n      color: var(--grayscale-dark);\n    }\n  }\n\n  &--metadata {\n    @include font-size(14px, 16px);\n    @include font-weight($semibold);\n\n    color: var(--grayscale-black);\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    letter-spacing: -0.44px;\n    line-height: 16px;\n    margin-bottom: 19px;\n    padding-bottom: 0;\n\n    &--item {\n      padding-bottom: 6px;\n    }\n\n    @include breakpoint($narrow) {\n      padding-bottom: 1rem;\n    }\n    @include breakpoint($extrawide) {\n      padding-bottom: 0;\n    }\n\n    &--item:after {\n      content: \"|\";\n      padding: 0 8px;\n    }\n    &--item--last:after {\n      content: \" \";\n    }\n  }\n\n  .cancelled {\n    span {\n      @include font-size(12px, 12px);\n      @include font-weight($bold);\n      background-color: var(--additional-red-light);\n      color: var(--grayscale-white);\n      letter-spacing: -0.5px;\n      padding: 6px 8px;\n      text-transform: uppercase;\n    }\n    &--past-courses {\n      span {\n        background-color: var(--grayscale-dark);\n      }\n    }\n\n    &:not(.mobile) {\n      display: none;\n    }\n\n    &.mobile {\n      bottom: -50px;\n      display: block;\n      margin: 0;\n      padding-bottom: 12px;\n      position: absolute;\n    }\n\n    @include breakpoint($narrow) {\n      margin-right: 8px;\n\n      &.mobile {\n        display: none;\n      }\n      &:not(.mobile) {\n        display: block;\n      }\n    }\n  }\n\n  &--link {\n    position: absolute;\n    right: -6px;\n\n    a {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      text-decoration: none;\n\n      .label {\n        @include font-size(16px, 16px);\n        @include font-weight($bold);\n        color: var(--link-blue);\n        letter-spacing: -0.5px;\n        line-height: 16px;\n        margin-right: 8px;\n        text-align: right;\n      }\n\n      .icon-wrapper {\n        background-color: var(--brand-main-light);\n        z-index: 10;\n\n        .icon {\n          transform: rotate(-45deg);\n          position: relative;\n          overflow: hidden;\n\n          svg {\n            background-color: transparent;\n            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n            fill: var(--grayscale-white);\n            padding: 10.29px;\n          }\n        }\n      }\n    }\n  }\n}\n\n.hy-content-list-item.row {\n  .hy-content-list-item--link {\n    bottom: -60px;\n    padding-bottom: 12px;\n\n    @include breakpoint($narrow) {\n      bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .hy-content-list-item--tags {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    @include breakpoint($wide) {\n      flex-direction: row;\n      padding-right: 200px;\n    }\n  }\n}\n\n.hy-content-list-item.grid {\n  .hy-content-list-item--link {\n    bottom: -60px;\n    padding-bottom: 12px;\n  }\n\n  .hy-content-list-item--tags {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n  }\n}\n","export interface TagValue {\n  name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n  enter: \"Enter\",\n};\n\n@Component({\n  tag: \"hy-content-list-item\",\n  styleUrl: \"hy-content-list-item.scss\",\n  shadow: false,\n})\nexport class HyContentLstItem {\n  @Prop() variant: CourseVariants = CourseVariants.default;\n  @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n  @Prop() courseCode?: string;\n  @Prop() courseName?: string;\n  @Prop() isCancelled?: boolean;\n  @Prop() cancelledLabel: string = \"Cancelled\";\n  @Prop() courseCredits?: string;\n  private _courseTags: TagValue[];\n  @Prop() courseTags: TagValue[] | string;\n  @Prop() courseStartDate?: string;\n  @Prop() courseEndDate?: string;\n  @Prop() formattedTimeRange?: string;\n  @Prop() courseStudyFormat?: string;\n  @Prop() courseOrganisation?: string;\n  @Prop() courseEnrollmentLink?: string;\n  @Prop() courseTeachingLanguage?: string;\n  @Prop() courseLinkLabel?: string;\n\n  @Element() el: HTMLElement;\n\n  async componentWillLoad() {\n    this._courseTags = await jsonParserWorker(this.courseTags);\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event) {\n    const key = (event as KeyboardEvent).code;\n    if (key == keys.enter) {\n      let card = this.el;\n      window.open(card.dataset.location, \"_blank\", \"noopener\");\n    }\n  }\n\n  render() {\n    const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n    const target = \"_blank\";\n    const ariaLabel = \"Link points outside the current website.\";\n\n    const classItemName = [\n      \"hy-content-list-item--item-name\",\n      `hy-content-list-item--item-name--${this.stateVariant}`,\n    ].join(\" \");\n    const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n    return [\n      <div class={classAttributes} tabindex=\"0\">\n        <div class={classItemName}>{this.courseName}</div>\n        <div class=\"hy-content-list-item--metadata\">\n          {this.isCancelled && (\n            <div class={classItemCancelled}>\n              <span>{this.cancelledLabel}</span>\n            </div>\n          )}\n          <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n            <span>{this.formattedTimeRange}</span>\n          </div>\n          {this.courseOrganisation\n            ? [\n                <div class=\"hy-content-list-item--metadata--item\">\n                  <span>{this.courseStudyFormat}</span>\n                </div>,\n                <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n                  <span>{this.courseOrganisation}</span>\n                </div>,\n              ]\n            : [\n                <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n                  <span>{this.courseStudyFormat}</span>\n                </div>,\n              ]}\n        </div>\n        {this._courseTags && this._courseTags.length > 0 && (\n          <div class=\"hy-content-list-item--tags\">\n            {this._courseTags.map((x) => {\n              return <hy-tag>{x.name}</hy-tag>;\n            })}\n          </div>\n        )}\n        {this.isCancelled && (\n          <div class=\"cancelled mobile\">\n            <span>{this.cancelledLabel}</span>\n          </div>\n        )}\n        <div class=\"hy-content-list-item--link\">\n          <a\n            href={this.courseEnrollmentLink}\n            target={target}\n            aria-label={ariaLabel}\n            class=\"hy-content-list-item--link--link\"\n            tabindex=\"-1\"\n          >\n            <span class=\"label\">{this.courseLinkLabel}</span>\n            <span class=\"icon-wrapper\">\n              <div class=\"icon\">\n                <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n              </div>\n            </span>\n          </a>\n        </div>\n      </div>,\n    ];\n  }\n}\n"],"version":3}

package/dist/esm/hy-crisis-banner.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+
+const hyCrisisBannerCss = ":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-crisis-banner{-webkit-box-shadow:inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);box-shadow:inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);display:block}.hy-crisis-banner__container{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;max-width:1216px}.hy-crisis-banner__indicator{background-color:var(--additional-yellow-light);-ms-flex-negative:0;flex-shrink:0}@media (min-width: 30rem){.hy-crisis-banner__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.hy-crisis-banner__indicator-icon{margin-left:8px;margin-right:8px;margin-top:10px}@media (min-width: 30rem){.hy-crisis-banner__indicator-icon{margin-left:10px;margin-right:10px;margin-top:0}}.hy-crisis-banner__indicator-icon svg{height:22px;width:22px}.hy-crisis-banner__indicator-icon svg circle{fill:var(--grayscale-white)}.hy-crisis-banner__indicator-icon svg path{fill:var(--additional-yellow-light)}.hy-crisis-banner__content-wrapper{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:12px 0 12px 12px}@media (min-width: 30rem){.hy-crisis-banner__content-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:14px 0 14px 14px}}@media (min-width: 60rem){.hy-crisis-banner__content-wrapper{padding:20px 0 20px 20px}}@media (min-width: 30rem){.hy-crisis-banner__content{max-width:61.22%;width:100%}}@media (min-width: 60rem){.hy-crisis-banner__content{max-width:65.83%}}@media (min-width: 75.0625rem){.hy-crisis-banner__content{max-width:65.79%}}.hy-crisis-banner__title{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.35px;margin:0 0 2px 0}@media (min-width: 1601px){.hy-crisis-banner__title{font-size:1rem;line-height:18px;letter-spacing:-0.4px}}.hy-crisis-banner__description{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.35px;margin:0}@media (min-width: 30rem){.hy-crisis-banner__description{font-size:0.875rem;line-height:16px}}.hy-crisis-banner__description p{margin-top:0}.hy-crisis-banner__description p:last-of-type{margin-bottom:0}.hy-crisis-banner__link{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.5px;margin:12px 0 0;overflow:hidden;text-decoration:none}@media (min-width: 30rem){.hy-crisis-banner__link{-ms-flex-negative:0;flex-shrink:0;margin-left:24px;margin-right:32px;margin-top:0;text-align:right}}@media (min-width: 75.0625rem){.hy-crisis-banner__link{margin-left:32px}}@media (min-width: 1601px){.hy-crisis-banner__link{font-size:1rem;line-height:18px}}.hy-crisis-banner__link:hover,.hy-crisis-banner__link:focus{color:var(--brand-main);text-decoration:underline}.hy-crisis-banner__link:hover .hy-crisis-banner__link-icon svg,.hy-crisis-banner__link:focus .hy-crisis-banner__link-icon svg{fill:var(--brand-main)}.hy-crisis-banner__link-icon{margin-left:4px}@media (min-width: 30rem){.hy-crisis-banner__link-icon{margin-left:8px}}@media (min-width: 75.0625rem){.hy-crisis-banner__link-icon{margin-left:12px}}.hy-crisis-banner__link-icon svg{fill:var(--brand-main-light);height:12px;width:12px}@media (min-width: 30rem){.hy-crisis-banner__link-icon svg{height:14px;width:14px}}@media (min-width: 1601px){.hy-crisis-banner__link-icon svg{height:16px;width:16px}}";
+
+const HyCrisisBanner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bannerTitle = undefined;
+    this.bannerDescription = undefined;
+    this.linkTitle = undefined;
+    this.linkUrl = undefined;
+  }
+  render() {
+    return (h(Host, { class: "hy-crisis-banner", role: "alert" }, h("div", { class: "hy-crisis-banner__container" }, h("div", { class: "hy-crisis-banner__indicator" }, h("hy-icon", { class: "hy-crisis-banner__indicator-icon", icon: "hy-icon-alert" })), h("div", { class: "hy-crisis-banner__content-wrapper" }, h("div", { class: "hy-crisis-banner__content" }, h("h3", { class: "hy-crisis-banner__title" }, this.bannerTitle), this.bannerDescription && (h("div", { class: "hy-crisis-banner__description", innerHTML: this.bannerDescription }))), this.linkUrl && (h("a", { class: "hy-crisis-banner__link", href: this.linkUrl }, this.linkTitle, h("hy-icon", { class: "hy-crisis-banner__link-icon", icon: "hy-icon-arrow-to-right" })))))));
+  }
+};
+HyCrisisBanner.style = hyCrisisBannerCss;
+
+export { HyCrisisBanner as hy_crisis_banner };
+
+//# sourceMappingURL=hy-crisis-banner.entry.js.map

package/dist/esm/hy-crisis-banner.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-crisis-banner.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,4mKAA4mK;;MCOznK,cAAc;;;;;;;;EAMzB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,IACzC,WAAK,KAAK,EAAC,6BAA6B,IACtC,WAAK,KAAK,EAAC,6BAA6B,IACtC,eAAS,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,eAAe,GAAI,CACzE,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,WAAK,KAAK,EAAC,2BAA2B,IACpC,UAAI,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,CAAM,EAC1D,IAAI,CAAC,iBAAiB,KACrB,WAAK,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,GAAQ,CACrF,CACG,EACL,IAAI,CAAC,OAAO,KACX,SAAG,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IACjD,IAAI,CAAC,SAAS,EACf,eAAS,KAAK,EAAE,6BAA6B,EAAE,IAAI,EAAE,wBAAwB,GAAI,CAC/E,CACL,CACG,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-crisis-banner/hy-crisis-banner.scss?tag=hy-crisis-banner","./src/components/hy-crisis-banner/hy-crisis-banner.tsx"],"sourcesContent":[".hy-crisis-banner {\n  box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);\n  display: block;\n}\n\n.hy-crisis-banner__container {\n  display: flex;\n  margin: 0 auto;\n  max-width: 1216px;\n}\n\n.hy-crisis-banner__indicator {\n  background-color: var(--additional-yellow-light);\n  flex-shrink: 0;\n\n  @include breakpoint($narrow) {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n.hy-crisis-banner__indicator-icon {\n  margin-left: 8px;\n  margin-right: 8px;\n  margin-top: 10px;\n\n  @include breakpoint($narrow) {\n    margin-left: 10px;\n    margin-right: 10px;\n    margin-top: 0;\n  }\n\n  svg {\n    height: 22px;\n    width: 22px;\n\n    circle {\n      fill: var(--grayscale-white);\n    }\n\n    path {\n      fill: var(--additional-yellow-light);\n    }\n  }\n}\n\n.hy-crisis-banner__content-wrapper {\n  align-items: baseline;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 12px 0 12px 12px;\n\n  @include breakpoint($narrow) {\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: 14px 0 14px 14px;\n  }\n\n  @include breakpoint($wide) {\n    padding: 20px 0 20px 20px;\n  }\n}\n\n.hy-crisis-banner__content {\n  @include breakpoint($narrow) {\n    max-width: 61.22%;\n    width: 100%;\n  }\n\n  @include breakpoint($wide) {\n    max-width: 65.83%;\n  }\n\n  @include breakpoint($extrawide) {\n    max-width: 65.79%;\n  }\n}\n\n.hy-crisis-banner__title {\n  @include font-size(14px, 16px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.35px;\n  margin: 0 0 2px 0;\n\n  @include breakpoint($xlarge) {\n    @include font-size(16px, 18px);\n    letter-spacing: -0.4px;\n  }\n}\n\n.hy-crisis-banner__description {\n  @include font-size(12px, 14px);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.35px;\n  margin: 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n  }\n\n  p {\n    margin-top: 0;\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  }\n}\n\n.hy-crisis-banner__link {\n  @include font-size(14px, 16px);\n  @include font-weight($semibold);\n  align-items: center;\n  color: var(--brand-main-light);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n  margin: 12px 0 0;\n  overflow: hidden;\n  text-decoration: none;\n\n  @include breakpoint($narrow) {\n    flex-shrink: 0;\n    margin-left: 24px;\n    margin-right: 32px;\n    margin-top: 0;\n    text-align: right;\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: 32px;\n  }\n  @include breakpoint($xlarge) {\n    @include font-size(16px, 18px);\n  }\n\n  &:hover,\n  &:focus {\n    color: var(--brand-main);\n    text-decoration: underline;\n\n    .hy-crisis-banner__link-icon svg {\n      fill: var(--brand-main);\n    }\n  }\n}\n\n.hy-crisis-banner__link-icon {\n  margin-left: 4px;\n\n  @include breakpoint($narrow) {\n    margin-left: 8px;\n  }\n\n  @include breakpoint($extrawide) {\n    margin-left: 12px;\n  }\n\n  svg {\n    fill: var(--brand-main-light);\n    height: 12px;\n    width: 12px;\n\n    @include breakpoint($narrow) {\n      height: 14px;\n      width: 14px;\n    }\n\n    @include breakpoint($xlarge) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-crisis-banner\",\n  styleUrl: \"hy-crisis-banner.scss\",\n  shadow: false,\n})\nexport class HyCrisisBanner {\n  @Prop() bannerTitle: string;\n  @Prop() bannerDescription?: string;\n  @Prop() linkTitle?: string;\n  @Prop() linkUrl?: string;\n\n  render() {\n    return (\n      <Host class=\"hy-crisis-banner\" role=\"alert\">\n        <div class=\"hy-crisis-banner__container\">\n          <div class=\"hy-crisis-banner__indicator\">\n            <hy-icon class={\"hy-crisis-banner__indicator-icon\"} icon={\"hy-icon-alert\"} />\n          </div>\n          <div class=\"hy-crisis-banner__content-wrapper\">\n            <div class=\"hy-crisis-banner__content\">\n              <h3 class=\"hy-crisis-banner__title\">{this.bannerTitle}</h3>\n              {this.bannerDescription && (\n                <div class=\"hy-crisis-banner__description\" innerHTML={this.bannerDescription}></div>\n              )}\n            </div>\n            {this.linkUrl && (\n              <a class=\"hy-crisis-banner__link\" href={this.linkUrl}>\n                {this.linkTitle}\n                <hy-icon class={\"hy-crisis-banner__link-icon\"} icon={\"hy-icon-arrow-to-right\"} />\n              </a>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-cta-button.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { d as CtaLinkButtonVariants } from './utils-7438924c.js';
+
+const ctaButtonCss = ":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}:host{display:block}.hy-cta-button-container{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-cta-button{cursor:pointer;font-family:var(--main-font-family);font-weight:700;position:relative;text-decoration:none}.hy-cta-button.transparent-background,.hy-cta-button.black-background,.hy-cta-button.blue-background,.hy-cta-button.white-background,.hy-cta-button.hero-white,.hy-cta-button.hero-blue,.hy-cta-button.hero-black,.hy-cta-button.dark-blue-background{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:328px;padding:13px 16px}.hy-cta-button.transparent-background .text,.hy-cta-button.black-background .text,.hy-cta-button.blue-background .text,.hy-cta-button.white-background .text,.hy-cta-button.hero-white .text,.hy-cta-button.hero-blue .text,.hy-cta-button.hero-black .text,.hy-cta-button.dark-blue-background .text{font-size:1rem;line-height:18px;letter-spacing:-0.3px}.hy-cta-button.transparent-background .link-icon,.hy-cta-button.black-background .link-icon,.hy-cta-button.blue-background .link-icon,.hy-cta-button.white-background .link-icon,.hy-cta-button.hero-white .link-icon,.hy-cta-button.hero-blue .link-icon,.hy-cta-button.hero-black .link-icon,.hy-cta-button.dark-blue-background .link-icon{margin-left:8px}.hy-cta-button.transparent-background .link-icon svg,.hy-cta-button.black-background .link-icon svg,.hy-cta-button.blue-background .link-icon svg,.hy-cta-button.white-background .link-icon svg,.hy-cta-button.hero-white .link-icon svg,.hy-cta-button.hero-blue .link-icon svg,.hy-cta-button.hero-black .link-icon svg,.hy-cta-button.dark-blue-background .link-icon svg{height:16px;width:16px}.hy-cta-button.dark-blue-background{background-color:var(--brand-main-dark);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.dark-blue-background .link-icon svg{background-color:var(--brand-main-dark);fill:var(--grayscale-white)}.hy-cta-button.dark-blue-background .text{color:var(--grayscale-white)}.hy-cta-button.transparent-background{background-color:var(--grayscale-white);border:4px solid var(--grayscale-black);color:var(--grayscale-black)}.hy-cta-button.transparent-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-cta-button.transparent-background .text{color:var(--grayscale-black)}.hy-cta-button.black-background{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.black-background .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.black-background .text{color:var(--grayscale-white)}.hy-cta-button.black-background:hover{background-color:var(--brand-main-active)}.hy-cta-button.black-background:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.black-background:focus{background-color:var(--brand-main)}.hy-cta-button.black-background:focus .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background{background-color:var(--brand-main-light);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.blue-background .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.blue-background .text{color:var(--grayscale-white)}.hy-cta-button.blue-background:hover{background-color:var(--brand-main)}.hy-cta-button.blue-background:hover .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background:focus{background-color:var(--brand-main-active)}.hy-cta-button.blue-background:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.white-background{background-color:var(--grayscale-white);border:4px solid var(--brand-main-light);color:var(--brand-main-light)}.hy-cta-button.white-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--brand-main-light)}.hy-cta-button.white-background .text{color:var(--brand-main-light)}.hy-cta-button.white-background:hover{border-color:var(--brand-main-active)}.hy-cta-button.white-background:hover .text{color:var(--brand-main-active)}.hy-cta-button.white-background:hover .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.white-background:focus{border-color:var(--brand-main-active)}.hy-cta-button.white-background:focus .text{color:var(--brand-main-active)}.hy-cta-button.white-background:focus .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.hero-white{background-color:var(--brand-main-light);color:var(--grayscale-white)}.hy-cta-button.hero-white .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.hero-white .text{color:var(--grayscale-white)}.hy-cta-button.hero-white:hover{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-black{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-black .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.hero-black .text{color:var(--grayscale-white)}.hy-cta-button.hero-black:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-black:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue{background-color:var(--brand-main);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-blue .link-icon svg{background-color:var(--brand-main);fill:var(--grayscale-white)}.hy-cta-button.hero-blue .text{color:var(--grayscale-white)}.hy-cta-button.hero-blue:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .link-icon svg{fill:var(--brand-main-soft)}";
+
+const CtaButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = CtaLinkButtonVariants.onBlueBkgd;
+    this.linkContent = "";
+    this.typeButton = false;
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+    this.headerstyle = "common";
+  }
+  render() {
+    const classAttributes = ["hy-cta-button", this.variant, this.headerstyle].join(" ");
+    const containerClassAttributes = ["hy-cta-button-container"].join(" ");
+    const textClassAttributes = ["text"].join(" ");
+    const iconClassAttributes = ["link-icon"].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h("span", { class: containerClassAttributes }, !this.typeButton ? (h("a", { "aria-label": this.scLabel, class: classAttributes, href: this.url, target: target }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 48 })))) : (h("button", { "aria-label": this.scLabel, class: classAttributes }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 48 }))))));
+  }
+  get el() { return getElement(this); }
+};
+CtaButton.style = ctaButtonCss;
+
+export { CtaButton as hy_cta_button };
+
+//# sourceMappingURL=hy-cta-button.entry.js.map

package/dist/esm/hy-cta-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-cta-button.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,spPAAspP;;MCQ9pP,SAAS;;;mBACqB,qBAAqB,CAAC,UAAU;uBAC3C,EAAE;sBACF,KAAK;;;sBAGL,KAAK;uBACL,QAAQ;;EAGtC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpF,MAAM,wBAAwB,GAAG,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,MAAM,mBAAmB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,YAAM,KAAK,EAAE,wBAAwB,IAClC,CAAC,IAAI,CAAC,UAAU,IACf,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IACjF,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACL,KAEJ,4BAAoB,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,IACtD,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACA,CACV,CACI,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/hy-cta-button/cta-button.scss?tag=hy-cta-button","./src/components/hy-cta-button/cta-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-cta-button-container {\n  display: flex;\n}\n\n.hy-cta-button {\n  cursor: pointer;\n  font-family: var(--main-font-family);\n  font-weight: 700;\n  position: relative;\n  text-decoration: none;\n\n  &.transparent-background,\n  &.black-background,\n  &.blue-background,\n  &.white-background,\n  &.hero-white,\n  &.hero-blue,\n  &.hero-black,\n  &.dark-blue-background {\n    align-items: center;\n    box-sizing: border-box;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    max-width: 328px;\n    padding: 13px 16px;\n\n    .text {\n      @include font-size(16px, 18px);\n      letter-spacing: -0.3px;\n    }\n\n    .link-icon {\n      margin-left: 8px;\n\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  &.dark-blue-background {\n    background-color: var(--brand-main-dark);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-dark);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n  }\n\n  &.transparent-background {\n    background-color: var(--grayscale-white);\n    border: 4px solid var(--grayscale-black);\n    color: var(--grayscale-black);\n\n    .link-icon svg {\n      background-color: var(--grayscale-white);\n      fill: var(--grayscale-black);\n    }\n\n    .text {\n      color: var(--grayscale-black);\n    }\n  }\n\n  &.black-background {\n    background-color: var(--grayscale-black);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--grayscale-black);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main);\n\n      .link-icon svg {\n        background-color: var(--brand-main);\n      }\n    }\n  }\n\n  &.blue-background {\n    background-color: var(--brand-main-light);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-light);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main);\n\n      .link-icon svg {\n        background-color: var(--brand-main);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.white-background {\n    background-color: var(--grayscale-white);\n    border: 4px solid var(--brand-main-light);\n    color: var(--brand-main-light);\n\n    .link-icon svg {\n      background-color: var(--grayscale-white);\n      fill: var(--brand-main-light);\n    }\n\n    .text {\n      color: var(--brand-main-light);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-active);\n\n      .text {\n        color: var(--brand-main-active);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-active);\n\n      .text {\n        color: var(--brand-main-active);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.hero-white {\n    background-color: var(--brand-main-light);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-light);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.hero-black {\n    background-color: var(--grayscale-black);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--grayscale-black);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n  }\n\n  &.hero-blue {\n    background-color: var(--brand-main);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n  }\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-cta-button\",\n  styleUrl: \"cta-button.scss\",\n  shadow: false,\n})\nexport class CtaButton implements ComponentInterface {\n  @Prop() variant: CtaLinkButtonVariants = CtaLinkButtonVariants.onBlueBkgd;\n  @Prop() linkContent: string = \"\";\n  @Prop() typeButton: boolean = false;\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  @Prop() headerstyle: string = \"common\";\n  @Element() el: HTMLElement;\n\n  render() {\n    const classAttributes = [\"hy-cta-button\", this.variant, this.headerstyle].join(\" \");\n\n    const containerClassAttributes = [\"hy-cta-button-container\"].join(\" \");\n\n    const textClassAttributes = [\"text\"].join(\" \");\n    const iconClassAttributes = [\"link-icon\"].join(\" \");\n\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <span class={containerClassAttributes}>\n        {!this.typeButton ? (\n          <a aria-label={this.scLabel} class={classAttributes} href={this.url} target={target}>\n            <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n            <span class={iconClassAttributes}>\n              <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n            </span>\n          </a>\n        ) : (\n          <button aria-label={this.scLabel} class={classAttributes}>\n            <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n            <span class={iconClassAttributes}>\n              <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-cta-link.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { h as CtaLinkVariants } from './utils-7438924c.js';
+
+const ctaLinkCss = ":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}:host{display:block}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none}.hy-cta-link:hover,.hy-cta-link:focus{text-decoration:underline}.hy-cta-link:hover .hy-cta-link__icon,.hy-cta-link:focus .hy-cta-link__icon{background-color:var(--brand-main-active)}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
+
+const CtaLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = CtaLinkVariants.default;
+    this.linkContent = "";
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+  }
+  render() {
+    const iconClassAttributes = ["hy-cta-link__icon", this.isExternal && "hy-cta-link__icon--external"].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h("a", { "aria-label": this.scLabel, href: this.url, target: target, class: `hy-cta-link hy-cta-link--${this.variant}` }, this.variant == CtaLinkVariants.linkList && (h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 }))), h("span", null, this.linkContent), this.variant == CtaLinkVariants.default && (h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 })))));
+  }
+  get el() { return getElement(this); }
+};
+CtaLink.style = ctaLinkCss;
+
+export { CtaLink as hy_cta_link };
+
+//# sourceMappingURL=hy-cta-link.entry.js.map

package/dist/esm/hy-cta-link.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-cta-link.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,qkEAAqkE;;MCQ3kE,OAAO;;;mBAEiB,eAAe,CAAC,OAAO;uBAC5B,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,UAAU,IAAI,6BAA6B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9G,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,uBAAe,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,4BAA4B,IAAI,CAAC,OAAO,EAAE,IAC3G,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ,KACvC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,EACD,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAC9B,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KACtC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,CACC,EACJ;GACH;;;;;;;","names":[],"sources":["./src/components/hy-cta-link/cta-link.scss?tag=hy-cta-link","./src/components/hy-cta-link/cta-link.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-cta-link {\n  @include font-weight($semibold);\n  @include font-size(16px, 24px);\n  align-items: center;\n  color: var(--brand-main);\n  display: inline-grid;\n  font-family: var(--main-font-family);\n  gap: 16px;\n  grid-auto-flow: column;\n  letter-spacing: -0.5px;\n  overflow: hidden;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    text-decoration: underline;\n\n    .hy-cta-link__icon {\n      background-color: var(--brand-main-active);\n    }\n  }\n}\n\n.hy-cta-link__icon {\n  align-items: center;\n  background-color: var(--brand-main-light);\n  display: inline-flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  svg {\n    fill: var(--grayscale-white);\n  }\n\n  &--external {\n    svg {\n      transform: rotate(-45deg);\n    }\n  }\n}\n","import {Component, ComponentInterface, Prop, h, Element} from \"@stencil/core\";\nimport {CtaLinkVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-cta-link\",\n  styleUrl: \"cta-link.scss\",\n  shadow: false,\n})\nexport class CtaLink implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() variant: CtaLinkVariants = CtaLinkVariants.default;\n  @Prop() linkContent: string = \"\";\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n\n  render() {\n    const iconClassAttributes = [\"hy-cta-link__icon\", this.isExternal && \"hy-cta-link__icon--external\"].join(\" \");\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <a aria-label={this.scLabel} href={this.url} target={target} class={`hy-cta-link hy-cta-link--${this.variant}`}>\n        {this.variant == CtaLinkVariants.linkList && (\n          <span class={iconClassAttributes}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        )}\n        <span>{this.linkContent}</span>\n        {this.variant == CtaLinkVariants.default && (\n          <span class={iconClassAttributes}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        )}\n      </a>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,135 @@
+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-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, 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-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? "Open" : "Close"} dropdown`, 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

@@ -0,0 +1 @@
+{"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-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}