@studiometa/ui 0.2.47 → 0.2.49

package/atoms/FigureVideo/FigureVideoTwicpics.d.ts

@@ -0,0 +1,57 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { FigureVideo } from './FigureVideo.js';
+export interface FigureVideoTwicpicsProps extends BaseProps {
+    $refs: {
+        video: HTMLVideoElement;
+    };
+    $options: {
+        lazy: boolean;
+        transform: string;
+        domain: string;
+        path: string;
+        step: number;
+        mode: string;
+    };
+}
+/**
+ * FigureVideo class.
+ *
+ * Manager lazyloading image sources.
+ */
+export declare class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<T & FigureVideoTwicpicsProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Get the Twicpics path.
+     */
+    get path(): string;
+    /**
+     * Get the Twicpics domain.
+     */
+    get domain(): string;
+    /**
+     * Format the source for Twicpics.
+     * @param {string} src
+     * @param {Array} options
+     * @returns {string}
+     */
+    formatSrc(src: string, options?: Array<string>): string;
+    /**
+     * Load poster
+     */
+    loadPoster(): Promise<void | HTMLImageElement>;
+    /**
+     * Load sources
+     */
+    loadSources(): Promise<void>;
+    /**
+     * Reassign the source from the original on resize.
+     */
+    resized(): Promise<void>;
+    /**
+     * Do not terminate on image load as we need to set the src on resize.
+     */
+    onLoad(): void;
+}

package/atoms/FigureVideo/FigureVideoTwicpics.js

@@ -0,0 +1,135 @@
+import {
+  withLeadingSlash,
+  withoutLeadingSlash,
+  withoutTrailingSlash
+} from "@studiometa/js-toolkit/utils";
+import { loadImage } from "../index.js";
+import { FigureVideo } from "./FigureVideo.js";
+function normalizeSize(that, prop) {
+  const { step } = that.$options;
+  return Math.ceil(that.$refs.video[prop] / step) * step;
+}
+class FigureVideoTwicpics extends FigureVideo {
+  /**
+   * Config.
+   */
+  static config = {
+    ...FigureVideo.config,
+    name: "FigureVideoTwicpics",
+    options: {
+      ...FigureVideo.config.options,
+      transform: String,
+      domain: String,
+      path: String,
+      step: {
+        type: Number,
+        default: 50
+      },
+      mode: {
+        type: String,
+        default: "cover"
+      }
+    }
+  };
+  /**
+   * Get the Twicpics path.
+   */
+  get path() {
+    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));
+  }
+  /**
+   * Get the Twicpics domain.
+   */
+  get domain() {
+    if (this.$options.domain) {
+      return this.$options.domain;
+    }
+    const url = new URL(this.sources[0].dataset.src);
+    return url.host;
+  }
+  /**
+   * Format the source for Twicpics.
+   * @param {string} src
+   * @param {Array} options
+   * @returns {string}
+   */
+  formatSrc(src, options = []) {
+    const url = new URL(src, "https://localhost");
+    url.host = this.domain;
+    url.port = "";
+    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {
+      url.pathname = `/${this.path}${url.pathname}`;
+    }
+    const width = normalizeSize(this, "offsetWidth");
+    const height = normalizeSize(this, "offsetHeight");
+    this.$log(this.$options.mode, width, height);
+    url.searchParams.set(
+      "twic",
+      ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options].filter(Boolean).join("/")
+    );
+    url.search = decodeURIComponent(url.search);
+    return url.toString();
+  }
+  /**
+   * Load poster
+   */
+  loadPoster() {
+    const { video } = this.$refs;
+    if (!video.dataset.poster) {
+      return Promise.resolve();
+    }
+    const twicPoster = this.formatSrc(video.dataset.poster);
+    return loadImage(twicPoster).then(() => {
+      video.poster = twicPoster;
+      this.$log("fresh poster loaded");
+    });
+  }
+  /**
+   * Load sources
+   */
+  loadSources() {
+    const { video } = this.$refs;
+    this.sources.forEach((source) => {
+      if (!source.dataset.src) {
+        return;
+      }
+      source.src = this.formatSrc(
+        source.dataset.src,
+        source.dataset.output ? [`output=${source.dataset.output}`] : []
+      );
+    });
+    return new Promise((resolve) => {
+      const loadHandler = () => {
+        resolve();
+        video.removeEventListener("canplaythrough", loadHandler);
+        this.$log("fresh sources loaded");
+      };
+      video.addEventListener("canplaythrough", loadHandler);
+      this.$refs.video.width = normalizeSize(this, "offsetWidth");
+      this.$refs.video.height = normalizeSize(this, "offsetHeight");
+      video.load();
+    });
+  }
+  /**
+   * Reassign the source from the original on resize.
+   */
+  async resized() {
+    const width = normalizeSize(this, "offsetWidth");
+    const height = normalizeSize(this, "offsetHeight");
+    if (width === this.$refs.video.width && height === this.$refs.video.height) {
+      return;
+    }
+    this.$refs.video.width = width;
+    this.$refs.video.height = height;
+    await this.load();
+  }
+  /**
+   * Do not terminate on image load as we need to set the src on resize.
+   */
+  onLoad() {
+  }
+}
+export {
+  FigureVideoTwicpics
+};
+//# sourceMappingURL=FigureVideoTwicpics.js.map

package/atoms/FigureVideo/FigureVideoTwicpics.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/FigureVideo/FigureVideoTwicpics.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport {\n  withLeadingSlash,\n  withoutLeadingSlash,\n  withoutTrailingSlash,\n} from '@studiometa/js-toolkit/utils';\nimport { loadImage } from '../index.js';\nimport { FigureVideo } from './FigureVideo.js';\n\nexport interface FigureVideoTwicpicsProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n    transform: string;\n    domain: string;\n    path: string;\n    step: number;\n    mode: string;\n  };\n}\n\n/**\n * Normalize the given size to the step option.\n */\n// eslint-disable-next-line no-use-before-define\nfunction normalizeSize(that: FigureVideoTwicpics, prop: string): number {\n  const { step } = that.$options;\n  return Math.ceil(that.$refs.video[prop] / step) * step;\n}\n\n/**\n * FigureVideo class.\n *\n * Manager lazyloading image sources.\n */\nexport class FigureVideoTwicpics<T extends BaseProps = BaseProps> extends FigureVideo<\n  T & FigureVideoTwicpicsProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...FigureVideo.config,\n    name: 'FigureVideoTwicpics',\n    options: {\n      ...FigureVideo.config.options,\n      transform: String,\n      domain: String,\n      path: String,\n      step: {\n        type: Number,\n        default: 50,\n      },\n      mode: {\n        type: String,\n        default: 'cover',\n      },\n    },\n  };\n\n  /**\n   * Get the Twicpics path.\n   */\n  get path(): string {\n    return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));\n  }\n\n  /**\n   * Get the Twicpics domain.\n   */\n  get domain(): string {\n    if (this.$options.domain) {\n      return this.$options.domain;\n    }\n    const url = new URL(this.sources[0].dataset.src);\n    return url.host;\n  }\n\n  /**\n   * Format the source for Twicpics.\n   * @param {string} src\n   * @param {Array} options\n   * @returns {string}\n   */\n  formatSrc(src: string, options: Array<string> = []): string {\n    const url = new URL(src, 'https://localhost');\n    url.host = this.domain;\n    url.port = '';\n\n    if (this.path && !url.pathname.startsWith(withLeadingSlash(this.path))) {\n      url.pathname = `/${this.path}${url.pathname}`;\n    }\n\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    this.$log(this.$options.mode, width, height);\n\n    url.searchParams.set(\n      'twic',\n      ['v1', this.$options.transform, `${this.$options.mode}=${width}x${height}`, ...options]\n        .filter(Boolean)\n        .join('/'),\n    );\n\n    url.search = decodeURIComponent(url.search);\n\n    return url.toString();\n  }\n\n  /**\n   * Load poster\n   */\n  loadPoster(): Promise<void|HTMLImageElement> {\n    const { video } = this.$refs;\n\n    if (!video.dataset.poster) {\n      return Promise.resolve();\n    }\n\n    const twicPoster = this.formatSrc(video.dataset.poster);\n\n    return loadImage(twicPoster).then(() => {\n      video.poster = twicPoster;\n      this.$log('fresh poster loaded');\n    });\n  }\n\n  /**\n   * Load sources\n   */\n  loadSources(): Promise<void> {\n    const { video } = this.$refs;\n\n    this.sources.forEach((source) => {\n      if (!source.dataset.src) {\n        return;\n      }\n      source.src = this.formatSrc(\n        source.dataset.src,\n        source.dataset.output ? [`output=${source.dataset.output}`] : [],\n      );\n    });\n\n    return new Promise((resolve) => {\n      const loadHandler = () => {\n        resolve();\n        video.removeEventListener('canplaythrough', loadHandler);\n        this.$log('fresh sources loaded');\n      };\n\n      video.addEventListener('canplaythrough', loadHandler);\n\n      this.$refs.video.width = normalizeSize(this, 'offsetWidth');\n      this.$refs.video.height = normalizeSize(this, 'offsetHeight');\n\n      video.load();\n    });\n  }\n\n  /**\n   * Reassign the source from the original on resize.\n   */\n  async resized() {\n    const width = normalizeSize(this, 'offsetWidth');\n    const height = normalizeSize(this, 'offsetHeight');\n\n    if (width === this.$refs.video.width && height === this.$refs.video.height) {\n      return;\n    }\n\n    this.$refs.video.width = width;\n    this.$refs.video.height = height;\n\n    await this.load();\n  }\n\n  /**\n   * Do not terminate on image load as we need to set the src on resize.\n   */\n  onLoad() {\n    // Do not terminate on image load as we need.\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/atoms/FigureVideo/FigureVideoTwicpics.twig

@@ -0,0 +1,98 @@
+{#
+/**
+ * @file
+ * FigureVideo with Twicpics component.
+ *
+ * @param string $twic_domain
+ *   The Twicpics domain to use.
+ * @param string $twic_path
+ *   The Twicpics path to use.
+ * @param object $twic_transform
+ *   Custom transforms for Twicpics.
+ */
+#}
+
+{% extends '@ui-pkg/atoms/FigureVideo/FigureVideo.twig' %}
+
+{% set twic_param = 'v1' %}
+{% if twic_transform is defined %}
+  {% set formatted_transform = [] %}
+  {% for key, value in twic_transform %}
+    {% set formatted_transform = formatted_transform|merge(['%s=%s'|format(key, value)]) %}
+  {% endfor %}
+  {% set formatted_transform = formatted_transform|join('/') %}
+
+  {% set twic_param = 'v1/%s'|format(formatted_transform) %}
+  {% set attr = (attr ?? {})|merge({ data_option_transform: formatted_transform }) %}
+{% endif %}
+
+{% if twic_domain is defined %}
+  {% set attr = (attr ?? {})|merge({ data_option_domain: twic_domain }) %}
+{% endif %}
+
+{% if twic_path is defined %}
+  {% set attr = (attr ?? {})|merge({ data_option_path: twic_path }) %}
+{% endif %}
+
+{% block sources %}
+  {% if sources is empty %}
+    {% set twic_src =
+      twig_toolkit_url(src).withQueryParameter('twic', twic_param).withScheme('https')
+    %}
+
+    {% if twic_domain is defined %}
+      {% set twic_src = twic_src.withHost(twic_domain) %}
+    {% endif %}
+
+    {% if twic_path is defined %}
+      {% set twic_src = twic_src.withPath(twic_path ~ twic_src.getPath()) %}
+    {% endif %}
+
+    {% set sources = [
+      {
+        src: twic_src.withQueryParameter('twic', '%s/output=%s'|format(twic_param, 'h265')),
+        data_output: lazy ? 'h265' : false,
+        type: 'video/mp4;codecs=hvc1'
+      },
+      {
+        src: twic_src.withQueryParameter('twic', '%s/output=%s'|format(twic_param, 'vp9')),
+        data_output: lazy ? 'vp9' : false,
+        type: 'video/webm;codecs=vp9'
+      },
+      {
+        src: twic_src.withQueryParameter('twic', '%s/output=%s'|format(twic_param, 'h264')),
+        data_output: lazy ? 'h264' : false
+      }
+    ] %}
+  {% endif %}
+
+  {% for source in sources %}
+    {% if twic_src is empty and source.src is not empty %}
+      {% set source_twic_src =
+        twig_toolkit_url(source.src).withQueryParameter('twic', twic_param).withScheme('https')
+      %}
+
+      {% if twic_domain is defined %}
+        {% set source_twic_src = source_twic_src.withHost(twic_domain) %}
+      {% endif %}
+
+      {% if twic_path is defined %}
+        {% set source_twic_src = source_twic_src.withPath(twic_path ~ source_twic_src.getPath()) %}
+      {% endif %}
+    {% else %}
+      {% set source_twic_src = source.src %}
+    {% endif %}
+
+    <source {{
+      html_attributes(
+        merge_html_attributes(
+          source,
+          {
+            src: lazy ? false : source_twic_src|default(false),
+            data_src: lazy ? source_twic_src|default(false) : false
+          }
+        )
+      )
+      }} />
+  {% endfor %}
+{% endblock %}

package/atoms/FigureVideo/index.cjs

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/FigureVideo/index.ts
+var FigureVideo_exports = {};
+module.exports = __toCommonJS(FigureVideo_exports);
+__reExport(FigureVideo_exports, require("./FigureVideo.cjs"), module.exports);
+__reExport(FigureVideo_exports, require("./FigureVideoTwicpics.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/atoms/FigureVideo/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/FigureVideo/index.ts"],
+  "sourcesContent": ["export * from './FigureVideo.js';\nexport * from './FigureVideoTwicpics.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gCAAc,8BAAd;AACA,gCAAc,sCADd;",
+  "names": []
+}

package/atoms/FigureVideo/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FigureVideo.js';
+export * from './FigureVideoTwicpics.js';

package/atoms/FigureVideo/index.js

@@ -0,0 +1,3 @@
+export * from "./FigureVideo.js";
+export * from "./FigureVideoTwicpics.js";
+//# sourceMappingURL=index.js.map

package/atoms/FigureVideo/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/FigureVideo/index.ts"],
+  "sourcesContent": ["export * from './FigureVideo.js';\nexport * from './FigureVideoTwicpics.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/atoms/Icon/IconInline.twig

@@ -3,8 +3,9 @@
  * @file
  * Icon component
  *
- * @param string $name The file name of the icon.
- * @param array $attr Custom attributes.
+ * @param string  $name           The file name of the icon.
+ * @param boolean $ignore_missing Avoid empty <span> printing
+ * @param array   $attr           Custom attributes.
  */
 #}
 
@@ -21,6 +22,12 @@
   }
 ) %}
 
-<span {{ html_attributes(attributes) }}>
+{%- set icon -%}
   {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
-</span>
+{%- endset -%}
+
+{% if icon is not empty or not ignore_missing %}
+  <span {{ html_attributes(attributes) }}>
+    {{ icon }}
+  </span>
+{% endif %}

package/atoms/Icon/IconInlineImg.twig

@@ -4,54 +4,57 @@
  * Icon Image component
  * Use `<img>` instead of injecting the SVG file.
  *
- * @param string $name The file name of the icon.
- * @param array $attr Custom attributes.
- * @param array $css_vars Custom CSS variables to pass to the SVG.
- * @param string $current_color Custom color for the `currentColor` CSS variable in the SVG.
+ * @param string  $name           The file name of the icon.
+ * @param boolean $ignore_missing Avoid empty <img> printing
+ * @param array   $attr           Custom attributes.
+ * @param array   $css_vars       Custom CSS variables to pass to the SVG.
+ * @param string  $current_color  Custom color for the `currentColor` CSS variable in the SVG.
  */
 #}
 {%- set svg -%}
   {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
 {%- endset -%}
 
-{% if current_color is defined or css_vars is defined %}
-  {%- set style -%}
-    <style>
-      :root {
-        {% if current_color is defined %}
-          color: {{ current_color }};
-        {% endif %}
-        {% if css_vars is defined %}
-          {% for var, value in css_vars %}
-            --{{ var }}: {{ value }};
-          {% endfor %}
-        {% endif %}
-      }
-    </style>
-  {%- endset -%}
+{% if svg is not empty or not ignore_missing %}
+  {% if current_color is defined or css_vars is defined %}
+    {%- set style -%}
+      <style>
+        :root {
+          {% if current_color is defined %}
+            color: {{ current_color }};
+          {% endif %}
+          {% if css_vars is defined %}
+            {% for var, value in css_vars %}
+              --{{ var }}: {{ value }};
+            {% endfor %}
+          {% endif %}
+        }
+      </style>
+    {%- endset -%}
 
-  {% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
-{% endif %}
+    {% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
+  {% endif %}
 
-{% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
-  {% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
-{% endif %}
+  {% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
+    {% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
+  {% endif %}
 
-{% set attributes = merge_html_attributes(
-  attr ?? null,
-  {
-    width: '',
-    height: '',
-    alt: ' ',
-    aria_hidden: 'true'
-  },
-  {
-    src: 'data:image/svg+xml,%s'|format(svg|url_encode),
-    class: [
-      'icon-img',
-      'icon-img--%s'|format(name),
-    ],
-  }
-) %}
+  {% set attributes = merge_html_attributes(
+    attr ?? null,
+    {
+      width: '',
+      height: '',
+      alt: ' ',
+      aria_hidden: 'true'
+    },
+    {
+      src: svg ? 'data:image/svg+xml,%s'|format(svg|url_encode) : '',
+      class: [
+        'icon-img',
+        'icon-img--%s'|format(name),
+      ],
+    }
+  ) %}
 
-<img {{ html_attributes(attributes) }}>
+  <img {{ html_attributes(attributes) }}>
+{% endif %}

package/atoms/index.cjs

@@ -21,6 +21,7 @@ __reExport(atoms_exports, require("./AnchorScrollTo/index.cjs"), module.exports)
 __reExport(atoms_exports, require("./CircularMarquee/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Cursor/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
+__reExport(atoms_exports, require("./FigureVideo/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./LargeText/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./LazyInclude/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Prefetch/index.cjs"), module.exports);

package/atoms/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/atoms/index.ts"],
-  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,+BAAd;AACA,0BAAc,uCADd;AAEA,0BAAc,wCAFd;AAGA,0BAAc,+BAHd;AAIA,0BAAc,+BAJd;AAKA,0BAAc,kCALd;AAMA,0BAAc,oCANd;AAOA,0BAAc,iCAPd;AAQA,0BAAc,wCARd;AASA,0BAAc,qCATd;",
+  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,+BAAd;AACA,0BAAc,uCADd;AAEA,0BAAc,wCAFd;AAGA,0BAAc,+BAHd;AAIA,0BAAc,+BAJd;AAKA,0BAAc,oCALd;AAMA,0BAAc,kCANd;AAOA,0BAAc,oCAPd;AAQA,0BAAc,iCARd;AASA,0BAAc,wCATd;AAUA,0BAAc,qCAVd;",
   "names": []
 }

package/atoms/index.d.ts

@@ -3,6 +3,7 @@ export * from './AnchorScrollTo/index.js';
 export * from './CircularMarquee/index.js';
 export * from './Cursor/index.js';
 export * from './Figure/index.js';
+export * from './FigureVideo/index.js';
 export * from './LargeText/index.js';
 export * from './LazyInclude/index.js';
 export * from './Prefetch/index.js';

package/atoms/index.js

@@ -3,6 +3,7 @@ export * from "./AnchorScrollTo/index.js";
 export * from "./CircularMarquee/index.js";
 export * from "./Cursor/index.js";
 export * from "./Figure/index.js";
+export * from "./FigureVideo/index.js";
 export * from "./LargeText/index.js";
 export * from "./LazyInclude/index.js";
 export * from "./Prefetch/index.js";

package/atoms/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/atoms/index.ts"],
-  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Action/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/molecules/AnchorNav/AnchorNav.cjs

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/AnchorNav/AnchorNav.ts
+var AnchorNav_exports = {};
+__export(AnchorNav_exports, {
+  AnchorNav: () => AnchorNav
+});
+module.exports = __toCommonJS(AnchorNav_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_AnchorNavLink = require("./AnchorNavLink.cjs");
+var import_AnchorNavTarget = require("./AnchorNavTarget.cjs");
+var AnchorNav = class extends import_js_toolkit.Base {
+  /**
+   * Config
+   */
+  static config = {
+    name: "AnchorNav",
+    components: {
+      AnchorNavLink: import_AnchorNavLink.AnchorNavLink,
+      AnchorNavTarget: import_AnchorNavTarget.AnchorNavTarget
+    }
+  };
+  /**
+   * Listen to the AnchorNavTarget that is mounted
+   */
+  onAnchorNavTargetMounted(index) {
+    const { id } = this.$children.AnchorNavTarget[index].$el;
+    this.$children.AnchorNavLink.forEach((anchorNavLink) => {
+      if (id === anchorNavLink.targetId) {
+        anchorNavLink.enter();
+      }
+    });
+  }
+  /**
+   * Listen to the AnchorNavTarget that is destroyed
+   */
+  onAnchorNavTargetDestroyed(index) {
+    const { id } = this.$children.AnchorNavTarget[index].$el;
+    this.$children.AnchorNavLink.forEach((anchorNavLink) => {
+      if (id === anchorNavLink.targetId) {
+        anchorNavLink.leave();
+      }
+    });
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=AnchorNav.cjs.map

package/molecules/AnchorNav/AnchorNav.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNav.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,2BAA8B;AAC9B,6BAAgC;AASzB,IAAM,YAAN,cAAyD,uBAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB,OAAO;AAC9B,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,2BAA2B,OAAO;AAChC,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/molecules/AnchorNav/AnchorNav.d.ts

@@ -0,0 +1,24 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorNavLink } from './AnchorNavLink.js';
+import { AnchorNavTarget } from './AnchorNavTarget.js';
+export interface AnchorNavProps extends BaseProps {
+    $children: {
+        AnchorNavLink: AnchorNavLink[];
+        AnchorNavTarget: AnchorNavTarget[];
+    };
+}
+export declare class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {
+    /**
+     * Config
+     */
+    static config: BaseConfig;
+    /**
+     * Listen to the AnchorNavTarget that is mounted
+     */
+    onAnchorNavTargetMounted(index: any): void;
+    /**
+     * Listen to the AnchorNavTarget that is destroyed
+     */
+    onAnchorNavTargetDestroyed(index: any): void;
+}