@orangelogic/design-system 2.172.0 → 2.173.0

package/library/components/asset-link-format.js

@@ -3,7 +3,7 @@ import "../chunks/button.zWaIO1sl.js";
 import "./space.js";
 import "../chunks/typography.IqHbnd3C.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as h } from "../chunks/asset-link-format.BATKDRgD.js";
+import { C as h } from "../chunks/asset-link-format.COCtAbj0.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/asset-link-format.ClaYu_v8.js";
 import "../chunks/position-picker.DjnhxIKF.js";

package/library/components/color-swatch-group.js

@@ -3,7 +3,7 @@ import "../chunks/typography.IqHbnd3C.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/color-swatch.DpzAGKQx.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as v } from "../chunks/color-swatch-group.CQlgq_I5.js";
+import { C as v } from "../chunks/color-swatch-group.DCw6mJkM.js";
 import "../chunks/transformation.8uLv6uwG.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/dynamic-select.js

@@ -1,72 +1,76 @@
 import { C as g } from "../chunks/button.zWaIO1sl.js";
 import { C as O } from "../chunks/icon-button.DJvfUmOl.js";
-import { C as p, a as $ } from "../chunks/option.Bvyag0r1.js";
-import C from "./select.js";
-import { n as i, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { C as h, a as C } from "../chunks/option.Bvyag0r1.js";
+import $ from "./select.js";
+import { n as s, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as w } from "../chunks/debounce.DaHuiSGU.js";
 import { L as S } from "../chunks/i18n.DbXTTLXx.js";
-import { w as c } from "../chunks/watch.DJF5K-8U.js";
-import { x as r } from "../chunks/lit-element.jLBm65_O.js";
-import { r as h } from "../chunks/state.CSDxrqLd.js";
+import { w as p } from "../chunks/watch.DJF5K-8U.js";
+import { x as n } from "../chunks/lit-element.jLBm65_O.js";
+import { r as c } from "../chunks/state.CSDxrqLd.js";
 import { e as E } from "../chunks/query.BBf1UFkC.js";
-import { e as B } from "../chunks/class-map.BiVq-cVR.js";
+import { e as T } from "../chunks/class-map.BiVq-cVR.js";
 import { o as m } from "../chunks/if-defined.BRoBj_Rp.js";
-import { i as F } from "../chunks/keyed.DdOUTIg-.js";
+import { i as B } from "../chunks/keyed.DdOUTIg-.js";
 import { o as b } from "../chunks/map.D8heArFD.js";
 import { c as y } from "../chunks/repeat.CFjcER6_.js";
-import { o as T } from "../chunks/style-map.llVFPd__.js";
+import { o as F } from "../chunks/style-map.llVFPd__.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
 import { b as D } from "../chunks/_baseIteratee.sC2wLi2m.js";
 import { b as V } from "../chunks/_baseUniq.lwMgmtt2.js";
-function _(t, l) {
-  return t && t.length ? V(t, D(l)) : [];
+function k(t, i) {
+  return t && t.length ? V(t, D(i)) : [];
 }
-var z = Object.defineProperty, L = Object.getOwnPropertyDescriptor, o = (t, l, s, a) => {
-  for (var n = a > 1 ? void 0 : a ? L(l, s) : l, u = t.length - 1, d; u >= 0; u--)
-    (d = t[u]) && (n = (a ? d(l, s, n) : d(n)) || n);
-  return a && n && z(l, s, n), n;
+var _ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (t, i, l, a) => {
+  for (var r = a > 1 ? void 0 : a ? z(i, l) : i, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (r = (a ? d(i, l, r) : d(r)) || r);
+  return a && r && _(i, l, r), r;
 };
 let e = class extends v {
   constructor() {
-    super(...arguments), this.localize = new S(this), this.name = "", this.value = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = "", this.required = !1, this.useTag = !1, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof p) ? "" : typeof t.value == "string" ? t.value : "", this.setOptionCurrent = (t, l) => {
-      if (t instanceof p) {
-        if (l === void 0) {
+    super(...arguments), this.localize = new S(this), this.name = "", this.value = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = "", this.required = !1, this.useTag = !1, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof h) ? "" : typeof t.value == "string" ? t.value : "", this.setOptionCurrent = (t, i) => {
+      if (t instanceof h) {
+        if (i === void 0) {
           t.current = !t.current;
           return;
         }
-        t.current = l;
+        t.current = i;
       }
-    }, this.setOptionSelected = (t, l) => {
-      if (!(!(t instanceof p) || t.getAttribute("role") !== "option")) {
-        if (l === void 0) {
+    }, this.setOptionSelected = (t, i) => {
+      if (!(!(t instanceof h) || t.getAttribute("role") !== "option")) {
+        if (i === void 0) {
           t.selected = !t.selected;
           return;
         }
-        t.selected = l, l && this.selectEl.setCurrentOption(t);
+        t.selected = i, i && this.selectEl.setCurrentOption(t);
       }
-    }, this.stayOpenOnSelect = !1, this.closeOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.columns = [], this.useSearchTerm = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.iconName = "", this.noDropdown = !1, this.noDropdownOnEmpty = !1, this.noFlip = !1, this.customChangeEvent = "", this.autoFallbackFirstOption = !1, this.options = [], this.start = 0, this.searchTerm = "", this.hasMore = !1, this.loading = !1;
+    }, this.stayOpenOnSelect = !1, this.closeOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.columns = [], this.useSearchTerm = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.iconName = "", this.noDropdown = !1, this.noDropdownOnEmpty = !1, this.noFlip = !1, this.customChangeEvent = "", this.autoFallbackFirstOption = !1, this.hasOptions = !1, this.options = [], this.start = 0, this.searchTerm = "", this.hasMore = !1, this.loading = !1, this.fetchToken = 0;
   }
   createRenderRoot() {
     return this;
   }
   async fetchOptions(t = !1) {
-    if (this.api)
-      try {
-        this.loading = !0;
-        const l = await this.api({
-          searchTerm: this.searchTerm,
-          start: this.start
-        });
-        if (t ? this.options = l.data : this.options = _([...this.options, ...l.data], "value"), this.hasMore = l.hasMore, await this.updateComplete, this.selectEl) {
-          let s, a = !1;
-          this.multiple ? s = this.value?.trim() ? this.value.trim().split(/\s+/) : [] : (s = this.getFallbackValue(), a = s !== this.value), this.selectEl.value = s, a && this.selectEl.emit("cx-change");
-        }
-      } catch {
-        this.options = [];
-      } finally {
-        this.loading = !1;
+    if (!this.api)
+      return;
+    const i = ++this.fetchToken;
+    try {
+      this.loading = !0;
+      const l = await this.api({
+        searchTerm: this.searchTerm,
+        start: this.start
+      });
+      if (i !== this.fetchToken)
+        return;
+      if (t ? this.options = l.data : this.options = k([...this.options, ...l.data], "value"), this.hasMore = l.hasMore, await this.updateComplete, this.selectEl) {
+        let a, r = !1;
+        this.multiple ? a = this.value?.trim() ? this.value.trim().split(/\s+/) : [] : (a = this.getFallbackValue(), r = a !== this.value), this.selectEl.value = a, r && this.selectEl.emit("cx-change");
       }
+    } catch {
+      i === this.fetchToken && (this.options = []);
+    } finally {
+      i === this.fetchToken && (this.loading = !1);
+    }
   }
   async handleStartChange() {
     await this.updateComplete, this.api ? await this.fetchOptions() : this.options = [];
@@ -74,18 +78,21 @@ let e = class extends v {
   async handleSearchTermChange() {
     this.api ? (this.start = 0, await this.updateComplete, await this.fetchOptions(!0)) : this.options = [];
   }
+  handleOptionsChange() {
+    this.hasOptions = this.options.length > 0;
+  }
   async handleColumnsChange() {
     await this.updateComplete, this.selectEl && (this.columns.length > 0 ? (this.selectEl.filterCallback = this.tableFilterCallback, this.selectEl.getOptionDisabled = this.tableGetOptionDisabled, this.selectEl.getOptionLabel = this.getOptionLabel ?? this.tableGetOptionLabel, this.selectEl.getOptionSelected = this.tableGetOptionSelected, this.selectEl.getOptionValue = this.tableGetOptionValue, this.selectEl.setOptionCurrent = this.tableSetOptionCurrent, this.selectEl.setOptionSelected = this.tableSetOptionSelected) : (this.selectEl.getOptionValue = this.getOptionValue, this.selectEl.setOptionCurrent = this.setOptionCurrent, this.selectEl.setOptionSelected = this.setOptionSelected));
   }
   tableGetOptionValue(t) {
     return t?.getAttribute("data-value") ?? "";
   }
-  tableSetOptionSelected(t, l) {
-    const s = l ?? !t?.hasAttribute("selected");
-    t?.toggleAttribute("selected", s), t?.setAttribute("aria-selected", String(s));
+  tableSetOptionSelected(t, i) {
+    const l = i ?? !t?.hasAttribute("selected");
+    t?.toggleAttribute("selected", l), t?.setAttribute("aria-selected", String(l));
   }
-  tableSetOptionCurrent(t, l) {
-    t?.toggleAttribute("current", l ?? !t?.hasAttribute("current"));
+  tableSetOptionCurrent(t, i) {
+    t?.toggleAttribute("current", i ?? !t?.hasAttribute("current"));
   }
   tableGetOptionLabel(t) {
     return t?.querySelector("td")?.textContent?.trim() ?? "";
@@ -96,31 +103,34 @@ let e = class extends v {
   tableGetOptionDisabled(t) {
     return t?.hasAttribute("disabled") ?? !1;
   }
-  tableFilterCallback(t, l) {
-    const s = l.toLowerCase();
+  tableFilterCallback(t, i) {
+    const l = i.toLowerCase();
     return [...t?.querySelectorAll("td") || []].some(
-      (a) => a.textContent?.toLowerCase().includes(s)
+      (a) => a.textContent?.toLowerCase().includes(l)
     );
   }
-  getCellValue(t, l) {
-    if (l in t) {
-      const s = t[l];
-      return s == null ? "" : String(s);
+  getCellValue(t, i) {
+    if (i in t) {
+      const l = t[i];
+      return l == null ? "" : String(l);
     }
-    return t.extra?.[l] ?? "";
+    return t.extra?.[i] ?? "";
   }
   getColWidth(t) {
-    const l = this.columns.reduce((s, a) => s + (a.flex ?? 1), 0);
-    return `${((t.flex ?? 1) / l * 100).toFixed(1)}%`;
+    const i = this.columns.reduce((l, a) => l + (a.flex ?? 1), 0);
+    return `${((t.flex ?? 1) / i * 100).toFixed(1)}%`;
   }
   getFallbackValue() {
     return this.autoFallbackFirstOption ? this.options.some(
-      (l) => l.value === this.value
+      (i) => i.value === this.value
     ) ? this.value : this.options[0]?.value ?? "" : this.value;
   }
   handleInputChange(t) {
-    const { value: l } = t.target.displayInput;
-    this.searchTerm = l, this.selectEl.getOptionLabel = (s) => !s || !(s instanceof p) ? l : s.getTextLabel() || l;
+    const { value: i } = t.target.displayInput;
+    this.searchTerm = i, this.selectEl.getOptionLabel = (l) => !l || !(l instanceof h) ? this.searchTerm : l.getTextLabel() || this.searchTerm;
+  }
+  handleClear() {
+    this.fetchToken += 1, this.options = [], this.searchTerm = "";
   }
   handleLoadMore() {
     this.start += 10;
@@ -128,44 +138,44 @@ let e = class extends v {
   handleCustomChange(t) {
     if (!t.target)
       return;
-    const l = t.target, s = this.options.find(
-      (a) => a.value === l.value
+    const i = t.target, l = this.options.find(
+      (a) => a.value === i.value
     );
-    s && this.emit(this.customChangeEvent, {
-      detail: s
+    l && this.emit(this.customChangeEvent, {
+      detail: l
     });
   }
   renderTableOptions() {
-    return r`<table class="table-select__table"><thead class="table-select__thead"><tr>${b(
+    return n`<table class="table-select__table"><thead class="table-select__thead"><tr>${b(
       this.columns,
-      (t) => r`<th class="table-select__th" style=${T({ width: this.getColWidth(t) })}>${t.header}</th>`
+      (t) => n`<th class="table-select__th" style=${F({ width: this.getColWidth(t) })}>${t.header}</th>`
     )}</tr></thead>${y(
       this.options,
       (t) => t.value ?? "",
-      (t) => r`<tr role="option" aria-selected="false" aria-disabled=${t.disabled ? "true" : "false"} data-value=${t.value ?? ""} ?disabled=${t.disabled ?? !1}>${b(
+      (t) => n`<tr role="option" aria-selected="false" aria-disabled=${t.disabled ? "true" : "false"} data-value=${t.value ?? ""} ?disabled=${t.disabled ?? !1}>${b(
         this.columns,
-        (l) => r`<td class="table-select__td">${this.getCellValue(t, l.field)}</td>`
+        (i) => n`<td class="table-select__td">${this.getCellValue(t, i.field)}</td>`
       )}</tr>`
     )}</table>`;
   }
   render() {
-    const t = this.noDropdown || this.noDropdownOnEmpty && !this.options.length, l = this.columns.length > 0;
-    return F(l, r`<cx-select auto-size-padding=${this.autosizePadding} class=${B({
+    const t = this.noDropdown || this.noDropdownOnEmpty && !this.options.length, i = this.columns.length > 0;
+    return B(i, n`<cx-select auto-size-padding=${this.autosizePadding} class=${T({
       "dynamic-select": !0,
-      "table-select": l
-    })} data-id=${m(this.dataset.id || void 0)} data-label=${m(this.dataset.label || void 0)} form=${this.form} help-text=${this.helpText} input-behavior=${this.inputBehavior} label=${this.label} max-options-visible=${this.maxOptionsVisible} name=${this.name} placeholder=${this.placeholder} placement=${this.placement} size=${this.size} value=${this.value} .syncElement=${this.syncElement} ?allow-default-mouse-down=${this.allowDefaultMouseDown} ?allow-freetext=${this.allowFreetext} ?clearable=${this.clearable} ?close-on-select=${this.closeOnSelect} ?disabled=${this.disabled} ?filled=${this.filled} ?force-on-change=${this.forceOnChange} ?free-width=${this.freeWidth} ?hoist=${this.hoist} ?loading=${this.loading} ?multiple=${this.multiple} ?no-dropdown=${t} ?no-flip=${this.noFlip} ?no-reset-current=${this.noResetCurrent} ?no-select-on-enter=${this.noSelectOnEnter} ?open=${this.open} ?pill=${this.pill} ?required=${this.required} ?stay-open-on-select=${this.stayOpenOnSelect} ?use-tag=${this.useTag} @cx-change=${this.customChangeEvent ? this.handleCustomChange : void 0} @input=${this.useSearchTerm ? this.handleInputChange : void 0}>${f(this.iconName, () => r`<cx-icon-button class="icon-button" tabindex="-1" label=${this.localize.term("search")} name=${this.iconName} slot="prefix"></cx-icon-button>`)}
+      "table-select": i
+    })} data-id=${m(this.dataset.id || void 0)} data-label=${m(this.dataset.label || void 0)} form=${this.form} help-text=${this.helpText} input-behavior=${this.inputBehavior} label=${this.label} max-options-visible=${this.maxOptionsVisible} name=${this.name} placeholder=${this.placeholder} placement=${this.placement} size=${this.size} value=${this.value} .syncElement=${this.syncElement} ?allow-default-mouse-down=${this.allowDefaultMouseDown} ?allow-freetext=${this.allowFreetext} ?clearable=${this.clearable} ?close-on-select=${this.closeOnSelect} ?disabled=${this.disabled} ?filled=${this.filled} ?force-on-change=${this.forceOnChange} ?free-width=${this.freeWidth} ?hoist=${this.hoist} ?loading=${this.loading} ?multiple=${this.multiple} ?no-dropdown=${t} ?no-flip=${this.noFlip} ?no-reset-current=${this.noResetCurrent} ?no-select-on-enter=${this.noSelectOnEnter} ?open=${this.open} ?pill=${this.pill} ?required=${this.required} ?stay-open-on-select=${this.stayOpenOnSelect} ?use-tag=${this.useTag} @cx-change=${this.customChangeEvent ? this.handleCustomChange : void 0} @cx-clear=${this.useSearchTerm ? this.handleClear : void 0} @input=${this.useSearchTerm ? this.handleInputChange : void 0}>${f(this.iconName, () => n`<cx-icon-button class="icon-button" tabindex="-1" label=${this.localize.term("search")} name=${this.iconName} slot="prefix"></cx-icon-button>`)}
       ${f(
-      l,
+      i,
       () => this.renderTableOptions(),
-      () => r`
+      () => n`
           ${y(
         this.options,
-        (s) => s.value ?? "",
-        (s) => r`<cx-option value=${s.value ?? ""} ?disabled=${s.disabled} show-check check-placement=${$.Right}>${s.label ?? s.value ?? ""}</cx-option>`
+        (l) => l.value ?? "",
+        (l) => n`<cx-option value=${l.value ?? ""} ?disabled=${l.disabled} show-check check-placement=${C.Right}>${l.label ?? l.value ?? ""}</cx-option>`
       )}
           ${f(
         this.hasMore,
-        () => r`<cx-option value="load-more" class="tree-item__actions"><cx-button variant="text" ?loading=${this.loading} @click=${this.handleLoadMore}>${this.localize.term("more")}</cx-button></cx-option>`
+        () => n`<cx-option value="load-more" class="tree-item__actions"><cx-button variant="text" ?loading=${this.loading} @click=${this.handleLoadMore}>${this.localize.term("more")}</cx-button></cx-option>`
       )}
         `
     )}</cx-select>`);
@@ -174,181 +184,187 @@ let e = class extends v {
 e.dependencies = {
   "cx-button": g,
   "cx-icon-button": O,
-  "cx-option": p,
-  "cx-select": C
+  "cx-option": h,
+  "cx-select": $
 };
 o([
   E("cx-select")
 ], e.prototype, "selectEl", 2);
 o([
-  i()
+  s()
 ], e.prototype, "name", 2);
 o([
-  i({ reflect: !0, type: String })
+  s({ reflect: !0, type: String })
 ], e.prototype, "value", 2);
 o([
-  i({ reflect: !0 })
+  s({ reflect: !0 })
 ], e.prototype, "size", 2);
 o([
-  i()
+  s()
 ], e.prototype, "placeholder", 2);
 o([
-  i({ attribute: "allow-freetext", reflect: !0, type: Boolean })
+  s({ attribute: "allow-freetext", reflect: !0, type: Boolean })
 ], e.prototype, "allowFreetext", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "multiple", 2);
 o([
-  i({ attribute: "max-options-visible", type: Number })
+  s({ attribute: "max-options-visible", type: Number })
 ], e.prototype, "maxOptionsVisible", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "disabled", 2);
 o([
-  i({ type: Boolean })
+  s({ type: Boolean })
 ], e.prototype, "clearable", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "open", 2);
 o([
-  i({ type: Boolean })
+  s({ type: Boolean })
 ], e.prototype, "hoist", 2);
 o([
-  i({ attribute: "sync-element" })
+  s({ attribute: "sync-element" })
 ], e.prototype, "syncElement", 2);
 o([
-  i({ attribute: "free-width", reflect: !0, type: Boolean })
+  s({ attribute: "free-width", reflect: !0, type: Boolean })
 ], e.prototype, "freeWidth", 2);
 o([
-  i({ attribute: "auto-size-padding", type: Number })
+  s({ attribute: "auto-size-padding", type: Number })
 ], e.prototype, "autosizePadding", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "filled", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "pill", 2);
 o([
-  i()
+  s()
 ], e.prototype, "label", 2);
 o([
-  i({ reflect: !0 })
+  s({ reflect: !0 })
 ], e.prototype, "placement", 2);
 o([
-  i({ attribute: "help-text" })
+  s({ attribute: "help-text" })
 ], e.prototype, "helpText", 2);
 o([
-  i({ reflect: !0 })
+  s({ reflect: !0 })
 ], e.prototype, "form", 2);
 o([
-  i({ reflect: !0, type: Boolean })
+  s({ reflect: !0, type: Boolean })
 ], e.prototype, "required", 2);
 o([
-  i({ attribute: "use-tag", reflect: !0, type: Boolean })
+  s({ attribute: "use-tag", reflect: !0, type: Boolean })
 ], e.prototype, "useTag", 2);
 o([
-  i({ attribute: "input-behavior" })
+  s({ attribute: "input-behavior" })
 ], e.prototype, "inputBehavior", 2);
 o([
-  i({ attribute: "get-option-value" })
+  s({ attribute: "get-option-value" })
 ], e.prototype, "getOptionValue", 2);
 o([
-  i({ attribute: "get-option-label" })
+  s({ attribute: "get-option-label" })
 ], e.prototype, "getOptionLabel", 2);
 o([
-  i({ attribute: "set-option-current" })
+  s({ attribute: "set-option-current" })
 ], e.prototype, "setOptionCurrent", 2);
 o([
-  i({ attribute: "set-option-selected" })
+  s({ attribute: "set-option-selected" })
 ], e.prototype, "setOptionSelected", 2);
 o([
-  i({ attribute: "stay-open-on-select", type: Boolean })
+  s({ attribute: "stay-open-on-select", type: Boolean })
 ], e.prototype, "stayOpenOnSelect", 2);
 o([
-  i({ attribute: "close-on-select", type: Boolean })
+  s({ attribute: "close-on-select", type: Boolean })
 ], e.prototype, "closeOnSelect", 2);
 o([
-  i({ attribute: "force-on-change", type: Boolean })
+  s({ attribute: "force-on-change", type: Boolean })
 ], e.prototype, "forceOnChange", 2);
 o([
-  i({ attribute: "allow-default-mouse-down", type: Boolean })
+  s({ attribute: "allow-default-mouse-down", type: Boolean })
 ], e.prototype, "allowDefaultMouseDown", 2);
 o([
-  i({ attribute: "api", type: Function })
+  s({ attribute: "api", type: Function })
 ], e.prototype, "api", 2);
 o([
-  i({ attribute: !1, type: Array })
+  s({ attribute: !1, type: Array })
 ], e.prototype, "columns", 2);
 o([
-  i({ attribute: "use-search-term", reflect: !0, type: Boolean })
+  s({ attribute: "use-search-term", reflect: !0, type: Boolean })
 ], e.prototype, "useSearchTerm", 2);
 o([
-  i({
+  s({
     attribute: "no-select-on-enter",
     reflect: !0,
     type: Boolean
   })
 ], e.prototype, "noSelectOnEnter", 2);
 o([
-  i({
+  s({
     attribute: "no-reset-current",
     reflect: !0,
     type: Boolean
   })
 ], e.prototype, "noResetCurrent", 2);
 o([
-  i({ attribute: "icon-name", reflect: !0, type: String })
+  s({ attribute: "icon-name", reflect: !0, type: String })
 ], e.prototype, "iconName", 2);
 o([
-  i({
+  s({
     attribute: "no-dropdown",
     reflect: !0,
     type: Boolean
   })
 ], e.prototype, "noDropdown", 2);
 o([
-  i({
+  s({
     attribute: "no-dropdown-on-empty",
     reflect: !0,
     type: Boolean
   })
 ], e.prototype, "noDropdownOnEmpty", 2);
 o([
-  i({ attribute: "no-flip", reflect: !0, type: Boolean })
+  s({ attribute: "no-flip", reflect: !0, type: Boolean })
 ], e.prototype, "noFlip", 2);
 o([
-  i({ attribute: "custom-change-event", type: String })
+  s({ attribute: "custom-change-event", type: String })
 ], e.prototype, "customChangeEvent", 2);
 o([
-  i({ attribute: "auto-fallback-first-option", reflect: !0, type: Boolean })
+  s({ attribute: "auto-fallback-first-option", reflect: !0, type: Boolean })
 ], e.prototype, "autoFallbackFirstOption", 2);
 o([
-  h()
+  s({ attribute: "has-options", reflect: !0, type: Boolean })
+], e.prototype, "hasOptions", 2);
+o([
+  c()
 ], e.prototype, "options", 2);
 o([
-  h()
+  c()
 ], e.prototype, "start", 2);
 o([
-  h()
+  c()
 ], e.prototype, "searchTerm", 2);
 o([
-  h()
+  c()
 ], e.prototype, "hasMore", 2);
 o([
-  h()
+  c()
 ], e.prototype, "loading", 2);
 o([
   w(200)
 ], e.prototype, "fetchOptions", 1);
 o([
-  c("api"),
-  c("start", { waitUntilFirstUpdate: !0 })
+  p("api"),
+  p("start", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handleStartChange", 1);
 o([
-  c("searchTerm", { waitUntilFirstUpdate: !0 })
+  p("searchTerm", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handleSearchTermChange", 1);
 o([
-  c("columns")
+  p("options")
+], e.prototype, "handleOptionsChange", 1);
+o([
+  p("columns")
 ], e.prototype, "handleColumnsChange", 1);
 e = o([
   x("cx-dynamic-select")

package/library/components/folder-select.js

@@ -5,7 +5,7 @@ import "./select.js";
 import "./tag.js";
 import "../chunks/tree.B0-6Ny9b.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as j } from "../chunks/folder-select.C6Sv4jtu.js";
+import { C as j } from "../chunks/folder-select.BgWvY0t0.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";

package/library/components/molecules.js

@@ -5,7 +5,7 @@ import { C as u } from "../chunks/confirm-popover.hHcCIzpX.js";
 import { default as d } from "./corner-position-input-group.js";
 import { default as l } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.C6Sv4jtu.js";
+import { C as c } from "../chunks/folder-select.BgWvY0t0.js";
 import { default as P } from "./masonry.js";
 import { default as I } from "./padding-input-group.js";
 import { default as y } from "./position-picker.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
-import { C as a } from "../chunks/asset-link-format.BATKDRgD.js";
-import { C as t } from "../chunks/color-swatch-group.CQlgq_I5.js";
+import { C as a } from "../chunks/asset-link-format.COCtAbj0.js";
+import { C as t } from "../chunks/color-swatch-group.DCw6mJkM.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/types.js

@@ -115,7 +115,7 @@ import { d as ec } from "../chunks/debounce.DaHuiSGU.js";
 import { t as jS, c as qI, d as DQ, i as Xk, G as Gg, j as gp, h as IQ, s as WI, T as X4, k as wi, l as wF, u as MQ, f as Jk, m as PQ, F as ky, M as Yb, n as NQ, o as xF, q as GI } from "../chunks/string.BhJ0Zogu.js";
 import { b as XJt, e as JJt, g as ZJt, p as QJt, z as eZt, y as tZt, a as iZt, x as nZt, v as rZt, r as oZt, w as aZt } from "../chunks/string.BhJ0Zogu.js";
 import { c as pi } from "../chunks/repeat.CFjcER6_.js";
-import { a as By, F as $y, i as J4, b as KI, c as YI, d as LQ, e as kF, f as _F, g as Z4, h as Zk, C as RQ, j as XI, k as JI, l as ZI, m as QI, n as e8, o as t8, O as i8, D as HS, p as BQ, q as n8, u as Qk } from "../chunks/asset-link-format.BATKDRgD.js";
+import { a as By, F as $y, i as J4, b as KI, c as YI, d as LQ, e as kF, f as _F, g as Z4, h as Zk, C as RQ, j as XI, k as JI, l as ZI, m as QI, n as e8, o as t8, O as i8, D as HS, p as BQ, q as n8, u as Qk } from "../chunks/asset-link-format.COCtAbj0.js";
 import { H as XC } from "../chunks/slot.j5oheLJC.js";
 import { a as lZt, g as cZt } from "../chunks/slot.j5oheLJC.js";
 import { c as Pr, d as $Q, H as Ii, e as Ta, f as ms, a as FQ, b as er } from "../chunks/resizable-component.styles.CAfXABBc.js";
@@ -141,9 +141,9 @@ import { g as IF, F as XQ } from "../chunks/form.CP9KLGjF.js";
 import { c as PZt, f as NZt, v as LZt, a as RZt } from "../chunks/form.CP9KLGjF.js";
 import { d as qS, c as u8, e as JQ, i as p8, h as ZQ, p as QQ, t as eee } from "../chunks/date.iWq_pkIk.js";
 import { b as $Zt, f as FZt, g as zZt, a as jZt, n as HZt } from "../chunks/date.iWq_pkIk.js";
-import { F as MF, a as tee, b as t3, H as iee, c as u0, d as nee, o as Cu } from "../chunks/color-swatch-group.CQlgq_I5.js";
-import { C as UZt, e as qZt, f as WZt } from "../chunks/color-swatch-group.CQlgq_I5.js";
-import { F as Gd, C as Q4, s as i3, a as WS } from "../chunks/folder-select.C6Sv4jtu.js";
+import { F as MF, a as tee, b as t3, H as iee, c as u0, d as nee, o as Cu } from "../chunks/color-swatch-group.DCw6mJkM.js";
+import { C as UZt, e as qZt, f as WZt } from "../chunks/color-swatch-group.DCw6mJkM.js";
+import { F as Gd, C as Q4, s as i3, a as WS } from "../chunks/folder-select.BgWvY0t0.js";
 import { b as n3, a as kw, c as ree, r as Ue, j as _e, w as oee, R as aee } from "../chunks/jsx-runtime.CTpPVMxj.js";
 import { j as GS } from "../chunks/index.CrhRU5m8.js";
 import { i as e6, T as KS, t as see } from "../chunks/transform.BuqENXeT.js";
@@ -36245,7 +36245,7 @@ async function aU({
   }
 }
 var kc = /* @__PURE__ */ ((i) => (i.Custom = "custom", i.Large = "large", i.Medium = "medium", i.Small = "small", i))(kc || {}), Au = /* @__PURE__ */ ((i) => (i.Adaptive = "adaptive", i.Fill = "fill", i.Fixed = "fixed", i))(Au || {});
-const Fvt = ti`:host{--width:100px;--icon-spacing:var(--cx-spacing-x-small);--color:light-dark(var(--cx-color-neutral-1000),var(--cx-color-neutral-0));--border-color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));--background-color:light-dark(#0000,#0000);--search-box-custom-height:32px;--search-box-custom-padding:4px 8px 4px 8px;--search-box-custom-font-size:var(--cx-font-size-medium);width:var(--width);max-width:100%;transition:width .3s ease-in-out;display:block}:host([width-type=fill]),:host([width-type=adaptive][device-type=tablet]),:host([width-type=adaptive][device-type=mobile]),.search-box,.search-box cx-select{width:100%}.search-box cx-select{--cx-input-color:var(--color);--cx-input-color-hover:var(--color);--cx-input-icon-color:var(--color)}.search-box cx-select::part(combobox){color:var(--color);border-color:var(--border-color);background-color:var(--background-color);padding-inline-start:var(--cx-spacing-x-small)}.search-box cx-select[size=large]::part(combobox){padding-inline-start:var(--cx-spacing-small)}:host([size=custom]) .search-box cx-select::part(combobox){min-height:var(--search-box-custom-height);padding:var(--search-box-custom-padding)}:host([size=custom]) .search-box cx-select::part(display-input){font-family:var(--search-box-custom-font-family,var(--cx-input-font-family)), var(--cx-font-sans);font-size:var(--search-box-custom-font-size);font-style:var(--search-box-custom-font-style,normal);font-weight:var(--search-box-custom-font-weight,var(--cx-font-weight-regular))}.icon-button{color:var(--color);margin-inline-end:var(--icon-spacing)}.search-box__icon--enabled .icon-button::part(base){cursor:pointer}.icon-button::part(base){cursor:default;min-width:0;min-height:0;padding:0}.search-box cx-option::part(base){color:var(--color)}`;
+const Fvt = ti`:host{--width:100px;--icon-spacing:var(--cx-spacing-x-small);--color:light-dark(var(--cx-color-neutral-1000),var(--cx-color-neutral-0));--border-color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));--background-color:light-dark(#0000,#0000);--search-box-custom-height:32px;--search-box-custom-padding:4px 8px 4px 8px;--search-box-custom-font-size:var(--cx-font-size-medium);width:var(--width);max-width:100%;transition:width .3s ease-in-out;display:block}:host([width-type=fill]),:host([width-type=adaptive][device-type=tablet]),:host([width-type=adaptive][device-type=mobile]),.search-box,.search-box cx-select{width:100%}.search-box cx-select{--cx-input-color:var(--color);--cx-input-color-hover:var(--color);--cx-input-icon-color:var(--color)}.search-box cx-select::part(expand-icon){display:none}.search-box[has-options] cx-select::part(expand-icon){display:flex}.search-box cx-select::part(combobox){color:var(--color);border-color:var(--border-color);background-color:var(--background-color);padding-inline-start:var(--cx-spacing-x-small)}.search-box cx-select[size=large]::part(combobox){padding-inline-start:var(--cx-spacing-small)}:host([size=custom]) .search-box cx-select::part(combobox){min-height:var(--search-box-custom-height);padding:var(--search-box-custom-padding)}:host([size=custom]) .search-box cx-select::part(display-input){font-family:var(--search-box-custom-font-family,var(--cx-input-font-family)), var(--cx-font-sans);font-size:var(--search-box-custom-font-size);font-style:var(--search-box-custom-font-style,normal);font-weight:var(--search-box-custom-font-weight,var(--cx-font-weight-regular))}.icon-button{color:var(--color);margin-inline-end:var(--icon-spacing)}.search-box__icon--enabled .icon-button::part(base){cursor:pointer}.icon-button::part(base){cursor:default;min-width:0;min-height:0;padding:0}.search-box cx-option::part(base){color:var(--color)}`;
 var zvt = Object.defineProperty, jvt = Object.getOwnPropertyDescriptor, uu = (i, e, t, n) => {
   for (var r = n > 1 ? void 0 : n ? jvt(e, t) : e, o = i.length - 1, a; o >= 0; o--)
     (a = i[o]) && (r = (n ? a(e, t, r) : a(r)) || r);
@@ -122216,7 +122216,7 @@ class oPt {
             else
               h = e[l.downloadFormatPickerConfigs?.assetIdsKey ?? ""]?.toString().split(" ") ?? [];
             const m = l.pickerConfigs?.nameKey ?? "name";
-            return I`<cx-download-format-picker name=${e[m] ?? ""} .value=${u} .assetIds=${h} .prescribedDocTypes=${l.downloadFormatPickerConfigs?.prescribedDocTypes ?? []} ?required=${l.required ?? !1} @cx-download-format-select=${c} @cx-download-format-delete=${d} .onRequestDownloadFormat=${this.host.onRequestDownloadFormat}>${s}</cx-download-format-picker>`;
+            return I`<cx-download-format-picker name=${e[m] ?? ""} .value=${u} .assetIds=${h} .prescribedDocTypes=${l.downloadFormatPickerConfigs?.prescribedDocTypes ?? []} ?required=${l.required ?? !1} ?disabled=${h.length === 0} @cx-download-format-select=${c} @cx-download-format-delete=${d} .onRequestDownloadFormat=${this.host.onRequestDownloadFormat}>${s}</cx-download-format-picker>`;
           }
         ],
         [
@@ -138299,7 +138299,7 @@ const LFt = q$t.extend({
         return;
       }
     }
-    k?.commands.focus();
+    k?.commands.focus("end");
   }, u = r.bubbleMenu;
   i.setCustomRte({
     disable(w, k, T) {

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.172.0",
+  "version": "2.173.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {