@orangelogic/design-system 2.170.0 → 2.172.0

package/library/components/document-viewer.js

@@ -1,5 +1,5 @@
 import "../chunks/resizable-component.styles.CAfXABBc.js";
-import { C as b } from "../chunks/document-viewer.BT1kp8Ig.js";
+import { C as b } from "../chunks/document-viewer.B89YB5oo.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";

package/library/components/drawer.js

@@ -3,7 +3,7 @@ import { c as z } from "../chunks/component.styles.CRO4Odto.js";
 import { a as d, s as h, w as v } from "../chunks/event.BeKOsirN.js";
 import { c as P } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as D } from "../chunks/i18n.DbXTTLXx.js";
-import { M as O } from "../chunks/modal.jdGhujoh.js";
+import { M as O } from "../chunks/modal.Ct0bJBSe.js";
 import { l as w, u } from "../chunks/scroll.xtO5yojm.js";
 import { H as $ } from "../chunks/slot.j5oheLJC.js";
 import { w as C } from "../chunks/watch.DJF5K-8U.js";

package/library/components/dynamic-select.js

@@ -1,9 +1,9 @@
-import { C as g } from "../chunks/button.DDem_XZq.js";
+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 x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
+import { n as i, 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";
@@ -12,40 +12,40 @@ import { r as h } 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 { o as m } from "../chunks/if-defined.BRoBj_Rp.js";
-import { i as T } from "../chunks/keyed.DdOUTIg-.js";
+import { i as F } 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 D } from "../chunks/style-map.llVFPd__.js";
+import { o as T } from "../chunks/style-map.llVFPd__.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
-import { b as _ } from "../chunks/_baseIteratee.sC2wLi2m.js";
+import { b as D } from "../chunks/_baseIteratee.sC2wLi2m.js";
 import { b as V } from "../chunks/_baseUniq.lwMgmtt2.js";
-function z(t, s) {
-  return t && t.length ? V(t, _(s)) : [];
+function _(t, l) {
+  return t && t.length ? V(t, D(l)) : [];
 }
-var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (t, s, l, a) => {
-  for (var n = a > 1 ? void 0 : a ? F(s, l) : s, u = t.length - 1, d; u >= 0; u--)
-    (d = t[u]) && (n = (a ? d(s, l, n) : d(n)) || n);
-  return a && n && L(s, l, n), n;
+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;
 };
-let e = class extends x {
+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, s) => {
+    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 (s === void 0) {
+        if (l === void 0) {
           t.current = !t.current;
           return;
         }
-        t.current = s;
+        t.current = l;
       }
-    }, this.setOptionSelected = (t, s) => {
+    }, this.setOptionSelected = (t, l) => {
       if (!(!(t instanceof p) || t.getAttribute("role") !== "option")) {
-        if (s === void 0) {
+        if (l === void 0) {
           t.selected = !t.selected;
           return;
         }
-        t.selected = s, s && this.selectEl.setCurrentOption(t);
+        t.selected = l, l && 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.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.options = [], this.start = 0, this.searchTerm = "", this.hasMore = !1, this.loading = !1;
   }
   createRenderRoot() {
     return this;
@@ -54,13 +54,13 @@ let e = class extends x {
     if (this.api)
       try {
         this.loading = !0;
-        const s = await this.api({
+        const l = await this.api({
           searchTerm: this.searchTerm,
           start: this.start
         });
-        if (t ? this.options = s.data : this.options = z([...this.options, ...s.data], "value"), this.hasMore = s.hasMore, await this.updateComplete, this.selectEl) {
-          let l;
-          this.multiple ? l = this.value?.trim() ? this.value.trim().split(/\s+/) : [] : l = this.value, this.selectEl.value = l;
+        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 = [];
@@ -80,12 +80,12 @@ let e = class extends x {
   tableGetOptionValue(t) {
     return t?.getAttribute("data-value") ?? "";
   }
-  tableSetOptionSelected(t, s) {
-    const l = s ?? !t?.hasAttribute("selected");
-    t?.toggleAttribute("selected", l), t?.setAttribute("aria-selected", String(l));
+  tableSetOptionSelected(t, l) {
+    const s = l ?? !t?.hasAttribute("selected");
+    t?.toggleAttribute("selected", s), t?.setAttribute("aria-selected", String(s));
   }
-  tableSetOptionCurrent(t, s) {
-    t?.toggleAttribute("current", s ?? !t?.hasAttribute("current"));
+  tableSetOptionCurrent(t, l) {
+    t?.toggleAttribute("current", l ?? !t?.hasAttribute("current"));
   }
   tableGetOptionLabel(t) {
     return t?.querySelector("td")?.textContent?.trim() ?? "";
@@ -96,26 +96,31 @@ let e = class extends x {
   tableGetOptionDisabled(t) {
     return t?.hasAttribute("disabled") ?? !1;
   }
-  tableFilterCallback(t, s) {
-    const l = s.toLowerCase();
+  tableFilterCallback(t, l) {
+    const s = l.toLowerCase();
     return [...t?.querySelectorAll("td") || []].some(
-      (a) => a.textContent?.toLowerCase().includes(l)
+      (a) => a.textContent?.toLowerCase().includes(s)
     );
   }
-  getCellValue(t, s) {
-    if (s in t) {
-      const l = t[s];
-      return l == null ? "" : String(l);
+  getCellValue(t, l) {
+    if (l in t) {
+      const s = t[l];
+      return s == null ? "" : String(s);
     }
-    return t.extra?.[s] ?? "";
+    return t.extra?.[l] ?? "";
   }
   getColWidth(t) {
-    const s = this.columns.reduce((l, a) => l + (a.flex ?? 1), 0);
-    return `${((t.flex ?? 1) / s * 100).toFixed(1)}%`;
+    const l = this.columns.reduce((s, a) => s + (a.flex ?? 1), 0);
+    return `${((t.flex ?? 1) / l * 100).toFixed(1)}%`;
+  }
+  getFallbackValue() {
+    return this.autoFallbackFirstOption ? this.options.some(
+      (l) => l.value === this.value
+    ) ? this.value : this.options[0]?.value ?? "" : this.value;
   }
   handleInputChange(t) {
-    const { value: s } = t.target.displayInput;
-    this.searchTerm = s, this.selectEl.getOptionLabel = (l) => !l || !(l instanceof p) ? s : l.getTextLabel() || s;
+    const { value: l } = t.target.displayInput;
+    this.searchTerm = l, this.selectEl.getOptionLabel = (s) => !s || !(s instanceof p) ? l : s.getTextLabel() || l;
   }
   handleLoadMore() {
     this.start += 10;
@@ -123,40 +128,40 @@ let e = class extends x {
   handleCustomChange(t) {
     if (!t.target)
       return;
-    const s = t.target, l = this.options.find(
-      (a) => a.value === s.value
+    const l = t.target, s = this.options.find(
+      (a) => a.value === l.value
     );
-    l && this.emit(this.customChangeEvent, {
-      detail: l
+    s && this.emit(this.customChangeEvent, {
+      detail: s
     });
   }
   renderTableOptions() {
     return r`<table class="table-select__table"><thead class="table-select__thead"><tr>${b(
       this.columns,
-      (t) => r`<th class="table-select__th" style=${D({ width: this.getColWidth(t) })}>${t.header}</th>`
+      (t) => r`<th class="table-select__th" style=${T({ 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(
         this.columns,
-        (s) => r`<td class="table-select__td">${this.getCellValue(t, s.field)}</td>`
+        (l) => r`<td class="table-select__td">${this.getCellValue(t, l.field)}</td>`
       )}</tr>`
     )}</table>`;
   }
   render() {
-    const t = this.noDropdown || this.noDropdownOnEmpty && !this.options.length, s = this.columns.length > 0;
-    return T(s, r`<cx-select auto-size-padding=${this.autosizePadding} class=${B({
+    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({
       "dynamic-select": !0,
-      "table-select": s
+      "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>`)}
       ${f(
-      s,
+      l,
       () => this.renderTableOptions(),
       () => r`
           ${y(
         this.options,
-        (l) => l.value ?? "",
-        (l) => r`<cx-option value=${l.value ?? ""} ?disabled=${l.disabled} show-check check-placement=${$.Right}>${l.label ?? l.value ?? ""}</cx-option>`
+        (s) => s.value ?? "",
+        (s) => r`<cx-option value=${s.value ?? ""} ?disabled=${s.disabled} show-check check-placement=${$.Right}>${s.label ?? s.value ?? ""}</cx-option>`
       )}
           ${f(
         this.hasMore,
@@ -314,6 +319,9 @@ o([
 o([
   i({ attribute: "custom-change-event", type: String })
 ], e.prototype, "customChangeEvent", 2);
+o([
+  i({ attribute: "auto-fallback-first-option", reflect: !0, type: Boolean })
+], e.prototype, "autoFallbackFirstOption", 2);
 o([
   h()
 ], e.prototype, "options", 2);
@@ -343,7 +351,7 @@ o([
   c("columns")
 ], e.prototype, "handleColumnsChange", 1);
 e = o([
-  v("cx-dynamic-select")
+  x("cx-dynamic-select")
 ], e);
 export {
   e as default

package/library/components/element-clamp.js

@@ -9,7 +9,7 @@ import { r as k } from "../chunks/state.CSDxrqLd.js";
 import { e as E } from "../chunks/query.BBf1UFkC.js";
 import { e as H } from "../chunks/class-map.BiVq-cVR.js";
 import { a as p, g } from "../chunks/animation-registry.HmpwNuGH.js";
-import { C as B } from "../chunks/button.DDem_XZq.js";
+import { C as B } from "../chunks/button.zWaIO1sl.js";
 const T = C`:host{--toggler-color:var(--cx-color-primary);display:block;overflow:hidden}.element-clamp{overflow-anchor:none}.element-clamp--disabled{opacity:.5}.element-clamp-icon{transition:var(--cx-transition-medium) rotate ease;flex:none;align-items:center;display:flex}.details--open .element-clamp-icon{rotate:90deg}.details--open.details--rtl .element-clamp-icon{rotate:-90deg}.element-clamp--open slot[name=expand-icon],.element-clamp:not(.element-clamp--open) slot[name=collapse-icon]{display:none}.element-clamp__content{display:block;overflow:hidden}.toggler{margin-top:var(--cx-spacing-2x-small);display:block}.toggler::part(base){color:var(--toggler-color);font-weight:var(--cx-font-weight-medium);text-transform:none;width:auto}.toggler::part(label){padding-left:0}`;
 var z = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
   for (var s = r > 1 ? void 0 : r ? O(t, i) : t, h = e.length - 1, l; h >= 0; h--)

package/library/components/file-on-demand.js

@@ -16,8 +16,8 @@ import { n as p } from "../chunks/when.Dr1es41R.js";
 import { b as At } from "../chunks/_baseEach.DQk0As2f.js";
 import { b as Dt } from "../chunks/_baseIteratee.sC2wLi2m.js";
 import Tt from "./avatar.js";
-import { C as zt } from "../chunks/button.DDem_XZq.js";
-import { C as Pt } from "../chunks/dialog.B_v8598F.js";
+import { C as zt } from "../chunks/button.zWaIO1sl.js";
+import { C as Pt } from "../chunks/dialog.BaHYOyYO.js";
 import Et from "./divider.js";
 import nt from "./format-bytes.js";
 import { C as vt } from "../chunks/icon-button.DJvfUmOl.js";
@@ -27,11 +27,11 @@ import yt from "./relative-time.js";
 import Ft from "./select.js";
 import Rt from "./space.js";
 import kt from "./tab.js";
-import { C as Ot } from "../chunks/tab-group.BdWDbwBy.js";
+import { C as Ot } from "../chunks/tab-group.C_n0GEc_.js";
 import Nt from "./tab-panel.js";
 import bt from "./tooltip.js";
 import { C as rt } from "../chunks/typography.IqHbnd3C.js";
-import { C as jt } from "../chunks/confirm-popover.Cx6BUoTL.js";
+import { C as jt } from "../chunks/confirm-popover.hHcCIzpX.js";
 import { d as Bt } from "../chunks/debounce.DaHuiSGU.js";
 import { c as Z } from "../chunks/number.Cx2ncfJJ.js";
 import { i as X, b as pt } from "../chunks/url.Bd5rq4G0.js";

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.B9qqU1CQ.js";
+import { C as j } from "../chunks/folder-select.C6Sv4jtu.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";

package/library/components/line-clamp.js

@@ -1,4 +1,4 @@
-import "../chunks/button.DDem_XZq.js";
+import "../chunks/button.zWaIO1sl.js";
 import "./tooltip.js";
 import "./resize-observer.js";
 import { n as s, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/components/molecules.js

@@ -1,11 +1,11 @@
 import { default as e } from "./bicolor-picker.js";
 import { default as a } from "./border-input-group.js";
 import { C as x } from "../chunks/color-swatch.DpzAGKQx.js";
-import { C as u } from "../chunks/confirm-popover.Cx6BUoTL.js";
+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.B9qqU1CQ.js";
+import { C as c } from "../chunks/folder-select.C6Sv4jtu.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.BSo7khRt.js";
-import { C as t } from "../chunks/color-swatch-group.C_PwK2oY.js";
+import { C as a } from "../chunks/asset-link-format.BATKDRgD.js";
+import { C as t } from "../chunks/color-swatch-group.CQlgq_I5.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/pagination.js

@@ -1,7 +1,7 @@
 import "./space.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/icon-button.DJvfUmOl.js";
-import { C as k } from "../chunks/pagination.TxcRv9BL.js";
+import { C as k } from "../chunks/pagination.CwKlKOek.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";
 import "../chunks/math.DuKzLacZ.js";
@@ -11,7 +11,7 @@ import "../chunks/state.CSDxrqLd.js";
 import "../chunks/class-map.BiVq-cVR.js";
 import "../chunks/repeat.CFjcER6_.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.DDem_XZq.js";
+import "../chunks/button.zWaIO1sl.js";
 import "../chunks/input.B-c9KEAH.js";
 import "../chunks/option.Bvyag0r1.js";
 import "./select.js";

package/library/components/radio-button.js

@@ -9,7 +9,7 @@ import { e as y } from "../chunks/class-map.BiVq-cVR.js";
 import { o as h } from "../chunks/if-defined.BRoBj_Rp.js";
 import { u as _ } from "../chunks/static.UA3G1Deq.js";
 import { i as v } from "../chunks/lit-element.jLBm65_O.js";
-import { b as w } from "../chunks/button.styles.BersilzZ.js";
+import { b as w } from "../chunks/button.styles.Bcj_XoRt.js";
 const C = v`
   ${w}
 

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as A } from "../chunks/tab-group.BdWDbwBy.js";
+import { C as A } from "../chunks/tab-group.C_n0GEc_.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";
 import "../chunks/scroll.xtO5yojm.js";
@@ -18,7 +18,7 @@ import "../chunks/guard.D4axKaMo.js";
 import "../chunks/map.D8heArFD.js";
 import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.DDem_XZq.js";
+import "../chunks/button.zWaIO1sl.js";
 import "./dropdown.js";
 import "../chunks/icon-button.DJvfUmOl.js";
 import "./menu.js";