@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

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.DmGAMS8X.js

@@ -0,0 +1,121 @@
+import { C as _ } from "./button.CauAHfdl.js";
+import { C as u, D as h } from "./dialog.2UW1LNm1.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.BFqTRDCA.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
+};