@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/esm/hy-box.entry.js

@@ -0,0 +1,165 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { c as css } from './emotion.esm-e0a633a4.js';
+
+const hyBoxCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}";
+
+/*
+Example of using hy-box:
+<hy-box mb="1.75, 1.75, 2, 2.5" />
+Where mb = margin-bottom,
+mobile up to 30rem: 1.75rem (mb[0])
+tablet, 30rem - 60rem: 1.75rem (mb[1])
+wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
+xlarge, > 100.0625: 2.5rem (mb[3])
+* */
+const toRemValue = (val) => {
+  return typeof val === "number" ? `${val}rem` : undefined;
+};
+const breakpoints = ["30rem", "60rem", "75.0625rem", "100.0625rem"];
+/*
+Default - mobile
+mq[0] - tablet
+mq[1] - wide, >960px
+mq[2] - extrawide, > 1200px
+mq[3] - xlarge, >1600px
+* */
+const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
+const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align, direction }) => {
+  const last = width[width.length - 1];
+  return css `
+    padding-top: ${toRemValue(pt[0])};
+    padding-right: ${toRemValue(pr[0])};
+    padding-bottom: ${toRemValue(pb[0])};
+    padding-left: ${toRemValue(pl[0])};
+    margin-top: ${toRemValue(mt[0])};
+    margin-right: ${toRemValue(mr[0])};
+    margin-bottom: ${toRemValue(mb[0])};
+    margin-left: ${toRemValue(ml[0])};
+    height: ${toRemValue(h)};
+    background-color: ${!!bg ? `var(--${bg})` : "transparent"};
+    width: ${width[0]};
+    display: flex;
+    flex-flow: ${direction || "row"};
+    justify-content: ${justify || "flex-start"};
+    align-items: ${align || "flex-start"};
+
+    ${mq[0]} {
+      width: ${width[1]};
+
+      padding-top: ${toRemValue(pt[1])};
+      padding-right: ${toRemValue(pr[1])};
+      padding-bottom: ${toRemValue(pb[1])};
+      padding-left: ${toRemValue(pl[1])};
+
+      margin-top: ${toRemValue(mt[1])};
+      margin-right: ${toRemValue(mr[1])};
+      margin-bottom: ${toRemValue(mb[1])};
+      margin-left: ${toRemValue(ml[1])};
+    }
+    ${mq[1]} {
+      width: ${width[2] || last};
+
+      padding-top: ${toRemValue(pt[2])};
+      padding-right: ${toRemValue(pr[2])};
+      padding-bottom: ${toRemValue(pb[2])};
+      padding-left: ${toRemValue(pl[2])};
+
+      margin-top: ${toRemValue(mt[2])};
+      margin-right: ${toRemValue(mr[2])};
+      margin-bottom: ${toRemValue(mb[2])};
+      margin-left: ${toRemValue(ml[2])};
+    }
+    ${mq[2]} {
+      width: ${width[3] || last};
+
+      padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};
+      padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};
+      padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};
+      padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};
+
+      margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};
+      margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};
+      margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};
+      margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};
+    }
+    ${mq[3]} {
+      width: ${width[4] || last};
+
+      padding-top: ${toRemValue(pt[3])};
+      padding-right: ${toRemValue(pr[3])};
+      padding-bottom: ${toRemValue(pb[3])};
+      padding-left: ${toRemValue(pl[3])};
+
+      margin-top: ${toRemValue(mt[3])};
+      margin-right: ${toRemValue(mr[3])};
+      margin-bottom: ${toRemValue(mb[3])};
+      margin-left: ${toRemValue(ml[3])};
+    }
+  `;
+};
+const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(",").map((v) => `${v.trim()}`).map((v) => parseFloat(v));
+const HyBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headerstyle = "common";
+    this.p = undefined;
+    this.pl = undefined;
+    this.pr = undefined;
+    this.pb = undefined;
+    this.pt = undefined;
+    this.m = undefined;
+    this.ml = undefined;
+    this.mr = undefined;
+    this.mb = undefined;
+    this.mt = undefined;
+    this.justify = "flex-start";
+    this.align = "baseline";
+    this.h = undefined;
+    this.bg = "transparent";
+    this.width = "100";
+    this.direction = "row";
+  }
+  componentWillLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
+    const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
+    const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
+    const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
+    const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
+    const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
+    const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
+    const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
+    const hasSidebar = this.headerstyle == "common";
+    return (h(Host, { class: createCssClass({
+        hasSidebar,
+        pt,
+        pl,
+        pr,
+        pb,
+        mt,
+        ml,
+        mr,
+        mb,
+        h: this.h,
+        bg: this.bg,
+        width: this.width.split(",").map((v) => `${v.trim()}%`),
+        justify: this.justify,
+        align: this.align,
+        direction: this.direction,
+      }) }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+HyBox.style = hyBoxCss;
+
+export { HyBox as hy_box };
+
+//# sourceMappingURL=hy-box.entry.js.map

package/dist/esm/hy-box.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-box.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-box/hy-box.scss?tag=hy-box","./src/components/hy-box/hy-box.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","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"],"version":3}