@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/iframe.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
-import { C as u } from "../chunks/iframe.CNEyWhcM.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C as u } from "../chunks/iframe.BQFZQMTe.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/image-comparer.js

@@ -1,5 +1,5 @@
 import { n as h, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as v } from "../chunks/drag.DXEXVXPv.js";
 import { L as _ } from "../chunks/i18n.BUW7B9hr.js";
@@ -10,79 +10,7 @@ import { e as p } from "../chunks/query.BBf1UFkC.js";
 import { e as b } from "../chunks/class-map.BiVq-cVR.js";
 import { o as c } from "../chunks/style-map.llVFPd__.js";
 import d from "./icon.js";
-const $ = y`
-  :host {
-    --divider-width: 2px;
-    --handle-size: 2.5rem;
-
-    display: inline-block;
-    position: relative;
-  }
-
-  .image-comparer {
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  .image-comparer__before,
-  .image-comparer__after {
-    display: block;
-    pointer-events: none;
-    position: relative;
-  }
-
-  slot[name='before']::slotted(img),
-  slot[name='after']::slotted(img),
-  slot[name='before']::slotted(svg),
-  slot[name='after']::slotted(svg) {
-    display: block;
-    max-width: 100% !important;
-    height: auto;
-  }
-
-  .image-comparer__before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  .image-comparer__divider {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: var(--divider-width);
-    height: 100%;
-    background-color: var(--cx-color-neutral-0);
-    translate: calc(var(--divider-width) / -2);
-    cursor: ew-resize;
-  }
-
-  .image-comparer__handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: calc(50% - (var(--handle-size) / 2));
-    width: var(--handle-size);
-    height: var(--handle-size);
-    background-color: var(--cx-color-neutral-0);
-    border-radius: var(--cx-border-radius-circle);
-    font-size: calc(var(--handle-size) * 0.5);
-    color: var(--cx-color-neutral-700);
-    cursor: inherit;
-    z-index: 10;
-  }
-
-  .image-comparer__handle:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-`;
+const $ = y`:host{--divider-width:2px;--handle-size:2.5rem;display:inline-block;position:relative}.image-comparer{max-width:100%;max-height:100%;overflow:hidden}.image-comparer__before,.image-comparer__after{pointer-events:none;display:block;position:relative}slot[name=before]::slotted(img),slot[name=after]::slotted(img),slot[name=before]::slotted(svg),slot[name=after]::slotted(svg){height:auto;display:block;max-width:100%!important}.image-comparer__before{width:100%;height:100%;position:absolute;top:0;left:0}.image-comparer__divider{width:var(--divider-width);background-color:var(--cx-color-neutral-0);height:100%;translate:calc(var(--divider-width) / -2);cursor:ew-resize;justify-content:center;align-items:center;display:flex;position:absolute;top:0}.image-comparer__handle{top:calc(50% - (var(--handle-size) / 2));width:var(--handle-size);height:var(--handle-size);background-color:var(--cx-color-neutral-0);border-radius:var(--cx-border-radius-circle);font-size:calc(var(--handle-size) * .5);color:var(--cx-color-neutral-700);cursor:inherit;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute}.image-comparer__handle:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}`;
 var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (e, t, a, o) => {
   for (var i = o > 1 ? void 0 : o ? C(t, a) : t, l = e.length - 1, n; l >= 0; l--)
     (n = e[l]) && (i = (o ? n(t, a, i) : n(i)) || i);
@@ -114,64 +42,16 @@ let r = class extends f {
   }
   render() {
     const e = this.localize.dir() === "rtl";
-    return x`
-      <div
-        part="base"
-        id="image-comparer"
-        class=${b({
+    return x`<div part="base" id="image-comparer" class=${b({
       "image-comparer": !0,
       "image-comparer--rtl": e
-    })}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="image-comparer__image">
-          <div
-            part="before"
-            class="image-comparer__before"
-            style=${c({
+    })} @keydown=${this.handleKeyDown}><div class="image-comparer__image"><div part="before" class="image-comparer__before" style=${c({
       clipPath: e ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
-    })}
-          >
-            <slot name="before"></slot>
-          </div>
-
-          <div
-            part="after"
-            class="image-comparer__after"
-            style=${c({
+    })}><slot name="before"></slot></div><div part="after" class="image-comparer__after" style=${c({
       clipPath: e ? `inset(0 ${this.position}% 0 0)` : `inset(0 0 0 ${this.position}%)`
-    })}
-          >
-            <slot name="after"></slot>
-          </div>
-        </div>
-
-        <div
-          part="divider"
-          class="image-comparer__divider"
-          style=${c({
+    })}><slot name="after"></slot></div></div><div part="divider" class="image-comparer__divider" style=${c({
       left: e ? `${100 - this.position}%` : `${this.position}%`
-    })}
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
-        >
-          <div
-            part="handle"
-            class="image-comparer__handle"
-            role="scrollbar"
-            aria-valuenow=${this.position}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            aria-controls="image-comparer"
-            tabindex="0"
-          >
-            <slot name="handle">
-              <cx-icon name="drag_indicator"></cx-icon>
-            </slot>
-          </div>
-        </div>
-      </div>
-    `;
+    })} @mousedown=${this.handleDrag} @touchstart=${this.handleDrag}><div part="handle" class="image-comparer__handle" role="scrollbar" aria-valuenow=${this.position} aria-valuemin="0" aria-valuemax="100" aria-controls="image-comparer" tabindex="0"><slot name="handle"><cx-icon name="drag_indicator"></cx-icon></slot></div></div></div>`;
   }
 };
 r.styles = [g, $];

package/library/components/image.js

@@ -1,5 +1,5 @@
-import { C as n } from "../chunks/image.DHBgKeJp.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import { C as n } from "../chunks/image.4eLWAZ3-.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/include.js

@@ -1,13 +1,9 @@
 import { n as u, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as h } from "../chunks/component.styles.DMSLciL5.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as f } from "../chunks/watch.BCJD77bD.js";
 import { i as d, x } from "../chunks/lit-element.jLBm65_O.js";
-const y = d`
-  :host {
-    display: block;
-  }
-`, a = /* @__PURE__ */ new Map();
+const y = d`:host{display:block}`, a = /* @__PURE__ */ new Map();
 function w(t, e = "cors") {
   const r = a.get(t);
   if (r !== void 0)

package/library/components/input-group.js

@@ -1,25 +1,10 @@
 import { n as a, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
-import { f as d } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
+import { f as d } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as h, x as m } from "../chunks/lit-element.jLBm65_O.js";
 import { e as _ } from "../chunks/query.BBf1UFkC.js";
-const x = h`
-  :host {
-    display: inline-block;
-    width: 100%;
-    isolation: isolate;
-  }
-
-  .input-group {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .input-group ::slotted(cx-input) {
-    width: 100%;
-  }
-`;
+const x = h`:host{isolation:isolate;width:100%;display:inline-block}.input-group{flex-wrap:nowrap;display:flex}.input-group ::slotted(cx-input){width:100%}`;
 var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (t, e, u, o) => {
   for (var n = o > 1 ? void 0 : o ? v(e, u) : e, i = t.length - 1, l; i >= 0; i--)
     (l = t[i]) && (n = (o ? l(e, u, n) : l(n)) || n);
@@ -61,17 +46,7 @@ let s = class extends c {
     });
   }
   render() {
-    return m`<div
-      part="base"
-      class="input-group"
-      aria-label=${this.label}
-      @focusout=${this.handleBlur}
-      @focusin=${this.handleFocus}
-      @mouseover=${this.handleMouseOver}
-      @mouseout=${this.handleMouseOut}
-    >
-      <slot @slotchange=${this.handleSlotChange}></slot>
-    </div>`;
+    return m`<div part="base" class="input-group" aria-label=${this.label} @focusout=${this.handleBlur} @focusin=${this.handleFocus} @mouseover=${this.handleMouseOver} @mouseout=${this.handleMouseOut}><slot @slotchange=${this.handleSlotChange}></slot></div>`;
   }
 };
 s.styles = [