@orangelogic/design-system 2.78.0 → 2.79.0

package/library/chunks/{color-swatch.BuUP5yG4.js → color-swatch.Bx-HOp9f.js}

@@ -2,9 +2,9 @@ import v from "../components/copy-button.js";
 import f from "../components/line-clamp.js";
 import w from "../components/resize-observer.js";
 import b from "../components/space.js";
-import { C as _ } from "./typography.oDzoLbZS.js";
+import { C as _ } from "./typography.DJC_UXgs.js";
 import { n as a, C as k } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as F } from "./component.styles.DMSLciL5.js";
+import { c as F } from "./component.styles.CRO4Odto.js";
 import { c as n, C as h, H as $, l as z } from "./color.vLD2sNTs.js";
 import { c as O } from "./custom-element.L4WJXn1j.js";
 import { d as W } from "./debounce.DaHuiSGU.js";
@@ -19,102 +19,7 @@ import { c as U } from "./repeat.DbF2p5ae.js";
 import { o as l } from "./style-map.llVFPd__.js";
 import { n as E } from "./when.Dr1es41R.js";
 var p = /* @__PURE__ */ ((o) => (o.Circle = "circle", o.GridItem = "grid-item", o.Oval = "oval", o))(p || {});
-const S = G`
-  :host {
-    display: block;
-  }
-
-  .color-swatch {
-    border: 1px solid var(--cx-color-neutral-200);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .color-swatch:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-swatch--circle {
-    aspect-ratio: 1 / 1;
-    height: auto;
-    width: var(--swatch-size, 350px);
-    min-width: var(--swatch-size, 230px);
-    max-width: 100%;
-    border-radius: var(--cx-border-radius-circle);
-  }
-
-  .color-swatch--oval {
-    height: var(--swatch-size, 350px);
-    width: 100%;
-    border-radius: calc(var(--swatch-size, 350px) / 2);
-  }
-
-  .color-swatch--grid {
-    width: 100%;
-    height: var(--swatch-size, 300px);
-    min-width: var(--swatch-grid-min-width, 165px);
-    border-radius: var(--cx-border-radius-x-large);
-  }
-
-  .color-swatch__content {
-    max-height: 100%;
-    padding: var(--swatch-content-padding, 0);
-    justify-content: space-between;
-    gap: var(--cx-spacing-medium);
-  }
-
-  .color-swatch--circle > .color-swatch__content {
-    max-width: 75%;
-    min-width: 50%;
-  }
-
-  .color-swatch--oval > .color-swatch__content {
-    max-width: 85%;
-  }
-
-  .color-swatch--grid > .color-swatch__content {
-    height: 100%;
-    width: 100%;
-    padding: var(--cx-spacing-large) var(--cx-spacing-medium);
-  }
-
-  .color-swatch__key::part(base) {
-    min-width: 50px;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  .color-swatch__key[variant='small']::part(base) {
-    display: inline-block;
-  }
-
-  .color-swatch__copy-button::part(button) {
-    min-height: fit-content;
-    height: fit-content;
-    border-width: 0 !important;
-    background: transparent !important;
-    padding: 0;
-  }
-
-  .color-swatch__copy-button::part(label) {
-    height: fit-content;
-    padding: 0;
-  }
-
-  .color-swatch__value {
-    text-transform: none;
-  }
-
-  .color-swatch__value::part(base) {
-    word-break: break-word;
-  }
-
-  .color-swatch__value-wrapper {
-    text-align: left;
-  }
-`;
+const S = G`:host{display:block}.color-swatch{border:1px solid var(--cx-color-neutral-200);justify-content:center;align-items:center;display:flex}.color-swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch--circle{aspect-ratio:1;height:auto;width:var(--swatch-size,350px);min-width:var(--swatch-size,230px);border-radius:var(--cx-border-radius-circle);max-width:100%}.color-swatch--oval{height:var(--swatch-size,350px);border-radius:calc(var(--swatch-size,350px) / 2);width:100%}.color-swatch--grid{width:100%;height:var(--swatch-size,300px);min-width:var(--swatch-grid-min-width,165px);border-radius:var(--cx-border-radius-x-large)}.color-swatch__content{max-height:100%;padding:var(--swatch-content-padding,0);justify-content:space-between;gap:var(--cx-spacing-medium)}.color-swatch--circle>.color-swatch__content{min-width:50%;max-width:75%}.color-swatch--oval>.color-swatch__content{max-width:85%}.color-swatch--grid>.color-swatch__content{width:100%;height:100%;padding:var(--cx-spacing-large) var(--cx-spacing-medium)}.color-swatch__key::part(base){vertical-align:middle;min-width:50px;height:100%}.color-swatch__key[variant=small]::part(base){display:inline-block}.color-swatch__copy-button::part(button){height:fit-content;min-height:fit-content;padding:0;background:0 0!important;border-width:0!important}.color-swatch__copy-button::part(label){height:fit-content;padding:0}.color-swatch__value{text-transform:none}.color-swatch__value::part(base){word-break:break-word}.color-swatch__value-wrapper{text-align:left}`;
 var V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (o, r, y, d) => {
   for (var s = d > 1 ? void 0 : d ? B(r, y) : r, C = o.length - 1, m; C >= 0; C--)
     (m = o[C]) && (s = (d ? m(r, y, s) : m(s)) || s);
@@ -186,125 +91,36 @@ let t = class extends k {
       { key: "CMYK", value: this.cmyk },
       { key: "PMS", value: this.pms }
     ].filter((r) => this.showCodes.includes(r.key));
-    return u`
-      <cx-resize-observer @cx-resize=${this.handleResize}>
-        <div
-          part="base"
-          tabindex=${x(this.canFocusContainer ? "0" : void 0)}
-          class=${g({
+    return u`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${x(this.canFocusContainer ? "0" : void 0)} class=${g({
       "color-swatch": !0,
       "color-swatch--circle": this.variant === p.Circle,
       "color-swatch--grid": this.variant === p.GridItem,
       "color-swatch--oval": this.variant === p.Oval
-    })}
-          style=${l({
+    })} style=${l({
       backgroundColor: this.backgroundColor
-    })}
-          @focusin=${this.handleFocusIn}
-          @focusout=${this.handleFocusOut}
-        >
-          <cx-space
-            part="content"
-            direction="vertical"
-            class="color-swatch__content"
-          >
-            <cx-typography
-              variant="h5"
-              part="name"
-              style=${l({
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}><cx-space part="content" direction="vertical" class="color-swatch__content"><cx-typography variant="h5" part="name" style=${l({
       "--color": this.textColor
-    })}
-            >
-              ${this.name}
-            </cx-typography>
-            <cx-space
-              direction="vertical"
-              spacing=${this.rowGap}
-              part="content"
-            >
-              ${U(
+    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${U(
       o,
       (r) => r.key,
-      (r) => u`<cx-space
-                    direction="horizontal"
-                    align-items="center"
-                    spacing="small"
-                    part="item"
-                    wrap="nowrap"
-                  >
-                    <cx-typography
-                      variant=${this.textVariant}
-                      class="color-swatch__key"
-                      part="key"
-                      style=${l({
+      (r) => u`<cx-space direction="horizontal" align-items="center" spacing="small" part="item" wrap="nowrap"><cx-typography variant=${this.textVariant} class="color-swatch__key" part="key" style=${l({
         "--color": this.textColor
-      })}
-                    >
-                      ${r.key}
-                    </cx-typography>
-                    ${E(
+      })}>${r.key}</cx-typography>${E(
         this.canCopy && r.value !== "",
-        () => u`
-                        <cx-copy-button
-                          part="copy-button"
-                          tabindex=${x(
+        () => u`<cx-copy-button part="copy-button" tabindex=${x(
           this.canFocusCodeOnly ? void 0 : "-1"
-        )}
-                          class="color-swatch__copy-button"
-                          copy-label=${this.localize.term("clickToCopy")}
-                          focus-copy-label=${this.localize.term(
+        )} class="color-swatch__copy-button" copy-label=${this.localize.term("clickToCopy")} focus-copy-label=${this.localize.term(
           "pressEnterOrCtrlCToCopy"
-        )}
-                          label=${`${r.key} ${r.value}`}
-                          no-icon
-                          value=${r.value}
-                        >
-                          <cx-line-clamp
-                            lines=${this.lineClamp}
-                            disabled-tooltip
-                            class=${g({
+        )} label=${`${r.key} ${r.value}`} no-icon value=${r.value}><cx-line-clamp lines=${this.lineClamp} disabled-tooltip class=${g({
           "color-swatch__value-wrapper": !0
-        })}
-                          >
-                            <cx-typography
-                              variant=${this.textVariant}
-                              style=${l({
+        })}><cx-typography variant=${this.textVariant} style=${l({
           "--color": this.textColor
-        })}
-                              class="color-swatch__value"
-                              part="value"
-                            >
-                              ${r.value}
-                            </cx-typography>
-                          </cx-line-clamp>
-                        </cx-copy-button>
-                      `,
-        () => u`
-                        <cx-line-clamp
-                          lines=${this.lineClamp}
-                          disabled-tooltip
-                          class="color-swatch__value-wrapper"
-                        >
-                          <cx-typography
-                            variant=${this.textVariant}
-                            style=${l({
+        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp></cx-copy-button>`,
+        () => u`<cx-line-clamp lines=${this.lineClamp} disabled-tooltip class="color-swatch__value-wrapper"><cx-typography variant=${this.textVariant} style=${l({
           "--color": this.textColor
-        })}
-                            class="color-swatch__value"
-                            part="value"
-                          >
-                            ${r.value}
-                          </cx-typography>
-                        </cx-line-clamp>
-                      `
-      )}
-                  </cx-space>`
-    )}
-            </cx-space>
-          </cx-space>
-        </div>
-      </cx-resize-observer>
-    `;
+        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp>`
+      )}</cx-space>`
+    )}</cx-space></cx-space></div></cx-resize-observer>`;
   }
 };
 t.styles = [F, S];

package/library/chunks/{colorPicker.C4w_vDjh.js → colorPicker.06n6P3aK.js}

@@ -1,8 +1,8 @@
-import { D as L, q as i, R as m, d as s, x as c, H as A, C as h, w as g, L as R, T, B as y, G as _, b, s as G, c as S, a as x, f as p, bx as D, by as P } from "./am-chart.oZVBmpnn.js";
-import { L as k } from "./LinearGradient.CxfXxvMw.js";
-import { C as M } from "./Circle.tOnnO-F-.js";
-import { E as H } from "./EditableLabel.DPmicdjK.js";
-import { S as B } from "./Slider.FKJwoPq2.js";
+import { D as L, q as i, R as m, d as s, x as c, H as A, C as h, w as g, L as R, T, B as y, G as _, b, s as G, c as S, a as x, f as p, bx as D, by as P } from "./am-chart.H2jnOzFc.js";
+import { L as k } from "./LinearGradient.B1z9AGUt.js";
+import { C as M } from "./Circle.DBa5Ok8V.js";
+import { E as H } from "./EditableLabel.BWeq6fgX.js";
+import { S as B } from "./Slider.C20No2z5.js";
 class O extends L {
   setupDefaultRules() {
     super.setupDefaultRules();

package/library/chunks/component.styles.CRO4Odto.js

@@ -0,0 +1,5 @@
+import { i as t } from "./lit-element.jLBm65_O.js";
+const o = t`:host{box-sizing:border-box}:host *,:host :before,:host :after{box-sizing:inherit}[hidden],:not(:defined):not(video-js){display:initial;visibility:hidden!important;border:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}::-webkit-scrollbar{width:17px;height:17px}::-webkit-scrollbar-button:decrement{height:0}::-webkit-scrollbar-button:increment{height:0}::-webkit-scrollbar-button:decrement:horizontal{width:0}::-webkit-scrollbar-button:increment:horizontal{width:0}::-webkit-scrollbar-thumb{background:var(--cx-color-neutral-400);background-clip:padding-box;border:7px solid #0000;border-radius:13px}::-webkit-scrollbar-thumb:hover{background:var(--cx-color-neutral-500);background-clip:padding-box;border:4px solid #0000}::-webkit-scrollbar-thumb{min-height:50px}::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:horizontal:start:increment,::-webkit-scrollbar-button:horizontal:end:decrement{display:none}`;
+export {
+  o as c
+};

package/library/chunks/confirm-popover.BbHneK19.js

@@ -0,0 +1,121 @@
+import { C as _ } from "./button.B-ktz-w4.js";
+import { C as u, D as h } from "./dialog.B1nzoJak.js";
+import g from "../components/dropdown.js";
+import { C as x } from "./typography.DJC_UXgs.js";
+import { n as e, C as b } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as y } from "./component.styles.CRO4Odto.js";
+import { c as w } from "./custom-element.L4WJXn1j.js";
+import { L as $ } from "./i18n.BUW7B9hr.js";
+import { i as z, x as d } from "./lit-element.jLBm65_O.js";
+import { e as m } from "./query.BBf1UFkC.js";
+import { e as a } from "./class-map.BiVq-cVR.js";
+var f = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(f || {}), v = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(v || {});
+const S = z`.confirm-popover--dropdown .confirm-popover__dropdown-content{padding:var(--cx-spacing-medium);text-align:center;flex-direction:column;width:max-content;display:flex}.confirm-popover cx-divider{--spacing:var(--cx-spacing-medium)}.confirm-popover .confirm-popover__actions{gap:var(--cx-spacing-medium);display:flex}.confirm-popover--dialog{--width:var(--confirm-popover-dialog-width)}.confirm-popover__actions--direction-horizontal{flex-direction:row}.confirm-popover__actions--direction-horizontal-reverse{flex-direction:row-reverse}.confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-end,.confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-start{justify-content:flex-end}.confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-start,.confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-end{justify-content:flex-start}.confirm-popover__actions--direction-horizontal.confirm-popover__actions--alignment-center,.confirm-popover__actions--direction-horizontal-reverse.confirm-popover__actions--alignment-center{justify-content:center}.confirm-popover__actions--direction-vertical{flex-direction:column}.confirm-popover__actions--direction-vertical-reverse{flex-direction:column-reverse}.confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-start,.confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-start{align-items:flex-start}.confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-end,.confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-end{align-items:flex-end}.confirm-popover__actions--direction-vertical.confirm-popover__actions--alignment-center,.confirm-popover__actions--direction-vertical-reverse.confirm-popover__actions--alignment-center{align-items:center}.confirm-popover--dropdown .confirm-popover__actions{margin-top:var(--cx-spacing-small);justify-content:center}.confirm-popover__confirm-button{--background-color:var(--confirm-button-background-color,var(--cx-color-danger));--color:var(--confirm-button-color,var(--cx-color-neutral-0))}.confirm-popover__cancel-button{--background-color:var(--cancel-button-background-color,var(--cx-color-primary-500));--color:var(--cancel-button-color,var(--cx-color-neutral-0))}`;
+var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (t, n, s, c) => {
+  for (var i = c > 1 ? void 0 : c ? D(n, s) : n, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (i = (c ? l(n, s, i) : l(i)) || i);
+  return c && i && C(n, s, i), i;
+};
+let o = class extends b {
+  constructor() {
+    super(...arguments), this.localize = new $(this), this.message = "", this.disabled = !1, this.buttonsDirection = f.Horizontal, this.buttonsAlignment = v.End, this.dividerPosition = h.Header, this.dialogLabel = "", this.confirmText = "", this.cancelText = "", this.variant = "dropdown", this.boundary = document.body;
+  }
+  get open() {
+    return this.variant === "dialog" ? this.dialog.open : this.dropdown.open;
+  }
+  hide() {
+    this.variant === "dialog" ? this.dialog.hide() : this.dropdown.hide();
+  }
+  show() {
+    this.variant === "dialog" ? this.dialog.show() : this.dropdown.show();
+  }
+  confirm() {
+    this.emit("cx-confirm").defaultPrevented || this.hide();
+  }
+  cancel() {
+    this.emit("cx-cancel").defaultPrevented || this.hide();
+  }
+  handleSlotClick() {
+    if (this.disabled) {
+      this.confirm();
+      return;
+    }
+    this.variant === "dialog" && (this.dialog.open ? this.dialog.hide() : this.dialog.show());
+  }
+  renderSlot() {
+    return d`<slot class="confirm-popover__trigger" name="trigger" slot="trigger" @click=${this.handleSlotClick}></slot>`;
+  }
+  renderDialog() {
+    return d`${this.renderSlot()}<cx-dialog part="dialog" label=${this.dialogLabel || this.localize.term("confirm")} divider-position=${this.dividerPosition} .boundary=${this.boundary} class=${a({
+      "confirm-popover": !0,
+      "confirm-popover--dialog": !0
+    })}><cx-typography variant="body2">${this.message}</cx-typography><div part="actions" class=${a({
+      "confirm-popover__actions": !0,
+      [`confirm-popover__actions--direction-${this.buttonsDirection}`]: !0,
+      [`confirm-popover__actions--alignment-${this.buttonsAlignment}`]: !0
+    })} slot="footer"><cx-button part="confirm-button" class="confirm-popover__confirm-button" @click=${this.confirm} variant="custom">${this.confirmText || this.localize.term("confirm")}</cx-button><cx-button part="cancel-button" class="confirm-popover__cancel-button" @click=${this.cancel} variant="custom">${this.cancelText || this.localize.term("cancel")}</cx-button></div><div part="footer" class="confirm-popover__footer"><slot name="footer"></slot></div></cx-dialog>`;
+  }
+  renderDropdown() {
+    return d`<cx-dropdown part="dropdown" class=${a({
+      "confirm-popover": !0,
+      "confirm-popover--dropdown": !0
+    })} no-header ?disabled=${this.disabled} ?hoist=${!this.boundary || this.boundary === document.body}>${this.renderSlot()}<div class="confirm-popover__dropdown-content"><cx-typography variant="body2">${this.message}</cx-typography><div part="actions" class=${a({
+      "confirm-popover__actions": !0,
+      [`confirm-popover__actions--direction-${this.buttonsDirection}`]: !0
+      /** Dropdown variant alignment is always center */
+    })} slot="footer"><cx-button part="confirm-button" class="confirm-popover__confirm-button" @click=${this.confirm} variant="custom">${this.confirmText || this.localize.term("confirm")}</cx-button><cx-button part="cancel-button" class="confirm-popover__cancel-button" @click=${this.cancel} variant="custom">${this.cancelText || this.localize.term("cancel")}</cx-button></div><div part="footer" class="confirm-popover__footer" slot="footer"><slot name="footer"></slot></div></div></cx-dropdown>`;
+  }
+  render() {
+    return this.variant === "dialog" ? this.renderDialog() : this.renderDropdown();
+  }
+};
+o.styles = [y, S];
+o.dependencies = {
+  "cx-button": _,
+  "cx-dialog": u,
+  "cx-dropdown": g,
+  "cx-typography": x
+};
+r([
+  m("cx-dropdown")
+], o.prototype, "dropdown", 2);
+r([
+  m("cx-dialog")
+], o.prototype, "dialog", 2);
+r([
+  e({ reflect: !0, type: String })
+], o.prototype, "message", 2);
+r([
+  e({ reflect: !0, type: Boolean })
+], o.prototype, "disabled", 2);
+r([
+  e({ attribute: "buttons-direction", reflect: !0, type: String })
+], o.prototype, "buttonsDirection", 2);
+r([
+  e({ attribute: "buttons-alignment", reflect: !0, type: String })
+], o.prototype, "buttonsAlignment", 2);
+r([
+  e({ attribute: "divider-position", reflect: !0, type: String })
+], o.prototype, "dividerPosition", 2);
+r([
+  e({ attribute: "dialog-label", reflect: !0, type: String })
+], o.prototype, "dialogLabel", 2);
+r([
+  e({ attribute: "confirm-text", reflect: !0, type: String })
+], o.prototype, "confirmText", 2);
+r([
+  e({ attribute: "cancel-text", reflect: !0, type: String })
+], o.prototype, "cancelText", 2);
+r([
+  e({ reflect: !0 })
+], o.prototype, "variant", 2);
+r([
+  e({ type: Object })
+], o.prototype, "boundary", 2);
+o = r([
+  w("cx-confirm-popover")
+], o);
+export {
+  o as C,
+  f as a
+};