@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/components/image.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './hy-box2.js';
+
+const imageCss = ":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}.hy-image{width:100%}.hy-image__image-container.hy-image--no-aspect img{height:auto;width:auto;max-width:100%}.hy-image__image-container.hy-image--with-aspect{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin-bottom:0;min-height:10rem;position:relative}.hy-image__image-container.hy-image--with-aspect:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-image__image-container.hy-image--with-aspect img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-two-columns .hy-image__image-container.hy-image--with-aspect img{-o-object-fit:contain;object-fit:contain;-o-object-position:top;object-position:top}.hy-image__caption{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px;padding:19px 0}";
+
+const Image = /*@__PURE__*/ proxyCustomElement(class Image extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.imageUrl = null;
+    this.imageAlt = null;
+    this.disableLazy = false;
+    this.caption = null;
+    this.aspectRatioWidth = 16;
+    this.aspectRatioHeight = 9;
+    this.sourceSet = undefined;
+  }
+  srcSetWatcher(data) {
+    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  componentWillLoad() {
+    this.srcSetWatcher(this.sourceSet);
+  }
+  render() {
+    let aspectRatio = null;
+    if (this.aspectRatioWidth !== 0 && this.aspectRatioWidth !== 0) {
+      const aspect = (this.aspectRatioHeight / this.aspectRatioWidth) * 100;
+      aspectRatio = {
+        "--aspectRatio": `${aspect}%`,
+      };
+    }
+    const classAttributes = ["hy-image", this.caption ? "hy-image--with-caption" : null].join(" ");
+    const containerClasses = [
+      "hy-image__image-container",
+      aspectRatio !== null ? "hy-image--with-aspect" : "hy-image--no-aspect",
+    ].join(" ");
+    return [
+      h("div", { class: classAttributes }, h("div", { class: containerClasses, style: aspectRatio !== null ? aspectRatio : "" }, this.imageUrl &&
+        (this._sourceSet ? (h("picture", null, this._sourceSet.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes || "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl })))), this.caption && h("div", { class: "hy-image__caption" }, this.caption)),
+      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
+    ];
+  }
+  static get watchers() { return {
+    "sourceSet": ["srcSetWatcher"]
+  }; }
+  static get style() { return imageCss; }
+}, [0, "hy-image", {
+    "imageUrl": [1, "image-url"],
+    "imageAlt": [1, "image-alt"],
+    "disableLazy": [4, "disable-lazy"],
+    "caption": [1],
+    "aspectRatioWidth": [2, "aspect-ratio-width"],
+    "aspectRatioHeight": [2, "aspect-ratio-height"],
+    "sourceSet": [1, "source-set"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-image", "hy-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-image":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Image);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Image as I, defineCustomElement as d };

package/components/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/components/index.js

@@ -0,0 +1,2 @@
+import './globalScript.js';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';