@studiometa/ui 0.2.47 → 0.2.49

package/atoms/Button/Button.twig

@@ -8,6 +8,7 @@
  * @param string $href
  * @param array $attr
  * @param string $icon
+ * @param array  $icon_attr
  * @param array|string $icon_classes
  * @param 'start'|'end' $icon_position
  * @param boolean $icon_only
@@ -39,12 +40,21 @@
 
 {% set rendered_icon %}
   {% block icon %}
-    {% include '@ui/atoms/Icon/Icon.twig' with {
+    {# @TODO: Breaking change -> Delete icon_classes to use only icon_attr #}
+    {% include '@ui/atoms/Icon/IconInline.twig' with {
       name: icon ?? '',
-      classes: icon_classes ?? {
-        'mr-3': not icon_only and icon_position == 'start',
-        'ml-3': not icon_only and icon_position == 'end',
-       }
+      attr: merge_html_attributes(
+        icon_attr ?? null,
+        {
+          class: {
+            'mr-3': not icon_only and icon_position == 'start',
+            'ml-3': not icon_only and icon_position == 'end',
+          }
+        },
+        {
+          class: icon_classes,
+        },
+      )
     } %}
   {% endblock %}
 {% endset %}

package/atoms/FigureVideo/FigureVideo.cjs

@@ -0,0 +1,132 @@
+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/atoms/FigureVideo/FigureVideo.ts
+var FigureVideo_exports = {};
+__export(FigureVideo_exports, {
+  FigureVideo: () => FigureVideo
+});
+module.exports = __toCommonJS(FigureVideo_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_primitives = require("../../primitives/index.cjs");
+var import__ = require("../index.cjs");
+var FigureVideo = class extends (0, import_js_toolkit.withMountWhenInView)(
+  import_primitives.Transition,
+  {
+    threshold: [0, 1]
+  }
+) {
+  /**
+   * Config.
+   */
+  static config = {
+    ...import_primitives.Transition.config,
+    name: "FigureVideo",
+    emits: ["load"],
+    refs: ["video"],
+    options: {
+      ...import_primitives.Transition.config.options,
+      lazy: Boolean
+    }
+  };
+  /**
+   * Get the transition target.
+   */
+  get target() {
+    return this.$refs.video;
+  }
+  /**
+   * Get the video sources.
+   */
+  get sources() {
+    return Array.from(this.$refs.video.querySelectorAll("source"));
+  }
+  /**
+   * Load poster
+   */
+  loadPoster() {
+    const { video } = this.$refs;
+    if (!video.dataset.poster) {
+      return Promise.resolve();
+    }
+    return (0, import__.loadImage)(video.dataset.poster).then(() => {
+      video.poster = video.dataset.poster;
+      this.$log("fresh poster loaded");
+    });
+  }
+  /**
+   * Load sources
+   * @returns {Promise}
+   */
+  loadSources() {
+    const { video } = this.$refs;
+    this.sources.forEach((source) => {
+      if (!source.dataset.src) {
+        return;
+      }
+      source.src = source.dataset.src;
+    });
+    return new Promise((resolve) => {
+      const loadHandler = () => {
+        video.removeEventListener("loadeddata", loadHandler);
+        this.$log("fresh sources loaded");
+        resolve();
+      };
+      video.addEventListener("loadeddata", loadHandler);
+      video.load();
+    });
+  }
+  /**
+   * Load
+   * @returns {Promise}
+   */
+  load() {
+    return Promise.all([this.loadPoster(), this.loadSources()]);
+  }
+  /**
+   * Load on mount.
+   */
+  async mounted() {
+    this.$log("mounted");
+    const { video } = this.$refs;
+    if (!video) {
+      throw new Error("[VideoFigure] The `video` ref is required.");
+    }
+    if (!(video instanceof HTMLVideoElement)) {
+      throw new Error("[VideoFigure] The `video` ref must be an `<video>` element.");
+    }
+    if (!this.$options.lazy) {
+      this.$log("Lazy loading disabled");
+      return;
+    }
+    this.$log("start loading");
+    await this.load();
+    this.$log("all is loaded");
+    await this.enter();
+    this.$log("transition done");
+    this.$emit("load");
+  }
+  /**
+   * Terminate the component on load.
+   */
+  onLoad() {
+    this.$terminate();
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=FigureVideo.cjs.map

package/atoms/FigureVideo/FigureVideo.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/FigureVideo/FigureVideo.ts"],
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\nimport { loadImage } from '../index.js';\n\nexport interface FigureVideoProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * FigureVideo class.\n */\nexport class FigureVideo<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n  Transition,\n  {\n    threshold: [0, 1],\n  },\n)<T & FigureVideoProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FigureVideo',\n    emits: ['load'],\n    refs: ['video'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLVideoElement {\n    return this.$refs.video;\n  }\n\n  /**\n   * Get the video sources.\n   */\n  get sources(): Array<HTMLSourceElement> {\n    return Array.from(this.$refs.video.querySelectorAll('source'));\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    return loadImage(video.dataset.poster).then(() => {\n      video.poster = video.dataset.poster;\n      this.$log('fresh poster loaded');\n    })\n  }\n\n  /**\n   * Load sources\n   * @returns {Promise}\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 = source.dataset.src;\n    });\n\n    return new Promise<void>((resolve) => {\n      const loadHandler = () => {\n        video.removeEventListener('loadeddata', loadHandler);\n        this.$log('fresh sources loaded');\n        resolve();\n      };\n      video.addEventListener('loadeddata', loadHandler);\n      video.load();\n    });\n  }\n\n  /**\n   * Load\n   * @returns {Promise}\n   */\n  load(): Promise<any[]> {\n    return Promise.all([this.loadPoster(), this.loadSources()]);\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    this.$log('mounted');\n    const { video } = this.$refs;\n\n    if (!video) {\n      throw new Error('[VideoFigure] The `video` ref is required.');\n    }\n\n    if (!(video instanceof HTMLVideoElement)) {\n      throw new Error('[VideoFigure] The `video` ref must be an `<video>` element.');\n    }\n\n    if (!this.$options.lazy) {\n      this.$log('Lazy loading disabled');\n      return;\n    }\n\n    this.$log('start loading');\n    await this.load();\n    this.$log('all is loaded');\n    await this.enter();\n    this.$log('transition done');\n    this.$emit('load');\n  }\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAC3B,eAA0B;AAcnB,IAAM,cAAN,kBAA2D;AAAA,EAChE;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAwB;AAAA;AAAA;AAAA;AAAA,EAItB,OAAO,SAAqB;AAAA,IAC1B,GAAG,6BAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA,MACP,GAAG,6BAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAA2B;AAC7B,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAoC;AACtC,WAAO,MAAM,KAAK,KAAK,MAAM,MAAM,iBAAiB,QAAQ,CAAC;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA,EAKA,aAA6C;AAC3C,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,MAAM,QAAQ,QAAQ;AACzB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,eAAO,oBAAU,MAAM,QAAQ,MAAM,EAAE,KAAK,MAAM;AAChD,YAAM,SAAS,MAAM,QAAQ;AAC7B,WAAK,KAAK,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAA6B;AAC3B,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,UAAI,CAAC,OAAO,QAAQ,KAAK;AACvB;AAAA,MACF;AACA,aAAO,MAAM,OAAO,QAAQ;AAAA,IAC9B,CAAC;AAED,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,YAAM,cAAc,MAAM;AACxB,cAAM,oBAAoB,cAAc,WAAW;AACnD,aAAK,KAAK,sBAAsB;AAChC,gBAAQ;AAAA,MACV;AACA,YAAM,iBAAiB,cAAc,WAAW;AAChD,YAAM,KAAK;AAAA,IACb,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAuB;AACrB,WAAO,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,KAAK,YAAY,CAAC,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,SAAK,KAAK,SAAS;AACnB,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,4CAA4C;AAAA,IAC9D;AAEA,QAAI,EAAE,iBAAiB,mBAAmB;AACxC,YAAM,IAAI,MAAM,6DAA6D;AAAA,IAC/E;AAEA,QAAI,CAAC,KAAK,SAAS,MAAM;AACvB,WAAK,KAAK,uBAAuB;AACjC;AAAA,IACF;AAEA,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,KAAK;AAChB,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,MAAM;AACjB,SAAK,KAAK,iBAAiB;AAC3B,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
+  "names": []
+}

package/atoms/FigureVideo/FigureVideo.d.ts

@@ -0,0 +1,51 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Transition } from '../../primitives/index.js';
+export interface FigureVideoProps extends BaseProps {
+    $refs: {
+        video: HTMLVideoElement;
+    };
+    $options: {
+        lazy: boolean;
+    };
+}
+declare const FigureVideo_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
+/**
+ * FigureVideo class.
+ */
+export declare class FigureVideo<T extends BaseProps = BaseProps> extends FigureVideo_base<T & FigureVideoProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Get the transition target.
+     */
+    get target(): HTMLVideoElement;
+    /**
+     * Get the video sources.
+     */
+    get sources(): Array<HTMLSourceElement>;
+    /**
+     * Load poster
+     */
+    loadPoster(): Promise<void | HTMLImageElement>;
+    /**
+     * Load sources
+     * @returns {Promise}
+     */
+    loadSources(): Promise<void>;
+    /**
+     * Load
+     * @returns {Promise}
+     */
+    load(): Promise<any[]>;
+    /**
+     * Load on mount.
+     */
+    mounted(): Promise<void>;
+    /**
+     * Terminate the component on load.
+     */
+    onLoad(): void;
+}
+export {};

package/atoms/FigureVideo/FigureVideo.js

@@ -0,0 +1,110 @@
+import { withMountWhenInView } from "@studiometa/js-toolkit";
+import { Transition } from "../../primitives/index.js";
+import { loadImage } from "../index.js";
+class FigureVideo extends withMountWhenInView(
+  Transition,
+  {
+    threshold: [0, 1]
+  }
+) {
+  /**
+   * Config.
+   */
+  static config = {
+    ...Transition.config,
+    name: "FigureVideo",
+    emits: ["load"],
+    refs: ["video"],
+    options: {
+      ...Transition.config.options,
+      lazy: Boolean
+    }
+  };
+  /**
+   * Get the transition target.
+   */
+  get target() {
+    return this.$refs.video;
+  }
+  /**
+   * Get the video sources.
+   */
+  get sources() {
+    return Array.from(this.$refs.video.querySelectorAll("source"));
+  }
+  /**
+   * Load poster
+   */
+  loadPoster() {
+    const { video } = this.$refs;
+    if (!video.dataset.poster) {
+      return Promise.resolve();
+    }
+    return loadImage(video.dataset.poster).then(() => {
+      video.poster = video.dataset.poster;
+      this.$log("fresh poster loaded");
+    });
+  }
+  /**
+   * Load sources
+   * @returns {Promise}
+   */
+  loadSources() {
+    const { video } = this.$refs;
+    this.sources.forEach((source) => {
+      if (!source.dataset.src) {
+        return;
+      }
+      source.src = source.dataset.src;
+    });
+    return new Promise((resolve) => {
+      const loadHandler = () => {
+        video.removeEventListener("loadeddata", loadHandler);
+        this.$log("fresh sources loaded");
+        resolve();
+      };
+      video.addEventListener("loadeddata", loadHandler);
+      video.load();
+    });
+  }
+  /**
+   * Load
+   * @returns {Promise}
+   */
+  load() {
+    return Promise.all([this.loadPoster(), this.loadSources()]);
+  }
+  /**
+   * Load on mount.
+   */
+  async mounted() {
+    this.$log("mounted");
+    const { video } = this.$refs;
+    if (!video) {
+      throw new Error("[VideoFigure] The `video` ref is required.");
+    }
+    if (!(video instanceof HTMLVideoElement)) {
+      throw new Error("[VideoFigure] The `video` ref must be an `<video>` element.");
+    }
+    if (!this.$options.lazy) {
+      this.$log("Lazy loading disabled");
+      return;
+    }
+    this.$log("start loading");
+    await this.load();
+    this.$log("all is loaded");
+    await this.enter();
+    this.$log("transition done");
+    this.$emit("load");
+  }
+  /**
+   * Terminate the component on load.
+   */
+  onLoad() {
+    this.$terminate();
+  }
+}
+export {
+  FigureVideo
+};
+//# sourceMappingURL=FigureVideo.js.map

package/atoms/FigureVideo/FigureVideo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/FigureVideo/FigureVideo.ts"],
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\nimport { loadImage } from '../index.js';\n\nexport interface FigureVideoProps extends BaseProps {\n  $refs: {\n    video: HTMLVideoElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * FigureVideo class.\n */\nexport class FigureVideo<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n  Transition,\n  {\n    threshold: [0, 1],\n  },\n)<T & FigureVideoProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FigureVideo',\n    emits: ['load'],\n    refs: ['video'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLVideoElement {\n    return this.$refs.video;\n  }\n\n  /**\n   * Get the video sources.\n   */\n  get sources(): Array<HTMLSourceElement> {\n    return Array.from(this.$refs.video.querySelectorAll('source'));\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    return loadImage(video.dataset.poster).then(() => {\n      video.poster = video.dataset.poster;\n      this.$log('fresh poster loaded');\n    })\n  }\n\n  /**\n   * Load sources\n   * @returns {Promise}\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 = source.dataset.src;\n    });\n\n    return new Promise<void>((resolve) => {\n      const loadHandler = () => {\n        video.removeEventListener('loadeddata', loadHandler);\n        this.$log('fresh sources loaded');\n        resolve();\n      };\n      video.addEventListener('loadeddata', loadHandler);\n      video.load();\n    });\n  }\n\n  /**\n   * Load\n   * @returns {Promise}\n   */\n  load(): Promise<any[]> {\n    return Promise.all([this.loadPoster(), this.loadSources()]);\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    this.$log('mounted');\n    const { video } = this.$refs;\n\n    if (!video) {\n      throw new Error('[VideoFigure] The `video` ref is required.');\n    }\n\n    if (!(video instanceof HTMLVideoElement)) {\n      throw new Error('[VideoFigure] The `video` ref must be an `<video>` element.');\n    }\n\n    if (!this.$options.lazy) {\n      this.$log('Lazy loading disabled');\n      return;\n    }\n\n    this.$log('start loading');\n    await this.load();\n    this.$log('all is loaded');\n    await this.enter();\n    this.$log('transition done');\n    this.$emit('load');\n  }\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAcnB,MAAM,oBAAqD;AAAA,EAChE;AAAA,EACA;AAAA,IACE,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AACF,EAAwB;AAAA;AAAA;AAAA;AAAA,EAItB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,OAAO;AAAA,IACd,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAA2B;AAC7B,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAoC;AACtC,WAAO,MAAM,KAAK,KAAK,MAAM,MAAM,iBAAiB,QAAQ,CAAC;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA,EAKA,aAA6C;AAC3C,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,MAAM,QAAQ,QAAQ;AACzB,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,WAAO,UAAU,MAAM,QAAQ,MAAM,EAAE,KAAK,MAAM;AAChD,YAAM,SAAS,MAAM,QAAQ;AAC7B,WAAK,KAAK,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAA6B;AAC3B,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,UAAI,CAAC,OAAO,QAAQ,KAAK;AACvB;AAAA,MACF;AACA,aAAO,MAAM,OAAO,QAAQ;AAAA,IAC9B,CAAC;AAED,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,YAAM,cAAc,MAAM;AACxB,cAAM,oBAAoB,cAAc,WAAW;AACnD,aAAK,KAAK,sBAAsB;AAChC,gBAAQ;AAAA,MACV;AACA,YAAM,iBAAiB,cAAc,WAAW;AAChD,YAAM,KAAK;AAAA,IACb,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAuB;AACrB,WAAO,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,KAAK,YAAY,CAAC,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,SAAK,KAAK,SAAS;AACnB,UAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,4CAA4C;AAAA,IAC9D;AAEA,QAAI,EAAE,iBAAiB,mBAAmB;AACxC,YAAM,IAAI,MAAM,6DAA6D;AAAA,IAC/E;AAEA,QAAI,CAAC,KAAK,SAAS,MAAM;AACvB,WAAK,KAAK,uBAAuB;AACjC;AAAA,IACF;AAEA,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,KAAK;AAChB,SAAK,KAAK,eAAe;AACzB,UAAM,KAAK,MAAM;AACjB,SAAK,KAAK,iBAAiB;AAC3B,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
+  "names": []
+}

package/atoms/FigureVideo/FigureVideo.twig

@@ -0,0 +1,152 @@
+{#
+/**
+ * @file
+ * Video Figure component.
+ *
+ * @param string $src
+ * @param array  $sources
+ * @param string $poster
+ * @param string $placeholder
+ * @param number $width
+ * @param number $height
+ * @param string $caption
+ * @param boolean $lazy
+ * @param 'cover'|'contain'|'fill'|'none' $fit
+ *   Define how the video will fit.
+ * @param boolean $absolute
+ *   Use absolute position on the video holder instead of relative.
+ * @param boolean $inline
+ *   Wether to enable the display of the figure inline or not. When `inline`, the root element
+ *   will have a max-width set corresponding to the `width` given. Use with caution.
+ * @param string $placeholder
+ *   Use a custom placeholder.
+ * @param string $placeholder_color
+ *   Set an hexadecimal custom color for the generic placeholder.
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $inner_attr
+ *   Custom attributes for the inner element.
+ * @param array $video_attr
+ *   Custom attributes for the video element.
+ * @param array $caption_attr
+ *   Custom attributes for the caption element.
+ *
+ * @block $caption
+ *   Use this block to customize the video's caption.
+ *
+ */
+#}
+
+{% set absolute = absolute|default(false) %}
+{% set inline = inline|default(false) %}
+{% set fit = fit ?? null %}
+{% set height = height|default(100) %}
+{% set width = width|default(100) %}
+{% set lazy = lazy ?? true %}
+{% set placeholder = placeholder|default('') %}
+
+{% if placeholder is empty %}
+  {% set placeholder_color = placeholder_color|default('#eee') %}
+  {%- set placeholder_markup -%}
+    <svg xmlns="http://www.w3.org/2000/svg"
+      viewbox="0 0 {{ width }} {{ height }}"
+      width="{{ width }}"
+      height="{{ height }}">
+      <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="{{ placeholder_color }}" />
+    </svg>
+  {%- endset -%}
+  {% set placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}
+{% endif %}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    { data_component: 'FigureVideo', class: ['figure-video', 'w-full'] },
+    {
+      style: { height: absolute ? '100%' : '', maxWidth: inline ? width ~ 'px' : '' },
+      data_option_lazy: lazy
+    }
+  )
+%}
+
+{% set video_attributes =
+  merge_html_attributes(
+    video_attr ?? null,
+    { class: 'figure-video__video' },
+    {
+      class: [
+        'absolute inset-0 w-full max-w-none h-full',
+        {
+          'object-cover': fit == 'cover',
+          'object-contain': fit == 'contain',
+          'object-fill': fit == 'fill',
+          'object-none': fit == 'none'
+        }
+      ],
+      poster: lazy and poster ? placeholder : poster,
+      data_poster: lazy and poster ? poster : false,
+      width: width|default(false),
+      height: height|default(false),
+      playsinline: true,
+      autoplay: true,
+      controls: false,
+      loop: true,
+      muted: true,
+      preload: lazy ? false : preload ?? false,
+      data_ref: 'video'
+    }
+  )
+%}
+
+{% set inner_attributes =
+  merge_html_attributes(
+    inner_attr ?? null,
+    { class: ['figure-video__inner'] },
+    {
+      class: absolute ? ['absolute', 'inset-0'] : ['relative', 'w-full', 'h-0'],
+      style: { paddingTop: absolute ? '' : height * 100 / width ~ '%' }
+    }
+  )
+%}
+
+{% set caption_attributes =
+  merge_html_attributes(caption_attr ?? null, { class: 'figure-video__caption' })
+%}
+
+<figure {{ html_attributes(attributes) }}>
+  <div {{ html_attributes(inner_attributes) }}>
+    <video {{ html_attributes(video_attributes) }}>
+      {% block sources %}
+        {% if sources is not empty %}
+          {% for source in sources %}
+            <source {{
+              html_attributes(
+                merge_html_attributes(
+                  source,
+                  {
+                    src: lazy ? false : source.src|default(false),
+                    data_src: lazy ? source.src|default(false) : false
+                  }
+                )
+              )
+              }} />
+          {% endfor %}
+        {% else %}
+          <source {{
+            html_attributes({
+              src: lazy ? false : src|default(false),
+              data_src: lazy ? src|default(false) : false
+            })
+            }} />
+        {% endif %}
+      {% endblock %}
+    </video>
+  </div>
+  {% if caption is defined %}
+    {% block caption %}
+      <figcaption {{ html_attributes(caption_attributes) }}>
+        {{ caption }}
+      </figcaption>
+    {% endblock %}
+  {% endif %}
+</figure>

package/atoms/FigureVideo/FigureVideoTwicpics.cjs

@@ -0,0 +1,153 @@
+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/atoms/FigureVideo/FigureVideoTwicpics.ts
+var FigureVideoTwicpics_exports = {};
+__export(FigureVideoTwicpics_exports, {
+  FigureVideoTwicpics: () => FigureVideoTwicpics
+});
+module.exports = __toCommonJS(FigureVideoTwicpics_exports);
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import__ = require("../index.cjs");
+var import_FigureVideo = require("./FigureVideo.cjs");
+function normalizeSize(that, prop) {
+  const { step } = that.$options;
+  return Math.ceil(that.$refs.video[prop] / step) * step;
+}
+var FigureVideoTwicpics = class extends import_FigureVideo.FigureVideo {
+  /**
+   * Config.
+   */
+  static config = {
+    ...import_FigureVideo.FigureVideo.config,
+    name: "FigureVideoTwicpics",
+    options: {
+      ...import_FigureVideo.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 (0, import_utils.withoutTrailingSlash)((0, import_utils.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((0, import_utils.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 (0, import__.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() {
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=FigureVideoTwicpics.cjs.map

package/atoms/FigureVideo/FigureVideoTwicpics.cjs.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": []
+}