@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/{image.Ycf8RudS.js → image.DZCRhE3G.js}

@@ -1,16 +1,19 @@
-import { C as Le, n as c, x as T, i as se, E as Re, c as He } from "./custom-element.vnXBMQxc.js";
-import { r as H } from "./state.Cw55xXlb.js";
+import { x as T, i as se, E as Le } from "./lit-element.jLBm65_O.js";
+import { C as Re, n as m } from "./lib-cortex-element.CVMmyPMC.js";
+import { r as H } from "./state.CSDxrqLd.js";
 import { e as X } from "./query.BBf1UFkC.js";
-import { E as $e, b as de, a as We } from "./index.Cpamj0jB.js";
-import { c as Ae } from "./component.styles.CI-v8BZa.js";
-import { C as Oe, d as Me } from "./popup._w5T7x8f.js";
-import { L as De } from "./i18n.BP2FRO1v.js";
-import { w as q } from "./watch.BCJD77bD.js";
-import { e as j } from "./class-map.CoZTSvbM.js";
-import { o as je } from "./if-defined.MfEgpxEN.js";
-import { o as Te } from "./style-map.CZovMmo_.js";
+import { E as He, b as de, a as $e } from "./index.Cpamj0jB.js";
+import { c as We } from "./component.styles.DMSLciL5.js";
+import { c as Ae } from "./custom-element.L4WJXn1j.js";
+import { d as Oe } from "./debounce.DaHuiSGU.js";
+import { L as Me } from "./i18n.DrzK7TPf.js";
+import { w as q } from "./watch.q1sEjPWL.js";
+import { e as j } from "./class-map.BiVq-cVR.js";
+import { o as De } from "./if-defined.BRoBj_Rp.js";
+import { o as je } from "./style-map.llVFPd__.js";
 import { n as V } from "./when.Dr1es41R.js";
-import Be from "../components/icon.js";
+import Te from "../components/icon.js";
+import Be from "../components/popup.js";
 import Ze from "../components/resize-observer.js";
 import Ie from "../components/skeleton.js";
 import Ne from "../components/space.js";
@@ -19,9 +22,9 @@ var Pe = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-
     (p = e[g]) && (r = p(t, o, r) || r);
   return r && Ve(t, o, r), r;
 };
-class S extends Le {
+class S extends Re {
   constructor() {
-    super(...arguments), this.hasEvent = !1, this.easing = $e.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = ue.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
+    super(...arguments), this.hasEvent = !1, this.easing = He.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = ue.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
   }
   get easeCSSVariable() {
     return de[this.easing] || de.linear;
@@ -55,46 +58,46 @@ E([
   X("slot")
 ], S.prototype, "slotEl");
 E([
-  c({ attribute: "has-event", reflect: !0, type: Boolean })
+  m({ attribute: "has-event", reflect: !0, type: Boolean })
 ], S.prototype, "hasEvent");
 E([
-  c({ reflect: !0, type: String })
+  m({ reflect: !0, type: String })
 ], S.prototype, "easing");
 E([
-  c({ attribute: "highlight-border", reflect: !0, type: Boolean })
+  m({ attribute: "highlight-border", reflect: !0, type: Boolean })
 ], S.prototype, "highlightBorder");
 E([
-  c({
+  m({
     attribute: "highlight-color-overlay",
     reflect: !0,
     type: Boolean
   })
 ], S.prototype, "highlightColorOverlay");
 E([
-  c({
+  m({
     attribute: "highlight-drop-shadow",
     reflect: !0,
     type: Boolean
   })
 ], S.prototype, "highlightDropShadow");
 E([
-  c({ attribute: "highlight-background", reflect: !0, type: Boolean })
+  m({ attribute: "highlight-background", reflect: !0, type: Boolean })
 ], S.prototype, "highlightBackground");
 E([
-  c({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
+  m({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
 ], S.prototype, "highlightOpacity");
 E([
-  c({ attribute: "effect", reflect: !0, type: String })
+  m({ attribute: "effect", reflect: !0, type: String })
 ], S.prototype, "effect");
 E([
-  c({
+  m({
     attribute: "text-reveal-style",
     reflect: !0,
     type: String
   })
 ], S.prototype, "textRevealStyle");
 E([
-  c({
+  m({
     attribute: "zoom-style",
     reflect: !0,
     type: String
@@ -250,19 +253,19 @@ O([
   X('[part="base"]')
 ], A.prototype, "containingElement");
 O([
-  c({ reflect: !0, type: String })
+  m({ reflect: !0, type: String })
 ], A.prototype, "width");
 O([
-  c({ reflect: !0, type: String })
+  m({ reflect: !0, type: String })
 ], A.prototype, "height");
 O([
-  c({ type: Boolean })
+  m({ type: Boolean })
 ], A.prototype, "resizable");
 O([
-  c({ attribute: "height-mode", reflect: !0, type: String })
+  m({ attribute: "height-mode", reflect: !0, type: String })
 ], A.prototype, "heightMode");
 O([
-  c({ attribute: "no-limit", reflect: !0, type: Boolean })
+  m({ attribute: "no-limit", reflect: !0, type: Boolean })
 ], A.prototype, "noLimit");
 O([
   H()
@@ -321,10 +324,10 @@ var B = Object.assign || function(e) {
   return NodeList.prototype.isPrototypeOf(t);
 }, ee = function(t) {
   return t && t.nodeType === 1;
-}, ce = function(t) {
+}, me = function(t) {
   var o = t.currentSrc || t.src;
   return o.substr(-4).toLowerCase() === ".svg";
-}, me = function(t) {
+}, ce = function(t) {
   try {
     return Array.isArray(t) ? t.filter(Q) : Ue(t) ? [].slice.call(t).filter(Q) : ee(t) ? [t].filter(Q) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(Q) : [];
   } catch {
@@ -386,7 +389,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
     for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
       n[u] = arguments[u];
     var z = n.reduce(function(s, w) {
-      return [].concat(s, me(w));
+      return [].concat(s, ce(w));
     }, []);
     return z.filter(function(s) {
       return L.indexOf(s) === -1;
@@ -403,7 +406,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
       n[u] = arguments[u];
     i.zoomed && y();
     var z = n.length > 0 ? n.reduce(function(s, w) {
-      return [].concat(s, me(w));
+      return [].concat(s, ce(w));
     }, []) : L;
     return z.forEach(function(s) {
       s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
@@ -447,7 +450,7 @@ See: https://github.com/francoischalifour/medium-zoom`);
           });
         }
       w = w || s.width - d.margin * 2, W = W || s.height - d.margin * 2;
-      var _ = i.zoomedHd || i.original, ye = ce(_) ? w : _.naturalWidth || w, be = ce(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + d.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + d.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
+      var _ = i.zoomedHd || i.original, ye = me(_) ? w : _.naturalWidth || w, be = me(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + d.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + d.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
       i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
     };
     return new h(function(z) {
@@ -930,14 +933,14 @@ const Ge = se`
     --font-size: var(--cx-font-size-4x-large);
   }
 `;
-var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, m = (e, t, o, h) => {
+var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, c = (e, t, o, h) => {
   for (var r = h > 1 ? void 0 : h ? tt(t, o) : t, g = e.length - 1, p; g >= 0; g--)
     (p = e[g]) && (r = (h ? p(t, o, r) : p(r)) || r);
   return h && r && et(t, o, r), r;
 };
 let l = class extends A {
   constructor() {
-    super(...arguments), this.localize = new De(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = We.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
+    super(...arguments), this.localize = new Me(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
   }
   get currentAltValue() {
     return this.alt;
@@ -1093,7 +1096,7 @@ let l = class extends A {
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
     })}
-      style=${Te({
+      style=${je({
       "--easing": this.easeCSSVariable
     })}
       data-empty-label=${this.localize.term("emptyImage")}
@@ -1103,7 +1106,7 @@ let l = class extends A {
       <cx-resize-observer @cx-resize=${this.handleResize}>
         <div
           part="highlighter"
-          tabindex=${je(this.highlighterTabindex)}
+          tabindex=${De(this.highlighterTabindex)}
           role=${this.highlighterRole}
           aria-label=${t}
           aria-roledescription=${this.localize.term("image")}
@@ -1115,7 +1118,7 @@ let l = class extends A {
         >
           ${V(
       o,
-      () => Re,
+      () => Le,
       () => V(
         this.effect === Y.Jump || this.effect === Y.Zoom,
         () => T`
@@ -1182,90 +1185,90 @@ let l = class extends A {
     </div>`;
   }
 };
-l.styles = [Ae, _e, Qe];
+l.styles = [We, _e, Qe];
 l.dependencies = {
-  "cx-icon": Be,
-  "cx-popup": Oe,
+  "cx-icon": Te,
+  "cx-popup": Be,
   "cx-resize-observer": Ze,
   "cx-skeleton": Ie,
   "cx-space": Ne
 };
-m([
+c([
   X(".image")
 ], l.prototype, "imageElement", 2);
-m([
+c([
   X(".zoom-image")
 ], l.prototype, "zoomImageElement", 2);
-m([
+c([
   X(".highlighter")
 ], l.prototype, "highlighterElement", 2);
-m([
+c([
   H()
 ], l.prototype, "isLoaded", 2);
-m([
+c([
   H()
 ], l.prototype, "isError", 2);
-m([
-  c({ reflect: !0, type: String })
+c([
+  m({ reflect: !0, type: String })
 ], l.prototype, "src", 2);
-m([
-  c({ reflect: !0, type: String })
+c([
+  m({ reflect: !0, type: String })
 ], l.prototype, "placeholder", 2);
-m([
-  c({ reflect: !0, type: String })
+c([
+  m({ reflect: !0, type: String })
 ], l.prototype, "alt", 2);
-m([
-  c({ attribute: "object-fit", reflect: !0 })
+c([
+  m({ attribute: "object-fit", reflect: !0 })
 ], l.prototype, "objectFit", 2);
-m([
-  c({ reflect: !0, type: Boolean })
+c([
+  m({ reflect: !0, type: Boolean })
 ], l.prototype, "skeleton", 2);
-m([
-  c({ reflect: !0, type: Boolean })
+c([
+  m({ reflect: !0, type: Boolean })
 ], l.prototype, "fallback", 2);
-m([
-  c({ attribute: "can-zoom", reflect: !0, type: Boolean })
+c([
+  m({ attribute: "can-zoom", reflect: !0, type: Boolean })
 ], l.prototype, "canZoom", 2);
-m([
-  c({ reflect: !0, type: Boolean })
+c([
+  m({ reflect: !0, type: Boolean })
 ], l.prototype, "loading", 2);
-m([
-  c({ reflect: !0, type: Boolean })
+c([
+  m({ reflect: !0, type: Boolean })
 ], l.prototype, "block", 2);
-m([
-  c({ attribute: "html-loading", reflect: !0, type: String })
+c([
+  m({ attribute: "html-loading", reflect: !0, type: String })
 ], l.prototype, "htmlLoading", 2);
-m([
-  c({ attribute: "click-handler-type", reflect: !0, type: String })
+c([
+  m({ attribute: "click-handler-type", reflect: !0, type: String })
 ], l.prototype, "clickHandlerType", 2);
-m([
+c([
   H()
 ], l.prototype, "isZoomed", 2);
-m([
+c([
   H()
 ], l.prototype, "imageRatio", 2);
-m([
+c([
   H()
 ], l.prototype, "parsedAlt", 2);
-m([
+c([
   H()
 ], l.prototype, "parsedAltDarkMode", 2);
-m([
+c([
   q("isLoaded"),
   q("canZoom", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleCanZoomChange", 1);
-m([
+c([
   q("objectFit", { waitUntilFirstUpdate: !0 })
 ], l.prototype, "handleObjectFitChange", 1);
-m([
+c([
   q("src"),
   q("srcDarkMode")
 ], l.prototype, "handleSrcChange", 1);
-m([
-  Me(100)
+c([
+  Oe(100)
 ], l.prototype, "updateLastPatchedWidth", 1);
-l = m([
-  He("cx-image")
+l = c([
+  Ae("cx-image")
 ], l);
 export {
   l as C,

package/library/chunks/image.mbpyiQpQ.js

@@ -0,0 +1,82 @@
+import { r as u } from "./number.CjNxU7Xs.js";
+const w = (t, e, a, i) => {
+  const r = t / e, o = a / i;
+  let c = t, n = e;
+  return r > o ? c = Math.round(n * o) : n = Math.round(c / o), {
+    height: n,
+    width: c
+  };
+};
+function m(t, e, a, i, r) {
+  const o = new Image();
+  return o.src = t, o.crossOrigin = "anonymous", new Promise((c) => {
+    o.onload = () => {
+      const n = document.createElement("canvas");
+      if (e > i || a > r) {
+        const d = i / e, l = r / a, s = Math.max(d, l);
+        n.width = e * s, n.height = a * s;
+      } else
+        n.width = e, n.height = a;
+      const h = n.getContext("2d");
+      h ? (h.drawImage(o, 0, 0, n.width, n.height), c({
+        height: n.height,
+        url: n.toDataURL("image/jpeg"),
+        width: n.width
+      })) : c({
+        height: a,
+        url: t,
+        width: e
+      });
+    }, o.onerror = () => {
+      c({
+        height: a,
+        url: t,
+        width: e
+      });
+    };
+  });
+}
+function f(t, e) {
+  const a = new Image();
+  return a.src = t.url, a.crossOrigin = "anonymous", new Promise((i) => {
+    a.onload = () => {
+      const r = document.createElement("canvas");
+      r.width = e.width, r.height = e.height;
+      const o = r.getContext("2d");
+      o ? (o.drawImage(a, -e.x, -e.y, t.width, t.height), i(r.toDataURL("image/jpeg"))) : i(t.url);
+    }, a.onerror = () => {
+      i(t.url);
+    };
+  });
+}
+function I(t, e) {
+  const a = new Image();
+  return a.src = t.url, a.crossOrigin = "anonymous", new Promise((i) => {
+    a.onload = () => {
+      const { height: r, width: o } = u(t.width, t.height, e), c = document.createElement("canvas");
+      c.width = o, c.height = r;
+      const n = c.getContext("2d");
+      n ? (n.fillStyle = "white", n.fillRect(0, 0, o, r), n.translate(o / 2, r / 2), n.rotate(e * Math.PI / 180), n.drawImage(
+        a,
+        -t.width / 2,
+        -t.height / 2,
+        t.width,
+        t.height
+      ), n.rotate(-(e * Math.PI) / 180), n.translate(-o / 2, -r / 2), i(c.toDataURL("image/jpeg"))) : i(t.url);
+    }, a.onerror = () => {
+      i(t.url);
+    };
+  });
+}
+function R(t) {
+  const e = t.getBoundingClientRect(), a = e.width / e.height, i = t.naturalWidth / t.naturalHeight;
+  let r, o;
+  return i > a ? (r = e.width, o = e.width / i) : (o = e.height, r = e.height * i), { height: o, width: r };
+}
+export {
+  I as a,
+  f as b,
+  w as c,
+  R as g,
+  m as r
+};