@itcenteratunihelsinki/huds-lib 0.8.40 → 0.8.42

package/dist/collection/components/hy-box/hy-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-box.js","sourceRoot":"","sources":["../../../src/components/hy-box/hy-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Prop, Host, Element} from '@stencil/core';\nimport {css} from 'emotion';\n\n/*\nExample of using hy-box:\n<hy-box mb=\"1.75, 1.75, 2, 2.5\" />\nWhere mb = margin-bottom,\nmobile up to 30rem: 1.75rem (mb[0])\ntablet, 30rem - 60rem: 1.75rem (mb[1])\nwide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])\nxlarge, > 100.0625: 2.5rem (mb[3])\n* */\nconst toRemValue = (val?: number) => {\n  return typeof val === 'number' ? `${val}rem` : undefined;\n};\n\ninterface P {\n  hasSidebar?: boolean;\n  p?: number[];\n  pt?: number[];\n  pl?: number[];\n  pb?: number[];\n  pr?: number[];\n  m?: number[];\n  mt?: number[];\n  ml?: number[];\n  mb?: number[];\n  mr?: number[];\n  h?: number;\n  bg?: string;\n  width: string[];\n  justify: string;\n  align: string;\n  direction: string;\n}\n\nconst breakpoints = ['30rem', '60rem', '75.0625rem', '100.0625rem'];\n\n/*\nDefault - mobile\nmq[0] - tablet\nmq[1] - wide, >960px\nmq[2] - extrawide, > 1200px\nmq[3] - xlarge, >1600px\n* */\nconst mq = breakpoints.map((b) => `@media (min-width: ${b})`);\nconst createCssClass = ({hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align, direction}: P) => {\n  const last = width[width.length - 1];\n\n  return css`\n    padding-top: ${toRemValue(pt[0])};\n    padding-right: ${toRemValue(pr[0])};\n    padding-bottom: ${toRemValue(pb[0])};\n    padding-left: ${toRemValue(pl[0])};\n    margin-top: ${toRemValue(mt[0])};\n    margin-right: ${toRemValue(mr[0])};\n    margin-bottom: ${toRemValue(mb[0])};\n    margin-left: ${toRemValue(ml[0])};\n    height: ${toRemValue(h)};\n    background-color: ${!!bg ? `var(--${bg})` : 'transparent'};\n    width: ${width[0]};\n    display: flex;\n    flex-flow: ${direction || 'row'};\n    justify-content: ${justify || 'flex-start'};\n    align-items: ${align || 'flex-start'};\n\n    ${mq[0]} {\n      width: ${width[1]};\n\n      padding-top: ${toRemValue(pt[1])};\n      padding-right: ${toRemValue(pr[1])};\n      padding-bottom: ${toRemValue(pb[1])};\n      padding-left: ${toRemValue(pl[1])};\n\n      margin-top: ${toRemValue(mt[1])};\n      margin-right: ${toRemValue(mr[1])};\n      margin-bottom: ${toRemValue(mb[1])};\n      margin-left: ${toRemValue(ml[1])};\n    }\n    ${mq[1]} {\n      width: ${width[2] || last};\n\n      padding-top: ${toRemValue(pt[2])};\n      padding-right: ${toRemValue(pr[2])};\n      padding-bottom: ${toRemValue(pb[2])};\n      padding-left: ${toRemValue(pl[2])};\n\n      margin-top: ${toRemValue(mt[2])};\n      margin-right: ${toRemValue(mr[2])};\n      margin-bottom: ${toRemValue(mb[2])};\n      margin-left: ${toRemValue(ml[2])};\n    }\n    ${mq[2]} {\n      width: ${width[3] || last};\n\n      padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};\n      padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};\n      padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};\n      padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};\n\n      margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};\n      margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};\n      margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};\n      margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};\n    }\n    ${mq[3]} {\n      width: ${width[4] || last};\n\n      padding-top: ${toRemValue(pt[3])};\n      padding-right: ${toRemValue(pr[3])};\n      padding-bottom: ${toRemValue(pb[3])};\n      padding-left: ${toRemValue(pl[3])};\n\n      margin-top: ${toRemValue(mt[3])};\n      margin-right: ${toRemValue(mr[3])};\n      margin-bottom: ${toRemValue(mb[3])};\n      margin-left: ${toRemValue(ml[3])};\n    }\n  `;\n};\n\nconst toNumArray = (value?: string) =>\n  value\n    ?.split(',')\n    .map((v) => `${v.trim()}`)\n    .map((v) => parseFloat(v));\n\n@Component({\n  tag: 'hy-box',\n  styleUrl: 'hy-box.scss',\n  shadow: false,\n})\nexport class HyBox {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = 'common';\n  /**\n   * All sides padding value in rems. Responsive when given Comma separated values.\n   */\n  @Prop() p?: string;\n\n  /**\n   * Left padding in rems. Responsive when given Comma separated values.\n   */\n  @Prop() pl?: string;\n  /**\n   * Right padding in rems. Responsive when given Comma separated values.\n   */\n  @Prop() pr?: string;\n  /**\n   * Bottom padding in rems. Responsive when given Comma separated values.\n   */\n  @Prop() pb?: string;\n  /**\n   * Top padding in rems. Responsive when given Comma separated values.\n   */\n  @Prop() pt?: string;\n  /**\n   * All sides margin value in rems. Responsive when given Comma separated values.\n   */\n  @Prop() m?: string;\n\n  /**\n   * Left margin in rems. Responsive when given Comma separated values.\n   */\n  @Prop() ml?: string;\n  /**\n   * Right margin in rems. Responsive when given Comma separated values.\n   */\n  @Prop() mr?: string;\n  /**\n   * Bottom margin in rems. Responsive when given Comma separated values.\n   */\n  @Prop() mb?: string;\n  /**\n   * Top margin in rems. Responsive when given Comma separated values.\n   */\n  @Prop() mt?: string;\n  /**\n   * Value for horisontal alignment (justify-content)\n   */\n  @Prop() justify: string = 'flex-start';\n  /**\n   * value for vertical alignment (align-items)\n   */\n  @Prop() align: string = 'baseline';\n\n  /**\n   * fixed height for the container, useful for extra spacing containers\n   */\n  @Prop() h?: number;\n  /**\n   * background color. Must use one of css variable names from color tokens\n   */\n  @Prop() bg: string = 'transparent';\n  /**\n   * Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.\n   */\n  @Prop() width: string = '100';\n  @Prop() direction: string = 'row';\n\n  componentWillLoad() {\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    const pt = toNumArray(this.pt) ?? toNumArray(this.p) ?? [0];\n    const pb = toNumArray(this.pb) ?? toNumArray(this.p) ?? [0];\n    const pr = toNumArray(this.pr) ?? toNumArray(this.p) ?? [0];\n    const pl = toNumArray(this.pl) ?? toNumArray(this.p) ?? [0];\n    const mt = toNumArray(this.mt) ?? toNumArray(this.m) ?? [0];\n    const mb = toNumArray(this.mb) ?? toNumArray(this.m) ?? [0];\n    const mr = toNumArray(this.mr) ?? toNumArray(this.m) ?? [0];\n    const ml = toNumArray(this.ml) ?? toNumArray(this.m) ?? [0];\n    const hasSidebar = this.headerstyle == 'common';\n\n    return (\n      <Host\n        class={createCssClass({\n          hasSidebar,\n          pt,\n          pl,\n          pr,\n          pb,\n          mt,\n          ml,\n          mr,\n          mb,\n          h: this.h,\n          bg: this.bg,\n          width: this.width.split(',').map((v) => `${v.trim()}%`),\n          justify: this.justify,\n          align: this.align,\n          direction: this.direction,\n        })}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-box-container/hy-box-container.js

@@ -1,69 +1,68 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { css } from 'emotion';
 export class HyBoxContainer {
   constructor() {
-    /**
-     * Should the items wrap to new rows.
-     */
     this.wrap = true;
-    /**
-     * Should the container have a max width of 90rems
-     */
     this.maxWidth = true;
   }
   render() {
-    return (h(Host, { style: { width: '100%', display: 'flex', flex: '1', justifyContent: 'center' } },
-      h("div", { class: css `
+    return (h(Host, { style: { width: '100%', display: 'flex', flex: '1', justifyContent: 'center' } }, h("div", { class: css `
             display: flex;
             width: 100%;
             flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};
             max-width: ${this.maxWidth ? '90rem' : '100%'};
-          ` },
-        h("slot", null))));
+          ` }, h("slot", null))));
   }
   static get is() { return "hy-box-container"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-box-container.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-box-container.css"]
-  }; }
-  static get properties() { return {
-    "wrap": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should the items wrap to new rows."
-      },
-      "attribute": "wrap",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "maxWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should the container have a max width of 90rems"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-box-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-box-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "wrap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should the items wrap to new rows."
+        },
+        "attribute": "wrap",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "max-width",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
+      "maxWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should the container have a max width of 90rems"
+        },
+        "attribute": "max-width",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-box-container.js.map

package/dist/collection/components/hy-box-container/hy-box-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-box-container.js","sourceRoot":"","sources":["../../../src/components/hy-box-container/hy-box-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,GAAG,EAAC,MAAM,SAAS,CAAC;AAO5B,MAAM,OAAO,cAAc;;gBAID,IAAI;oBAIA,IAAI;;EAChC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,cAAc,EAAE,QAAQ,EAAC;MAChF,WACE,KAAK,EAAE,GAAG,CAAA;;;yBAGK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;yBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WAC9C;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h, Prop} from '@stencil/core';\nimport {css} from 'emotion';\n\n@Component({\n  tag: 'hy-box-container',\n  styleUrl: 'hy-box-container.css',\n  shadow: false\n})\nexport class HyBoxContainer {\n  /**\n   * Should the items wrap to new rows.\n   */\n  @Prop() wrap: boolean = true;\n  /**\n   * Should the container have a max width of 90rems\n   */\n  @Prop() maxWidth: boolean = true;\n  render() {\n    return (\n      <Host style={{width: '100%', display: 'flex', flex: '1', justifyContent: 'center'}}>\n        <div\n          class={css`\n            display: flex;\n            width: 100%;\n            flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};\n            max-width: ${this.maxWidth ? '90rem' : '100%'};\n          `}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,8 +1,9 @@
-import { Component, Element, h, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { BreadcrumbVariants } from '../../utils/utils';
 import { jsonParserWorker } from '../../global/globalScript';
 export class HyBreadcrumbs {
   constructor() {
+    this.dataItems = undefined;
     this.variant = BreadcrumbVariants.default;
     this.headerstyle = 'with-sidebar';
     this.menuOpen = false;
@@ -20,92 +21,98 @@ export class HyBreadcrumbs {
   }
   render() {
     const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
-    return (h("nav", { "aria-label": "Breadcrumb", role: "navigation", "aria-labelledby": "system-breadcrumb", class: breadcrumbsClass },
-      h("ol", { class: "breadcrumb-container" }, this._dataItems.map((item) => {
-        if (item.url.length > 0) {
-          return (h("li", { class: "breadcrumb-item" },
-            h("a", { class: "breadcrumb-item__link", href: item.url }, item.text),
-            h("hy-icon", { class: "breadcrumb-item__icon", icon: "hy-icon-caret-right", size: 12 })));
-        }
-        else {
-          return (h("li", { class: "breadcrumb-item breadcrumb-item--current" },
-            h("a", { href: item.url, "aria-current": "page" }, item.text)));
-        }
-      }))));
+    return (h("nav", { "aria-label": "Breadcrumb", role: "navigation", "aria-labelledby": "system-breadcrumb", class: breadcrumbsClass }, h("ol", { class: "breadcrumb-container" }, this._dataItems.map((item) => {
+      if (item.url.length > 0) {
+        return (h("li", { class: "breadcrumb-item" }, h("a", { class: "breadcrumb-item__link", href: item.url }, item.text), h("hy-icon", { class: "breadcrumb-item__icon", icon: "hy-icon-caret-right", size: 12 })));
+      }
+      else {
+        return (h("li", { class: "breadcrumb-item breadcrumb-item--current" }, h("a", { href: item.url, "aria-current": "page" }, item.text)));
+      }
+    }))));
   }
   static get is() { return "hy-breadcrumbs"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-breadcrumbs.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-breadcrumbs.css"]
-  }; }
-  static get properties() { return {
-    "dataItems": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Breadcrumb[] | string",
-        "resolved": "Breadcrumb[] | string",
-        "references": {
-          "Breadcrumb": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-breadcrumbs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-breadcrumbs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Breadcrumb[] | string",
+          "resolved": "Breadcrumb[] | string",
+          "references": {
+            "Breadcrumb": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-items",
+        "reflect": false
       },
-      "attribute": "data-items",
-      "reflect": false
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "BreadcrumbVariants",
-        "resolved": "BreadcrumbVariants.default | BreadcrumbVariants.landingLarge",
-        "references": {
-          "BreadcrumbVariants": {
-            "location": "import",
-            "path": "../../utils/utils"
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbVariants",
+          "resolved": "BreadcrumbVariants.default | BreadcrumbVariants.landingLarge",
+          "references": {
+            "BreadcrumbVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "BreadcrumbVariants.default as any"
       },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "BreadcrumbVariants.default as any"
-    },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'with-sidebar'"
-    }
-  }; }
-  static get states() { return {
-    "menuOpen": {}
-  }; }
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "'with-sidebar'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "menuOpen": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=hy-breadcrumbs.js.map

package/dist/collection/components/hy-breadcrumbs/hy-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/hy-breadcrumbs/hy-breadcrumbs.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAO3D,MAAM,OAAO,aAAa;;;mBAGc,kBAAkB,CAAC,OAAc;uBACzC,cAAc;oBAEf,KAAK;;EAGlC,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,iBAAiB,CAAC;OACtC;KACF;EACH,CAAC;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtF,OAAO,CACL,yBAAgB,YAAY,EAAC,IAAI,EAAC,YAAY,qBAAiB,mBAAmB,EAAC,KAAK,EAAE,gBAAgB;MACxG,UAAI,KAAK,EAAC,sBAAsB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;UACvB,OAAO,CACL,UAAI,KAAK,EAAC,iBAAiB;YACzB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5C,IAAI,CAAC,IAAI,CACR;YACJ,eAAS,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAE,EAAE,GAAY,CACnF,CACN,CAAC;SACH;aAAM;UACL,OAAO,CACL,UAAI,KAAK,EAAC,0CAA0C;YAClD,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,kBAAe,MAAM,IACnC,IAAI,CAAC,IAAI,CACR,CACD,CACN,CAAC;SACH;MACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["export interface Breadcrumb {\n  url: string;\n  text: string;\n}\n\nimport {Component, Element, h, Prop, State} from '@stencil/core';\nimport {BreadcrumbVariants} from '../../utils/utils';\nimport {jsonParserWorker} from '../../global/globalScript';\n\n@Component({\n  tag: 'hy-breadcrumbs',\n  styleUrl: 'hy-breadcrumbs.scss',\n  shadow: false,\n})\nexport class HyBreadcrumbs {\n  private _dataItems: Breadcrumb[];\n  @Prop() dataItems: Breadcrumb[] | string;\n  @Prop() variant: BreadcrumbVariants = BreadcrumbVariants.default as any;\n  @Prop() headerstyle: string = 'with-sidebar';\n\n  @State() menuOpen: boolean = false;\n  @Element() el: HTMLElement;\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 = 'without-sidebar';\n      }\n    }\n  }\n\n  render() {\n    const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');\n    return (\n      <nav aria-label=\"Breadcrumb\" role=\"navigation\" aria-labelledby=\"system-breadcrumb\" class={breadcrumbsClass}>\n        <ol class=\"breadcrumb-container\">\n          {this._dataItems.map((item) => {\n            if (item.url.length > 0) {\n              return (\n                <li class=\"breadcrumb-item\">\n                  <a class=\"breadcrumb-item__link\" href={item.url}>\n                    {item.text}\n                  </a>\n                  <hy-icon class=\"breadcrumb-item__icon\" icon=\"hy-icon-caret-right\" size={12}></hy-icon>\n                </li>\n              );\n            } else {\n              return (\n                <li class=\"breadcrumb-item breadcrumb-item--current\">\n                  <a href={item.url} aria-current=\"page\">\n                    {item.text}\n                  </a>\n                </li>\n              );\n            }\n          })}\n        </ol>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -1,133 +1,127 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { CheckboxVariants } from '../../utils/utils';
 export class HyCheckbox {
   constructor() {
-    /**
-     * Checked attribute
-     */
+    this.checkboxId = undefined;
+    this.checkboxValue = undefined;
+    this.checkboxLabel = undefined;
     this.checkboxChecked = false;
-    /**
-     * Variant to deifne what style of checkbox to use
-     */
     this.variant = CheckboxVariants.default;
   }
   render() {
     switch (this.variant) {
       case 'button':
-        return (h(Host, { class: "hy-checkbox--button" },
-          h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }),
-          h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` },
-            this.checkboxLabel,
-            h("span", { class: "hy-checkbox--button__checkmark" },
-              h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" })))));
+        return (h(Host, { class: "hy-checkbox--button" }, h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` }, this.checkboxLabel, h("span", { class: "hy-checkbox--button__checkmark" }, h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" })))));
       default:
-        return (h(Host, { class: "hy-checkbox" },
-          h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }),
-          h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` },
-            h("span", { class: "hy-checkbox__checkmark" },
-              h("hy-icon", { class: "hy-checkbox__label-icon", icon: 'hy-icon-done', size: 23, "aria-hidden": "true" })),
-            this.checkboxLabel)));
+        return (h(Host, { class: "hy-checkbox" }, h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` }, h("span", { class: "hy-checkbox__checkmark" }, h("hy-icon", { class: "hy-checkbox__label-icon", icon: 'hy-icon-done', size: 23, "aria-hidden": "true" })), this.checkboxLabel)));
     }
   }
   static get is() { return "hy-checkbox"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-checkbox.css"]
-  }; }
-  static get properties() { return {
-    "checkboxId": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Unique id for checkbox element"
-      },
-      "attribute": "checkbox-id",
-      "reflect": false
-    },
-    "checkboxValue": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Value for input element"
-      },
-      "attribute": "checkbox-value",
-      "reflect": false
-    },
-    "checkboxLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checkboxId": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unique id for checkbox element"
+        },
+        "attribute": "checkbox-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for input to describe"
+      "checkboxValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value for input element"
+        },
+        "attribute": "checkbox-value",
+        "reflect": false
       },
-      "attribute": "checkbox-label",
-      "reflect": false
-    },
-    "checkboxChecked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "checkboxLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for input to describe"
+        },
+        "attribute": "checkbox-label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Checked attribute"
+      "checkboxChecked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checked attribute"
+        },
+        "attribute": "checkbox-checked",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "checkbox-checked",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CheckboxVariants",
-        "resolved": "CheckboxVariants.button | CheckboxVariants.default",
-        "references": {
-          "CheckboxVariants": {
-            "location": "import",
-            "path": "../../utils/utils"
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CheckboxVariants",
+          "resolved": "CheckboxVariants.button | CheckboxVariants.default",
+          "references": {
+            "CheckboxVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Variant to deifne what style of checkbox to use"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "CheckboxVariants.default"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant to deifne what style of checkbox to use"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "CheckboxVariants.default"
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-checkbox.js.map

package/dist/collection/components/hy-checkbox/hy-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-checkbox.js","sourceRoot":"","sources":["../../../src/components/hy-checkbox/hy-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AAOnD,MAAM,OAAO,UAAU;;;;;2BAgBc,KAAK;mBAIJ,gBAAgB,CAAC,OAAO;;EAE5D,MAAM;IACJ,QAAQ,IAAI,CAAC,OAAO,EAAE;MACpB,KAAK,QAAQ;QACX,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB;UAC/B,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,EACxB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAC9B;UACF,aAAO,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;YACpE,IAAI,CAAC,aAAa;YACnB,YAAM,KAAK,EAAC,gCAAgC;cAC1C,eAAS,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACjG,CACD,CACH,CACR,CAAC;MAEJ;QACE,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa;UACvB,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,EACxB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAC9B;UACF,aAAO,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;YAC7D,YAAM,KAAK,EAAC,wBAAwB;cAClC,eAAS,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACzF;YACN,IAAI,CAAC,aAAa,CACb,CACH,CACR,CAAC;KACL;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h, Prop} from '@stencil/core';\nimport {CheckboxVariants} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-checkbox',\n  styleUrl: 'hy-checkbox.scss',\n  shadow: false,\n})\nexport class HyCheckbox {\n  /**\n   * Unique id for checkbox element\n   */\n  @Prop() checkboxId: string | number;\n  /**\n   * Value for input element\n   */\n  @Prop() checkboxValue: string | number;\n  /**\n   * Label for input to describe\n   */\n  @Prop() checkboxLabel: string;\n  /**\n   * Checked attribute\n   */\n  @Prop() checkboxChecked: boolean = false;\n  /**\n   * Variant to deifne what style of checkbox to use\n   */\n  @Prop() variant: CheckboxVariants = CheckboxVariants.default;\n\n  render() {\n    switch (this.variant) {\n      case 'button':\n        return (\n          <Host class=\"hy-checkbox--button\">\n            <input\n              type=\"checkbox\"\n              class=\"hy-checkbox--button__checkbox\"\n              checked={this.checkboxChecked}\n              id={`${this.checkboxId}`}\n              value={`${this.checkboxValue}`}\n            />\n            <label class=\"hy-checkbox--button__label\" htmlFor={`${this.checkboxId}`}>\n              {this.checkboxLabel}\n              <span class=\"hy-checkbox--button__checkmark\">\n                <hy-icon class=\"hy-checkbox--button__label-icon\" icon={'hy-icon-done'} size={14} aria-hidden=\"true\" />\n              </span>\n            </label>\n          </Host>\n        );\n\n      default:\n        return (\n          <Host class=\"hy-checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"hy-checkbox__checkbox\"\n              checked={this.checkboxChecked}\n              id={`${this.checkboxId}`}\n              value={`${this.checkboxValue}`}\n            />\n            <label class=\"hy-checkbox__label\" htmlFor={`${this.checkboxId}`}>\n              <span class=\"hy-checkbox__checkmark\">\n                <hy-icon class=\"hy-checkbox__label-icon\" icon={'hy-icon-done'} size={23} aria-hidden=\"true\" />\n              </span>\n              {this.checkboxLabel}\n            </label>\n          </Host>\n        );\n    }\n  }\n}\n"]}