@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.js

@@ -1,76 +1,77 @@
-import { useState, useEffect } from "react";
+import { useState as i, useEffect as D } from "react";
 import "@pixi/mixin-get-child-by-name";
-import useHistoryTool from "./useHistoryTool.js";
-import useImageEffects from "./useImageEffects.js";
-import { updateImage, DEFAULT_SPRITE_NAME, saveAsBlob, saveAsDataURL, updateImageFromBlob } from "../effects/misc.js";
-function useImageEditor({
-  imageSrc,
-  spriteName = DEFAULT_SPRITE_NAME
+import I from "./useHistoryTool.js";
+import w from "./useImageEffects.js";
+import { updateImage as n, DEFAULT_SPRITE_NAME as z, saveAsBlob as C, saveAsDataURL as L, updateImageFromBlob as b } from "../effects/misc.js";
+function S({
+  imageSrc: a,
+  spriteName: r = z
 }) {
-  const [application, setApplication] = useState(void 0), [loading, setLoading] = useState(!0), {
-    rotate,
-    startBlur,
-    startCrop,
-    startResize,
-    stopBlur,
-    stopCrop,
-    stopResize
-  } = useImageEffects({
-    spriteName,
-    application,
-    onSave(sprite) {
-      application && updateImage(application, {
-        imgDatasource: sprite,
-        spriteName
+  const [t, u] = i(void 0), [f, o] = i(!0), {
+    rotate: l,
+    startBlur: c,
+    startCrop: p,
+    startResize: d,
+    stopBlur: m,
+    stopCrop: v,
+    stopResize: g
+  } = w({
+    spriteName: r,
+    application: t,
+    onSave(s) {
+      t && n(t, {
+        imgDatasource: s,
+        spriteName: r
       });
     }
-  }), toBlob = () => application ? saveAsBlob(application) : Promise.resolve(void 0), toDataURL = () => {
-    if (application)
-      return saveAsDataURL(application);
+  }), y = () => t ? C(t) : Promise.resolve(void 0), R = () => {
+    if (t)
+      return L(t);
   }, {
-    restore,
-    historize,
-    historyCount
-  } = useHistoryTool({
-    application,
-    spriteName,
-    onRestore(imgDatasource, state) {
-      application && updateImageFromBlob(application, {
-        imgDatasource,
-        spriteName,
-        settings: state
+    restore: B,
+    historize: e,
+    historyCount: E
+  } = I({
+    application: t,
+    spriteName: r,
+    onRestore(s, A) {
+      t && b(t, {
+        imgDatasource: s,
+        spriteName: r,
+        settings: A
       });
     }
   });
-  return useEffect(() => {
-    application && (setLoading(!0), updateImage(application, {
-      spriteName,
-      imgDatasource: imageSrc
-    }).finally(() => setLoading(!1)));
-  }, [application, imageSrc, spriteName]), {
-    historyCount,
-    setApplication,
-    restore,
-    stopCrop,
-    stopBlur,
-    stopResize,
+  return D(() => {
+    t && (o(!0), n(t, {
+      spriteName: r,
+      imgDatasource: a
+    }).finally(() => o(!1)));
+  }, [t, a, r]), {
+    historyCount: E,
+    setApplication: u,
+    restore: B,
+    stopCrop: v,
+    stopBlur: m,
+    stopResize: g,
     startResize: async () => {
-      setLoading(!0), await historize(startResize), setLoading(!1);
+      o(!0), await e(d), o(!1);
     },
     startCrop: async () => {
-      setLoading(!0), await historize(startCrop), setLoading(!1);
+      o(!0), await e(p), o(!1);
     },
     startBlur: async () => {
-      setLoading(!0), await historize(startBlur), setLoading(!1);
+      o(!0), await e(c), o(!1);
     },
     rotate: async () => {
-      setLoading(!0), await historize(rotate), setLoading(!1);
+      o(!0), await e(l), o(!1);
     },
-    toBlob,
-    toDataURL,
-    loading
+    toBlob: y,
+    toDataURL: R,
+    loading: f
   };
 }
 export {
-  useImageEditor as default
+  S as default
 };
+//# sourceMappingURL=useImageEditor.js.map

package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageEditor.js","sources":["../../../../../src/modules/multimedia/ImageEditor/hooks/useImageEditor.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport * as PIXI from 'pixi.js';\n\nimport '@pixi/mixin-get-child-by-name';\nimport useHistoryTool from './useHistoryTool';\nimport useImageEffects from './useImageEffects';\nimport {\n  DEFAULT_SPRITE_NAME,\n  updateImage,\n  saveAsBlob,\n  saveAsDataURL,\n  updateImageFromBlob,\n} from '../effects/misc';\n\n/**\n * This hook expose all the functions available for the pixi editor:\n * - all the effects (crop, resize, rotate, blur)\n * - historize every action\n * - backup functions\n *\n * @param args.spriteName The spriteName of the original image\n * @param args.imageSrc The URL of the image to edit\n * @returns all the action available for the image editor\n */\nexport default function useImageEditor({\n  imageSrc,\n  spriteName = DEFAULT_SPRITE_NAME,\n}: {\n  imageSrc: string;\n  spriteName?: string;\n}) {\n  const [application, setApplication] = useState<PIXI.Application | undefined>(\n    undefined,\n  );\n\n  const [loading, setLoading] = useState(true);\n\n  const {\n    rotate,\n    startBlur,\n    startCrop,\n    startResize,\n    stopBlur,\n    stopCrop,\n    stopResize,\n  } = useImageEffects({\n    spriteName,\n    application,\n    onSave(sprite) {\n      if (application) {\n        updateImage(application, {\n          imgDatasource: sprite,\n          spriteName,\n        });\n      }\n    },\n  });\n\n  const toBlob = (): Promise<Blob | undefined> => {\n    if (!application) return Promise.resolve(undefined);\n    return saveAsBlob(application);\n  };\n  const toDataURL = (): string | undefined => {\n    if (!application) return undefined;\n    return saveAsDataURL(application);\n  };\n\n  const { restore, historize, historyCount } = useHistoryTool({\n    application,\n    spriteName,\n    onRestore(imgDatasource, state) {\n      if (!application) return undefined;\n      updateImageFromBlob(application, {\n        imgDatasource,\n        spriteName,\n        settings: state,\n      });\n    },\n  });\n\n  useEffect(() => {\n    if (!application) return undefined;\n    setLoading(true);\n    updateImage(application, { spriteName, imgDatasource: imageSrc }).finally(\n      () => setLoading(false),\n    );\n  }, [application, imageSrc, spriteName]);\n\n  return {\n    historyCount,\n    setApplication,\n    restore,\n    stopCrop,\n    stopBlur,\n    stopResize,\n    startResize: async () => {\n      setLoading(true);\n      await historize(startResize);\n      setLoading(false);\n    },\n    startCrop: async () => {\n      setLoading(true);\n      await historize(startCrop);\n      setLoading(false);\n    },\n    startBlur: async () => {\n      setLoading(true);\n      await historize(startBlur);\n      setLoading(false);\n    },\n    rotate: async () => {\n      setLoading(true);\n      await historize(rotate);\n      setLoading(false);\n    },\n    toBlob,\n    toDataURL,\n    loading,\n  };\n}\n"],"names":["useImageEditor","imageSrc","spriteName","DEFAULT_SPRITE_NAME","application","setApplication","useState","undefined","loading","setLoading","rotate","startBlur","startCrop","startResize","stopBlur","stopCrop","stopResize","useImageEffects","onSave","sprite","updateImage","imgDatasource","toBlob","saveAsBlob","Promise","resolve","toDataURL","saveAsDataURL","restore","historize","historyCount","useHistoryTool","onRestore","state","updateImageFromBlob","settings","useEffect","finally"],"mappings":";;;;;AAyBA,SAAwBA,EAAe;AAAA,EACrCC,UAAAA;AAAAA,EACAC,YAAAA,IAAaC;AAIf,GAAG;AACD,QAAM,CAACC,GAAaC,CAAc,IAAIC,EACpCC,MACF,GAEM,CAACC,GAASC,CAAU,IAAIH,EAAS,EAAI,GAErC;AAAA,IACJI,QAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAgB;AAAA,IAClBf,YAAAA;AAAAA,IACAE,aAAAA;AAAAA,IACAc,OAAOC,GAAQ;AACb,MAAIf,KACFgB,EAAYhB,GAAa;AAAA,QACvBiB,eAAeF;AAAAA,QACfjB,YAAAA;AAAAA,MAAAA,CACD;AAAA,IAEL;AAAA,EAAA,CACD,GAEKoB,IAASA,MACRlB,IACEmB,EAAWnB,CAAW,IADJoB,QAAQC,QAAQlB,MAAS,GAG9CmB,IAAYA,MAA0B;AACtC,QAACtB;AACL,aAAOuB,EAAcvB,CAAW;AAAA,EAAA,GAG5B;AAAA,IAAEwB,SAAAA;AAAAA,IAASC,WAAAA;AAAAA,IAAWC,cAAAA;AAAAA,MAAiBC,EAAe;AAAA,IAC1D3B,aAAAA;AAAAA,IACAF,YAAAA;AAAAA,IACA8B,UAAUX,GAAeY,GAAO;AAC1B,MAAC7B,KACL8B,EAAoB9B,GAAa;AAAA,QAC/BiB,eAAAA;AAAAA,QACAnB,YAAAA;AAAAA,QACAiC,UAAUF;AAAAA,MAAAA,CACX;AAAA,IACH;AAAA,EAAA,CACD;AAEDG,SAAAA,EAAU,MAAM;AACV,IAAChC,MACLK,EAAW,EAAI,GACfW,EAAYhB,GAAa;AAAA,MAAEF,YAAAA;AAAAA,MAAYmB,eAAepB;AAAAA,IAAU,CAAA,EAAEoC,QAChE,MAAM5B,EAAW,EAAK,CACxB;AAAA,EACC,GAAA,CAACL,GAAaH,GAAUC,CAAU,CAAC,GAE/B;AAAA,IACL4B,cAAAA;AAAAA,IACAzB,gBAAAA;AAAAA,IACAuB,SAAAA;AAAAA,IACAb,UAAAA;AAAAA,IACAD,UAAAA;AAAAA,IACAE,YAAAA;AAAAA,IACAH,aAAa,YAAY;AACvBJ,MAAAA,EAAW,EAAI,GACf,MAAMoB,EAAUhB,CAAW,GAC3BJ,EAAW,EAAK;AAAA,IAClB;AAAA,IACAG,WAAW,YAAY;AACrBH,MAAAA,EAAW,EAAI,GACf,MAAMoB,EAAUjB,CAAS,GACzBH,EAAW,EAAK;AAAA,IAClB;AAAA,IACAE,WAAW,YAAY;AACrBF,MAAAA,EAAW,EAAI,GACf,MAAMoB,EAAUlB,CAAS,GACzBF,EAAW,EAAK;AAAA,IAClB;AAAA,IACAC,QAAQ,YAAY;AAClBD,MAAAA,EAAW,EAAI,GACf,MAAMoB,EAAUnB,CAAM,GACtBD,EAAW,EAAK;AAAA,IAClB;AAAA,IACAa,QAAAA;AAAAA,IACAI,WAAAA;AAAAA,IACAlB,SAAAA;AAAAA,EAAAA;AAEJ;"}

package/dist/modules/multimedia/ImageEditor/hooks/useImageEffects.js

@@ -1,52 +1,53 @@
-import { start as start$1, stop as stop$1 } from "../effects/blur.js";
-import { start, save, stop } from "../effects/crop.js";
-import { save as save$1, stop as stop$2, start as start$2 } from "../effects/resize.js";
-import { rotate } from "../effects/rotate.js";
-function useImageEffects({
-  application,
-  spriteName,
-  onSave
+import { start as f, stop as u } from "../effects/blur.js";
+import { start as $, save as m, stop as n } from "../effects/crop.js";
+import { save as z, stop as B, start as C } from "../effects/resize.js";
+import { rotate as R } from "../effects/rotate.js";
+function k({
+  application: t,
+  spriteName: s,
+  onSave: o
 }) {
   return {
     rotate: async () => {
-      application && await rotate(application, spriteName);
+      t && await R(t, s);
     },
     startCrop: () => {
-      application && start(application, {
-        spriteName
+      t && $(t, {
+        spriteName: s
       });
     },
-    stopCrop: (save$12) => {
-      if (application) {
-        if (save$12) {
-          const result = save(application);
-          result && onSave(result);
+    stopCrop: (e) => {
+      if (t) {
+        if (e) {
+          const r = m(t);
+          r && o(r);
         }
-        stop(application);
+        n(t);
       }
     },
     startBlur: () => {
-      application && start$1(application, {
-        spriteName
+      t && f(t, {
+        spriteName: s
       });
     },
     stopBlur: () => {
-      application && stop$1(application);
+      t && u(t);
     },
     startResize: () => {
-      application && start$2(application, spriteName);
+      t && C(t, s);
     },
-    stopResize: (save2) => {
-      if (application) {
-        if (save2) {
-          const result = save$1(application);
-          result && onSave(result);
+    stopResize: (e) => {
+      if (t) {
+        if (e) {
+          const r = z(t);
+          r && o(r);
         }
-        stop$2(application);
+        B(t);
       }
     }
   };
 }
 export {
-  useImageEffects as default
+  k as default
 };
+//# sourceMappingURL=useImageEffects.js.map

package/dist/modules/multimedia/ImageEditor/hooks/useImageEffects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageEffects.js","sources":["../../../../../src/modules/multimedia/ImageEditor/hooks/useImageEffects.ts"],"sourcesContent":["import * as PIXI from 'pixi.js';\n\nimport * as blurEffect from '../effects/blur';\nimport * as cropEffect from '../effects/crop';\nimport * as resizeEffect from '../effects/resize';\nimport * as rotateEffect from '../effects/rotate';\n\nexport interface UseImageEffectsProps {\n  spriteName: string;\n  application?: PIXI.Application;\n  onSave(sprite: PIXI.Sprite): void;\n}\n/**\n * This hook expose all effects of the pixi editor\n *\n * @param args.spriteName The spriteName of the original image\n * @param args.application The PIXI.Application context\n * @param args.onSave A callback called when the sprite changes\n * @returns all the action available for the image editor\n */\nexport default function useImageEffects({\n  application,\n  spriteName,\n  onSave,\n}: UseImageEffectsProps) {\n  const startCrop = () => {\n    if (!application) return;\n    cropEffect.start(application, { spriteName });\n  };\n  const stopCrop = (save: boolean) => {\n    if (!application) return;\n    if (save) {\n      const result = cropEffect.save(application);\n      result && onSave(result);\n    }\n    cropEffect.stop(application);\n  };\n  const startBlur = () => {\n    if (!application) return;\n    blurEffect.start(application, { spriteName });\n  };\n  const stopBlur = () => {\n    if (!application) return;\n    blurEffect.stop(application);\n  };\n  const stopResize = (save: boolean) => {\n    if (!application) return;\n    if (save) {\n      const result = resizeEffect.save(application);\n      result && onSave(result);\n    }\n    resizeEffect.stop(application);\n  };\n  const startResize = () => {\n    if (!application) return;\n    resizeEffect.start(application, spriteName);\n  };\n  const rotate = async () => {\n    if (!application) return;\n    await rotateEffect.rotate(application, spriteName);\n  };\n  return {\n    rotate,\n    startCrop,\n    stopCrop,\n    startBlur,\n    stopBlur,\n    startResize,\n    stopResize,\n  };\n}\n"],"names":["useImageEffects","application","spriteName","onSave","rotateEffect","startCrop","cropEffect","stopCrop","save","result","startBlur","blurEffect","stopBlur","startResize","start","stopResize","resizeEffect"],"mappings":";;;;AAoBA,SAAwBA,EAAgB;AAAA,EACtCC,aAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,QAAAA;AACoB,GAAG;AAqChB,SAAA;AAAA,IAAA,QAJQ,YAAY;AACzB,MAAKF,KACCG,MAAAA,EAAoBH,GAAaC,CAAU;AAAA,IAAA;AAAA,IAIjDG,WAtCgBA,MAAM;AACtB,MAAKJ,KACLK,EAAiBL,GAAa;AAAA,QAAEC,YAAAA;AAAAA,MAAAA,CAAY;AAAA,IAAA;AAAA,IAqC5CK,UAnCeA,CAACC,MAAkB;AAClC,UAAKP,GACL;AAAA,YAAIO,GAAM;AACFC,gBAAAA,IAASH,EAAgBL,CAAW;AAC1CQ,UAAAA,KAAUN,EAAOM,CAAM;AAAA,QACzB;AACAH,QAAAA,EAAgBL,CAAW;AAAA;AAAA,IAAA;AAAA,IA8B3BS,WA5BgBA,MAAM;AACtB,MAAKT,KACLU,EAAiBV,GAAa;AAAA,QAAEC,YAAAA;AAAAA,MAAAA,CAAY;AAAA,IAAA;AAAA,IA2B5CU,UAzBeA,MAAM;AACrB,MAAKX,KACLU,EAAgBV,CAAW;AAAA,IAAA;AAAA,IAwB3BY,aAdkBA,MAAM;AACxB,MAAKZ,KACQa,EAAMb,GAAaC,CAAU;AAAA,IAAA;AAAA,IAa1Ca,YAvBiBA,CAACP,MAAkB;AACpC,UAAKP,GACL;AAAA,YAAIO,GAAM;AACFC,gBAAAA,IAASO,EAAkBf,CAAW;AAC5CQ,UAAAA,KAAUN,EAAOM,CAAM;AAAA,QACzB;AACAO,QAAAA,EAAkBf,CAAW;AAAA;AAAA,IAAA;AAAA,EAiB7Bc;AAEJ;"}

package/dist/modules/multimedia/ImageEditor/utils/aggregate.js

@@ -1,13 +1,14 @@
-function aggregate(delay, map, callback) {
-  let timerId;
-  const pending = [];
-  return function(arg) {
-    pending.push(map(arg)), !timerId && (timerId = setTimeout(() => {
-      const copy = [...pending];
-      pending.splice(0, pending.length), callback(copy), timerId = void 0;
-    }, delay));
+function u(n, i, o) {
+  let e;
+  const t = [];
+  return function(r) {
+    t.push(i(r)), !e && (e = setTimeout(() => {
+      const c = [...t];
+      t.splice(0, t.length), o(c), e = void 0;
+    }, n));
   };
 }
 export {
-  aggregate
+  u as aggregate
 };
+//# sourceMappingURL=aggregate.js.map

package/dist/modules/multimedia/ImageEditor/utils/aggregate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aggregate.js","sources":["../../../../../src/modules/multimedia/ImageEditor/utils/aggregate.ts"],"sourcesContent":["/**\n * This function aggregate events and call the callback with aggregated events every {delay}\n *\n * @param delay delay between each call\n * @param map a function to transform event from {INPUT} to {OUTPUT}\n * @param callback a callback called with aggregated events every x ms\n * @returns a function that take as argument (INPUT)=>void\n */\nexport function aggregate<INPUT, OUTPUT>(\n  delay: number,\n  map: (input: INPUT) => OUTPUT,\n  callback: (aggregated: OUTPUT[]) => void,\n): (arg: INPUT) => void {\n  let timerId: number | undefined;\n  const pending: OUTPUT[] = [];\n  return function (arg: INPUT) {\n    pending.push(map(arg));\n    if (timerId) {\n      return;\n    }\n    timerId = setTimeout(() => {\n      const copy = [...pending];\n      // remove all\n      pending.splice(0, pending.length);\n      // call with aggregated\n      callback(copy);\n      // reset timer\n      timerId = undefined;\n    }, delay) as unknown as number;\n  };\n}\n"],"names":["aggregate","delay","map","callback","timerId","pending","arg","push","setTimeout","copy","splice","length","undefined"],"mappings":"AAQgBA,SAAAA,EACdC,GACAC,GACAC,GACsB;AAClBC,MAAAA;AACJ,QAAMC,IAAoB,CAAA;AAC1B,SAAO,SAAUC,GAAY;AAE3B,IADQC,EAAAA,KAAKL,EAAII,CAAG,CAAC,GACjBF,CAAAA,MAGJA,IAAUI,WAAW,MAAM;AACnBC,YAAAA,IAAO,CAAC,GAAGJ,CAAO;AAEhBK,MAAAA,EAAAA,OAAO,GAAGL,EAAQM,MAAM,GAEhCR,EAASM,CAAI,GAEHG,IAAAA;AAAAA,OACTX,CAAK;AAAA,EAAA;AAEZ;"}

package/dist/modules/multimedia/ImagePickerWorkspace/ImagePickerWorkspace.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 export interface ImagePickerWorkspaceProps extends ComponentPropsWithRef<'input'> {
     /**
      * Accessible description of the add button

package/dist/modules/multimedia/ImagePickerWorkspace/ImagePickerWorkspace.js

@@ -1,39 +1,40 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import clsx from "clsx";
-import { IconButton } from "../../../components/Button/IconButton.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-import { Avatar } from "../../../components/Avatar/Avatar.js";
-import { AppIcon } from "../../../components/AppIcon/AppIcon.js";
-const ImagePickerWorkspace = ({
-  addButtonLabel = "Add image",
-  deleteButtonLabel = "Delete image",
-  src,
-  className,
-  mediaLibraryRef,
-  libraryMedia,
-  app,
-  onUploadImage,
-  onDeleteImage
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as x, useEffect as C } from "react";
+import I from "clsx";
+import { IconButton as r } from "../../../components/Button/IconButton.js";
+import { Icon as s } from "../../../components/Icon/Icon.js";
+import { Avatar as w } from "../../../components/Avatar/Avatar.js";
+import { AppIcon as z } from "../../../components/AppIcon/AppIcon.js";
+const E = ({
+  addButtonLabel: c = "Add image",
+  deleteButtonLabel: m = "Delete image",
+  src: l,
+  className: p,
+  mediaLibraryRef: d,
+  libraryMedia: t,
+  app: u,
+  onUploadImage: f,
+  onDeleteImage: g
 }) => {
-  const [preview, setPreview] = useState(src || "");
-  useEffect(() => {
-    libraryMedia && (setPreview(libraryMedia), onUploadImage(libraryMedia));
-  }, [libraryMedia]);
-  const handleClick = () => {
-    var _a;
-    (_a = mediaLibraryRef.current) == null || _a.show("image");
-  }, handleClean = () => {
-    setPreview(""), onDeleteImage();
-  }, classes = clsx("image-input", className);
-  return /* @__PURE__ */ jsxs("div", { id: "image-input", className: classes, children: [
-    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
-      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "edit" }), onClick: handleClick, type: "button", variant: "ghost" }),
-      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(Icon, { name: "delete", size: "20" }), onClick: handleClean, type: "button", variant: "ghost" })
+  const [o, i] = x(l || "");
+  C(() => {
+    t && (i(t), f(t));
+  }, [t]);
+  const v = () => {
+    var a;
+    (a = d.current) == null || a.show("image");
+  }, h = () => {
+    i(""), g();
+  }, k = I("image-input", p);
+  return /* @__PURE__ */ n("div", { id: "image-input", className: k, children: [
+    /* @__PURE__ */ n("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ e(r, { "aria-label": c, color: "tertiary", icon: /* @__PURE__ */ e(s, { name: "edit" }), onClick: v, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ e(r, { "aria-label": m, color: "danger", disabled: !o, icon: /* @__PURE__ */ e(s, { name: "delete", size: "20" }), onClick: h, type: "button", variant: "ghost" })
     ] }),
-    preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
+    o ? /* @__PURE__ */ e(w, { alt: "", src: o, size: "xl" }) : /* @__PURE__ */ e(z, { app: u, iconFit: "ratio", size: "160", variant: "rounded" })
   ] });
 };
 export {
-  ImagePickerWorkspace as default
+  E as default
 };
+//# sourceMappingURL=ImagePickerWorkspace.js.map

package/dist/modules/multimedia/ImagePickerWorkspace/ImagePickerWorkspace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePickerWorkspace.js","sources":["../../../../src/modules/multimedia/ImagePickerWorkspace/ImagePickerWorkspace.tsx"],"sourcesContent":["import { ComponentPropsWithRef, useEffect, useState } from 'react';\n\nimport { IWebApp } from '@edifice.io/ts-client';\n\nimport clsx from 'clsx';\nimport { Icon } from '../../..';\nimport { AppIcon } from '../../../components/AppIcon';\nimport { Avatar } from '../../../components/Avatar';\nimport { IconButton } from '../../../components/Button';\n\nexport interface ImagePickerWorkspaceProps\n  extends ComponentPropsWithRef<'input'> {\n  /**\n   * Accessible description of the add button\n   */\n  addButtonLabel: string;\n  /**\n   * Accessible description of the delete button\n   */\n  deleteButtonLabel: string;\n  /**\n   * Provide a default image as placeholder\n   */\n  src?: string;\n  /**\n   * Pathe element select in WorkSpace\n   */\n  libraryMedia: string;\n  /**\n   * Element select in WorkSpace\n   */\n  mediaLibraryRef: any;\n  /**\n   * To show the icon of an application\n   */\n  app?: IWebApp | undefined;\n\n  appCode?: string;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n  /**\n   * Callback when uploading image\n   */\n  onUploadImage: (file: File | string) => void;\n  /**\n   * Callback when deleting image\n   */\n  onDeleteImage: () => void;\n}\n\nconst ImagePickerWorkspace = ({\n  addButtonLabel = 'Add image',\n  deleteButtonLabel = 'Delete image',\n  src,\n  className,\n  mediaLibraryRef,\n  libraryMedia,\n  app,\n  onUploadImage,\n  onDeleteImage,\n}: ImagePickerWorkspaceProps) => {\n  const [preview, setPreview] = useState<string>(src || '');\n\n  useEffect(() => {\n    if (libraryMedia) {\n      setPreview(libraryMedia);\n      onUploadImage(libraryMedia);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [libraryMedia]);\n\n  const handleClick = () => {\n    mediaLibraryRef.current?.show('image');\n  };\n\n  const handleClean = () => {\n    setPreview('');\n    onDeleteImage();\n  };\n\n  const classes = clsx('image-input', className);\n\n  return (\n    <div id=\"image-input\" className={classes}>\n      <div className=\"image-input-actions gap-8\">\n        <IconButton\n          aria-label={addButtonLabel}\n          color=\"tertiary\"\n          icon={<Icon name=\"edit\" />}\n          onClick={handleClick}\n          type=\"button\"\n          variant=\"ghost\"\n        />\n        <IconButton\n          aria-label={deleteButtonLabel}\n          color=\"danger\"\n          disabled={!preview}\n          icon={<Icon name=\"delete\" size=\"20\" />}\n          onClick={handleClean}\n          type=\"button\"\n          variant=\"ghost\"\n        />\n      </div>\n      {preview ? (\n        <Avatar alt=\"\" src={preview} size=\"xl\" />\n      ) : (\n        <AppIcon app={app} iconFit=\"ratio\" size=\"160\" variant=\"rounded\" />\n      )}\n    </div>\n  );\n};\n\nImagePickerWorkspace.displayName = 'ImagePickerWorkspace';\n\nexport default ImagePickerWorkspace;\n"],"names":["ImagePickerWorkspace","addButtonLabel","deleteButtonLabel","src","className","mediaLibraryRef","libraryMedia","app","onUploadImage","onDeleteImage","preview","setPreview","useState","useEffect","handleClick","current","show","handleClean","classes","clsx","jsxs","jsx","IconButton","Icon","Avatar","AppIcon"],"mappings":";;;;;;;AAoDA,MAAMA,IAAuBA,CAAC;AAAA,EAC5BC,gBAAAA,IAAiB;AAAA,EACjBC,mBAAAA,IAAoB;AAAA,EACpBC,KAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,eAAAA;AACyB,MAAM;AAC/B,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAiBT,KAAO,EAAE;AAExDU,EAAAA,EAAU,MAAM;AACd,IAAIP,MACFK,EAAWL,CAAY,GACvBE,EAAcF,CAAY;AAAA,EAC5B,GAEC,CAACA,CAAY,CAAC;AAEjB,QAAMQ,IAAcA,MAAM;;AACRC,KAAAA,IAAAA,EAAAA,YAAAA,QAAAA,EAASC,KAAK;AAAA,EAAO,GAGjCC,IAAcA,MAAM;AACxBN,IAAAA,EAAW,EAAE,GACCF;EAAA,GAGVS,IAAUC,EAAK,eAAef,CAAS;AAE7C,SACG,gBAAAgB,EAAA,OAAA,EAAI,IAAG,eAAc,WAAWF,GAC/B,UAAA;AAAA,IAAC,gBAAAE,EAAA,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,MAAA,gBAAAC,EAACC,KACC,cAAYrB,GACZ,OAAM,YACN,MAAO,gBAAAoB,EAAAE,GAAA,EAAK,MAAK,OAAA,CAAM,GACvB,SAAST,GACT,MAAK,UACL,SAAQ,SAAO;AAAA,MAEjB,gBAAAO,EAACC,KACC,cAAYpB,GACZ,OAAM,UACN,UAAU,CAACQ,GACX,MAAM,gBAAAW,EAACE,KAAK,MAAK,UAAS,MAAK,KAAO,CAAA,GACtC,SAASN,GACT,MAAK,UACL,SAAQ,QAAO,CAAA;AAAA,IAAA,GAEnB;AAAA,IACCP,IACE,gBAAAW,EAAAG,GAAA,EAAO,KAAI,IAAG,KAAKd,GAAS,MAAK,KAAI,CAAA,IAEtC,gBAAAW,EAACI,KAAQ,KAAAlB,GAAU,SAAQ,SAAQ,MAAK,OAAM,SAAQ,WACvD;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/modules/multimedia/Linker/ExternalLinker.js

@@ -1,45 +1,46 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { StringUtils } from "../../../utils/StringUtils.js";
-import useToggle from "../../../hooks/useToggle/useToggle.js";
-import { FormControl } from "../../../components/Form/FormControl.js";
-import { Label } from "../../../components/Label/Label.js";
-import { Input } from "../../../components/Input/Input.js";
-import { Checkbox } from "../../../components/Checkbox/Checkbox.js";
-const ExternalLinker = ({
-  link,
-  onChange,
-  multiNodeSelected = !1
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { useState as c, useEffect as f } from "react";
+import { useTranslation as T } from "react-i18next";
+import { StringUtils as u } from "../../../utils/StringUtils.js";
+import n from "../../../hooks/useToggle/useToggle.js";
+import { FormControl as b } from "../../../components/Form/FormControl.js";
+import { Label as d } from "../../../components/Label/Label.js";
+import { Input as L } from "../../../components/Input/Input.js";
+import { Checkbox as v } from "../../../components/Checkbox/Checkbox.js";
+const w = ({
+  link: t,
+  onChange: r,
+  multiNodeSelected: a = !1
 }) => {
   const {
-    t
-  } = useTranslation(), [linkText, setLinkText] = useState((link == null ? void 0 : link.text) || ""), [linkURL, setLinkURL] = useState((link == null ? void 0 : link.url) || ""), [isBlankTarget, toggleBlankTarget] = useToggle(link ? link.target === "_blank" : !0);
-  return useEffect(() => {
-    multiNodeSelected && (link != null && link.text) && setLinkText(link.text.slice(0, 20) + "...");
-  }, [multiNodeSelected, link]), useEffect(() => {
-    if (!linkURL.length) {
-      onChange == null || onChange();
+    t: l
+  } = T(), [m, p] = c((t == null ? void 0 : t.text) || ""), [e, h] = c((t == null ? void 0 : t.url) || ""), [x, g] = n(t ? t.target === "_blank" : !0);
+  return f(() => {
+    a && (t != null && t.text) && p(t.text.slice(0, 20) + "...");
+  }, [a, t]), f(() => {
+    if (!e.length) {
+      r == null || r();
       return;
     }
-    const newLink = {
-      url: linkURL,
-      text: multiNodeSelected ? link == null ? void 0 : link.text : linkText || linkURL,
-      target: isBlankTarget ? "_blank" : void 0
+    const o = {
+      url: e,
+      text: a ? t == null ? void 0 : t.text : m || e,
+      target: x ? "_blank" : void 0
     };
-    !StringUtils.isLocalURL(linkURL) && !StringUtils.startWithHttp(linkURL) && (newLink.url = "http://" + linkURL), onChange == null || onChange(newLink);
-  }, [linkText, linkURL, isBlankTarget]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-24", children: [
-    /* @__PURE__ */ jsxs(FormControl, { id: "linkText", isOptional: !0, children: [
-      /* @__PURE__ */ jsx(Label, { children: t("bbm.linker.ext.text") }),
-      /* @__PURE__ */ jsx(Input, { type: "text", placeholder: t("bbm.linker.ext.text.placeholder"), size: "md", disabled: multiNodeSelected, value: linkText, onChange: (e) => setLinkText(e.target.value) })
+    !u.isLocalURL(e) && !u.startWithHttp(e) && (o.url = "http://" + e), r == null || r(o);
+  }, [m, e, x]), /* @__PURE__ */ i("div", { className: "d-flex flex-column flex-fill gap-24", children: [
+    /* @__PURE__ */ i(b, { id: "linkText", isOptional: !0, children: [
+      /* @__PURE__ */ s(d, { children: l("bbm.linker.ext.text") }),
+      /* @__PURE__ */ s(L, { type: "text", placeholder: l("bbm.linker.ext.text.placeholder"), size: "md", disabled: a, value: m, onChange: (o) => p(o.target.value) })
     ] }),
-    /* @__PURE__ */ jsxs(FormControl, { id: "linkUrl", isRequired: !0, children: [
-      /* @__PURE__ */ jsx(Label, { children: t("bbm.linker.ext.url") }),
-      /* @__PURE__ */ jsx(Input, { type: "text", placeholder: t("bbm.linker.ext.url.placeholder"), size: "md", value: linkURL, onChange: (e) => setLinkURL(e.target.value) })
+    /* @__PURE__ */ i(b, { id: "linkUrl", isRequired: !0, children: [
+      /* @__PURE__ */ s(d, { children: l("bbm.linker.ext.url") }),
+      /* @__PURE__ */ s(L, { type: "text", placeholder: l("bbm.linker.ext.url.placeholder"), size: "md", value: e, onChange: (o) => h(o.target.value) })
     ] }),
-    /* @__PURE__ */ jsx(Checkbox, { label: t("bbm.linker.open.tab"), onChange: () => toggleBlankTarget(), checked: isBlankTarget })
-  ] }) });
-}, ExternalLinker$1 = ExternalLinker;
+    /* @__PURE__ */ s(v, { label: l("bbm.linker.open.tab"), onChange: () => g(), checked: x })
+  ] });
+};
 export {
-  ExternalLinker$1 as default
+  w as default
 };
+//# sourceMappingURL=ExternalLinker.js.map

package/dist/modules/multimedia/Linker/ExternalLinker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinker.js","sources":["../../../../src/modules/multimedia/Linker/ExternalLinker.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\n\nimport { Checkbox, FormControl, Input, Label } from '../../../components';\nimport { useToggle } from '../../../hooks';\nimport { StringUtils } from '../../../utils/StringUtils';\n\n/**\n * Properties for the ExternalLink.\n */\nexport interface IExternalLink {\n  /** Link Url */\n  url: string;\n  /** Link text for the llink display */\n  text?: string;\n  /** Link target (default: _blank) */\n  target?: '_blank';\n}\n\n/**\n * Properties for the ExternalLinker react component.\n */\nexport type ExternalLinkerProps = {\n  /** Default link to update. */\n  link?: Partial<IExternalLink>;\n  /**\n   * Set true if the user select multiple nodes. (note simple text selection)\n   */\n  multiNodeSelected?: boolean;\n  /** Target */\n  target?: '_blank';\n  /** Notify when the user change any link information */\n  onChange?: (link?: IExternalLink) => void;\n};\n\nconst ExternalLinker = ({\n  link,\n  onChange,\n  multiNodeSelected = false,\n}: ExternalLinkerProps) => {\n  const { t } = useTranslation();\n\n  const [linkText, setLinkText] = useState<string>(link?.text || '');\n  const [linkURL, setLinkURL] = useState<string>(link?.url || '');\n  const [isBlankTarget, toggleBlankTarget] = useToggle(\n    link ? link.target === '_blank' : true,\n  );\n\n  useEffect(() => {\n    if (multiNodeSelected && link?.text) {\n      setLinkText(link.text.slice(0, 20) + '...');\n    }\n  }, [multiNodeSelected, link]);\n\n  useEffect(() => {\n    if (!linkURL.length) {\n      onChange?.();\n      return;\n    }\n\n    const newLink: IExternalLink = {\n      url: linkURL,\n      text: !multiNodeSelected ? linkText || linkURL : link?.text,\n      target: isBlankTarget ? '_blank' : undefined,\n    };\n    if (\n      !StringUtils.isLocalURL(linkURL) &&\n      !StringUtils.startWithHttp(linkURL)\n    ) {\n      newLink.url = 'http://' + linkURL;\n    }\n    onChange?.(newLink);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [linkText, linkURL, isBlankTarget]);\n\n  return (\n    <div className=\"d-flex flex-column flex-fill gap-24\">\n      <FormControl id=\"linkText\" isOptional>\n        <Label>{t('bbm.linker.ext.text')}</Label>\n        <Input\n          type=\"text\"\n          placeholder={t('bbm.linker.ext.text.placeholder')}\n          size=\"md\"\n          disabled={multiNodeSelected}\n          value={linkText}\n          onChange={(e) => setLinkText(e.target.value)}\n        />\n      </FormControl>\n      <FormControl id=\"linkUrl\" isRequired>\n        <Label>{t('bbm.linker.ext.url')}</Label>\n        <Input\n          type=\"text\"\n          placeholder={t('bbm.linker.ext.url.placeholder')}\n          size=\"md\"\n          value={linkURL}\n          onChange={(e) => setLinkURL(e.target.value)}\n        />\n      </FormControl>\n      <Checkbox\n        label={t('bbm.linker.open.tab')}\n        onChange={() => toggleBlankTarget()}\n        checked={isBlankTarget}\n      />\n    </div>\n  );\n};\n\nexport default ExternalLinker;\n"],"names":["ExternalLinker","link","onChange","multiNodeSelected","t","useTranslation","linkText","setLinkText","useState","text","linkURL","setLinkURL","url","isBlankTarget","toggleBlankTarget","useToggle","target","useEffect","slice","length","newLink","undefined","StringUtils","isLocalURL","startWithHttp","jsxs","FormControl","jsx","Label","Input","e","value","Checkbox"],"mappings":";;;;;;;;;AAoCA,MAAMA,IAAiBA,CAAC;AAAA,EACtBC,MAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,mBAAAA,IAAoB;AACD,MAAM;AACnB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GAEvB,CAACC,GAAUC,CAAW,IAAIC,GAAiBP,KAAAA,gBAAAA,EAAMQ,SAAQ,EAAE,GAC3D,CAACC,GAASC,CAAU,IAAIH,GAAiBP,KAAAA,gBAAAA,EAAMW,QAAO,EAAE,GACxD,CAACC,GAAeC,CAAiB,IAAIC,EACzCd,IAAOA,EAAKe,WAAW,WAAW,EACpC;AAEAC,SAAAA,EAAU,MAAM;AACVd,IAAAA,MAAqBF,KAAAA,QAAAA,EAAMQ,SAC7BF,EAAYN,EAAKQ,KAAKS,MAAM,GAAG,EAAE,IAAI,KAAK;AAAA,EAC5C,GACC,CAACf,GAAmBF,CAAI,CAAC,GAE5BgB,EAAU,MAAM;AACV,QAAA,CAACP,EAAQS,QAAQ;AACR,MAAAjB,KAAA,QAAAA;AACX;AAAA,IACF;AAEA,UAAMkB,IAAyB;AAAA,MAC7BR,KAAKF;AAAAA,MACLD,MAAON,IAA0CF,KAAAA,gBAAAA,EAAMQ,OAA5BH,KAAYI;AAAAA,MACvCM,QAAQH,IAAgB,WAAWQ;AAAAA,IAAAA;AAGnC,IAAA,CAACC,EAAYC,WAAWb,CAAO,KAC/B,CAACY,EAAYE,cAAcd,CAAO,MAElCU,EAAQR,MAAM,YAAYF,IAE5BR,KAAAA,QAAAA,EAAWkB;AAAAA,EAEV,GAAA,CAACd,GAAUI,GAASG,CAAa,CAAC,GAGnC,gBAAAY,EAAC,OAAI,EAAA,WAAU,uCACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAY,EAAA,IAAG,YAAW,YAAU,IACnC,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAOxB,UAAEA,EAAA,qBAAqB,EAAE,CAAA;AAAA,MACjC,gBAAAuB,EAACE,KACC,MAAK,QACL,aAAazB,EAAE,iCAAiC,GAChD,MAAK,MACL,UAAUD,GACV,OAAOG,GACP,UAAWwB,CAAAA,MAAMvB,EAAYuB,EAAEd,OAAOe,KAAK,GAAE;AAAA,IAAA,GAEjD;AAAA,IACC,gBAAAN,EAAAC,GAAA,EAAY,IAAG,WAAU,YAAU,IAClC,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAOxB,UAAEA,EAAA,oBAAoB,EAAE,CAAA;AAAA,wBAC/ByB,GACC,EAAA,MAAK,QACL,aAAazB,EAAE,gCAAgC,GAC/C,MAAK,MACL,OAAOM,GACP,UAAWoB,CAAAA,MAAMnB,EAAWmB,EAAEd,OAAOe,KAAK,GAAE;AAAA,IAAA,GAEhD;AAAA,IACA,gBAAAJ,EAACK,GACC,EAAA,OAAO5B,EAAE,qBAAqB,GAC9B,UAAU,MAAMU,EAAAA,GAChB,SAASD,EAAc,CAAA;AAAA,EAE3B,EAAA,CAAA;AAEJ;"}

package/dist/modules/multimedia/Linker/InternalLinker.d.ts

@@ -1,4 +1,4 @@
-import { App, ILinkedResource } from 'edifice-ts-client';
+import { App, ILinkedResource } from '@edifice.io/ts-client';
 /**
  * Definition of an internal link.
  */