@pairbo/ui-kit 0.4.4 → 0.4.6

package/dist/ui-kit.js

@@ -1862,10 +1862,7 @@
         class=${fe({loaded:this.loaded,hidden:!this.loaded})}
         @error=${()=>this.handleError()}
       />
-    `}};ae.styles=[bt,op];We([C()],ae.prototype,"skeletonHeight",2);We([C()],ae.prototype,"skeletonWidth",2);We([C()],ae.prototype,"src",2);We([C()],ae.prototype,"alt",2);We([C()],ae.prototype,"placeholder",2);We([C({type:Boolean})],ae.prototype,"skeleton",2);We([I()],ae.prototype,"loaded",2);We([B("img")],ae.prototype,"imgEl",2);We([G("src")],ae.prototype,"handleSrcChange",1);ae=We([mt("pbo-image")],ae);var cp=Object.defineProperty,hp=Object.getOwnPropertyDescriptor,Ft=(n,t,e,i)=>{for(var s=i>1?void 0:i?hp(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&cp(t,e,s),s};let ct=class extends vt{constructor(){super(...arguments),this.card=null,this.focusIndex=0,this.livePreviewProps={font:"Monsieur La Doulaise",text:"",color:"rgb(0,0,0)",alignment:"left"},this.handwrittenPreviewProps={isLoading:!1,processedFileUrl:null},this.type="type",this.allowPinchToToggle=!0,this.distance=0,this.mainImageTemplates=[],this.closeZoomedPreview=()=>{this.zoomedPreview&&(this.zoomedPreview.open=!1),this.emit("pbo_close_live_preview",{detail:{editor:this.type}})},this.openZoomedPreview=()=>{this.zoomedPreview&&(this.zoomedPreview.open=!0),this.emit("pbo_open_live_preview",{detail:{editor:this.type}})},this.handleOpenZoomedClick=t=>{if(!bi()){t.preventDefault(),t.stopPropagation();return}this.openZoomedPreview()},this.handleTouchMove=t=>{if(this.allowPinchToToggle===!1)return;t.preventDefault();const e=t.touches[0],i=t.touches[1];if(!(e&&!i)&&e&&i){const s={x:e.clientX,y:e.clientY},r={x:i.clientX,y:i.clientY},o=dc(s,r);this.distance||(this.distance=o),o-this.distance>10&&this.openZoomedPreview()}},this.handleTouchEnd=()=>{this.allowPinchToToggle!==!1&&(this.distance=null)}}firstUpdated(){this.addEventListener("handwritten-image-dimensions-changed",t=>{var r,o;const{detail:e}=t,i=(r=this.shadowRoot)==null?void 0:r.querySelector("#handwritten-main-canvas"),s=(o=this.shadowRoot)==null?void 0:o.querySelector("#handwritten-zoomed-preview-canvas");i&&s&&(i.imageWidth=e.width,i.imageHeight=e.height,i.imageTop=e.top,i.imageLeft=e.left,s.imageWidth=e.width,s.imageHeight=e.height,s.imageTop=e.top,s.imageLeft=e.left)}),this.updateComplete,this.thumbnailElements[this.focusIndex].classList.add("active"),this.mainSlideElements[this.focusIndex].classList.add("active")}handleCardChange(t,e){var i,s,r,o;e&&(this.mainImageTemplates=[F`<pbo-image
-          src="${e.medias.cover.url||"https://picsum.photos/id/1/300/400"}"
-          alt=""
-        />`,F`<pbo-type-canvas
+    `}};ae.styles=[bt,op];We([C()],ae.prototype,"skeletonHeight",2);We([C()],ae.prototype,"skeletonWidth",2);We([C()],ae.prototype,"src",2);We([C()],ae.prototype,"alt",2);We([C()],ae.prototype,"placeholder",2);We([C({type:Boolean})],ae.prototype,"skeleton",2);We([I()],ae.prototype,"loaded",2);We([B("img")],ae.prototype,"imgEl",2);We([G("src")],ae.prototype,"handleSrcChange",1);ae=We([mt("pbo-image")],ae);var cp=Object.defineProperty,hp=Object.getOwnPropertyDescriptor,Ft=(n,t,e,i)=>{for(var s=i>1?void 0:i?hp(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&cp(t,e,s),s};let ct=class extends vt{constructor(){super(...arguments),this.card=null,this.focusIndex=0,this.livePreviewProps={font:"Monsieur La Doulaise",text:"",color:"rgb(0,0,0)",alignment:"left"},this.handwrittenPreviewProps={isLoading:!1,processedFileUrl:null},this.type="type",this.allowPinchToToggle=!0,this.distance=0,this.mainImageTemplates=[],this.closeZoomedPreview=()=>{this.zoomedPreview&&(this.zoomedPreview.open=!1),this.emit("pbo_close_live_preview",{detail:{editor:this.type}})},this.openZoomedPreview=()=>{this.zoomedPreview&&(this.zoomedPreview.open=!0),this.emit("pbo_open_live_preview",{detail:{editor:this.type}})},this.handleOpenZoomedClick=t=>{if(!bi()){t.preventDefault(),t.stopPropagation();return}this.openZoomedPreview()},this.handleTouchMove=t=>{if(this.allowPinchToToggle===!1)return;t.preventDefault();const e=t.touches[0],i=t.touches[1];if(!(e&&!i)&&e&&i){const s={x:e.clientX,y:e.clientY},r={x:i.clientX,y:i.clientY},o=dc(s,r);this.distance||(this.distance=o),o-this.distance>10&&this.openZoomedPreview()}},this.handleTouchEnd=()=>{this.allowPinchToToggle!==!1&&(this.distance=null)}}firstUpdated(){this.addEventListener("handwritten-image-dimensions-changed",t=>{var r,o;const{detail:e}=t,i=(r=this.shadowRoot)==null?void 0:r.querySelector("#handwritten-main-canvas"),s=(o=this.shadowRoot)==null?void 0:o.querySelector("#handwritten-zoomed-preview-canvas");i&&s&&(i.imageWidth=e.width,i.imageHeight=e.height,i.imageTop=e.top,i.imageLeft=e.left,s.imageWidth=e.width,s.imageHeight=e.height,s.imageTop=e.top,s.imageLeft=e.left)}),this.updateComplete,this.thumbnailElements[this.focusIndex].classList.add("active"),this.mainSlideElements[this.focusIndex].classList.add("active")}handleCardChange(t,e){var i,s,r,o;e&&(this.mainImageTemplates=[F`<pbo-image src="${e.medias.cover.url}" alt="" />`,F`<pbo-type-canvas
           background-url=${e.medias.insert.url}
           message=${(i=this.livePreviewProps)==null?void 0:i.text}
           alignment=${((s=this.livePreviewProps)==null?void 0:s.alignment)||"left"}
@@ -1873,10 +1870,7 @@
           font=${(o=this.livePreviewProps)==null?void 0:o.font}
           display-type=${e.hasEditorial?"default":"fullSize"}
           @click="${this.handleOpenZoomedClick}"
-        ></pbo-type-canvas>`,F`<pbo-image
-          src="${e.medias.rendered_2.url||"https://picsum.photos/id/10/300/400"}"
-          alt=""
-        />`])}handleFocusIndexChange(t,e){var i,s,r,o;this.thumbnailElements.length!==0&&t!==e&&((i=this.thumbnailElements[t])==null||i.classList.remove("active"),(s=this.thumbnailElements[e])==null||s.classList.add("active"),(r=this.mainSlideElements[t])==null||r.classList.remove("active"),(o=this.mainSlideElements[e])==null||o.classList.add("active"),this.requestUpdate())}handleAllowPinchToToggle(){this.allowPinchToToggle=this.type!=="handwritten"||this.focusIndex!==1||!0}focusOn(t){if(t<0||t>=this.thumbnailElements.length){console.warn("Invalid index:",t);return}this.focusIndex=t}get mainSlides(){return this.card?[F`<pbo-image src="${this.card.medias.cover.url}" alt="" />`,F`<pbo-type-canvas
+        ></pbo-type-canvas>`,F`<pbo-image src="${e.medias.rendered_2.url}" alt="" />`])}handleFocusIndexChange(t,e){var i,s,r,o;this.thumbnailElements.length!==0&&t!==e&&((i=this.thumbnailElements[t])==null||i.classList.remove("active"),(s=this.thumbnailElements[e])==null||s.classList.add("active"),(r=this.mainSlideElements[t])==null||r.classList.remove("active"),(o=this.mainSlideElements[e])==null||o.classList.add("active"),this.requestUpdate())}handleAllowPinchToToggle(){this.allowPinchToToggle=this.type!=="handwritten"||this.focusIndex!==1||!0}focusOn(t){if(t<0||t>=this.thumbnailElements.length){console.warn("Invalid index:",t);return}this.focusIndex=t}get mainSlides(){return this.card?[F`<pbo-image src="${this.card.medias.cover.url}" alt="" />`,F`<pbo-type-canvas
         background-url=${this.card.medias.insert.url}
         message=${this.livePreviewProps.text}
         alignment=${this.livePreviewProps.alignment}
@@ -1911,12 +1905,7 @@
             aria-pressed="${this.focusIndex===0}"
             @click="${()=>this.focusOn(0)}"
           >
-            <pbo-image
-              src="${((t=this.card)==null?void 0:t.medias.cover.url)||"https://picsum.photos/id/1/300/400"}"
-              alt=""
-              aria-hidden="true"
-            >
-            </pbo-image>
+            <pbo-image src="${(t=this.card)==null?void 0:t.medias.cover.url}" alt="" aria-hidden="true"> </pbo-image>
           </button>
           <button
             class="thumbnail"
@@ -1926,7 +1915,7 @@
             @click="${()=>this.focusOn(1)}"
           >
             <pbo-image
-              src="${((e=this.card)==null?void 0:e.medias.rendered_1.url)||"https://picsum.photos/id/10/300/400"}"
+              src="${(e=this.card)==null?void 0:e.medias.rendered_1.url}"
               alt=""
               aria-hidden="true"
             ></pbo-image>
@@ -1939,7 +1928,7 @@
             @click="${()=>this.focusOn(2)}"
           >
             <pbo-image
-              src="${((i=this.card)==null?void 0:i.medias.rendered_2.url)||"https://picsum.photos/id/10/300/400"}"
+              src="${(i=this.card)==null?void 0:i.medias.rendered_2.url}"
               alt=""
               aria-hidden="true"
             ></pbo-image>
@@ -1952,10 +1941,7 @@
           @touchend="${this.handleTouchEnd}"
         >
           <div class="main-slide" @click="${this.handleOpenZoomedClick}">
-            <pbo-image
-              src="${((s=this.card)==null?void 0:s.medias.cover.url)||"https://picsum.photos/id/1/300/400"}"
-              alt=""
-            ></pbo-image>
+            <pbo-image src="${(s=this.card)==null?void 0:s.medias.cover.url}" alt=""></pbo-image>
             ${bi()?F`<button
                   class="zoomed-preview-open-button"
                   type="button"
@@ -1991,10 +1977,7 @@
                 </button>`:Z}
           </div>
           <div class="main-slide" @click=${this.handleOpenZoomedClick}>
-            <pbo-image
-              src="${((p=this.card)==null?void 0:p.medias.rendered_2.url)||"https://picsum.photos/id/10/300/400"}"
-              alt=""
-            ></pbo-image>
+            <pbo-image src="${(p=this.card)==null?void 0:p.medias.rendered_2.url}" alt=""></pbo-image>
             ${bi()?F`<button
                   class="zoomed-preview-open-button"
                   type="button"
@@ -2045,7 +2028,7 @@
                   style=${ge({display:this.focusIndex===1?"block":"none"})}
                 ></pbo-handwritten-canvas>`:Z)}
           <img
-            src="${((E=this.card)==null?void 0:E.medias.rendered_2.url)||"https://picsum.photos/id/10/300/400"}"
+            src="${(E=this.card)==null?void 0:E.medias.rendered_2.url}"
             alt=""
             style=${ge({display:this.focusIndex===2?"block":"none"})}
           />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && vite build --config vite.config.page-manager.ts",
     "preview": "vite preview",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky",

package/dist/mockServiceWorker.js

@@ -1,302 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**
- * Mock Service Worker.
- * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
- */
-
-const PACKAGE_VERSION = "2.7.3";
-const INTEGRITY_CHECKSUM = "00729d72e3b82faf54ca8b9621dbb96f";
-const IS_MOCKED_RESPONSE = Symbol("isMockedResponse");
-const activeClientIds = new Set();
-
-self.addEventListener("install", function () {
-  self.skipWaiting();
-});
-
-self.addEventListener("activate", function (event) {
-  event.waitUntil(self.clients.claim());
-});
-
-self.addEventListener("message", async function (event) {
-  const clientId = event.source.id;
-
-  if (!clientId || !self.clients) {
-    return;
-  }
-
-  const client = await self.clients.get(clientId);
-
-  if (!client) {
-    return;
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: "window",
-  });
-
-  switch (event.data) {
-    case "KEEPALIVE_REQUEST": {
-      sendToClient(client, {
-        type: "KEEPALIVE_RESPONSE",
-      });
-      break;
-    }
-
-    case "INTEGRITY_CHECK_REQUEST": {
-      sendToClient(client, {
-        type: "INTEGRITY_CHECK_RESPONSE",
-        payload: {
-          packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
-      });
-      break;
-    }
-
-    case "MOCK_ACTIVATE": {
-      activeClientIds.add(clientId);
-
-      sendToClient(client, {
-        type: "MOCKING_ENABLED",
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
-      });
-      break;
-    }
-
-    case "MOCK_DEACTIVATE": {
-      activeClientIds.delete(clientId);
-      break;
-    }
-
-    case "CLIENT_CLOSED": {
-      activeClientIds.delete(clientId);
-
-      const remainingClients = allClients.filter(client => {
-        return client.id !== clientId;
-      });
-
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister();
-      }
-
-      break;
-    }
-  }
-});
-
-self.addEventListener("fetch", function (event) {
-  const { request } = event;
-
-  // Bypass navigation requests.
-  if (request.mode === "navigate") {
-    return;
-  }
-
-  // Opening the DevTools triggers the "only-if-cached" request
-  // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
-    return;
-  }
-
-  // Bypass all requests when there are no active clients.
-  // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
-  if (activeClientIds.size === 0) {
-    return;
-  }
-
-  // Generate unique request ID.
-  const requestId = crypto.randomUUID();
-  event.respondWith(handleRequest(event, requestId));
-});
-
-async function handleRequest(event, requestId) {
-  const client = await resolveMainClient(event);
-  const response = await getResponse(event, client, requestId);
-
-  // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
-  // this message will pend indefinitely.
-  if (client && activeClientIds.has(client.id)) {
-    (async function () {
-      const responseClone = response.clone();
-
-      sendToClient(
-        client,
-        {
-          type: "RESPONSE",
-          payload: {
-            requestId,
-            isMockedResponse: IS_MOCKED_RESPONSE in response,
-            type: responseClone.type,
-            status: responseClone.status,
-            statusText: responseClone.statusText,
-            body: responseClone.body,
-            headers: Object.fromEntries(responseClone.headers.entries()),
-          },
-        },
-        [responseClone.body]
-      );
-    })();
-  }
-
-  return response;
-}
-
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId);
-
-  if (activeClientIds.has(event.clientId)) {
-    return client;
-  }
-
-  if (client?.frameType === "top-level") {
-    return client;
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: "window",
-  });
-
-  return allClients
-    .filter(client => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === "visible";
-    })
-    .find(client => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id);
-    });
-}
-
-async function getResponse(event, client, requestId) {
-  const { request } = event;
-
-  // Clone the request because it might've been already used
-  // (i.e. its body has been read and sent to the client).
-  const requestClone = request.clone();
-
-  function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers);
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get("accept");
-    if (acceptHeader) {
-      const values = acceptHeader.split(",").map(value => value.trim());
-      const filteredValues = values.filter(value => value !== "msw/passthrough");
-
-      if (filteredValues.length > 0) {
-        headers.set("accept", filteredValues.join(", "));
-      } else {
-        headers.delete("accept");
-      }
-    }
-
-    return fetch(requestClone, { headers });
-  }
-
-  // Bypass mocking when the client is not active.
-  if (!client) {
-    return passthrough();
-  }
-
-  // Bypass initial page load requests (i.e. static assets).
-  // The absence of the immediate/parent client in the map of the active clients
-  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-  // and is not ready to handle requests.
-  if (!activeClientIds.has(client.id)) {
-    return passthrough();
-  }
-
-  // Notify the client that a request has been intercepted.
-  const requestBuffer = await request.arrayBuffer();
-  const clientMessage = await sendToClient(
-    client,
-    {
-      type: "REQUEST",
-      payload: {
-        id: requestId,
-        url: request.url,
-        mode: request.mode,
-        method: request.method,
-        headers: Object.fromEntries(request.headers.entries()),
-        cache: request.cache,
-        credentials: request.credentials,
-        destination: request.destination,
-        integrity: request.integrity,
-        redirect: request.redirect,
-        referrer: request.referrer,
-        referrerPolicy: request.referrerPolicy,
-        body: requestBuffer,
-        keepalive: request.keepalive,
-      },
-    },
-    [requestBuffer]
-  );
-
-  switch (clientMessage.type) {
-    case "MOCK_RESPONSE": {
-      return respondWithMock(clientMessage.data);
-    }
-
-    case "PASSTHROUGH": {
-      return passthrough();
-    }
-  }
-
-  return passthrough();
-}
-
-function sendToClient(client, message, transferrables = []) {
-  return new Promise((resolve, reject) => {
-    const channel = new MessageChannel();
-
-    channel.port1.onmessage = event => {
-      if (event.data && event.data.error) {
-        return reject(event.data.error);
-      }
-
-      resolve(event.data);
-    };
-
-    client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
-  });
-}
-
-async function respondWithMock(response) {
-  // Setting response status code to 0 is a no-op.
-  // However, when responding with a "Response.error()", the produced Response
-  // instance will have status code set to 0. Since it's not possible to create
-  // a Response instance with status code 0, handle that use-case separately.
-  if (response.status === 0) {
-    return Response.error();
-  }
-
-  const mockedResponse = new Response(response.body, response);
-
-  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
-    value: true,
-    enumerable: true,
-  });
-
-  return mockedResponse;
-}