@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.43

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

@@ -1,6 +1,6 @@
 let timeout = null;
 let delay = 250;
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { jsonParserWorker } from '../../global/globalScript';
 import { CtaLinkButtonVariants, HeroColorVariant, HeroSizeVariant, HeroGroupTypeVariant, HeroTypeVariant, } from '../../utils/utils';
 export class HyHero {
@@ -9,10 +9,17 @@ export class HyHero {
     this.heroGroupType = HeroGroupTypeVariant.default;
     this.colorVariant = HeroColorVariant.blue;
     this.sizeVariant = HeroSizeVariant.large;
+    this.image = undefined;
     this.imageAltText = '';
     this.disableLazy = false;
     this.hasShortcuts = false;
+    this.heading = undefined;
+    this.description = undefined;
+    this.url = undefined;
+    this.urlTitle = undefined;
+    this.scLabel = undefined;
     this.isExternal = false;
+    this.sourceSet = undefined;
   }
   async componentWillLoad() {
     this._sourceSet = await jsonParserWorker(this.sourceSet);
@@ -80,334 +87,314 @@ export class HyHero {
       });
     };
     if (heroTypeValue === 'front_page') {
-      return (h(Host, null,
-        h("div", { class: hyHeroClasses.join(' ') },
-          h("div", { class: `hy-hero__container` },
-            h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
-              (this._sourceSet ? (h("picture", null,
-                this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))),
-                h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image })))),
-            h("div", { class: `hy-hero__spacer-box` }),
-            h("div", { class: `hy-hero__content-container` },
-              h("div", { class: `hy-hero__content` },
-                h("div", { class: `hy-hero__title-container` },
-                  h("h2", { innerHTML: this.heading, class: heroTitleClasses })),
-                this.description && h("p", { class: `hy-hero__description` }, this.description),
-                this.url && (h("div", { class: `hy-hero__actions` },
-                  h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))),
-        h("hy-box", { mb: "2, 2, 1, 1" })));
+      return (h(Host, null, h("div", { class: hyHeroClasses.join(' ') }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
+        (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))), h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image })))), h("div", { class: `hy-hero__spacer-box` }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
     }
-    return (h(Host, null,
-      h("div", { class: hyHeroClasses.join(' ') },
-        h("div", { class: `hy-hero__container` },
-          h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
-            (this._sourceSet ? (h("picture", null,
-              this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))),
-              h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image })))),
-          h("div", { class: `hy-hero__content-container` },
-            h("div", { class: `hy-hero__content` },
-              h("div", { class: `hy-hero__title-container` },
-                h("h2", { innerHTML: this.heading, class: heroTitleClasses })),
-              this.description && h("p", { class: `hy-hero__description` }, this.description),
-              this.url && (h("div", { class: `hy-hero__actions` },
-                h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))),
-      h("hy-box", { mb: "2, 2, 1, 1" })));
+    return (h(Host, null, h("div", { class: hyHeroClasses.join(' ') }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
+      (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))), h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAltText, class: `hy-image__image`, src: this.image })))), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
   }
   static get is() { return "hy-hero"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-hero.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-hero.css"]
-  }; }
-  static get properties() { return {
-    "heroType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HeroTypeVariant",
-        "resolved": "HeroTypeVariant.front_page | HeroTypeVariant.group_landing | HeroTypeVariant.landing | HeroTypeVariant.minor_landing",
-        "references": {
-          "HeroTypeVariant": {
-            "location": "import",
-            "path": "../../utils/utils"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-hero.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-hero.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heroType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeroTypeVariant",
+          "resolved": "HeroTypeVariant.front_page | HeroTypeVariant.group_landing | HeroTypeVariant.landing | HeroTypeVariant.minor_landing",
+          "references": {
+            "HeroTypeVariant": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hero-type",
+        "reflect": false,
+        "defaultValue": "HeroTypeVariant.landing"
       },
-      "attribute": "hero-type",
-      "reflect": false,
-      "defaultValue": "HeroTypeVariant.landing"
-    },
-    "heroGroupType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HeroGroupTypeVariant",
-        "resolved": "HeroGroupTypeVariant.default | HeroGroupTypeVariant.research",
-        "references": {
-          "HeroGroupTypeVariant": {
-            "location": "import",
-            "path": "../../utils/utils"
+      "heroGroupType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeroGroupTypeVariant",
+          "resolved": "HeroGroupTypeVariant.default | HeroGroupTypeVariant.research",
+          "references": {
+            "HeroGroupTypeVariant": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hero-group-type",
+        "reflect": false,
+        "defaultValue": "HeroGroupTypeVariant.default"
       },
-      "attribute": "hero-group-type",
-      "reflect": false,
-      "defaultValue": "HeroGroupTypeVariant.default"
-    },
-    "colorVariant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HeroColorVariant",
-        "resolved": "HeroColorVariant.black | HeroColorVariant.blue | HeroColorVariant.fp_white | HeroColorVariant.white",
-        "references": {
-          "HeroColorVariant": {
-            "location": "import",
-            "path": "../../utils/utils"
+      "colorVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeroColorVariant",
+          "resolved": "HeroColorVariant.black | HeroColorVariant.blue | HeroColorVariant.fp_white | HeroColorVariant.white",
+          "references": {
+            "HeroColorVariant": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-variant",
+        "reflect": false,
+        "defaultValue": "HeroColorVariant.blue"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "color-variant",
-      "reflect": false,
-      "defaultValue": "HeroColorVariant.blue"
-    },
-    "sizeVariant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HeroSizeVariant",
-        "resolved": "HeroSizeVariant.large | HeroSizeVariant.small",
-        "references": {
-          "HeroSizeVariant": {
-            "location": "import",
-            "path": "../../utils/utils"
+      "sizeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeroSizeVariant",
+          "resolved": "HeroSizeVariant.large | HeroSizeVariant.small",
+          "references": {
+            "HeroSizeVariant": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size-variant",
-      "reflect": false,
-      "defaultValue": "HeroSizeVariant.large"
-    },
-    "image": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "image",
-      "reflect": false
-    },
-    "imageAltText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size-variant",
+        "reflect": false,
+        "defaultValue": "HeroSizeVariant.large"
       },
-      "attribute": "image-alt-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "disableLazy": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "imageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-alt-text",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "disable-lazy",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hasShortcuts": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disableLazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-lazy",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hasShortcuts": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-shortcuts",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "has-shortcuts",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
       },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "urlTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url-title",
+        "reflect": false
       },
-      "attribute": "description",
-      "reflect": false
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "scLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sc-label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isExternal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-external",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "url",
-      "reflect": false
-    },
-    "urlTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "url-title",
-      "reflect": false
-    },
-    "scLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sc-label",
-      "reflect": false
-    },
-    "isExternal": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-external",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "sourceSet": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ImageSrcSet[] | string",
-        "resolved": "ImageSrcSet[] | string",
-        "references": {
-          "ImageSrcSet": {
-            "location": "local"
+      "sourceSet": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ImageSrcSet[] | string",
+          "resolved": "ImageSrcSet[] | string",
+          "references": {
+            "ImageSrcSet": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-hero/hy-hero.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "source-set",
-      "reflect": false
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "source-set",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }