@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.42

package/dist/collection/components/hy-key-figure/hy-key-figure.js

@@ -1,80 +1,87 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { KeyHighlightVariants } from '../../utils/utils';
 export class HyKeyFigure {
   constructor() {
     this.variant = KeyHighlightVariants.default;
+    this.heading = undefined;
+    this.description = undefined;
   }
   render() {
     const classVariant = [this.variant, 'hy-key-figure'].join(' ');
-    return (h("div", { class: classVariant },
-      h("div", { class: "hy-key-figure__title" }, this.heading),
-      h("div", { class: "hy-key-figure__description" }, this.description)));
+    return (h("div", { class: classVariant }, h("div", { class: "hy-key-figure__title" }, this.heading), h("div", { class: "hy-key-figure__description" }, this.description)));
   }
   static get is() { return "hy-key-figure"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-key-figure.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-key-figure.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "KeyHighlightVariants",
-        "resolved": "KeyHighlightVariants.default | KeyHighlightVariants.small",
-        "references": {
-          "KeyHighlightVariants": {
-            "location": "import",
-            "path": "../../utils/utils"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-key-figure.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-key-figure.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KeyHighlightVariants",
+          "resolved": "KeyHighlightVariants.default | KeyHighlightVariants.small",
+          "references": {
+            "KeyHighlightVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "KeyHighlightVariants.default"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "KeyHighlightVariants.default"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
       },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    }
-  }; }
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-key-figure.js.map

package/dist/collection/components/hy-key-figure/hy-key-figure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-key-figure.js","sourceRoot":"","sources":["../../../src/components/hy-key-figure/hy-key-figure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAOvD,MAAM,OAAO,WAAW;;mBACkB,oBAAoB,CAAC,OAAO;;;;EAIpE,MAAM;IACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,WAAK,KAAK,EAAE,YAAY;MACtB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO;MACtD,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,WAAW,CAAO,CAC5D,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Prop, h} from '@stencil/core';\nimport {KeyHighlightVariants} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-key-figure',\n  styleUrl: 'hy-key-figure.scss',\n  shadow: true\n})\nexport class HyKeyFigure implements ComponentInterface {\n  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;\n  @Prop() heading: string;\n  @Prop() description: string;\n\n  render() {\n    const classVariant = [this.variant, 'hy-key-figure'].join(' ');\n\n    return (\n      <div class={classVariant}>\n        <div class=\"hy-key-figure__title\">{this.heading}</div>\n        <div class=\"hy-key-figure__description\">{this.description}</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-key-figure-group/hy-key-figure-group.css

@@ -123,7 +123,7 @@
 
 @media (min-width: 30rem) {
   .hy-key-figure-group .box-2,
-.hy-key-figure-group .box-3 {
+  .hy-key-figure-group .box-3 {
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;

package/dist/collection/components/hy-key-figure-group/hy-key-figure-group.js

@@ -1,8 +1,9 @@
-import { Component, Prop, h, Host, Element } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { KeyHighlightVariants } from '../../utils/utils';
 import { jsonParserWorker } from '../../global/globalScript';
 export class HyKeyFigureGroup {
   constructor() {
+    this.dataItems = undefined;
     this.headerstyle = 'common';
   }
   async componentWillLoad() {
@@ -46,76 +47,77 @@ export class HyKeyFigureGroup {
     const classRowAttributes = ['hy-key-figure-group'].join(' ');
     const classRowCenteredAttributes = ['hy-key-figure-group', 'hy-key-figure-group-centered'].join(' ');
     if (this._dataItems.length % 5 == 0) {
-      return (h(Host, null,
-        h("div", { class: classAttributes },
-          h("div", { class: classRowAttributes }, this._dataItems.map((x, index) => {
-            if (index < 3) {
-              return (h("hy-key-figure", { class: "box-3", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
-            }
-          })),
-          h("div", { class: classRowCenteredAttributes }, this._dataItems.map((x, index) => {
-            if (index >= 3) {
-              return (h("hy-key-figure", { class: "box-2", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
-            }
-          }))),
-        h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+      return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x, index) => {
+        if (index < 3) {
+          return (h("hy-key-figure", { class: "box-3", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+        }
+      })), h("div", { class: classRowCenteredAttributes }, this._dataItems.map((x, index) => {
+        if (index >= 3) {
+          return (h("hy-key-figure", { class: "box-2", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+        }
+      }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
     }
     else {
-      return (h(Host, null,
-        h("div", { class: classAttributes },
-          h("div", { class: classRowAttributes }, this._dataItems.map((x) => {
-            return (h("hy-key-figure", { class: this.getBoxClassName(this._dataItems.length), variant: keyFiguresVariant, heading: x.heading, description: x.description }));
-          }))),
-        h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+      return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x) => {
+        return (h("hy-key-figure", { class: this.getBoxClassName(this._dataItems.length), variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+      }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
     }
   }
   static get is() { return "hy-key-figure-group"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-key-figure-group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-key-figure-group.css"]
-  }; }
-  static get properties() { return {
-    "dataItems": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "KeyFigureValue[] | string",
-        "resolved": "KeyFigureValue[] | string",
-        "references": {
-          "KeyFigureValue": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-key-figure-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-key-figure-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KeyFigureValue[] | string",
+          "resolved": "KeyFigureValue[] | string",
+          "references": {
+            "KeyFigureValue": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-key-figure-group/hy-key-figure-group.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-items",
-      "reflect": false
-    },
-    "headerstyle": {
-      "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": "data-items",
+        "reflect": false
       },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'common'"
-    }
-  }; }
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "'common'"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=hy-key-figure-group.js.map

package/dist/collection/components/hy-key-figure-group/hy-key-figure-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-key-figure-group.js","sourceRoot":"","sources":["../../../src/components/hy-key-figure-group/hy-key-figure-group.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface KeyFigureValue {\n  heading: string;\n  description: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from '@stencil/core';\nimport {KeyHighlightVariants} from '../../utils/utils';\nimport {jsonParserWorker} from '../../global/globalScript';\n\n@Component({\n  tag: 'hy-key-figure-group',\n  styleUrl: 'hy-key-figure-group.scss',\n  shadow: false,\n})\nexport class HyKeyFigureGroup implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private _dataItems: KeyFigureValue[];\n  @Prop() dataItems: KeyFigureValue[] | string;\n  @Prop() headerstyle: string = 'common';\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  getBoxClassName(count) {\n    let className = 'box';\n\n    if (count % 3 == 0) {\n      className = 'box-3';\n    } else if (count % 4 == 0) {\n      className = 'box-4';\n    } else if (count % 5 == 0) {\n      className = 'box-5';\n    }\n\n    return className;\n  }\n\n  render() {\n    /*\n    - Logic:\n    - 3 items: big\n    - 4 items: small\n    - 5 items: big\n    - 6 items: big\n    * */\n    const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;\n\n    const classAttributes = [\n      keyFiguresVariant,\n      'hy-key-figure-group-container',\n      `hy-key-figure-group-container__${this.headerstyle}`,\n    ].join(' ');\n    const classRowAttributes = ['hy-key-figure-group'].join(' ');\n    const classRowCenteredAttributes = ['hy-key-figure-group', 'hy-key-figure-group-centered'].join(' ');\n\n    if (this._dataItems.length % 5 == 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class={classRowAttributes}>\n              {this._dataItems.map((x, index) => {\n                if (index < 3) {\n                  return (\n                    <hy-key-figure\n                      class=\"box-3\"\n                      variant={keyFiguresVariant}\n                      heading={x.heading}\n                      description={x.description}\n                    />\n                  );\n                }\n              })}\n            </div>\n            <div class={classRowCenteredAttributes}>\n              {this._dataItems.map((x, index) => {\n                if (index >= 3) {\n                  return (\n                    <hy-key-figure\n                      class=\"box-2\"\n                      variant={keyFiguresVariant}\n                      heading={x.heading}\n                      description={x.description}\n                    />\n                  );\n                }\n              })}\n            </div>\n          </div>\n          <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class={classRowAttributes}>\n              {this._dataItems.map((x) => {\n                return (\n                  <hy-key-figure\n                    class={this.getBoxClassName(this._dataItems.length)}\n                    variant={keyFiguresVariant}\n                    heading={x.heading}\n                    description={x.description}\n                  />\n                );\n              })}\n            </div>\n          </div>\n          <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n        </Host>\n      );\n    }\n  }\n}\n"]}

package/dist/collection/components/hy-key-highlight/hy-key-highlight.js

@@ -1,81 +1,87 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { KeyHighlightVariants } from '../../utils/utils';
 export class HyKeyHighlight {
   constructor() {
     this.variant = KeyHighlightVariants.default;
+    this.heading = undefined;
+    this.description = undefined;
   }
   render() {
     const classVariant = [this.variant, 'hy-key-highlight'].join(' ');
-    return (h("div", { class: classVariant },
-      h("div", { class: "hy-key-highlight__title__container" },
-        h("div", { class: "hy-key-highlight__title", innerHTML: this.heading })),
-      h("div", { class: "hy-key-highlight__description" }, this.description)));
+    return (h("div", { class: classVariant }, h("div", { class: "hy-key-highlight__title__container" }, h("div", { class: "hy-key-highlight__title", innerHTML: this.heading })), h("div", { class: "hy-key-highlight__description" }, this.description)));
   }
   static get is() { return "hy-key-highlight"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-key-highlight.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-key-highlight.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "KeyHighlightVariants",
-        "resolved": "KeyHighlightVariants.default | KeyHighlightVariants.small",
-        "references": {
-          "KeyHighlightVariants": {
-            "location": "import",
-            "path": "../../utils/utils"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-key-highlight.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-key-highlight.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KeyHighlightVariants",
+          "resolved": "KeyHighlightVariants.default | KeyHighlightVariants.small",
+          "references": {
+            "KeyHighlightVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "KeyHighlightVariants.default"
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "KeyHighlightVariants.default"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
       },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    }
-  }; }
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-key-highlight.js.map

package/dist/collection/components/hy-key-highlight/hy-key-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-key-highlight.js","sourceRoot":"","sources":["../../../src/components/hy-key-highlight/hy-key-highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAOvD,MAAM,OAAO,cAAc;;mBACe,oBAAoB,CAAC,OAAO;;;;EAIpE,MAAM;IACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElE,OAAO,CACL,WAAK,KAAK,EAAE,YAAY;MACtB,WAAK,KAAK,EAAC,oCAAoC;QAC7C,WAAK,KAAK,EAAC,yBAAyB,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAQ,CAChE;MACN,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAO,CAC/D,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Prop, h} from '@stencil/core';\nimport {KeyHighlightVariants} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-key-highlight',\n  styleUrl: 'hy-key-highlight.scss',\n  shadow: true,\n})\nexport class HyKeyHighlight implements ComponentInterface {\n  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;\n  @Prop() heading: string;\n  @Prop() description: string;\n\n  render() {\n    const classVariant = [this.variant, 'hy-key-highlight'].join(' ');\n\n    return (\n      <div class={classVariant}>\n        <div class=\"hy-key-highlight__title__container\">\n          <div class=\"hy-key-highlight__title\" innerHTML={this.heading}></div>\n        </div>\n        <div class=\"hy-key-highlight__description\">{this.description}</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-key-highlight-group/hy-key-highlight-group.css

@@ -100,14 +100,14 @@
 
 @media (min-width: 30rem) {
   .hy-key-highlight-group .box,
-.hy-key-highlight-group .box-4 {
+  .hy-key-highlight-group .box-4 {
     padding: 0 var(--gutter-medium);
   }
 }
 
 @media (min-width: 60rem) {
   .hy-key-highlight-group .box,
-.hy-key-highlight-group .box-4 {
+  .hy-key-highlight-group .box-4 {
     padding: 0 var(--gutter-wide);
   }
 }