@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/collection/components/hy-person-profile/person-profile.js

@@ -2,184 +2,183 @@ import { Host, h, Fragment } from "@stencil/core";
 import { CtaLinkButtonVariants } from "../../utils/utils";
 let timer;
 export class PersonProfile {
-  constructor() {
-    this.personDataJson = undefined;
-    this.showFullAboutText = undefined;
-    this.hideFullAboutText = undefined;
-    this.organizationItemsLabelText = undefined;
-    this.peopleFinderReturnLink = undefined;
-    this.peopleFinderReturnLabel = undefined;
-    this.isFullAboutTextHidden = false;
-    this.viewportSize = undefined;
-  }
-  componentWillLoad() {
-    this.viewportSize = window.innerWidth;
-  }
-  toggleShowFullAboutText() {
-    this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
-  }
-  disconnectedCallback() {
-    clearTimeout(timer);
-  }
-  render() {
-    const { name, job_title, additional_information, image_url, contact_information, organization_units, about, research, person_content, } = JSON.parse(this.personDataJson);
-    const { organizations, research_organizations } = organization_units.items;
-    const aboutDescriptionTextDestructured = about.description;
-    const aboutDescriptionLength = aboutDescriptionTextDestructured.length;
-    let trimmedAboutDescription = "";
-    if (aboutDescriptionLength > 650) {
-      if (this.isFullAboutTextHidden) {
-        const ellipsisTextArray = aboutDescriptionTextDestructured + "...";
-        trimmedAboutDescription = ellipsisTextArray;
-      }
-      else {
-        const ellipsisTextArray = aboutDescriptionTextDestructured.substring(0, 650) + "...";
-        trimmedAboutDescription = ellipsisTextArray;
-      }
+    constructor() {
+        this.personDataJson = undefined;
+        this.showFullAboutText = undefined;
+        this.hideFullAboutText = undefined;
+        this.organizationItemsLabelText = undefined;
+        this.peopleFinderReturnLink = undefined;
+        this.peopleFinderReturnLabel = undefined;
+        this.isFullAboutTextHidden = false;
+        this.viewportSize = undefined;
     }
-    window.addEventListener("resize", () => {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
+    componentWillLoad() {
         this.viewportSize = window.innerWidth;
-      }, 250);
-    });
-    const research_portal_title = `${research.research_portal_label}: ${name}`;
-    return (h(Host, null, h("section", { class: "hy-profile-page" }, h("a", { href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, h("hy-icon", { icon: "hy-icon-arrow-left", size: 24 }), h("span", null, this.peopleFinderReturnLabel)), h("section", { class: "hy-profile-page__section" }, h("div", { class: "hy-profile-page__person-information" }, h("div", null, h("h1", { class: "hy-profile-page__name" }, name), job_title && h("p", { class: "hy-profile-page__job-title" }, job_title), additional_information && (h("p", { class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (h("div", { class: "hy-profile-page__contact-information" }, contact_information.label && h("h2", null, contact_information.label), contact_information.items && (h("hy-person-profile-listing", { items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))), (organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (h("section", { class: "hy-profile-page__section" }, organization_units.label && h("h2", null, organization_units.label), organizations.items.length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" }, h("h3", null, organizations.label), h("ul", { class: "hy-profile-page__organizations" }, h("li", null, organizations.items.map((item, index) => {
-      return (h("span", null, index > 1 && h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index !== 0 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
-          "?researchOrganizations.id[]=" +
-          item.id, target: "_blank" }, item.name[organization_units.lang])))));
-    }))))), Object.keys(research_organizations.items).length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" }, h("h3", null, research_organizations.label), h("ul", { class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map((item, index) => {
-      return (h(Fragment, null, index > 1 && (h("ul", null, h("li", null, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
-          "?researchOrganizations.id[]=" +
-          item.id, target: "_blank" }, item.name[organization_units.lang])))))), index == 1 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
-          "?researchOrganizations.id[]=" +
-          item.id, target: "_blank" }, item.name[organization_units.lang])))));
-    }))))))))), about && aboutDescriptionLength !== 0 && (h("section", { class: "hy-profile-page__section" }, about.description && (h(Fragment, null, h("h2", null, about.label), h("div", { class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
-        ? trimmedAboutDescription
-        : about.description }))), aboutDescriptionLength > 650 && (h("button", { class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? "true" : "false"}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))), ((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (h("section", { class: "hy-profile-page__section" }, h("div", { class: "hy-profile-page__section__research_title" }, research.label && h("h2", null, research.label), research.label && person_content.research_url.length > 0 && (h("hy-cta-button", { "link-content": research_portal_title, "sc-label": research_portal_title, url: person_content.research_url, "is-external": "true", variant: CtaLinkButtonVariants.onWhiteBkgd }))), research.items && (h("hy-person-profile-listing", { items: research.items, col: "col-1", textSpacingTight: true, "is-research": true, inline: true })), person_content.research_url.length > 0 && (h("div", { class: "hy-profile-page__loader", role: "presentation" }, h("div", null), h("div", null), h("div", null), h("div", null))), person_content.research_url.length > 0 && this.viewportSize < 768 && (h("div", { class: "hy-profile-page__person-content-container" }, h("hy-accordion-container", { accordionid: "accordion-container-person-content" }, person_content.publications && (h("hy-accordion-item", { "data-accordion-id": "publications", accordiontitle: person_content.publications.label })), person_content.projects && (h("hy-accordion-item", { "data-accordion-id": "projects", accordiontitle: person_content.projects.label })), person_content.activities && (h("hy-accordion-item", { "data-accordion-id": "activities", accordiontitle: person_content.activities.label }))))), person_content.research_url.length > 0 && this.viewportSize >= 768 && (h("div", { class: "hy-profile-page__person-content-container" }, h("hy-tabs", { "tab-id": "tabs-container-person-content" }, person_content.publications && (h("hy-tabs-item", { "data-tab-id": "publications", "tab-title": person_content.publications.label })), person_content.projects && (h("hy-tabs-item", { "data-tab-id": "projects", "tab-title": person_content.projects.label })), person_content.activities && (h("hy-tabs-item", { "data-tab-id": "activities", "tab-title": person_content.activities.label }))))))))));
-  }
-  static get is() { return "hy-person-profile"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["person-profile.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["person-profile.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "personDataJson": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "person-data-json",
-        "reflect": false
-      },
-      "showFullAboutText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-full-about-text",
-        "reflect": false
-      },
-      "hideFullAboutText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-full-about-text",
-        "reflect": false
-      },
-      "organizationItemsLabelText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "organization-items-label-text",
-        "reflect": false
-      },
-      "peopleFinderReturnLink": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "people-finder-return-link",
-        "reflect": false
-      },
-      "peopleFinderReturnLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "people-finder-return-label",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isFullAboutTextHidden": {},
-      "viewportSize": {}
-    };
-  }
+    }
+    toggleShowFullAboutText() {
+        this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
+    }
+    disconnectedCallback() {
+        clearTimeout(timer);
+    }
+    render() {
+        const { name, job_title, additional_information, image_url, contact_information, organization_units, about, research, person_content, } = JSON.parse(this.personDataJson);
+        const { organizations, research_organizations } = organization_units.items;
+        const aboutDescriptionTextDestructured = about.description;
+        const aboutDescriptionLength = aboutDescriptionTextDestructured.length;
+        let trimmedAboutDescription = "";
+        if (aboutDescriptionLength > 650) {
+            if (this.isFullAboutTextHidden) {
+                const ellipsisTextArray = aboutDescriptionTextDestructured + "...";
+                trimmedAboutDescription = ellipsisTextArray;
+            }
+            else {
+                const ellipsisTextArray = aboutDescriptionTextDestructured.substring(0, 650) + "...";
+                trimmedAboutDescription = ellipsisTextArray;
+            }
+        }
+        window.addEventListener("resize", () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                this.viewportSize = window.innerWidth;
+            }, 250);
+        });
+        const research_portal_title = `${research.research_portal_label}: ${name}`;
+        return (h(Host, { key: '26cca765665a2d3f11d97e8054fadfad4696f9c0' }, h("section", { key: '845b5708c7fb4248f0239e542c860375bf55ca75', class: "hy-profile-page" }, h("a", { key: '1839e32f06cd57c33a0590d49b1827787c9074fb', href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" }, h("hy-icon", { key: '89d37dbff26e01546a11f12ca397309d6fb95a2d', icon: "hy-icon-arrow-left", size: 24 }), h("span", { key: '08618af5b013a1fcb745553861ba8c0321fb82dd' }, this.peopleFinderReturnLabel)), h("section", { key: '7d8e1832e34c827c9da482779c4a7c12dbe160ca', class: "hy-profile-page__section" }, h("div", { key: 'bb81e1bfcf16d54701053be753f6141062c100b0', class: "hy-profile-page__person-information" }, h("div", { key: '63aec4194435d6b9df4a952adca1c87dcc32ed74' }, h("h1", { key: '708f548c98e2a5e12341025a932d04ed4c831f4e', class: "hy-profile-page__name" }, name), job_title && h("p", { key: '237a1c79a7305641708984d6f208d18a9e8e1518', class: "hy-profile-page__job-title" }, job_title), additional_information && (h("p", { key: 'e9693617b6c54b215505ab5e923318ddda291e96', class: "hy-profile-page__additional-information" }, additional_information))), image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))), contact_information && (h("div", { key: '00e526d7f60375d6a9e251d037376d2570da4ed6', class: "hy-profile-page__contact-information" }, contact_information.label && h("h2", { key: 'be30afa8ec12e024d02fbea7c83b0ed28a54f4cb' }, contact_information.label), contact_information.items && (h("hy-person-profile-listing", { key: 'f0f7a8305b7adb60838e9a4f5c7459524ee0b756', items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))), (organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (h("section", { key: 'cf33c83493183b9dd251ef40fb4663585609bc8f', class: "hy-profile-page__section" }, organization_units.label && h("h2", { key: '7c7097de19aa4f5e3d3f80cb0cfe70faf14c9b91' }, organization_units.label), organizations.items.length > 0 && (h("section", { key: '268b5b49c06264449442faa8ea7103c594748f2c', class: "hy-profile-page__organization-units-section" }, h("h3", { key: '6195d95670f7bc6797ed0e980056308c6059b77e' }, organizations.label), h("ul", { key: '0d7bf767860d02e7f617b649aac60ea3e1efc418', class: "hy-profile-page__organizations" }, h("li", { key: 'a675a7a10ccdd1a8bde1eb91c658ac8ee2435be9' }, organizations.items.map((item, index) => {
+            return (h("span", null, index > 1 && h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), index !== 0 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+                    "?researchOrganizations.id[]=" +
+                    item.id, target: "_blank" }, item.name[organization_units.lang])))));
+        }))))), Object.keys(research_organizations.items).length > 0 && (h("section", { key: 'b23bb2b31642654f3e38071db4c65ac9599ac451', class: "hy-profile-page__organization-units-section" }, h("h3", { key: '87ddf2d986763187e0d41303aa31768edee2a38a' }, research_organizations.label), h("ul", { key: 'af44cbd3475d2a4b43b9a3c849fff001b71bd9f0', class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map((item, index) => {
+            return (h(Fragment, null, index > 1 && (h("ul", null, h("li", null, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 10 }), h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+                    "?researchOrganizations.id[]=" +
+                    item.id, target: "_blank" }, item.name[organization_units.lang])))))), index == 1 && (h("span", null, h("a", { href: organization_units.people_finder_path[organization_units.lang] +
+                    "?researchOrganizations.id[]=" +
+                    item.id, target: "_blank" }, item.name[organization_units.lang])))));
+        }))))))))), about && aboutDescriptionLength !== 0 && (h("section", { key: '4bd7d78352eaedb1acea3c751bda3976d006bf18', class: "hy-profile-page__section" }, about.description && (h(Fragment, { key: '53c28a052ff9ebfecd021b8f10c557e6c0e21fab' }, h("h2", { key: 'ddb10be5051bb8f5e5a5b335d64e9ef8f9183dd6' }, about.label), h("div", { key: 'ea0a9c8550f4ca9f6a49ebf8844c1a477d32a722', class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
+                ? trimmedAboutDescription
+                : about.description }))), aboutDescriptionLength > 650 && (h("button", { key: '5559676646883a1904d7f6a7698ca9eca02b5233', class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? "true" : "false"}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))), ((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (h("section", { key: 'c200ccd50431f4893b7bc98830bbd79934158005', class: "hy-profile-page__section" }, h("div", { key: '22af8b3951ff756f9e80862d14ff4ab8100ba97f', class: "hy-profile-page__section__research_title" }, research.label && h("h2", { key: '570beac29603426c99e416c212d89101e0adedde' }, research.label), research.label && person_content.research_url.length > 0 && (h("hy-cta-button", { key: '451b22793f69ae368f312991388b703d3445c26e', "link-content": research_portal_title, "sc-label": research_portal_title, url: person_content.research_url, "is-external": "true", variant: CtaLinkButtonVariants.onWhiteBkgd }))), research.items && (h("hy-person-profile-listing", { key: 'bdfbf9f7eebdcc50beee6556ed2df0cc74cd0a10', items: research.items, col: "col-1", textSpacingTight: true, "is-research": true, inline: true })), person_content.research_url.length > 0 && (h("div", { key: '309ad64b7990e54eb1987f17ea4854772fcbefe8', class: "hy-profile-page__loader", role: "presentation" }, h("div", { key: 'f7793fbae847ea06dcf72f2a4c7d36f7d9a70135' }), h("div", { key: '73ee944833ff3d586099ef903d438140ae9fdc69' }), h("div", { key: 'ee46c057e42750ad5231c3d77e046ef80418d15d' }), h("div", { key: '33cb1575f616d918d04b6faca980f982048d55d8' }))), person_content.research_url.length > 0 && this.viewportSize < 768 && (h("div", { key: 'ed59feaf3eedc5d5c634f12fdb46d57b2b1eb958', class: "hy-profile-page__person-content-container" }, h("hy-accordion-container", { key: '2d7577bc93f98512d8d54adbb337bfda4a204496', accordionid: "accordion-container-person-content" }, person_content.publications && (h("hy-accordion-item", { key: '796dc5f3b1d915f8309085c7eb83e24ab8a71668', "data-accordion-id": "publications", accordiontitle: person_content.publications.label })), person_content.projects && (h("hy-accordion-item", { key: 'b5f4687f7ba14940f0178a6a8d1cfff5c968f008', "data-accordion-id": "projects", accordiontitle: person_content.projects.label })), person_content.activities && (h("hy-accordion-item", { key: '03086eb1335b4a0c2ffdccc50189882cba07f812', "data-accordion-id": "activities", accordiontitle: person_content.activities.label }))))), person_content.research_url.length > 0 && this.viewportSize >= 768 && (h("div", { key: 'c6f808e0cf820015c27898133a2c31cc66fb274d', class: "hy-profile-page__person-content-container" }, h("hy-tabs", { key: '61bf12440da75aa90cd8503d6731534c6239d760', "tab-id": "tabs-container-person-content" }, person_content.publications && (h("hy-tabs-item", { key: '6e28d5213f877432102d03279b48cb8f6e3cd2ef', "data-tab-id": "publications", "tab-title": person_content.publications.label })), person_content.projects && (h("hy-tabs-item", { key: 'b6c8e65e8aeccee9c049ca2bb4a7433517342986', "data-tab-id": "projects", "tab-title": person_content.projects.label })), person_content.activities && (h("hy-tabs-item", { key: '7f33d522eed6d85f68576f3383ee78deeb267966', "data-tab-id": "activities", "tab-title": person_content.activities.label }))))))))));
+    }
+    static get is() { return "hy-person-profile"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["person-profile.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["person-profile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "personDataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "person-data-json",
+                "reflect": false
+            },
+            "showFullAboutText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-full-about-text",
+                "reflect": false
+            },
+            "hideFullAboutText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-full-about-text",
+                "reflect": false
+            },
+            "organizationItemsLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "organization-items-label-text",
+                "reflect": false
+            },
+            "peopleFinderReturnLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "people-finder-return-link",
+                "reflect": false
+            },
+            "peopleFinderReturnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "people-finder-return-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFullAboutTextHidden": {},
+            "viewportSize": {}
+        };
+    }
 }
-//# sourceMappingURL=person-profile.js.map

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

@@ -2,121 +2,121 @@ import { h } from "@stencil/core";
 import { ProcessFlowBoxVariants } from "../../utils/utils";
 import { jsonParserWorker } from "../../global/globalScript";
 export class Process {
-  constructor() {
-    this.headerstyle = "common";
-    this.numberTerm = undefined;
-    this.dataItems = undefined;
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor() {
+        this.headerstyle = "common";
+        this.numberTerm = undefined;
+        this.dataItems = undefined;
     }
-  }
-  render() {
-    /*
-    - Logic:
-    - 3 items: big
-    - 4 items: small
-    - 5 items: big
-    - 6 items: big
-    - 7 items: small
-    - 8 items: small
-    - 9 items: big
-    * */
-    const bigVariants = [3, 5, 6, 9];
-    const processVariant = bigVariants.includes(this._dataItems.length)
-      ? ProcessFlowBoxVariants.default
-      : ProcessFlowBoxVariants.small;
-    const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;
-    const classAttributes = [processVariant, "hy-process", `hy-process__${this.headerstyle}`].join(" ");
-    const classItem = "box";
-    var stepState;
-    return [
-      h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
-        index % itemsPerRow == 0 ? (stepState = "first") : (stepState = "default");
-        return (h("hy-process-flow-box", { class: classItem, variant: processVariant, "box-number": index + 1, "box-title": x.heading, "box-description": x.description, "intermediate-step-title": x.step, "step-state": stepState, "number-term": this.numberTerm }));
-      })),
-    ];
-  }
-  static get is() { return "hy-process"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["process.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["process.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "headerstyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "headerstyle",
-        "reflect": false,
-        "defaultValue": "\"common\""
-      },
-      "numberTerm": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "number-term",
-        "reflect": false
-      },
-      "dataItems": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ProcessFlowBoxValue[] | string",
-          "resolved": "ProcessFlowBoxValue[] | string",
-          "references": {
-            "ProcessFlowBoxValue": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-process/process.tsx"
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
+    }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data-items",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
+        }
+    }
+    render() {
+        /*
+        - Logic:
+        - 3 items: big
+        - 4 items: small
+        - 5 items: big
+        - 6 items: big
+        - 7 items: small
+        - 8 items: small
+        - 9 items: big
+        * */
+        const bigVariants = [3, 5, 6, 9];
+        const processVariant = bigVariants.includes(this._dataItems.length)
+            ? ProcessFlowBoxVariants.default
+            : ProcessFlowBoxVariants.small;
+        const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;
+        const classAttributes = [processVariant, "hy-process", `hy-process__${this.headerstyle}`].join(" ");
+        const classItem = "box";
+        var stepState;
+        return [
+            h("div", { key: 'f43e65b744786dcc5a78b3db5aa205be17286589', class: classAttributes }, this._dataItems.map((x, index) => {
+                index % itemsPerRow == 0 ? (stepState = "first") : (stepState = "default");
+                return (h("hy-process-flow-box", { class: classItem, variant: processVariant, "box-number": index + 1, "box-title": x.heading, "box-description": x.description, "intermediate-step-title": x.step, "step-state": stepState, "number-term": this.numberTerm }));
+            })),
+        ];
+    }
+    static get is() { return "hy-process"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["process.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["process.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headerstyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "headerstyle",
+                "reflect": false,
+                "defaultValue": "\"common\""
+            },
+            "numberTerm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "number-term",
+                "reflect": false
+            },
+            "dataItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProcessFlowBoxValue[] | string",
+                    "resolved": "ProcessFlowBoxValue[] | string",
+                    "references": {
+                        "ProcessFlowBoxValue": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-process/process.tsx",
+                            "id": "src/components/hy-process/process.tsx::ProcessFlowBoxValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-items",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=process.js.map