@orangelogic/design-system 2.56.0 → 2.57.0

package/library/chunks/list-editor.Ct803qvF.js

@@ -1,737 +0,0 @@
-import { C as _ } from "./button.CiWlWCNb.js";
-import { C as z } from "./dialog.C28qzMSQ.js";
-import M from "../components/grid.js";
-import q from "../components/grid-item.js";
-import C from "../components/input.js";
-import T from "../components/line-clamp.js";
-import R from "../components/radio.js";
-import O from "../components/radio-group.js";
-import $ from "../components/space.js";
-import { C as P, H as k } from "./table.-ecyjIUr.js";
-import { C as I } from "./typography.BFpl0WMA.js";
-import { i as A, n, C as w, x as l, c as E } from "./custom-element.vnXBMQxc.js";
-import { c as D } from "./component.styles.CI-v8BZa.js";
-import { d as F } from "./popup.Ba501Rgg.js";
-import { L as S } from "./i18n.C3Z8Xe8q.js";
-import { w as g } from "./watch.BCJD77bD.js";
-import { r as x } from "./state.Cw55xXlb.js";
-import { e as b } from "./query.BBf1UFkC.js";
-import { r as j } from "./choose.BTbF6BAn.js";
-import { e as L } from "./class-map.CoZTSvbM.js";
-import { c as y } from "./repeat.CauKaXyy.js";
-import { n as m } from "./when.Dr1es41R.js";
-import { t as B } from "./toString.CL_lYXbK.js";
-import H from "../components/icon-button.js";
-import { C as N } from "./image.BJfasRY_.js";
-import { t as U, a as G, D as v } from "./asset.Ba-CxnNM.js";
-import { a as V } from "./index.Cpamj0jB.js";
-import { A as u } from "./content-builder.UlVFSATk.js";
-import { e as J, t as f } from "./string.D6poLUEC.js";
-var X = 0;
-function W(t) {
-  var e = ++X;
-  return B(t) + e;
-}
-const Z = A`
-  :host {
-    isolation: isolate;
-  }
-
-  .asset-picker__input[data-user-invalid] ~ .asset-picker__button::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  .asset-picker__input[data-user-invalid]:focus-within
-    ~ .asset-picker__button::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  .asset-picker__button-container {
-    position: relative;
-  }
-
-  .asset-picker__button {
-    position: relative;
-    z-index: 1;
-  }
-
-  .asset-picker__image {
-    --height: 150px;
-    --width: 200px;
-    border-radius: var(--cx-border-radius-medium);
-  }
-
-  .asset-picker__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
-`;
-var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? Q(e, i) : e, c = t.length - 1, h; c >= 0; c--)
-    (h = t[c]) && (s = (r ? h(e, i, s) : h(s)) || s);
-  return r && s && K(e, i, s), s;
-};
-let d = class extends w {
-  constructor() {
-    super(...arguments), this.localize = new S(this), this.value = "", this.name = "", this.type = [u.Image], this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.onRequestAsset = void 0;
-  }
-  async handleRequestAssetClick() {
-    if (this.onRequestAsset)
-      try {
-        this.emit("cx-asset-request-status", {
-          detail: {
-            busy: !0
-          }
-        });
-        const t = await this.onRequestAsset(
-          this.type.join(" "),
-          this.multiple,
-          this.accepts
-        );
-        if (this.accepts.length > 0 && Object.values(t).some(
-          (i) => !this.accepts.includes(J(i.src) ?? "")
-        ))
-          U(this.localize.term("nonAcceptedExtension", this.accepts), {
-            notificationType: "warning"
-          });
-        else if (this.multiple) {
-          const i = Object.values(t);
-          this.emit("cx-content-builder-asset-select", {
-            detail: i
-          });
-        } else {
-          const { id: i, name: r, src: s, type: c } = t;
-          let h = s;
-          c === u.Audio && (h = (await G({
-            extraFields: [v],
-            recordIds: [i]
-          })).items[0]?.[v]), h && this.emit("cx-content-builder-asset-select", {
-            detail: {
-              id: i,
-              name: r,
-              src: h,
-              type: c
-            }
-          });
-        }
-      } catch {
-      } finally {
-        this.emit("cx-asset-request-status", {
-          detail: {
-            busy: !1
-          }
-        });
-      }
-  }
-  async handleValueChange() {
-    await this.updateComplete, this.inputEl?.setCustomValidity(
-      !this.required || this.value ? "" : this.localize.term("pleaseSelectAnAsset")
-    );
-  }
-  handleDeleteClick() {
-    this.emit("cx-content-builder-asset-delete");
-  }
-  /** True when the picker accepts this asset type. */
-  acceptsType(t) {
-    return this.type.includes(t);
-  }
-  renderAssetPreview() {
-    if (this.value && this.acceptsType(u.Image))
-      return l`<cx-image
-        part="image"
-        class="asset-picker__image"
-        src=${this.value}
-        alt=${this.name}
-        width="200px"
-        object-fit=${V.Cover}
-      ></cx-image>`;
-    if (this.name && this.acceptsType(u.Video))
-      return l`
-       <cx-typography variant="body-2">
-       ${f(this.name, 30, 11, 11)}
-       </cx-typography>`;
-    if (this.name && this.acceptsType(u.Other)) {
-      const t = this.name.split(",");
-      return l`<cx-typography variant="body-2">
-        ${f(t[0], 30, 11, 11)}
-
-        ${m(
-        t.length > 1,
-        () => l` ${this.localize.term("andOthers", t.length - 1)}`
-      )}
-      </cx-typography>`;
-    }
-    if (this.name && this.acceptsType(u.All)) {
-      const t = this.name.split(",");
-      return l`<cx-typography variant="body-2">
-        ${f(t[0], 30, 11, 11)}
-        ${m(t.length > 1, () => l` ${this.localize.term("andOthers", t.length - 1)}`)}
-      </cx-typography>`;
-    }
-    return null;
-  }
-  render() {
-    return l`
-      <cx-space
-        part="base"
-        class="asset-picker"
-        spacing="2x-small"
-        direction="horizontal"
-        align-items=${this.acceptsType(u.Image) ? "flex-start" : "center"}
-      >
-        ${this.renderAssetPreview()}
-        ${m(
-      !this.disabled,
-      () => l`
-            <div class="asset-picker__button-container">
-              <cx-input
-                class="asset-picker__input"
-                aria-label=${this.localize.term("choose")}
-                name=${this.name}
-                value=${this.value}
-                ?required=${this.required}
-                .form=${this.closest("form")}
-              ></cx-input>
-              <cx-button
-                part="button"
-                class="asset-picker__button"
-                @click=${this.handleRequestAssetClick}
-              >
-                ${this.localize.term("choose")}
-              </cx-button>
-            </div>
-            ${m(
-        this.value,
-        () => l`<cx-icon-button
-                  label=${this.localize.term("delete")}
-                  name="delete"
-                  @click=${this.handleDeleteClick}
-                >
-                </cx-icon-button>`
-      )}
-          `
-    )}
-      </cx-space>
-    `;
-  }
-};
-d.styles = [D, Z];
-d.dependencies = {
-  "cx-button": _,
-  "cx-icon-button": H,
-  "cx-image": N,
-  "cx-input": C,
-  "cx-space": $,
-  "cx-typography": I
-};
-p([
-  b(".asset-picker__button")
-], d.prototype, "buttonEl", 2);
-p([
-  b(".asset-picker__input")
-], d.prototype, "inputEl", 2);
-p([
-  n({ reflect: !0, type: String })
-], d.prototype, "value", 2);
-p([
-  n({ reflect: !0, type: String })
-], d.prototype, "name", 2);
-p([
-  n({
-    converter: {
-      fromAttribute: (t) => (t ?? "").split(" ").filter((e) => e !== ""),
-      toAttribute: (t) => t.join(" ")
-    },
-    reflect: !0
-  })
-], d.prototype, "type", 2);
-p([
-  n({ reflect: !0, type: Boolean })
-], d.prototype, "multiple", 2);
-p([
-  n({
-    converter: {
-      fromAttribute: (t) => (t ?? "").split(" ").filter((e) => e !== ""),
-      toAttribute: (t) => t.join(" ")
-    },
-    reflect: !0
-  })
-], d.prototype, "accepts", 2);
-p([
-  n({ reflect: !0, type: Boolean })
-], d.prototype, "required", 2);
-p([
-  n({ attribute: "disabled", reflect: !0, type: Boolean })
-], d.prototype, "disabled", 2);
-p([
-  n({ attribute: "on-request-asset", type: Function })
-], d.prototype, "onRequestAsset", 2);
-p([
-  g("value")
-], d.prototype, "handleValueChange", 1);
-d = p([
-  E("cx-asset-picker")
-], d);
-const Y = A`
-  :host {
-    --overridden-min-height: var(--min-height, 160px);
-    --overridden-max-height: var(--max-height, 260px);
-    display: block;
-    width: 100%;
-  }
-
-  .list-editor {
-    width: 100%;
-  }
-
-  .list-editor__table {
-    --cell-border-color: transparent;
-    --header-font-size: var(--cx-font-size-small);
-    --row-header-border-color: transparent;
-    --cell-horizontal-padding: var(--cx-spacing-2x-small);
-    --min-height: var(--overridden-min-height);
-    --max-height: var(--overridden-max-height);
-  }
-
-  .list-editor__table--no-header {
-    --cell-hover-background-color: transparent;
-  }
-
-  .list-editor__item::part(expand-button) {
-    display: none;
-  }
-
-  .list-editor__item__text {
-    --line-height: 1;
-  }
-
-  .list-editor__item__text__description {
-    color: var(--cx-color-neutral-600);
-  }
-
-  .list-editor__dialog {
-    --width: 540px;
-  }
-`;
-var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? et(e, i) : e, c = t.length - 1, h; c >= 0; c--)
-    (h = t[c]) && (s = (r ? h(e, i, s) : h(s)) || s);
-  return r && s && tt(e, i, s), s;
-};
-const it = {
-  resizable: !1
-};
-let a = class extends w {
-  constructor() {
-    super(...arguments), this.localize = new S(this), this.data = [], this.canAdd = !1, this.addDialogLabel = "", this.editDialogLabel = "", this.displayField = "", this.descriptionField = "", this.addItemText = "", this.sampleItem = {}, this.useEvents = !1, this.sortable = !1, this.loadingEvent = "", this.loadingItemIndex = void 0, this.columns = [], this.noHeader = !1, this.rowHeight = 40, this.boundary = document.body, this.onRequestAsset = void 0, this.editedItem = null, this.isAdding = !1, this.columnsMap = {}, this.sortedEntries = [], this.disableCloseConfigDialog = !1, this.hoverMenu = {
-      data: [
-        {
-          icon: "create",
-          name: "edit",
-          options: {
-            buttonProps: {
-              variant: "default"
-            }
-          },
-          tooltip: this.localize.term("edit")
-        },
-        {
-          icon: "delete",
-          name: "delete",
-          options: {
-            buttonProps: {
-              variant: "default"
-            },
-            iconStyle: {
-              color: "var(--cx-color-danger)"
-            }
-          },
-          tooltip: this.localize.term("delete")
-        }
-      ],
-      options: {
-        placement: k.Right
-      }
-    }, this.OMITTED_FIELDS = ["id"];
-  }
-  handleColumnsChange() {
-    this.columnsMap = {}, this.columns.forEach((t) => {
-      this.columnsMap[t.field] = t;
-    });
-  }
-  handleEditedItemChange() {
-    const t = {};
-    for (const e of this.columns)
-      t[e.field] = e.configOrder;
-    this.sortedEntries = Object.entries(this.editedItem || {}).filter(([e]) => this.OMITTED_FIELDS.indexOf(e) === -1 && this.columnsMap[e]).sort(([e], [i]) => (t[e] ?? Number.MAX_SAFE_INTEGER) - (t[i] ?? Number.MAX_SAFE_INTEGER));
-  }
-  handleTableActions(t) {
-    const { name: e, row: i } = t.detail, r = "component" in i ? i.component : i;
-    if (r) {
-      if (this.useEvents) {
-        this.emit(`cx-list-editor-${e}`, {
-          detail: {
-            index: r.getIndex(),
-            item: r.getData()
-          }
-        });
-        return;
-      }
-      e === "edit" ? this.editedItem = r.getData() : e === "delete" && this.emit("cx-list-editor-change", {
-        detail: {
-          data: this.data.filter((s) => s.id !== r.getData().id)
-        }
-      });
-    }
-  }
-  handleCancelClick() {
-    this.disableCloseConfigDialog || (this.isAdding = !1, this.editedItem = null);
-  }
-  handleRequestClose(t) {
-    if (this.disableCloseConfigDialog) {
-      t.preventDefault();
-      return;
-    }
-    t.stopPropagation(), this.isAdding = !1, this.editedItem = null;
-  }
-  handleAddClick() {
-    this.isAdding = !0, this.editedItem = {
-      ...this.sampleItem,
-      id: W(`${Date.now()}-`)
-    };
-  }
-  handleSaveClick() {
-    if (this.editedItem) {
-      const t = this.data.findIndex(
-        (i) => i.id === this.editedItem.id
-      );
-      if (!this.isAdding && t === -1) {
-        this.editedItem = null;
-        return;
-      }
-      let e = this.data;
-      this.isAdding ? e = [...e, this.editedItem] : e = this.data.map((i) => i.id === this.editedItem.id ? this.editedItem : i), this.emit("cx-list-editor-change", {
-        detail: {
-          data: e
-        }
-      }), this.editedItem = null, this.isAdding = !1;
-    }
-  }
-  handleTableRowMoved() {
-    this.emit("cx-list-editor-change", {
-      detail: {
-        data: this.table?.tabulatorInstance?.getData() ?? this.data ?? []
-      }
-    });
-  }
-  handleAssetRequestStatus(t) {
-    this.disableCloseConfigDialog = t.detail.busy;
-  }
-  async handleLoadingEventChange() {
-    if (await this.updateComplete, !this.table)
-      return;
-    if (!this.loadingItemIndex) {
-      this.table.tabulatorInstance?.getRows().forEach((i) => {
-        const r = i._row.hoverMenuElement;
-        i._row.hoverMenuElement.actions = r.actions.map((s) => (s.options?.buttonProps && (s.options.buttonProps.loading = !1), s));
-      });
-      return;
-    }
-    const t = this.table.tabulatorInstance?.getRow(this.loadingItemIndex);
-    if (!t || !t?._row?.hoverMenuElement)
-      return;
-    const e = t._row.hoverMenuElement;
-    e.actions = e.actions.map((i) => (i.options?.buttonProps && (i.options.buttonProps.loading = i.name === this.loadingEvent && this.loadingItemIndex === t.getIndex()), i));
-  }
-  render() {
-    return l`
-      <cx-space direction="vertical" align-items="flex-start">
-        <div class="list-editor">
-          <cx-table
-            part="table"
-            class=${L({
-      "list-editor__table": !0,
-      "list-editor__table--no-header": this.noHeader
-    })}
-            ?movable-rows=${this.sortable}
-            ?no-header=${this.noHeader}
-            layout="fitColumns"
-            row-height=${this.rowHeight}
-            .columns=${this.columns}
-            .columnDefaults=${it}
-            .hoverMenu=${this.hoverMenu}
-            .data=${this.data ?? []}
-            no-selectable
-            @cx-table.rowMoved=${this.handleTableRowMoved}
-            @cx-table-row-action-click=${this.handleTableActions}
-          ></cx-table>
-          <cx-dialog
-            part="dialog"
-            class="list-editor__dialog"
-            use-overlay-scrollbar
-            strategy="fixed"
-            ?open=${!!this.editedItem}
-            .boundary=${this.boundary}
-            @cx-request-close=${this.handleRequestClose}
-          >
-            <cx-space slot="label" direction="vertical" spacing="2x-small">
-              <cx-typography variant="h4">
-                ${this.isAdding ? this.addDialogLabel : this.editDialogLabel}
-              </cx-typography>
-              ${m(
-      !this.isAdding && this.editedItem?.[this.displayField],
-      () => l`<cx-typography variant="body3">
-                    <cx-line-clamp lines="1">
-                      ${this.editedItem?.[this.displayField]}
-                    </cx-line-clamp>
-                  </cx-typography>`
-    )}
-            </cx-space>
-            <cx-grid columns="3" spacing="var(--cx-spacing-small)" wrap="wrap">
-              ${y(
-      this.sortedEntries,
-      ([t]) => t,
-      ([t, e]) => l`<cx-grid-item xs="3" sm="1">
-                      <cx-typography variant="body2">
-                        ${this.columnsMap[t].title}
-                      </cx-typography>
-                    </cx-grid-item>
-                    <cx-grid-item xs="3" sm="2">
-                      ${j(
-        this.columnsMap[t].controlType,
-        [
-          [
-            "image-picker",
-            () => l`<cx-asset-picker
-                                value=${e}
-                                type="image"
-                                id=${t}
-                                @cx-content-builder-asset-select=${async (s) => {
-              if (Array.isArray(s.detail))
-                return;
-              const { src: c } = s.detail;
-              this.editedItem = {
-                ...this.editedItem,
-                [t]: c
-              };
-            }}
-                                @cx-content-builder-asset-delete=${async () => {
-              this.editedItem = {
-                ...this.editedItem,
-                [t]: ""
-              };
-            }}
-                                @cx-asset-request-status=${this.handleAssetRequestStatus}
-                                .onRequestAsset=${this.onRequestAsset}
-                              >
-                              </cx-asset-picker>`
-          ],
-          [
-            "radio-group",
-            () => {
-              const i = (r) => {
-                const s = r.target.value;
-                this.editedItem = {
-                  ...this.editedItem,
-                  [t]: s
-                };
-              };
-              return l`<cx-radio-group
-                                data-testid="radio-group-control"
-                                horizontal
-                                value=${(e || this.columnsMap[t].defaultValue) ?? ""}
-                                size="medium"
-                                @cx-change=${i}
-                              >
-                                ${y(
-                this.columnsMap[t].options ?? [],
-                (r) => r.value,
-                (r) => l`<cx-radio value=${r.value}>
-                                      ${r.name}
-                                    </cx-radio>`
-              )}
-                              </cx-radio-group>`;
-            }
-          ]
-        ],
-        () => l`
-                            <cx-input
-                              value=${e}
-                              @cx-change=${(r) => {
-          const s = r.target.value;
-          this.editedItem = {
-            ...this.editedItem,
-            [t]: s
-          };
-        }}
-                            ></cx-input>`
-      )}
-                    </cx-grid-item>`
-    )}
-            </cx-grid>
-            <cx-space
-              slot="footer"
-              spacing="x-small"
-              wrap="nowrap"
-              justify-content="end"
-            >
-              <cx-button
-                data-testid="cancel-button"
-                variant="default"
-                size="medium"
-                @click=${this.handleCancelClick}
-              >
-                ${this.localize.term("cancel")}
-              </cx-button>
-              <cx-button
-                data-testid="save-button"
-                variant="primary"
-                size="medium"
-                @click=${this.handleSaveClick}
-              >
-                ${this.localize.term("save")}
-              </cx-button>
-            </cx-space>
-          </cx-dialog>
-        </div>
-        ${m(
-      this.canAdd,
-      () => l`
-            <cx-button
-              data-testid="add-button"
-              variant="default"
-              size="medium"
-              @click=${this.handleAddClick}
-            >
-              ${this.addItemText || this.localize.term("add")}
-            </cx-button>
-          `
-    )}
-      </cx-space>
-    `;
-  }
-};
-a.styles = [D, Y];
-a.dependencies = {
-  "cx-asset-picker": d,
-  "cx-button": _,
-  "cx-dialog": z,
-  "cx-grid": M,
-  "cx-grid-item": q,
-  "cx-input": C,
-  "cx-line-clamp": T,
-  "cx-radio": R,
-  "cx-radio-group": O,
-  "cx-space": $,
-  "cx-table": P,
-  "cx-typography": I
-};
-o([
-  b("cx-dialog")
-], a.prototype, "dialog", 2);
-o([
-  b("cx-table")
-], a.prototype, "table", 2);
-o([
-  n({
-    converter: {
-      fromAttribute: (t) => {
-        try {
-          const e = JSON.parse(t);
-          return Array.isArray(e) ? e : [];
-        } catch {
-          return [];
-        }
-      },
-      toAttribute: (t) => JSON.stringify(t)
-    },
-    reflect: !1,
-    type: String
-  })
-], a.prototype, "data", 2);
-o([
-  n({ attribute: "can-add", reflect: !0, type: Boolean })
-], a.prototype, "canAdd", 2);
-o([
-  n({ attribute: "add-dialog-label", reflect: !0, type: String })
-], a.prototype, "addDialogLabel", 2);
-o([
-  n({ attribute: "edit-dialog-label", reflect: !0, type: String })
-], a.prototype, "editDialogLabel", 2);
-o([
-  n({ attribute: "display-field", reflect: !0, type: String })
-], a.prototype, "displayField", 2);
-o([
-  n({ attribute: "description-field", reflect: !0, type: String })
-], a.prototype, "descriptionField", 2);
-o([
-  n({ attribute: "add-item-text", reflect: !0, type: String })
-], a.prototype, "addItemText", 2);
-o([
-  n({ attribute: "sample-item", type: Object })
-], a.prototype, "sampleItem", 2);
-o([
-  n({ attribute: "use-events", reflect: !0, type: Boolean })
-], a.prototype, "useEvents", 2);
-o([
-  n({ reflect: !0, type: Boolean })
-], a.prototype, "sortable", 2);
-o([
-  n({ attribute: "loading-event", reflect: !0, type: String })
-], a.prototype, "loadingEvent", 2);
-o([
-  n({ attribute: "loading-item-index", reflect: !0, type: String })
-], a.prototype, "loadingItemIndex", 2);
-o([
-  n({ attribute: "columns", reflect: !1, type: Array })
-], a.prototype, "columns", 2);
-o([
-  n({ attribute: "no-header", reflect: !0, type: Boolean })
-], a.prototype, "noHeader", 2);
-o([
-  n({ attribute: "row-height", reflect: !0, type: Number })
-], a.prototype, "rowHeight", 2);
-o([
-  n({ type: Object })
-], a.prototype, "boundary", 2);
-o([
-  n({ attribute: "on-request-asset", type: Function })
-], a.prototype, "onRequestAsset", 2);
-o([
-  x()
-], a.prototype, "editedItem", 2);
-o([
-  x()
-], a.prototype, "isAdding", 2);
-o([
-  x()
-], a.prototype, "columnsMap", 2);
-o([
-  x()
-], a.prototype, "sortedEntries", 2);
-o([
-  g("columns")
-], a.prototype, "handleColumnsChange", 1);
-o([
-  g("editedItem"),
-  g("columns", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleEditedItemChange", 1);
-o([
-  g("loadingEvent", { waitUntilFirstUpdate: !0 }),
-  g("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
-  F(10)
-], a.prototype, "handleLoadingEventChange", 1);
-a = o([
-  E("cx-list-editor")
-], a);
-export {
-  a as C,
-  d as a,
-  it as c,
-  W as u
-};