@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.42

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

@@ -1,9 +1,16 @@
-import { Component, Host, h, Prop, State, Fragment } from '@stencil/core';
+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;
@@ -37,192 +44,142 @@ export class PersonProfile {
       }, 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 }))))))))));
+    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": ""
+  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
       },
-      "attribute": "organization-items-label-text",
-      "reflect": false
-    },
-    "peopleFinderReturnLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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
       },
-      "attribute": "people-finder-return-link",
-      "reflect": false
-    },
-    "peopleFinderReturnLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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
       },
-      "attribute": "people-finder-return-label",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isFullAboutTextHidden": {},
-    "viewportSize": {}
-  }; }
+      "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/person-profile/person-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"person-profile.js","sourceRoot":"","sources":["../../../src/components/person-profile/person-profile.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Host, h, Prop, State, Fragment} from '@stencil/core';\nimport {CtaLinkButtonVariants} from '../../utils/utils';\n\nlet timer;\n@Component({\n  tag: 'hy-person-profile',\n  shadow: false,\n  styleUrl: 'person-profile.scss',\n})\nexport class PersonProfile {\n  @Prop() personDataJson: string;\n  @Prop() showFullAboutText: string;\n  @Prop() hideFullAboutText: string;\n  @Prop() organizationItemsLabelText: string;\n  @Prop() peopleFinderReturnLink: string;\n  @Prop() peopleFinderReturnLabel: string;\n\n  @State() isFullAboutTextHidden: boolean = false;\n  @State() viewportSize: number;\n\n  componentWillLoad() {\n    this.viewportSize = window.innerWidth;\n  }\n\n  toggleShowFullAboutText() {\n    this.isFullAboutTextHidden = !this.isFullAboutTextHidden;\n  }\n\n  disconnectedCallback() {\n    clearTimeout(timer);\n  }\n\n  render() {\n    const {\n      name,\n      job_title,\n      additional_information,\n      image_url,\n      contact_information,\n      organization_units,\n      about,\n      research,\n      person_content,\n    } = JSON.parse(this.personDataJson);\n\n    const {organizations, research_organizations} = organization_units.items;\n\n    const aboutDescriptionTextDestructured = about.description;\n\n    const aboutDescriptionLength = aboutDescriptionTextDestructured.length;\n\n    let trimmedAboutDescription = '';\n\n    if (aboutDescriptionLength > 650) {\n      if (this.isFullAboutTextHidden) {\n        const ellipsisTextArray = aboutDescriptionTextDestructured + '...';\n\n        trimmedAboutDescription = ellipsisTextArray;\n      } else {\n        const ellipsisTextArray = aboutDescriptionTextDestructured.substring(0, 650) + '...';\n\n        trimmedAboutDescription = ellipsisTextArray;\n      }\n    }\n\n    window.addEventListener('resize', () => {\n      clearTimeout(timer);\n      timer = setTimeout(() => {\n        this.viewportSize = window.innerWidth;\n      }, 250);\n    });\n\n    const research_portal_title = `${research.research_portal_label}: ${name}`;\n    return (\n      <Host>\n        <section class=\"hy-profile-page\">\n          <a href={this.peopleFinderReturnLink} class=\"hy-profile-page__back-button\">\n            <hy-icon icon={'hy-icon-arrow-left'} size={24} />\n            <span>{this.peopleFinderReturnLabel}</span>\n          </a>\n          <section class=\"hy-profile-page__section\">\n            <div class=\"hy-profile-page__person-information\">\n              <div>\n                <h1 class=\"hy-profile-page__name\">{name}</h1>\n                {job_title && <p class=\"hy-profile-page__job-title\">{job_title}</p>}\n                {additional_information && (\n                  <p class=\"hy-profile-page__additional-information\">{additional_information}</p>\n                )}\n              </div>\n              {image_url ? (\n                <img src={image_url} alt=\"\" class=\"hy-profile-page__image\" />\n              ) : (\n                <div class=\"hy-profile-page__image\" aria-hidden=\"true\" />\n              )}\n            </div>\n            {contact_information && (\n              <div class=\"hy-profile-page__contact-information\">\n                {contact_information.label && <h2>{contact_information.label}</h2>}\n                {contact_information.items && (\n                  <hy-person-profile-listing\n                    items={contact_information.items}\n                    col=\"col-4\"\n                    withoutIcons\n                    textSpacingTight\n                  ></hy-person-profile-listing>\n                )}\n              </div>\n            )}\n          </section>\n          {(organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (\n            <section class=\"hy-profile-page__section\">\n              {organization_units.label && <h2>{organization_units.label}</h2>}\n              {organizations.items.length > 0 && (\n                <section class=\"hy-profile-page__organization-units-section\">\n                  <h3>{organizations.label}</h3>\n                  <ul class=\"hy-profile-page__organizations\">\n                    <li>\n                      {organizations.items.map((item, index) => {\n                        return (\n                          <span>\n                            {index > 1 && <hy-icon icon={'hy-icon-caret-right'} size={10} />}\n                            {index !== 0 && (\n                              <span>\n                                <a\n                                  href={\n                                    organization_units.people_finder_path[organization_units.lang] +\n                                    '?researchOrganizations.id[]=' +\n                                    item.id\n                                  }\n                                  target={'_blank'}\n                                >\n                                  {item.name[organization_units.lang]}\n                                </a>\n                              </span>\n                            )}\n                          </span>\n                        );\n                      })}\n                    </li>\n                  </ul>\n                </section>\n              )}\n              {Object.keys(research_organizations.items).length > 0 && (\n                <section class=\"hy-profile-page__organization-units-section\">\n                  <h3>{research_organizations.label}</h3>\n                  <ul class=\"hy-profile-page__research-organizations\">\n                    {Object.values(research_organizations.items).map(([...item]) => (\n                      <li>\n                        {item.map((item, index) => {\n                          return (\n                            <Fragment>\n                              {index > 1 && (\n                                <ul>\n                                  <li>\n                                    <span>\n                                      <hy-icon icon={'hy-icon-caret-right'} size={10} />\n                                      <span>\n                                        <a\n                                          href={\n                                            organization_units.people_finder_path[organization_units.lang] +\n                                            '?researchOrganizations.id[]=' +\n                                            item.id\n                                          }\n                                          target={'_blank'}\n                                        >\n                                          {item.name[organization_units.lang]}\n                                        </a>\n                                      </span>\n                                    </span>\n                                  </li>\n                                </ul>\n                              )}\n                              {index == 1 && (\n                                <span>\n                                  <a\n                                    href={\n                                      organization_units.people_finder_path[organization_units.lang] +\n                                      '?researchOrganizations.id[]=' +\n                                      item.id\n                                    }\n                                    target={'_blank'}\n                                  >\n                                    {item.name[organization_units.lang]}\n                                  </a>\n                                </span>\n                              )}\n                            </Fragment>\n                          );\n                        })}\n                      </li>\n                    ))}\n                  </ul>\n                </section>\n              )}\n            </section>\n          )}\n          {about && aboutDescriptionLength !== 0 && (\n            <section class=\"hy-profile-page__section\">\n              {about.description && (\n                <Fragment>\n                  <h2>{about.label}</h2>\n                  <div\n                    class=\"hy-profile-page__person-about-text\"\n                    innerHTML={\n                      !this.isFullAboutTextHidden && aboutDescriptionLength > 650\n                        ? trimmedAboutDescription\n                        : about.description\n                    }\n                  ></div>\n                </Fragment>\n              )}\n              {aboutDescriptionLength > 650 && (\n                <button\n                  class=\"hy-profile-page__person-about-text-toggle\"\n                  onClick={() => this.toggleShowFullAboutText()}\n                  aria-expanded={`${this.isFullAboutTextHidden ? 'true' : 'false'}`}\n                >\n                  {this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText}\n                </button>\n              )}\n            </section>\n          )}\n          {((research && research.items.length > 0) || (person_content && person_content.research_url.length > 0)) && (\n            <section class=\"hy-profile-page__section\">\n              <div class=\"hy-profile-page__section__research_title\">\n                {research.label && <h2>{research.label}</h2>}\n                {research.label && person_content.research_url.length > 0 && (\n                  <hy-cta-button\n                    link-content={research_portal_title}\n                    sc-label={research_portal_title}\n                    url={person_content.research_url}\n                    is-external=\"true\"\n                    variant={CtaLinkButtonVariants.onWhiteBkgd}\n                  ></hy-cta-button>\n                )}\n              </div>\n\n              {research.items && (\n                <hy-person-profile-listing\n                  items={research.items}\n                  col=\"col-1\"\n                  textSpacingTight\n                  is-research\n                  inline\n                ></hy-person-profile-listing>\n              )}\n\n              {person_content.research_url.length > 0 && (\n                <div class=\"hy-profile-page__loader\" role=\"presentation\">\n                  <div></div>\n                  <div></div>\n                  <div></div>\n                  <div></div>\n                </div>\n              )}\n\n              {person_content.research_url.length > 0 && this.viewportSize < 768 && (\n                <div class=\"hy-profile-page__person-content-container\">\n                  <hy-accordion-container accordionid=\"accordion-container-person-content\">\n                    {person_content.publications && (\n                      <hy-accordion-item\n                        data-accordion-id={'publications'}\n                        accordiontitle={person_content.publications.label}\n                      ></hy-accordion-item>\n                    )}\n                    {person_content.projects && (\n                      <hy-accordion-item\n                        data-accordion-id={'projects'}\n                        accordiontitle={person_content.projects.label}\n                      ></hy-accordion-item>\n                    )}\n                    {person_content.activities && (\n                      <hy-accordion-item\n                        data-accordion-id={'activities'}\n                        accordiontitle={person_content.activities.label}\n                      ></hy-accordion-item>\n                    )}\n                  </hy-accordion-container>\n                </div>\n              )}\n              {person_content.research_url.length > 0 && this.viewportSize >= 768 && (\n                <div class=\"hy-profile-page__person-content-container\">\n                  <hy-tabs tab-id=\"tabs-container-person-content\">\n                    {person_content.publications && (\n                      <hy-tabs-item\n                        data-tab-id={'publications'}\n                        tab-title={person_content.publications.label}\n                      ></hy-tabs-item>\n                    )}\n                    {person_content.projects && (\n                      <hy-tabs-item data-tab-id={'projects'} tab-title={person_content.projects.label}></hy-tabs-item>\n                    )}\n                    {person_content.activities && (\n                      <hy-tabs-item\n                        data-tab-id={'activities'}\n                        tab-title={person_content.activities.label}\n                      ></hy-tabs-item>\n                    )}\n                  </hy-tabs>\n                </div>\n              )}\n            </section>\n          )}\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,9 +1,11 @@
-import { Component, Prop, h, Element } from '@stencil/core';
+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);
@@ -44,69 +46,77 @@ export class Process {
   }
   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": {}
+  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'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "numberTerm": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "number-term",
+        "reflect": false
       },
-      "attribute": "number-term",
-      "reflect": false
-    },
-    "dataItems": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ProcessFlowBoxValue[] | string",
-        "resolved": "ProcessFlowBoxValue[] | string",
-        "references": {
-          "ProcessFlowBoxValue": {
-            "location": "local"
+      "dataItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ProcessFlowBoxValue[] | string",
+          "resolved": "ProcessFlowBoxValue[] | string",
+          "references": {
+            "ProcessFlowBoxValue": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/process/process.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-items",
-      "reflect": false
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-items",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=process.js.map

package/dist/collection/components/process/process.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process.js","sourceRoot":"","sources":["../../../src/components/process/process.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAO3D,MAAM,OAAO,OAAO;;uBAEY,QAAQ;;;;EAKtC,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC3D,CAAC;EAED,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;EACH,CAAC;EAED,MAAM;IACJ;;;;;;;;;QASI;IACJ,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACjC,MAAM,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;MACjE,CAAC,CAAC,sBAAsB,CAAC,OAAO;MAChC,CAAC,CAAC,sBAAsB,CAAC,KAAK,CAAC;IAEjC,MAAM,WAAW,GAAG,cAAc,IAAI,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,EAAE,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpG,MAAM,SAAS,GAAG,KAAK,CAAC;IACxB,IAAI,SAAS,CAAC;IAEd,OAAO;MACL,WAAK,KAAK,EAAE,eAAe,IACxB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QAChC,KAAK,GAAG,WAAW,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;QAC3E,OAAO,CACL,2BACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,cAAc,gBACX,KAAK,GAAG,CAAC,eACV,CAAC,CAAC,OAAO,qBACH,CAAC,CAAC,WAAW,6BACL,CAAC,CAAC,IAAI,gBACnB,SAAS,iBACR,IAAI,CAAC,UAAU,GAC5B,CACH,CAAC;MACJ,CAAC,CAAC,CACE;KACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["export interface ProcessFlowBoxValue {\n  heading: string;\n  description: string;\n  step: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Element} from '@stencil/core';\nimport {ProcessFlowBoxVariants} from '../../utils/utils';\nimport {jsonParserWorker} from '../../global/globalScript';\n\n@Component({\n  tag: 'hy-process',\n  styleUrl: 'process.scss',\n  shadow: true,\n})\nexport class Process implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = 'common';\n  @Prop() numberTerm: string;\n  private _dataItems: ProcessFlowBoxValue[];\n  @Prop() dataItems: ProcessFlowBoxValue[] | string;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest('.hy-main');\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains('with-sidebar')) {\n        this.headerstyle = 'large';\n      }\n    }\n  }\n\n  render() {\n    /*\n    - Logic:\n    - 3 items: big\n    - 4 items: small\n    - 5 items: big\n    - 6 items: big\n    - 7 items: small\n    - 8 items: small\n    - 9 items: big\n    * */\n    const bigVariants = [3, 5, 6, 9];\n    const processVariant = bigVariants.includes(this._dataItems.length)\n      ? ProcessFlowBoxVariants.default\n      : ProcessFlowBoxVariants.small;\n\n    const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;\n    const classAttributes = [processVariant, 'hy-process', `hy-process__${this.headerstyle}`].join(' ');\n    const classItem = 'box';\n    var stepState;\n\n    return [\n      <div class={classAttributes}>\n        {this._dataItems.map((x, index) => {\n          index % itemsPerRow == 0 ? (stepState = 'first') : (stepState = 'default');\n          return (\n            <hy-process-flow-box\n              class={classItem}\n              variant={processVariant}\n              box-number={index + 1}\n              box-title={x.heading}\n              box-description={x.description}\n              intermediate-step-title={x.step}\n              step-state={stepState}\n              number-term={this.numberTerm}\n            />\n          );\n        })}\n      </div>,\n    ];\n  }\n}\n"]}