@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

package/components/hy-checkbox.js

@@ -1,57 +1,56 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './index3.js';
 import { b as CheckboxVariants } from './utils.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const hyCheckboxCss = ":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-checkbox{display:inline-block;position:relative;margin-right:1rem}.hy-checkbox__checkmark{border-color:var(--link-blue);border-style:solid inset solid solid;border-width:2px;height:20px;margin-right:6px;min-width:20px;min-height:20px;position:relative;width:20px}.hy-checkbox__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox__checkmark::before{background-color:var(--grayscale-white);content:\"\";height:10px;position:absolute;right:0;-webkit-transform:rotate(40deg) translate(6%, -55%);transform:rotate(40deg) translate(6%, -55%);visibility:hidden;width:8px}.hy-checkbox__label{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.4px;text-align:left}@media (min-width: 30rem){.hy-checkbox__label{font-size:1rem;line-height:20px}}.hy-checkbox__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox__checkbox:checked+label{color:var(--grayscale-black)}.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark svg,.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark::before{visibility:visible}.hy-checkbox__checkbox:hover{cursor:pointer}.hy-checkbox__checkbox:hover+label{color:var(--brand-main)}.hy-checkbox__checkbox:focus+label{outline-offset:1px;outline:2px solid var(--link-blue)}.hy-checkbox--button{display:inline-block;margin-right:4px;position:relative}.hy-checkbox--button__label{font-size:0.75rem;line-height:14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0.5px 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;letter-spacing:-0.3px;padding:12px 15px 12px 13px;z-index:1}@media (min-width: 60rem){.hy-checkbox--button__label{font-size:0.875rem;line-height:18px;letter-spacing:-0.4px;padding:9px 8px 9px 8px}}.hy-checkbox--button__checkmark{position:absolute;right:12px;top:0;bottom:0}@media (min-width: 60rem){.hy-checkbox--button__checkmark{right:10px;bottom:calc(50% + 10px)}}.hy-checkbox--button__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox--button__label-icon{height:13px;position:absolute;width:12px}@media (min-width: 60rem){.hy-checkbox--button__label-icon{padding:10px;right:-6px;top:calc(50% + 5px)}}.hy-checkbox--button__label-icon svg{background:var(--grayscale-white);height:12px;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:12px}.hy-checkbox--button__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox--button__checkbox:checked+label{border:1px solid var(--grayscale-black);color:var(--grayscale-black);padding:12px 15px 12px 13px}@media (min-width: 60rem){.hy-checkbox--button__checkbox:checked+label{border:2px solid var(--grayscale-black);padding:8px 26px 8px 7px}}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark .hy-checkbox--button__label-icon{background:var(--grayscale-white)}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark svg{visibility:visible}.hy-checkbox--button__checkbox:hover{cursor:pointer}.hy-checkbox--button__checkbox:focus+label{outline-offset:1px;outline:1px solid var(--link-blue)}";
+const HyCheckboxStyle0 = hyCheckboxCss;
 
-const HyCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class HyCheckbox extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.checkboxId = undefined;
-    this.checkboxValue = undefined;
-    this.checkboxLabel = undefined;
-    this.checkboxChecked = false;
-    this.variant = CheckboxVariants.default;
-  }
-  render() {
-    switch (this.variant) {
-      case "button":
-        return (h(Host, { class: "hy-checkbox--button" }, h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` }, this.checkboxLabel, h("span", { class: "hy-checkbox--button__checkmark" }, h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" })))));
-      default:
-        return (h(Host, { class: "hy-checkbox" }, h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` }, h("span", { class: "hy-checkbox__checkmark" }, h("hy-icon", { class: "hy-checkbox__label-icon", icon: "hy-icon-done", size: 23, "aria-hidden": "true" })), this.checkboxLabel)));
+const HyCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class HyCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.checkboxId = undefined;
+        this.checkboxValue = undefined;
+        this.checkboxLabel = undefined;
+        this.checkboxChecked = false;
+        this.variant = CheckboxVariants.default;
     }
-  }
-  static get style() { return hyCheckboxCss; }
+    render() {
+        switch (this.variant) {
+            case "button":
+                return (h(Host, { class: "hy-checkbox--button" }, h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` }, this.checkboxLabel, h("span", { class: "hy-checkbox--button__checkmark" }, h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" })))));
+            default:
+                return (h(Host, { class: "hy-checkbox" }, h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` }, h("span", { class: "hy-checkbox__checkmark" }, h("hy-icon", { class: "hy-checkbox__label-icon", icon: "hy-icon-done", size: 23, "aria-hidden": "true" })), this.checkboxLabel)));
+        }
+    }
+    static get style() { return HyCheckboxStyle0; }
 }, [0, "hy-checkbox", {
-    "checkboxId": [8, "checkbox-id"],
-    "checkboxValue": [8, "checkbox-value"],
-    "checkboxLabel": [1, "checkbox-label"],
-    "checkboxChecked": [4, "checkbox-checked"],
-    "variant": [1]
-  }]);
+        "checkboxId": [8, "checkbox-id"],
+        "checkboxValue": [8, "checkbox-value"],
+        "checkboxLabel": [1, "checkbox-label"],
+        "checkboxChecked": [4, "checkbox-checked"],
+        "variant": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-checkbox", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyCheckbox$1);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-checkbox", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyCheckbox$1);
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyCheckbox = HyCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyCheckbox, defineCustomElement };
-
-//# sourceMappingURL=hy-checkbox.js.map

package/components/hy-collaboration.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyCollaboration extends Components.HyCollaboration, HTMLElement {}
 export const HyCollaboration: {
-  prototype: HyCollaboration;
-  new (): HyCollaboration;
+    prototype: HyCollaboration;
+    new (): HyCollaboration;
 };
 /**
  * Used to define this component and all nested components recursively.

package/components/hy-collaboration.js

@@ -1,51 +1,50 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const hyCollaborationCss = ":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-collaboration{border-bottom:1px solid var(--grayscale-dark);padding:32px 0}@media (min-width: 60rem){.hy-collaboration{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:grid;grid-template-columns:fit-content(calc(43.75% - 60px)) 1fr;gap:60px}}@media (min-width: 75.0625rem){.hy-collaboration{grid-template-columns:fit-content(calc(43% - 60px)) 1fr;padding:40px 0}}@media (min-width: 87.5rem){.hy-collaboration{grid-template-columns:fit-content(calc(42.5% - 60px)) 1fr}}@media (min-width: 1601px){.hy-collaboration{grid-template-columns:fit-content(calc(41.85% - 60px)) 1fr}}@media (min-width: 1750px){.hy-collaboration{grid-template-columns:fit-content(calc(41% - 60px)) 1fr}}@media (min-width: 120.0625rem){.hy-collaboration{grid-template-columns:fit-content(428px) 1fr}}.hy-collaboration__logo{margin:0 0 32px;padding:0}@media (min-width: 60rem){.hy-collaboration__logo{margin:0}}.hy-collaboration__logo img{max-width:75%;max-height:200px}@media (min-width: 30rem){.hy-collaboration__logo img{max-width:50%}}@media (min-width: 60rem){.hy-collaboration__logo img{max-width:100%;max-height:260px}}.hy-collaboration__description{font-size:0.9375rem;line-height:22px;font-family:var(--main-font-family);margin:0 0 12px}@media (min-width: 30rem){.hy-collaboration__description{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.hy-collaboration__description{font-size:1.0625rem;line-height:26px}}.hy-collaboration__link{font-size:0.9375rem;line-height:22px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width: 30rem){.hy-collaboration__link{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.hy-collaboration__link{font-size:1.0625rem;line-height:26px}}.hy-collaboration__link span{margin-left:4px}.hy-collaboration__link span svg{fill:var(--link-blue)}";
+const HyCollaborationStyle0 = hyCollaborationCss;
 
-const HyCollaboration$1 = /*@__PURE__*/ proxyCustomElement(class HyCollaboration extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.textDescription = undefined;
-    this.linkUrl = undefined;
-    this.linkTitle = undefined;
-    this.imageUrl = undefined;
-    this.imageAltText = undefined;
-  }
-  render() {
-    return (h("div", { class: "hy-collaboration" }, h("figure", { class: "hy-collaboration__logo", role: "complementary" }, h("img", { src: this.imageUrl, alt: this.imageAltText })), h("div", { class: "hy-collaboration__content" }, h("p", { class: "hy-collaboration__description" }, this.textDescription), this.linkUrl && (h("a", { href: this.linkUrl, class: "hy-collaboration__link" }, this.linkTitle, h("span", { "aria-hidden": "true" }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 10 })))))));
-  }
-  static get style() { return hyCollaborationCss; }
+const HyCollaboration$1 = /*@__PURE__*/ proxyCustomElement(class HyCollaboration extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.textDescription = undefined;
+        this.linkUrl = undefined;
+        this.linkTitle = undefined;
+        this.imageUrl = undefined;
+        this.imageAltText = undefined;
+    }
+    render() {
+        return (h("div", { key: 'd71ec265f82759f14a52fb692530e173749e1ac5', class: "hy-collaboration" }, h("figure", { key: 'a04c346ee80865a54923f3e4a7115d30cd5dcc30', class: "hy-collaboration__logo", role: "complementary" }, h("img", { key: '8aa72fbe08278cd7b24801fe799e67c9bd0e4170', src: this.imageUrl, alt: this.imageAltText })), h("div", { key: '00a70470cbc0abc9a682802fdcf987b2689f6164', class: "hy-collaboration__content" }, h("p", { key: 'ccf731ce8087dbc896b70a3218e019973d334d4d', class: "hy-collaboration__description" }, this.textDescription), this.linkUrl && (h("a", { key: '3838a2e40eda3016ab5154740dafab5714c2b77a', href: this.linkUrl, class: "hy-collaboration__link" }, this.linkTitle, h("span", { key: 'deb94012543792258aa95d54f4068b21bf421f71', "aria-hidden": "true" }, h("hy-icon", { key: '327f25de2b197afad8c9bfbd4c1123e95f09fe70', icon: "hy-icon-arrow-right", size: 10 })))))));
+    }
+    static get style() { return HyCollaborationStyle0; }
 }, [0, "hy-collaboration", {
-    "textDescription": [1, "text-description"],
-    "linkUrl": [1, "link-url"],
-    "linkTitle": [1, "link-title"],
-    "imageUrl": [1, "image-url"],
-    "imageAltText": [1, "image-alt-text"]
-  }]);
+        "textDescription": [1, "text-description"],
+        "linkUrl": [1, "link-url"],
+        "linkTitle": [1, "link-title"],
+        "imageUrl": [1, "image-url"],
+        "imageAltText": [1, "image-alt-text"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-collaboration", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-collaboration":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyCollaboration$1);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-collaboration", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-collaboration":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyCollaboration$1);
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyCollaboration = HyCollaboration$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyCollaboration, defineCustomElement };
-
-//# sourceMappingURL=hy-collaboration.js.map

package/components/hy-content-list-item.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyContentListItem extends Components.HyContentListItem, HTMLElement {}
 export const HyContentListItem: {
-  prototype: HyContentListItem;
-  new (): HyContentListItem;
+    prototype: HyContentListItem;
+    new (): HyContentListItem;
 };
 /**
  * Used to define this component and all nested components recursively.

package/components/hy-content-list-item.js

@@ -4,5 +4,3 @@ const HyContentListItem = HyContentLstItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyContentListItem, defineCustomElement };
-
-//# sourceMappingURL=hy-content-list-item.js.map

package/components/hy-content-list-item2.js

@@ -1,111 +1,110 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { c as CourseVariants, d as CourseStateVariants } from './utils.js';
 import { j as jsonParserWorker } from './globalScript.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './hy-tag2.js';
 
 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}";
+const HyContentListItemStyle0 = hyContentListItemCss;
 
 let keys = {
-  enter: "Enter",
+    enter: "Enter",
 };
-const HyContentLstItem = /*@__PURE__*/ proxyCustomElement(class HyContentLstItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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");
+const HyContentLstItem = /*@__PURE__*/ proxyCustomElement(class HyContentLstItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        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;
     }
-  }
-  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 this; }
-  static get style() { return hyContentListItemCss; }
+    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", { key: 'c168c469066896d82a742d2b41757ef358abab1f', class: classAttributes, tabindex: "0" }, h("div", { key: '413af19dd1cb731436cb978cc21592f193995b24', class: classItemName }, this.courseName), h("div", { key: 'c248fd0d9320d692a1bfe731d2a6d87ee61fd31d', class: "hy-content-list-item--metadata" }, this.isCancelled && (h("div", { key: '0e501f73f8686fc58e6884dd23a0e62c4bc1fd9b', class: classItemCancelled }, h("span", { key: '7f901eed6ccf8e596db3239384ec6e07c11303da' }, this.cancelledLabel))), h("div", { key: '90b7ebf618c9157f588368b980a7be00048e03f6', class: "hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first" }, h("span", { key: '1c7a3004f02c93f3e3af52238afe2ccb8abd6cdc' }, 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", { key: 'dc0b9db667e3522626cfad8b00860ca47b13581b', class: "hy-content-list-item--tags" }, this._courseTags.map((x) => {
+                return h("hy-tag", null, x.name);
+            }))), this.isCancelled && (h("div", { key: 'cfd0e329da0b4edfc3a798471abf2fdcd25f680c', class: "cancelled mobile" }, h("span", { key: '25a4557562260d23fa3f152e6c281f25c35a08da' }, this.cancelledLabel))), h("div", { key: 'e4ddeb0e46c40e030318f94e0d54e97c177dc005', class: "hy-content-list-item--link" }, h("a", { key: '0d961b9ea7eb6d0b7779e8d2238bd8b799c18ad6', href: this.courseEnrollmentLink, target: target, "aria-label": ariaLabel, class: "hy-content-list-item--link--link", tabindex: "-1" }, h("span", { key: '6bea55ccb5c176b89736cdd6bf09befa6e865623', class: "label" }, this.courseLinkLabel), h("span", { key: '508af5bd51514290206054fc086313c1c6754f79', class: "icon-wrapper" }, h("div", { key: '211b7d1607b403d360dbcb2ac3d1b775738ec2ec', class: "icon" }, h("hy-icon", { key: '61a3254e5f9046365ff527ca4d978ed428adab25', icon: "hy-icon-arrow-to-right", size: 40 })))))),
+        ];
+    }
+    get el() { return this; }
+    static get style() { return HyContentListItemStyle0; }
 }, [0, "hy-content-list-item", {
-    "variant": [1],
-    "stateVariant": [1, "state-variant"],
-    "courseCode": [1, "course-code"],
-    "courseName": [1, "course-name"],
-    "isCancelled": [4, "is-cancelled"],
-    "cancelledLabel": [1, "cancelled-label"],
-    "courseCredits": [1, "course-credits"],
-    "courseTags": [1, "course-tags"],
-    "courseStartDate": [1, "course-start-date"],
-    "courseEndDate": [1, "course-end-date"],
-    "formattedTimeRange": [1, "formatted-time-range"],
-    "courseStudyFormat": [1, "course-study-format"],
-    "courseOrganisation": [1, "course-organisation"],
-    "courseEnrollmentLink": [1, "course-enrollment-link"],
-    "courseTeachingLanguage": [1, "course-teaching-language"],
-    "courseLinkLabel": [1, "course-link-label"]
-  }, [[0, "keydown", "handleKeyDown"]]]);
+        "variant": [1],
+        "stateVariant": [1, "state-variant"],
+        "courseCode": [1, "course-code"],
+        "courseName": [1, "course-name"],
+        "isCancelled": [4, "is-cancelled"],
+        "cancelledLabel": [1, "cancelled-label"],
+        "courseCredits": [1, "course-credits"],
+        "courseTags": [1, "course-tags"],
+        "courseStartDate": [1, "course-start-date"],
+        "courseEndDate": [1, "course-end-date"],
+        "formattedTimeRange": [1, "formatted-time-range"],
+        "courseStudyFormat": [1, "course-study-format"],
+        "courseOrganisation": [1, "course-organisation"],
+        "courseEnrollmentLink": [1, "course-enrollment-link"],
+        "courseTeachingLanguage": [1, "course-teaching-language"],
+        "courseLinkLabel": [1, "course-link-label"]
+    }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-content-list-item", "hy-icon", "hy-tag"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-content-list-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyContentLstItem);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "hy-tag":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-content-list-item", "hy-icon", "hy-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-content-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyContentLstItem);
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "hy-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { HyContentLstItem as H, defineCustomElement as d };
-
-//# sourceMappingURL=hy-content-list-item2.js.map

package/components/hy-content-list.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyContentList extends Components.HyContentList, HTMLElement {}
 export const HyContentList: {
-  prototype: HyContentList;
-  new (): HyContentList;
+    prototype: HyContentList;
+    new (): HyContentList;
 };
 /**
  * Used to define this component and all nested components recursively.