@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.58

package/dist/esm/hy-event-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-f9deccc3.js';
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
 
 const hyEventItemCss = ":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-events__item{display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid #d8d8d8;padding:13px 16px;position:relative;text-decoration:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;white-space:initial;margin-bottom:1rem}@media (min-width: 48rem){.hy-events__item{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:47px;margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-events__item:not(.hy-events__item--grid) .hy-events__item--container{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item:hover .hy-events__item__title{color:var(--brand-main);text-decoration:underline}.hy-events__item:hover .hy-events__item__date--short,.hy-events__item:hover .hy-events__item__url-icon{background-color:var(--brand-main-active)}.hy-events__item__title{font-size:1.125rem;line-height:24px;-webkit-box-orient:vertical;-webkit-line-clamp:6;color:var(--grayscale-black);display:-webkit-box;font-family:var(--main-font-family);font-weight:700;letter-spacing:-0.36px;line-clamp:6;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis}@media (min-width: 48rem){.hy-events__item__title{font-size:1.375rem;line-height:28px;font-weight:700;font-size:22px;line-height:28px;letter-spacing:-0.44px;margin-bottom:14px}}.hy-events__item__details{font-family:var(--main-font-family);font-style:normal;font-weight:400;font-size:17px;line-height:26px;color:var(--grayscale-black)}.hy-events__item__meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-events__item__meta{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events__item__meta--item{font-size:0.9375rem;line-height:22px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-right:0px;margin-bottom:9px;font-family:var(--main-font-family);font-weight:400;word-break:break-word}@media (min-width: 48rem){.hy-events__item__meta--item{font-size:1.0625rem;line-height:26px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-right:35px;margin-bottom:0;font-weight:400}}.hy-events__item__meta--item svg{width:20px;height:20px;margin-right:9px;margin-top:2px}@media (min-width: 48rem){.hy-events__item__meta--item svg{margin-top:1px}}.hy-events__item__date--short{font-size:0.9375rem;line-height:18px;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);background:var(--brand-main-light);font-family:var(--main-font-family);font-style:normal;font-weight:700;padding:6px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;letter-spacing:-0.28125px;text-decoration:none;margin-bottom:20px;margin-right:0}@media (min-width: 48rem){.hy-events__item__date--short{font-size:1.0625rem;line-height:20px;letter-spacing:-0.31875px;padding:0;height:68px;width:68px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:47px;margin-bottom:0}}.hy-events__item__url-icon{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;background:var(--brand-main-light);color:var(--grayscale-white);width:32px;height:32px;bottom:16px;right:-9px;z-index:1}@media (min-width: 48rem){.hy-events__item__url-icon{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item__url-icon svg{fill:currentColor}.hy-events__item__read-more{font-size:0.9375rem;line-height:18px;color:var(--brand-main-light);font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;letter-spacing:-0.28125px;margin-top:10px}@media (min-width: 48rem){.hy-events__item__read-more{display:none}}.hy-events__item--grid{padding:1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:280px;max-width:100%;min-height:255px;position:relative;margin-bottom:0}@media (min-width: 48rem){.hy-events__item--grid{max-width:280px;padding:1rem 1rem 0 1rem}}.hy-events__item--grid.is-long{max-height:100%}@media (min-width: 48rem){.hy-events__item--grid.is-long{max-height:255px}}.hy-events__item--grid.is-long::after{display:none;content:\"\";background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);position:absolute;bottom:0;left:0;width:100%;height:36px}@media (min-width: 48rem){.hy-events__item--grid.is-long::after{display:block}}.hy-events__item--grid.is-long .hy-events__item--container{overflow:visible}@media (min-width: 48rem){.hy-events__item--grid.is-long .hy-events__item--container{overflow:hidden}}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover,.hy-events__item--grid.is-long:focus{border:0}}.hy-events__item--grid.is-long:hover::after,.hy-events__item--grid.is-long:hover .hy-events__item--toggle,.hy-events__item--grid.is-long:focus::after,.hy-events__item--grid.is-long:focus .hy-events__item--toggle{display:none}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover .hy-events__item--container,.hy-events__item--grid.is-long:focus .hy-events__item--container{background-color:white;border:1px solid #d8d8d8;padding:16px 16px;position:absolute;top:0;left:0;min-height:255px;overflow:visible}}.hy-events__item--grid .hy-events__item__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.36px}.hy-events__item--grid .hy-events__item--toggle{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#d7d7d7;border-radius:50%;position:absolute;top:16px;right:16px;width:24px;height:24px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item--toggle{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item--grid .hy-events__item__meta{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:9px}.hy-events__item--grid .hy-events__item__meta--item{font-size:0.9375rem;line-height:22px}.hy-events__item--grid .hy-events__item__date--short{padding:6px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item__date--short{font-size:0.9375rem;line-height:18px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;font-weight:700;letter-spacing:-0.28125px;margin-bottom:18px}}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-f9deccc3.js';
-import { d as CtaLinkVariants } from './utils-a4d55421.js';
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { h as CtaLinkVariants } from './utils-a4ebfef1.js';
 
 const hyEventsCss = ":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-events.no-events .hy-events__no-result-container{font-family:var(--main-font-family)}hy-events.no-events .hy-events--wrapper .hy-events--grid{padding-bottom:0}hy-events.no-events .hy-events__footer{display:none}.hy-events--wrapper .hy-events{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-events--wrapper .hy-events--grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1.5rem;overflow-x:hidden;white-space:nowrap;scrollbar-width:none}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid{padding-bottom:14rem}}.hy-events--wrapper .hy-events--grid .hy-events__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid .hy-events__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events--wrapper .hy-events__footer{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:2rem}.hy-events--wrapper .hy-events__footer--grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:1.5rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__footer--grid{margin-top:-9.5rem}}.hy-events--wrapper .hy-events__scroll-buttons{display:none;margin-top:2rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__scroll-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events--wrapper .hy-events__scroll-buttons button{border:none;background:none;padding:0.5rem}.hy-events--wrapper .hy-events__scroll-buttons button:hover{cursor:pointer}.hy-events--wrapper .hy-events__scroll-buttons button:hover svg{scale:1.1}.hy-events--wrapper .hy-events__scroll-buttons button.is-hidden{display:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled{pointer-events:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled svg{fill:var(--link-disabled)}";
 

package/dist/esm/hy-filter-group_6.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+import { C as ColorVariant, r as ListStyleVariants } from './utils-a4ebfef1.js';
+
+const hyFilterGroupCss = ":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-filter-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.hy-filter-group__listing{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.hy-filter-group__label{font-size:0.75rem;line-height:16px;border-radius:2px;color:var(--grayscale-dark);font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px 8px 0;padding:4px 0}@media (min-width: 30rem){.hy-filter-group__label{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 0}}.hy-filter-group__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border-radius:2px;border:0;color:var(--grayscale-dark);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px;padding:4px 6px}@media (min-width: 30rem){.hy-filter-group__button{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 8px}}.hy-filter-group__button:hover{cursor:pointer}.hy-filter-group__button-icon{margin-left:6px}@media (min-width: 30rem){.hy-filter-group__button-icon{margin-left:8px}}.hy-filter-group__button-icon svg{pointer-events:none}@media (min-width: 30rem){.hy-filter-group__button-icon svg{height:12px;width:12px}}.hy-filter-group__divider{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:4px 6px}@media (min-width: 30rem){.hy-filter-group__divider{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px}}";
+
+const HyFilterGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterGroupLabel = undefined;
+    this.filterGroupFilters = undefined;
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._filterGroupFilters = JSON.parse(newValue);
+    }
+    else {
+      this._filterGroupFilters = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.filterGroupFilters);
+  }
+  // TODO: Finish handleFilterDeselect functionality with real data.
+  handleFilterDeselect(id) {
+    console.log(id);
+  }
+  render() {
+    return (h(Host, { class: "hy-filter-group" }, h("ul", { class: "hy-filter-group__listing" }, h("li", null, h("h3", { class: "hy-filter-group__label" }, this.filterGroupLabel)), this._filterGroupFilters.map(({ id, label }) => (h("hy-filter-group-item", { "filter-group-item-id": id, "filter-group-item-label": label, onClick: () => this.handleFilterDeselect(id) }))))));
+  }
+  static get watchers() { return {
+    "filterGroupFilters": ["arrayDataWatcher"]
+  }; }
+};
+HyFilterGroup.style = hyFilterGroupCss;
+
+const HyFilterGroupItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterGroupItemId = undefined;
+    this.filterGroupItemLabel = undefined;
+  }
+  render() {
+    return (h("li", { class: "hy-filter-group__filter" }, h("button", { type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` }, this.filterGroupItemLabel, h("hy-icon", { class: "hy-filter-group__button-icon", icon: "hy-icon-remove", size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })), h("slot", null)));
+  }
+};
+
+const hyFilterListTypeCss = ":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-filter__list-type{display:none}@media (min-width: 60rem){.hy-filter__list-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--main-font-family)}}@media (min-width: 60rem){.hy-filter__list-type span{font-size:0.875rem;line-height:18px;font-weight:600;color:var(--grayscale-black);letter-spacing:-0.5px;text-align:right}}@media (min-width: 1601px){.hy-filter__list-type span{font-size:1rem;line-height:20px}}.hy-filter__list-type__list{background:var(--grayscale-background-box);border:none;margin:0 8px;padding:10px}.hy-filter__list-type__list svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__list.is-active{background:white;border:black 1px solid}.hy-filter__list-type__list.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__list:hover{cursor:pointer}.hy-filter__list-type__grid{background:var(--grayscale-background-box);border:none;padding:10px}.hy-filter__list-type__grid svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__grid.is-active{background:white;border:black 1px solid}.hy-filter__list-type__grid.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__grid:hover{cursor:pointer}";
+
+const HyFilterListType = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterLabel = undefined;
+    this.filterValue = undefined;
+  }
+  render() {
+    return (h("div", { class: "hy-filter__list-type" }, h("span", null, this.filterLabel), h("button", { type: "button", class: {
+        "hy-filter-item": true,
+        "hy-filter__list-type__list": true,
+        "is-active": this.filterValue == ListStyleVariants.list,
+      }, "aria-label": `${this.filterLabel}--list` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: "hy-icon-list-style-list", size: 16, "aria-hidden": "true" })), h("button", { type: "button", class: {
+        "hy-filter-item": true,
+        "hy-filter__list-type__grid": true,
+        "is-active": this.filterValue == ListStyleVariants.grid,
+      }, "aria-label": `${this.filterLabel}--grid` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: "hy-icon-list-style-grid", size: 16, "aria-hidden": "true" }))));
+  }
+};
+HyFilterListType.style = hyFilterListTypeCss;
+
+const hyFilterVisibilityToolCss = ":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-filter-visibility-tool{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.35px;padding:0;margin-right:1rem}@media (min-width: 30rem){.hy-filter-visibility-tool{font-size:1rem;line-height:20px;letter-spacing:-0.5px}}.hy-filter-visibility-tool:hover{color:var(--brand-main);cursor:pointer}.hy-filter-visibility-tool:hover svg{fill:var(--brand-main)}.hy-filter-visibility-tool:focus{color:var(--brand-main);outline-offset:1px;outline:2px solid var(--brand-main)}.hy-filter-visibility-tool:focus svg{fill:var(--brand-main)}.hy-filter-visibility-tool__icon{-ms-flex-negative:0;flex-shrink:0;margin-right:6px}.hy-filter-visibility-tool__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-filter-visibility-tool__icon svg{height:16px;width:16px}}";
+
+const HyFilterVisibilityTool = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterVisibilityToolType = undefined;
+  }
+  render() {
+    switch (this.filterVisibilityToolType) {
+      case "toggle":
+        return (h(Host, null, h("hy-filter-visibility-tool-toggle", null)));
+      case "reset":
+        return (h(Host, null, h("hy-filter-visibility-tool-reset", null)));
+    }
+  }
+};
+HyFilterVisibilityTool.style = hyFilterVisibilityToolCss;
+
+const HyFilterVisibilityToolReset = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--reset", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: "hy-icon-remove", size: 14, "aria-hidden": "true" }), "Reset filters"));
+  }
+};
+
+const HyFilterVisibilityToolToggle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-more", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: "hy-icon-plus", size: 12, "aria-hidden": "true" }), "Show more filters"), h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-less", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: "hy-icon-minus", size: 12, "aria-hidden": "true" }), "Show less filters")));
+  }
+};
+
+export { HyFilterGroup as hy_filter_group, HyFilterGroupItem as hy_filter_group_item, HyFilterListType as hy_filter_list_type, HyFilterVisibilityTool as hy_filter_visibility_tool, HyFilterVisibilityToolReset as hy_filter_visibility_tool_reset, HyFilterVisibilityToolToggle as hy_filter_visibility_tool_toggle };
+
+//# sourceMappingURL=hy-filter-group_6.entry.js.map

package/dist/esm/hy-filter-group_6.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-filter-group.hy-filter-group-item.hy-filter-list-type.hy-filter-visibility-tool.hy-filter-visibility-tool-reset.hy-filter-visibility-tool-toggle.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-filter-group/hy-filter-group.scss?tag=hy-filter-group","./src/components/hy-filter-group/hy-filter-group.tsx","./src/components/hy-filter-group/hy-filter-group.item.tsx","./src/components/hy-filter-list-type/hy-filter-list-type.scss?tag=hy-filter-list-type","./src/components/hy-filter-list-type/hy-filter-list-type.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss?tag=hy-filter-visibility-tool","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx"],"sourcesContent":[".hy-filter-group {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin-right: 16px;\n}\n\n.hy-filter-group__listing {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.hy-filter-group__label {\n  @include font-size(12px, 16px);\n  border-radius: 2px;\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  font-weight: normal;\n  letter-spacing: -0.2px;\n  margin: 8px 4px 8px 0;\n  padding: 4px 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n    padding: 6px 0;\n  }\n}\n\n.hy-filter-group__button {\n  @include font-size(12px, 16px);\n  align-items: center;\n  background-color: var(--grayscale-background-box);\n  border-radius: 2px;\n  border: 0;\n  color: var(--grayscale-dark);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: normal;\n  letter-spacing: -0.2px;\n  margin: 8px 4px;\n  padding: 4px 6px;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n    padding: 6px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-filter-group__button-icon {\n  margin-left: 6px;\n\n  @include breakpoint($narrow) {\n    margin-left: 8px;\n  }\n\n  svg {\n    pointer-events: none;\n\n    @include breakpoint($narrow) {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n\n.hy-filter-group__divider {\n  @include font-size(12px, 16px);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  margin: 4px 6px;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n  }\n}\n","import {Component, Host, h, Prop, Watch} from \"@stencil/core\";\n\nexport interface IFilterGroupFilter {\n  id: string | number;\n  label: string;\n}\n\n@Component({\n  tag: \"hy-filter-group\",\n  styleUrl: \"hy-filter-group.scss\",\n  shadow: false,\n})\nexport class HyFilterGroup {\n  private _filterGroupFilters: IFilterGroupFilter[];\n  @Prop() filterGroupLabel: string;\n  @Prop() filterGroupFilters: IFilterGroupFilter[] | string;\n\n  @Watch(\"filterGroupFilters\")\n  arrayDataWatcher(newValue: IFilterGroupFilter[] | string) {\n    if (typeof newValue === \"string\") {\n      this._filterGroupFilters = JSON.parse(newValue);\n    } else {\n      this._filterGroupFilters = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.filterGroupFilters);\n  }\n\n  // TODO: Finish handleFilterDeselect functionality with real data.\n  handleFilterDeselect(id) {\n    console.log(id);\n  }\n\n  render() {\n    return (\n      <Host class=\"hy-filter-group\">\n        <ul class=\"hy-filter-group__listing\">\n          <li>\n            <h3 class=\"hy-filter-group__label\">{this.filterGroupLabel}</h3>\n          </li>\n          {this._filterGroupFilters.map(({id, label}) => (\n            <hy-filter-group-item\n              filter-group-item-id={id}\n              filter-group-item-label={label}\n              onClick={() => this.handleFilterDeselect(id)}\n            ></hy-filter-group-item>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-filter-group-item\",\n  shadow: false,\n})\nexport class HyFilterGroupItem {\n  @Prop() filterGroupItemId: string | number;\n  @Prop() filterGroupItemLabel: string;\n\n  render() {\n    return (\n      <li class=\"hy-filter-group__filter\">\n        <button type=\"button\" class=\"hy-filter-group__button\" aria-label={`Deselect ${this.filterGroupItemLabel}`}>\n          {this.filterGroupItemLabel}\n          <hy-icon\n            class=\"hy-filter-group__button-icon\"\n            icon={\"hy-icon-remove\"}\n            size={10}\n            aria-hidden=\"true\"\n            fill={ColorVariant.grey_dark}\n          />\n        </button>\n        <slot />\n      </li>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-filter__list-type {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: flex;\n    align-items: center;\n    font-family: var(--main-font-family);\n  }\n\n  span {\n    @include breakpoint($wide) {\n      @include font-size(14px, 18px);\n      @include font-weight($semibold);\n      color: var(--grayscale-black);\n      letter-spacing: -0.5px;\n      text-align: right;\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(16px, 20px);\n    }\n  }\n\n  &__list {\n    background: var(--grayscale-background-box);\n    border: none;\n    margin: 0 8px;\n    padding: 10px;\n\n    svg {\n      background-color: var(--grayscale-background-box);\n      fill: var(--brand-main-light);\n    }\n    &.is-active {\n      background: white;\n      border: black 1px solid;\n\n      svg {\n        background-color: var(--grayscale-white);\n        fill: var(--grayscale-black);\n      }\n    }\n  }\n  &__list:hover {\n    cursor: pointer;\n  }\n\n  &__grid {\n    background: var(--grayscale-background-box);\n    border: none;\n    padding: 10px;\n\n    svg {\n      background-color: var(--grayscale-background-box);\n      fill: var(--brand-main-light);\n    }\n\n    &.is-active {\n      background: white;\n      border: black 1px solid;\n\n      svg {\n        background-color: var(--grayscale-white);\n        fill: var(--grayscale-black);\n      }\n    }\n  }\n\n  &__grid:hover {\n    cursor: pointer;\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ListStyleVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-filter-list-type\",\n  styleUrl: \"hy-filter-list-type.scss\",\n  shadow: false,\n})\nexport class HyFilterListType {\n  @Prop() filterLabel?: string;\n  @Prop() filterValue?: string;\n\n  render() {\n    return (\n      <div class=\"hy-filter__list-type\">\n        <span>{this.filterLabel}</span>\n        <button\n          type=\"button\"\n          class={{\n            \"hy-filter-item\": true,\n            \"hy-filter__list-type__list\": true,\n            \"is-active\": this.filterValue == ListStyleVariants.list,\n          }}\n          aria-label={`${this.filterLabel}--list`}\n        >\n          <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-list\"} size={16} aria-hidden=\"true\" />\n        </button>\n        <button\n          type=\"button\"\n          class={{\n            \"hy-filter-item\": true,\n            \"hy-filter__list-type__grid\": true,\n            \"is-active\": this.filterValue == ListStyleVariants.grid,\n          }}\n          aria-label={`${this.filterLabel}--grid`}\n        >\n          <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-grid\"} size={16} aria-hidden=\"true\" />\n        </button>\n      </div>\n    );\n  }\n}\n",".hy-filter-visibility-tool {\n  @include font-size(14px, 20px);\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  letter-spacing: -0.35px;\n  padding: 0;\n  margin-right: 1rem;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 20px);\n    letter-spacing: -0.5px;\n  }\n\n  &:hover {\n    color: var(--brand-main);\n    cursor: pointer;\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n\n  &:focus {\n    color: var(--brand-main);\n    outline-offset: 1px;\n    outline: 2px solid var(--brand-main);\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n}\n\n.hy-filter-visibility-tool__icon {\n  flex-shrink: 0;\n  margin-right: 6px;\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool\",\n  styleUrl: \"hy-filter-visibility-tool.scss\",\n  shadow: false,\n})\nexport class HyFilterVisibilityTool {\n  @Prop() filterVisibilityToolType: \"toggle\" | \"reset\";\n\n  render() {\n    switch (this.filterVisibilityToolType) {\n      case \"toggle\":\n        return (\n          <Host>\n            <hy-filter-visibility-tool-toggle />\n          </Host>\n        );\n\n      case \"reset\":\n        return (\n          <Host>\n            <hy-filter-visibility-tool-reset />\n          </Host>\n        );\n    }\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool-reset\",\n  shadow: false,\n})\nexport class HyFilterVisibilityToolReset {\n  render() {\n    return (\n      <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--reset\" type=\"button\">\n        <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n        Reset filters\n      </button>\n    );\n  }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool-toggle\",\n  shadow: false,\n})\nexport class HyFilterVisibilityToolToggle {\n  render() {\n    return (\n      <Host>\n        <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-more\" type=\"button\">\n          <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-plus\"} size={12} aria-hidden=\"true\" />\n          Show more filters\n        </button>\n        <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-less\" type=\"button\">\n          <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-minus\"} size={12} aria-hidden=\"true\" />\n          Show less filters\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,98 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { G as GeneralListTypes } from './utils-a4ebfef1.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyGeneralListCss = ":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-general-list{list-style:none;margin:0;padding:0}.hy-general-list--style-grid{display:-webkit-box;display:-ms-flexbox;display:flex;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-general-list--style-grid{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-general-list--style-grid{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-general-list--style-grid{gap:32px}}.hy-general-list--style-grid li{background-color:var(--grayscale-background-box);width:100%;height:auto}";
+
+const HyGeneralList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = GeneralListTypes.list;
+    this.blank = true;
+    this.dataItems = undefined;
+    this.truncateDescription = true;
+    this.truncateLimit = 140;
+    this.hasSidebar = false;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+    const hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (hyMainDiv.classList.contains("with-sidebar")) {
+        this.hasSidebar = true;
+      }
+    }
+  }
+  async watchPropHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this._dataItems = await jsonParserWorker(this.dataItems);
+    }
+  }
+  render() {
+    const classAttributes = [
+      "hy-general-list",
+      this.hasSidebar ? "hy-general-list--with-sidebar" : "",
+      `hy-general-list--style-${this.type}`,
+    ].join(" ");
+    let listData = this._dataItems;
+    if (typeof this._dataItems === "object") {
+      listData = Object.values(this._dataItems);
+    }
+    function truncate(str, n) {
+      return str.length > n ? str.substr(0, n - 1) + "..." : str;
+    }
+    return (h(Host, null, h("ul", { class: classAttributes }, listData &&
+      listData.map((item) => (h("li", null, h("hy-general-list-item", { "has-sidebar": this.hasSidebar, target: this.blank, "data-location": item.url, description: this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description, id: item.id, imageAlt: item.imageAlt, imageUrl: item.imageUrl, "item-title": item.title, label: item.label, "sub-label": item.subLabel, tag: item.tag, date: item.date, type: item.type, url: item.url, "list-style": this.type }))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "dataItems": ["watchPropHandler"]
+  }; }
+};
+HyGeneralList.style = hyGeneralListCss;
+
+const hyGeneralListItemCss = ":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;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);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:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}";
+
+const HyGeneralListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasSidebar = true;
+    this.description = undefined;
+    this.imageAlt = "";
+    this.imageUrl = null;
+    this.disableLazy = false;
+    this.itemTitle = undefined;
+    this.label = undefined;
+    this.subLabel = "";
+    this.date = "";
+    this.tag = "";
+    this.type = undefined;
+    this.url = undefined;
+    this.listStyle = undefined;
+    this.target = true;
+  }
+  render() {
+    const classAttributes = ["hy-general-list-item", `hy-general-list-item--style-${this.listStyle}`].join(" ");
+    const contentClassAttributes = ["hy-general-list-item__text-container"].join(" ");
+    const imageClassAttributes = ["hy-general-list-item__image-container"].join(" ");
+    const sidebarClass = this.hasSidebar ? "common" : "large";
+    const titleClassAttributes = ["hy-general-list-item__title", `hy-general-list-item__title__${sidebarClass}`].join(" ");
+    const descriptionClassAttributes = [
+      "hy-general-list-item__description",
+      `hy-general-list-item__description__${sidebarClass}`,
+    ].join(" ");
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      "--aspectRatio": `${aspect}%`,
+    };
+    return (h("article", { class: classAttributes }, h("a", { class: "hy-general-list-item__link", href: this.url, target: this.target ? "_blank" : "_self" }, this.type && (h("div", { class: "hy-general-list-item__type" }, h("span", { class: "hy-general-list-item__type__major" }, this.label), h("span", { class: "hy-general-list-item__type__sub" }, this.subLabel))), this.imageUrl && (h("figure", { class: imageClassAttributes, style: aspectRatio }, h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-general-list-item__image", src: this.imageUrl }))), h("div", { class: contentClassAttributes }, (this.tag || this.date) && (h("span", { class: "hy-genenral-list-item__meta" }, this.tag, h("span", { class: "hy-genenral-list-item__meta__date" }, this.tag && "|", " ", this.date))), h("h3", { class: titleClassAttributes }, this.itemTitle), h("p", { class: descriptionClassAttributes }, this.description)))));
+  }
+  get el() { return getElement(this); }
+};
+HyGeneralListItem.style = hyGeneralListItemCss;
+
+export { HyGeneralList as hy_general_list, HyGeneralListItem as hy_general_list_item };
+
+//# sourceMappingURL=hy-general-list_2.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"hy-general-list.hy-general-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-general-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &--style-grid {\n    display: flex;\n    display: grid;\n    gap: 32px 0;\n\n    @media screen and (min-width: 768px) {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 32px 24px;\n    }\n\n    @media screen and (min-width: 1024px) {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    @media screen and (min-width: 1920px) {\n      gap: 32px;\n    }\n\n    li {\n      background-color: var(--grayscale-background-box);\n      width: 100%;\n      height: auto;\n    }\n  }\n}\n","export interface ListItemValue {\n  description: string;\n  id: string;\n  imageAlt: string;\n  imageUrl: string;\n  label: string;\n  subLabel: string;\n  date: string;\n  tag: string;\n  title: string;\n  type: string;\n  url: string;\n  target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-general-list\",\n  styleUrl: \"hy-general-list.scss\",\n  shadow: false,\n})\nexport class HyGeneralList {\n  @Prop() type: GeneralListTypes = GeneralListTypes.list;\n  @Prop() blank: boolean = true;\n  @Prop() dataItems: ListItemValue[] | string;\n  @Prop() truncateDescription: boolean = true;\n  @Prop() truncateLimit: number = 140;\n  private _dataItems: ListItemValue[];\n  @Element() el: HTMLElement;\n  @State() hasSidebar: boolean = false;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n\n    const hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.hasSidebar = true;\n      }\n    }\n  }\n\n  @Watch(\"dataItems\")\n  async watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (newValue !== oldValue) {\n      this._dataItems = await jsonParserWorker(this.dataItems);\n    }\n  }\n\n  render() {\n    const classAttributes = [\n      \"hy-general-list\",\n      this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n      `hy-general-list--style-${this.type}`,\n    ].join(\" \");\n\n    let listData = this._dataItems;\n    if (typeof this._dataItems === \"object\") {\n      listData = Object.values(this._dataItems);\n    }\n\n    function truncate(str, n) {\n      return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n    }\n\n    return (\n      <Host>\n        <ul class={classAttributes}>\n          {listData &&\n            listData.map((item) => (\n              <li>\n                <hy-general-list-item\n                  has-sidebar={this.hasSidebar}\n                  target={this.blank}\n                  data-location={item.url}\n                  description={\n                    this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n                  }\n                  id={item.id}\n                  imageAlt={item.imageAlt}\n                  imageUrl={item.imageUrl}\n                  item-title={item.title}\n                  label={item.label}\n                  sub-label={item.subLabel}\n                  tag={item.tag}\n                  date={item.date}\n                  type={item.type}\n                  url={item.url}\n                  list-style={this.type}\n                ></hy-general-list-item>\n              </li>\n            ))}\n        </ul>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  height: 100%;\n}\n\n.hy-general-list-item {\n  font-family: var(--main-font-family);\n  margin-bottom: 1rem;\n  height: 100%;\n\n  &--style-grid {\n    .hy-general-list-item__link {\n      height: 100%;\n\n      @include breakpoint($narrow) {\n        flex-direction: column;\n      }\n    }\n\n    .hy-general-list-item__image-container {\n      border: 1px solid var(--grayscale-light);\n      max-width: 100%;\n\n      @include breakpoint(max-width 479px) {\n        display: flex;\n      }\n    }\n\n    .hy-general-list-item__text-container {\n      @include breakpoint($wide) {\n        padding: 12px 12px 32px 12px;\n      }\n      @include breakpoint($extrawide) {\n        padding: 12px 12px 32px 12px;\n      }\n    }\n  }\n}\n\n.hy-genenral-list-item__meta {\n  @include font-size(12px, 14px);\n  @include font-weight($semibold);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.1px;\n  text-transform: uppercase;\n  margin: 9px 0;\n\n  &__date {\n    @include font-weight($regular);\n    margin-left: 4px;\n  }\n}\n\n.hy-general-list-item__link {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  text-decoration: none;\n\n  @include breakpoint($narrow) {\n    flex-direction: row;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    .hy-general-list-item__type span {\n      background-color: var(--brand-main);\n    }\n\n    .hy-general-list-item__title {\n      color: var(--brand-main);\n      text-decoration: underline;\n    }\n  }\n}\n\n.hy-general-list-item__image-container {\n  display: flex;\n  justify-content: stretch;\n  margin: 0;\n  position: relative;\n  width: 100%;\n\n  @include breakpoint(max-width 479px) {\n    display: none;\n  }\n\n  @include breakpoint($narrow) {\n    max-width: 35.7%;\n  }\n\n  @include breakpoint($wide) {\n    max-width: 23.13%;\n  }\n\n  @include breakpoint($extrawide) {\n    max-width: 23.03%;\n  }\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: var(--aspectRatio);\n  }\n\n  img {\n    bottom: 0;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 100%;\n  }\n}\n\n.hy-general-list-item__image {\n  background-color: #ececec;\n  width: 100%;\n  height: 100%;\n}\n\n.hy-general-list-item__type {\n  background-color: var(--grayscale-background-box);\n  padding-top: 16px;\n  z-index: 10;\n\n  @include breakpoint($narrow) {\n    background-color: transparent;\n    left: -8px;\n    padding-top: 0;\n    position: absolute;\n    top: 16px;\n  }\n\n  &__major {\n    @include font-size(12px, 14px);\n    @include font-weight($bold);\n    background-color: var(--grayscale-black);\n    color: var(--grayscale-white);\n    letter-spacing: -0.1px;\n    padding: 5px 8px;\n    text-transform: uppercase;\n    align-self: baseline;\n    margin-left: -8px;\n\n    @include breakpoint($narrow) {\n      margin-left: 0;\n    }\n  }\n\n  &__sub {\n    @include font-size(12px, 14px);\n    background-color: var(--grayscale-black);\n    color: var(--grayscale-white);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.1px;\n    padding: 5px 8px;\n    margin-left: -8px;\n  }\n}\n\n.hy-general-list-item__text-container {\n  background-color: var(--grayscale-background-box);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 16px 12px;\n\n  @include breakpoint($wide) {\n    padding: 14px 32px 24px 24px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 20px 104px 32px 32px;\n  }\n}\n\n.hy-general-list-item__title {\n  @include font-size(18px, 22px);\n  @include font-weight($bold);\n  color: var(--brand-main-nearly-black);\n  letter-spacing: -0.45px;\n  margin-bottom: 8px;\n  margin-top: 0;\n\n  @include breakpoint($xlarge) {\n    @include font-size(20px, 24px);\n    letter-spacing: -0.5px;\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(20px, 24px);\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n.hy-general-list-item__description {\n  @include font-size(15px, 20px);\n  color: var(--grayscale-dark);\n  display: none;\n  letter-spacing: -0.09px;\n  margin: 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 18px);\n    display: block;\n    letter-spacing: -0.08px;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(14px, 20px);\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(14px, 20px);\n    }\n  }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-general-list-item\",\n  styleUrl: \"hy-general-list-item.scss\",\n  shadow: false,\n})\nexport class HyGeneralListItem {\n  @Prop() hasSidebar: boolean = true;\n  @Prop() description?: string;\n  @Prop() imageAlt: string = \"\";\n  @Prop() imageUrl: string = null;\n  @Prop() disableLazy: boolean = false;\n  @Prop() itemTitle?: string;\n  @Prop() label?: string;\n  @Prop() subLabel: string = \"\";\n  @Prop() date: string = \"\";\n  @Prop() tag: string = \"\";\n  @Prop() type?: string;\n  @Prop() url?: string;\n  @Prop() listStyle?: string;\n  @Prop() target: boolean = true;\n\n  @Element() el: HTMLElement;\n\n  render() {\n    const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n    const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n    const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n    const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n    const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n      \" \"\n    );\n    const descriptionClassAttributes = [\n      \"hy-general-list-item__description\",\n      `hy-general-list-item__description__${sidebarClass}`,\n    ].join(\" \");\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    return (\n      <article class={classAttributes}>\n        <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n          {this.type && (\n            <div class=\"hy-general-list-item__type\">\n              <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n              <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n            </div>\n          )}\n          {this.imageUrl && (\n            <figure class={imageClassAttributes} style={aspectRatio}>\n              <img\n                loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                alt={this.imageAlt}\n                class=\"hy-general-list-item__image\"\n                src={this.imageUrl}\n              />\n            </figure>\n          )}\n          <div class={contentClassAttributes}>\n            {(this.tag || this.date) && (\n              <span class=\"hy-genenral-list-item__meta\">\n                {this.tag}\n                <span class=\"hy-genenral-list-item__meta__date\">\n                  {this.tag && \"|\"} {this.date}\n                </span>\n              </span>\n            )}\n            <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n            <p class={descriptionClassAttributes}>{this.description}</p>\n          </div>\n        </a>\n      </article>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-grid-container_3.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+import { n as GridColumns, o as GridColumnsSm, p as GridColumnsLg, q as GridAlignVariants } from './utils-a4ebfef1.js';
+
+const gridContainerCss = ":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-grid--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-grid--container{width:100%}}@media only screen and (min-width: 60rem){.hy-grid--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-grid--container{width:100%;max-width:75rem}}@media only screen and (min-width: 1601px){.hy-grid--container{width:100%;max-width:90rem}}";
+
+const GridContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-grid--container"];
+    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+GridContainer.style = gridContainerCss;
+
+const gridItemCss = ":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-grid-align__left{text-align:left}.hy-grid-align__right{text-align:right}.hy-grid-align__center{text-align:center;margin-left:auto;margin-right:auto}.hy-grid-justify{text-align:justify}.hy-grid-hidden-sm{display:none}.hy-grid__col-1,.hy-grid__col-2,.hy-grid__col-3,.hy-grid__col-4,.hy-grid__col-5,.hy-grid__col-6,.hy-grid__col-7,.hy-grid__col-8,.hy-grid__col-9,.hy-grid__col-10,.hy-grid__col-11,.hy-grid__col-12{width:98%}.hy-grid__col-1-sm{width:6.3333333333%}.hy-grid__col-2-sm{width:14.6666666667%}.hy-grid__col-3-sm{width:23%}.hy-grid__col-4-sm{width:31.3333333333%}.hy-grid__col-5-sm{width:39.6666666667%}.hy-grid__col-6-sm{width:48%}.hy-grid__col-7-sm{width:56.3333333333%}.hy-grid__col-8-sm{width:64.6666666667%}.hy-grid__col-9-sm{width:73%}.hy-grid__col-10-sm{width:81.3333333333%}.hy-grid__col-11-sm{width:89.6666666667%}.hy-grid__col-12-sm{width:98%}@media only screen and (min-width: 48em){.hy-grid__col-1{width:6.3333333333%}.hy-grid__col-2{width:14.6666666667%}.hy-grid__col-3{width:23%}.hy-grid__col-4{width:31.3333333333%}.hy-grid__col-5{width:39.6666666667%}.hy-grid__col-6{width:48%}.hy-grid__col-7{width:56.3333333333%}.hy-grid__col-8{width:64.6666666667%}.hy-grid__col-9{width:73%}.hy-grid__col-10{width:81.3333333333%}.hy-grid__col-11{width:89.6666666667%}.hy-grid__col-12{width:98%}.hidden-sm{display:block}}@media only screen and (min-width: 60em){.hy-grid__col-1-lg{width:6.3333333333%}.hy-grid__col-2-lg{width:14.6666666667%}.hy-grid__col-3-lg{width:23%}.hy-grid__col-4-lg{width:31.3333333333%}.hy-grid__col-5-lg{width:39.6666666667%}.hy-grid__col-6-lg{width:48%}.hy-grid__col-7-lg{width:56.3333333333%}.hy-grid__col-8-lg{width:64.6666666667%}.hy-grid__col-9-lg{width:73%}.hy-grid__col-10-lg{width:81.3333333333%}.hy-grid__col-11-lg{width:89.6666666667%}.hy-grid__col-12-lg{width:98%}}";
+
+const GridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.columns = GridColumns.default;
+    this.columnssm = GridColumnsSm.default;
+    this.columnslg = GridColumnsLg.default;
+    this.contentalign = GridAlignVariants.default;
+  }
+  render() {
+    const classAttributes = [
+      "hy-grid-item",
+      `hy-grid__col-${this.columnssm}-sm`,
+      `hy-grid__col-${this.columns}`,
+      `hy-grid__col-${this.columnslg}-lg`,
+      `hy-grid-align__${this.contentalign}`,
+    ];
+    return (h(Host, { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+GridItem.style = gridItemCss;
+
+const gridRowCss = ":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-grid__row{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;width:100%}.hy-grid__row>[class^=hy-grid-item]{float:left;margin:0.5rem 1%;min-height:0.125rem}@media (min-width: 30rem){.hy-grid__row>[class^=hy-grid-item]{margin:1%}}.hy-grid__row::after{content:\"\";display:table;clear:both}";
+
+const GridRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-grid__row"];
+    return (h(Host, { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+GridRow.style = gridRowCss;
+
+export { GridContainer as hy_grid_container, GridItem as hy_grid_item, GridRow as hy_grid_row };
+
+//# sourceMappingURL=hy-grid-container_3.entry.js.map

package/dist/esm/hy-grid-container_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-grid-container.hy-grid-item.hy-grid-row.entry.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,mmDAAmmD;;MCO/mD,aAAa;;;;EACxB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAE/C,QACE,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,eAAQ,CACJ,EACN;GACH;;;;AChBH,MAAM,WAAW,GAAG,y8FAAy8F;;MCQh9F,QAAQ;;;mBACY,WAAW,CAAC,OAAO;qBACf,aAAa,CAAC,OAAO;qBACrB,aAAa,CAAC,OAAO;wBACd,iBAAiB,CAAC,OAAO;;EAEnE,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,cAAc;MACd,gBAAgB,IAAI,CAAC,SAAS,KAAK;MACnC,gBAAgB,IAAI,CAAC,OAAO,EAAE;MAC9B,gBAAgB,IAAI,CAAC,SAAS,KAAK;MACnC,kBAAkB,IAAI,CAAC,YAAY,EAAE;KACtC,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACpC,eAAQ,CACH,EACP;GACH;;;;AC5BH,MAAM,UAAU,GAAG,uoDAAuoD;;MCO7oD,OAAO;;;;EAClB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACpC,eAAQ,CACH,EACP;GACH;;;;;;","names":[],"sources":["./src/components/grid-container/grid-container.scss?tag=hy-grid-container","./src/components/grid-container/grid-container.tsx","./src/components/grid-item/grid-item.scss?tag=hy-grid-item","./src/components/grid-item/grid-item.tsx","./src/components/grid-row/grid-row.scss?tag=hy-grid-row","./src/components/grid-row/grid-row.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-grid--container {\n  display: block;\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media only screen and (min-width: $narrow) {\n    width: 100%;\n  }\n\n  @media only screen and (min-width: $wide) {\n    width: 100%;\n    max-width: 60rem;\n  }\n\n  @media only screen and (min-width: $extrawide) {\n    width: 100%;\n    max-width: 75rem;\n  }\n\n  @media only screen and (min-width: $xlarge) {\n    width: 100%;\n    max-width: 90rem;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-grid-container\",\n  styleUrl: \"grid-container.scss\",\n  shadow: false,\n})\nexport class GridContainer {\n  render() {\n    const classAttributes = [\"hy-grid--container\"];\n\n    return (\n      <div class={classAttributes.join(\" \")}>\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-grid-align__left {\n  text-align: left;\n}\n\n.hy-grid-align__right {\n  text-align: right;\n}\n\n.hy-grid-align__center {\n  text-align: center;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hy-grid-justify {\n  text-align: justify;\n}\n\n.hy-grid-hidden-sm {\n  display: none;\n}\n\n// grid\n$width: 98%;\n$gutter: 2%;\n\n@media only screen and (min-width: $xlarge) {\n  $gutter: 3.5%;\n}\n\n$narrow: 30em; // 480px\n$medium: 48em; // 768px\n$wide: 60em; // 960px\n\n.hy-grid__col-1,\n.hy-grid__col-2,\n.hy-grid__col-3,\n.hy-grid__col-4,\n.hy-grid__col-5,\n.hy-grid__col-6,\n.hy-grid__col-7,\n.hy-grid__col-8,\n.hy-grid__col-9,\n.hy-grid__col-10,\n.hy-grid__col-11,\n.hy-grid__col-12 {\n  width: $width;\n}\n\n.hy-grid__col-1-sm {\n  width: calc($width / 12) - calc($gutter * 11 / 12);\n}\n.hy-grid__col-2-sm {\n  width: calc($width / 6) - calc($gutter * 10 / 12);\n}\n.hy-grid__col-3-sm {\n  width: calc($width / 4) - calc($gutter * 9 / 12);\n}\n.hy-grid__col-4-sm {\n  width: calc($width / 3) - calc($gutter * 8 / 12);\n}\n.hy-grid__col-5-sm {\n  width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n}\n.hy-grid__col-6-sm {\n  width: calc($width / 2) - calc($gutter * 6 / 12);\n}\n.hy-grid__col-7-sm {\n  width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n}\n.hy-grid__col-8-sm {\n  width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n}\n.hy-grid__col-9-sm {\n  width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n}\n.hy-grid__col-10-sm {\n  width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n}\n.hy-grid__col-11-sm {\n  width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n}\n.hy-grid__col-12-sm {\n  width: $width;\n}\n\n@media only screen and (min-width: $medium) {\n  .hy-grid__col-1 {\n    width: calc($width / 12) - calc($gutter * 11 / 12);\n  }\n  .hy-grid__col-2 {\n    width: calc($width / 6) - calc($gutter * 10 / 12);\n  }\n  .hy-grid__col-3 {\n    width: calc($width / 4) - calc($gutter * 9 / 12);\n  }\n  .hy-grid__col-4 {\n    width: calc($width / 3) - calc($gutter * 8 / 12);\n  }\n  .hy-grid__col-5 {\n    width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n  }\n  .hy-grid__col-6 {\n    width: calc($width / 2) - calc($gutter * 6 / 12);\n  }\n  .hy-grid__col-7 {\n    width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n  }\n  .hy-grid__col-8 {\n    width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n  }\n  .hy-grid__col-9 {\n    width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n  }\n  .hy-grid__col-10 {\n    width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n  }\n  .hy-grid__col-11 {\n    width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n  }\n  .hy-grid__col-12 {\n    width: $width;\n  }\n\n  .hidden-sm {\n    display: block;\n  }\n}\n\n@media only screen and (min-width: $wide) {\n  .hy-grid__col-1-lg {\n    width: calc($width / 12) - calc($gutter * 11 / 12);\n  }\n  .hy-grid__col-2-lg {\n    width: calc($width / 6) - calc($gutter * 10 / 12);\n  }\n  .hy-grid__col-3-lg {\n    width: calc($width / 4) - calc($gutter * 9 / 12);\n  }\n  .hy-grid__col-4-lg {\n    width: calc($width / 3) - calc($gutter * 8 / 12);\n  }\n  .hy-grid__col-5-lg {\n    width: calc($width / calc(12 / 5)) - calc($gutter * 7 / 12);\n  }\n  .hy-grid__col-6-lg {\n    width: calc($width / 2) - calc($gutter * 6 / 12);\n  }\n  .hy-grid__col-7-lg {\n    width: calc($width / calc(12 / 7)) - calc($gutter * 5 / 12);\n  }\n  .hy-grid__col-8-lg {\n    width: calc($width / calc(12 / 8)) - calc($gutter * 4 / 12);\n  }\n  .hy-grid__col-9-lg {\n    width: calc($width / calc(12 / 9)) - calc($gutter * 3 / 12);\n  }\n  .hy-grid__col-10-lg {\n    width: calc($width / calc(12 / 10)) - calc($gutter * 2 / 12);\n  }\n  .hy-grid__col-11-lg {\n    width: calc($width / calc(12 / 11)) - calc($gutter * 1 / 12);\n  }\n  .hy-grid__col-12-lg {\n    width: $width;\n  }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {GridColumns, GridColumnsSm, GridColumnsLg, GridAlignVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-grid-item\",\n  styleUrl: \"grid-item.scss\",\n  shadow: false,\n})\nexport class GridItem {\n  @Prop() columns: GridColumns = GridColumns.default;\n  @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;\n  @Prop() columnslg: GridColumnsLg = GridColumnsLg.default;\n  @Prop() contentalign: GridAlignVariants = GridAlignVariants.default;\n\n  render() {\n    const classAttributes = [\n      \"hy-grid-item\",\n      `hy-grid__col-${this.columnssm}-sm`,\n      `hy-grid__col-${this.columns}`,\n      `hy-grid__col-${this.columnslg}-lg`,\n      `hy-grid-align__${this.contentalign}`,\n    ];\n\n    return (\n      <Host class={classAttributes.join(\" \")}>\n        <slot />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-grid__row {\n  align-items: stretch;\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1 1 auto;\n  position: relative;\n  width: 100%;\n}\n\n.hy-grid__row > [class^=\"hy-grid-item\"] {\n  float: left;\n  margin: 0.5rem 1%;\n  min-height: 0.125rem;\n\n  @include breakpoint($narrow) {\n    margin: 1%;\n  }\n}\n\n.hy-grid__row::after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-grid-row\",\n  styleUrl: \"grid-row.scss\",\n  shadow: false,\n})\nexport class GridRow {\n  render() {\n    const classAttributes = [\"hy-grid__row\"];\n    return (\n      <Host class={classAttributes.join(\" \")}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}