@orangelogic/design-system 2.51.0 → 2.52.0-pr81589.3

package/library/chunks/{file-on-demand.CoA1eDl7.js → file-on-demand.SSdM6tpu.js}

@@ -22,7 +22,7 @@ import Ot from "../components/input.js";
 import { C as Nt } from "./option.CPTRiPaF.js";
 import jt from "../components/progress-bar.js";
 import Mt from "../components/relative-time.js";
-import { C as Bt } from "./select.ByWIHETd.js";
+import { C as Bt } from "./select.BDpK9_aO.js";
 import Vt from "../components/space.js";
 import Ht from "../components/tab.js";
 import { C as Wt } from "./tab-group.B6aKJLVZ.js";

package/library/chunks/{folder-select.Bq-NKzjL.js → folder-select.Z0-R-o2R.js}

@@ -1,6 +1,6 @@
 import G from "../components/icon.js";
 import Z from "../components/input.js";
-import { C as J } from "./select.ByWIHETd.js";
+import { C as J } from "./select.BDpK9_aO.js";
 import { C as x, a as K } from "./tree.DQDSYKYi.js";
 import { n as r, C as I, x as f, c as w, i as X } from "./custom-element.vnXBMQxc.js";
 import { h as k, F as Y, b as A } from "./endpoints.BgyupJys.js";

package/library/chunks/{select.ByWIHETd.js → select.BDpK9_aO.js}

@@ -1,15 +1,15 @@
-import O from "../components/line-clamp.js";
+import w from "../components/line-clamp.js";
 import { C } from "./typography.BFpl0WMA.js";
 import { i as S, n as o, C as k, x as p, E as z, c as D } from "./custom-element.vnXBMQxc.js";
 import { c as I } from "./component.styles.CI-v8BZa.js";
 import { f as L } from "./form-control.styles.NE2Q-quE.js";
-import { s as w, a as x, g as y, b as v } from "./animation-registry.DavRkTTr.js";
+import { s as O, a as x, g as y, b as v } from "./animation-registry.DavRkTTr.js";
 import { d as $ } from "./default-value.CIKAvD5l.js";
 import { w as _ } from "./event.mFzZi4sr.js";
 import { F as E } from "./form.DycFDdkp.js";
 import { L as T } from "./i18n.GsJkEfVA.js";
-import { s as A } from "./scroll.DwPiX2Ox.js";
-import { H as B } from "./slot.DJLm4Dig.js";
+import { s as B } from "./scroll.DwPiX2Ox.js";
+import { H as A } from "./slot.DJLm4Dig.js";
 import { w as h } from "./watch.BCJD77bD.js";
 import { r as f } from "./state.Cw55xXlb.js";
 import { e as u } from "./query.BBf1UFkC.js";
@@ -18,10 +18,10 @@ import { o as F } from "./unsafe-html.DyO9_Rsq.js";
 import { n as m } from "./when.Dr1es41R.js";
 import V from "../components/icon.js";
 import { C as d } from "./option.CPTRiPaF.js";
-import { C as P } from "./popup.d45CSCf5.js";
-import M from "../components/spinner.js";
+import { C as M } from "./popup.d45CSCf5.js";
+import P from "../components/spinner.js";
 import U from "../components/tag.js";
-const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.includes("Photoshop") || navigator.userAgent.includes("AfterEffect") || navigator.userAgent.includes("Illustrator"), R = (e) => !(document.createElement(e.tagName).constructor === HTMLElement || customElements.get(e.tagName.toLowerCase())), W = S`
+const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.includes("Photoshop") || navigator.userAgent.includes("AfterEffect") || navigator.userAgent.includes("Illustrator"), W = (e) => !(document.createElement(e.tagName).constructor === HTMLElement || customElements.get(e.tagName.toLowerCase())), R = S`
   :host {
     display: block;
   }
@@ -163,7 +163,7 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
   }
 
   .form-control--has-label .select__tags {
-    margin-top: var(--cx-spacing-x-small);
+    margin-top: var(--select-tags-margin-top, var(--cx-spacing-x-small));
   }
 
   /** In multiple mode, select__tags is displayed instead of display__input
@@ -243,14 +243,14 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
     border-radius: var(--cx-input-border-radius-small);
     font-size: var(--cx-input-font-size-small);
     min-height: var(--cx-input-height-small);
-    padding-block: 0;
+    padding-block: var(--select-combobox-padding-block, 0);
     padding-inline: var(--cx-input-spacing-small);
   }
 
   .form-control:not(.form-control--has-label)
     .select--small.select--multiple
     .select__combobox {
-    padding-block: 2px;
+    padding-block: var(--select-combobox-padding-block, 2px);
   }
 
   .form-control:not(.form-control--has-label)
@@ -278,21 +278,21 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
   }
 
   .select--small .select__tags {
-    gap: 2px;
+    gap: var(--select-tags-gap, 2px);
   }
 
   .select--medium .select__combobox {
     border-radius: var(--cx-input-border-radius-medium);
     font-size: var(--cx-input-font-size-small);
     min-height: var(--cx-input-height-medium);
-    padding-block: 0;
+    padding-block: var(--select-combobox-padding-block, 0);
     padding-inline: var(--cx-input-spacing-medium);
   }
 
   .form-control:not(.form-control--has-label)
     .select--medium.select--multiple
     .select__combobox {
-    padding-block: 3px;
+    padding-block: var(--select-combobox-padding-block, 3px);
   }
 
   .select--medium .select__clear {
@@ -304,21 +304,21 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
   }
 
   .select--medium .select__tags {
-    gap: 3px;
+    gap: var(--select-tags-gap, 3px);
   }
 
   .select--large .select__combobox {
     border-radius: var(--cx-input-border-radius-large);
     font-size: var(--cx-input-font-size-small);
     min-height: var(--cx-input-height-large);
-    padding-block: 0;
+    padding-block: var(--select-combobox-padding-block, 0);
     padding-inline: var(--cx-input-spacing-large);
   }
 
   .form-control:not(.form-control--has-label)
     .select--large.select--multiple
     .select__combobox {
-    padding-block: 4px;
+    padding-block: var(--select-combobox-padding-block, 4px);
   }
 
   .select--large .select__clear {
@@ -330,7 +330,7 @@ const N = () => navigator.userAgent.includes("Cortex") || navigator.userAgent.in
   }
 
   .select--large .select__tags {
-    gap: 4px;
+    gap: var(--select-tags-gap, 4px);
   }
 
   /* Pills */
@@ -603,7 +603,7 @@ let i = class extends k {
   constructor() {
     super(...arguments), this.formControlController = new E(this, {
       assumeInteractionOn: ["cx-input"]
-    }), this.hasSlotController = new B(
+    }), this.hasSlotController = new A(
       this,
       "help-text",
       "label"
@@ -636,7 +636,7 @@ let i = class extends k {
     }, this.getOptionDisabled = (e) => {
       if (!(!e || !(e instanceof d)))
         return e.disabled;
-    }, this.stayOpenOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (e) => {
+    }, this.stayOpenOnSelect = !1, this.closeOnSelectWhenMultiple = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (e) => {
       const t = e.composedPath();
       this && !t.includes(this) && !this.stayOpenOnSelect && this.hide();
     }, this.handleDocumentKeyDown = (e) => {
@@ -672,7 +672,7 @@ let i = class extends k {
                 this.emit("cx-input"), this.emit("cx-change");
               });
             }
-            !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
+            (!this.multiple || this.closeOnSelectWhenMultiple) && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
           }
           return;
         }
@@ -850,7 +850,7 @@ let i = class extends k {
       () => this.displayInput.focus({ preventScroll: !0 })
     ), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
       this.emit("cx-input"), this.emit("cx-change");
-    }), !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
+    }), (!this.multiple || this.closeOnSelectWhenMultiple) && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
   }
   handleDefaultSlotChange() {
     const e = this.getAllOptions(), t = Array.isArray(this.value) ? this.value : [this.value], l = [];
@@ -860,7 +860,7 @@ let i = class extends k {
         return;
       l.push(a);
       const r = n.tagName.toLowerCase();
-      if (!R(n) && !customElements.get(r)) {
+      if (!W(n) && !customElements.get(r)) {
         customElements.whenDefined(r).then(() => this.handleDefaultSlotChange());
         return;
       }
@@ -965,7 +965,7 @@ let i = class extends k {
       const { keyframes: e, options: t } = y(this, "select.show", {
         dir: this.localize.dir()
       });
-      await v(this.popup.popup, e, t), this.currentOption && A(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
+      await v(this.popup.popup, e, t), this.currentOption && B(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
     } else {
       this.emit("cx-hide"), this.removeOpenListeners(), await x(this);
       const { keyframes: e, options: t } = y(this, "select.hide", {
@@ -1229,13 +1229,13 @@ let i = class extends k {
 i.styles = [
   I,
   L,
-  W
+  R
 ];
 i.dependencies = {
   "cx-icon": V,
-  "cx-line-clamp": O,
-  "cx-popup": P,
-  "cx-spinner": M,
+  "cx-line-clamp": w,
+  "cx-popup": M,
+  "cx-spinner": P,
   "cx-tag": U,
   "cx-typography": C
 };
@@ -1392,6 +1392,9 @@ s([
 s([
   o({ attribute: "stay-open-on-select", type: Boolean })
 ], i.prototype, "stayOpenOnSelect", 2);
+s([
+  o({ attribute: "close-on-select-when-multiple", type: Boolean })
+], i.prototype, "closeOnSelectWhenMultiple", 2);
 s([
   o({ attribute: "force-on-change", type: Boolean })
 ], i.prototype, "forceOnChange", 2);
@@ -1422,14 +1425,14 @@ s([
 i = s([
   D("cx-select")
 ], i);
-w("select.show", {
+O("select.show", {
   keyframes: [
     { opacity: 0, scale: 0.9 },
     { opacity: 1, scale: 1 }
   ],
   options: { duration: 100, easing: "ease" }
 });
-w("select.hide", {
+O("select.hide", {
   keyframes: [
     { opacity: 1, scale: 1 },
     { opacity: 0, scale: 0.9 }

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

@@ -17,7 +17,7 @@ import L from "./icon.js";
 import K from "./icon-button.js";
 import tt from "./input.js";
 import { C as G } from "../chunks/option.CPTRiPaF.js";
-import { C as X } from "../chunks/select.ByWIHETd.js";
+import { C as X } from "../chunks/select.BDpK9_aO.js";
 import { e as j } from "../chunks/query.BBf1UFkC.js";
 import { c as Q } from "../chunks/repeat.CauKaXyy.js";
 import { o as M } from "../chunks/style-map.CZovMmo_.js";

package/library/components/atoms.js

@@ -57,7 +57,7 @@ import { default as so } from "./range.js";
 import { default as Co } from "./rating.js";
 import { default as lo } from "./relative-time.js";
 import { default as io } from "./resize-observer.js";
-import { C as co } from "../chunks/select.ByWIHETd.js";
+import { C as co } from "../chunks/select.BDpK9_aO.js";
 import { default as Io } from "./skeleton.js";
 import { default as So } from "./space.js";
 import { default as Do } from "./spinner.js";

package/library/components/corner-position-input-group.js

@@ -1,6 +1,6 @@
 import u from "./input.js";
 import { C as h } from "../chunks/option.CPTRiPaF.js";
-import { C as m } from "../chunks/select.ByWIHETd.js";
+import { C as m } from "../chunks/select.BDpK9_aO.js";
 import x from "./space.js";
 import { i as g, n as l, C, x as d, c as _ } from "../chunks/custom-element.vnXBMQxc.js";
 import { c as v } from "../chunks/component.styles.CI-v8BZa.js";

package/library/components/dynamic-select.js

@@ -1,7 +1,7 @@
 import { C as m } from "../chunks/button.CVc2wJ0B.js";
 import y from "./icon-button.js";
 import { C as l, a as b } from "../chunks/option.CPTRiPaF.js";
-import { C as g } from "../chunks/select.ByWIHETd.js";
+import { C as g } from "../chunks/select.BDpK9_aO.js";
 import { n as o, C as $, x as h, c as x } from "../chunks/custom-element.vnXBMQxc.js";
 import { d as v } from "../chunks/popup.d45CSCf5.js";
 import { L as O } from "../chunks/i18n.GsJkEfVA.js";

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

@@ -1,4 +1,4 @@
-import { C as J } from "../chunks/file-on-demand.CoA1eDl7.js";
+import { C as J } from "../chunks/file-on-demand.SSdM6tpu.js";
 import "./avatar.js";
 import "../chunks/button.CVc2wJ0B.js";
 import "../chunks/dialog.CLn29MZF.js";
@@ -11,7 +11,7 @@ import "./line-clamp.js";
 import "../chunks/option.CPTRiPaF.js";
 import "./progress-bar.js";
 import "./relative-time.js";
-import "../chunks/select.ByWIHETd.js";
+import "../chunks/select.BDpK9_aO.js";
 import "./space.js";
 import "./tab.js";
 import "../chunks/tab-group.B6aKJLVZ.js";

package/library/components/folder-select.js

@@ -1,9 +1,9 @@
 import "./icon.js";
 import "./input.js";
-import "../chunks/select.ByWIHETd.js";
+import "../chunks/select.BDpK9_aO.js";
 import "../chunks/tree.DQDSYKYi.js";
 import "../chunks/custom-element.vnXBMQxc.js";
-import { C } from "../chunks/folder-select.Bq-NKzjL.js";
+import { C } from "../chunks/folder-select.Z0-R-o2R.js";
 import "../chunks/component.styles.CI-v8BZa.js";
 import "../chunks/i18n.GsJkEfVA.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/molecules.js

@@ -5,7 +5,7 @@ import { C } from "../chunks/confirm-popover.DfkoLeR6.js";
 import { default as u } from "./corner-position-input-group.js";
 import { C as m } from "../chunks/cropper.aA0v16xS.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.Bq-NKzjL.js";
+import { C as c } from "../chunks/folder-select.Z0-R-o2R.js";
 import { C as P } from "../chunks/list-editor.H4eJhYPV.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";

package/library/components/organisms.js

@@ -1,6 +1,6 @@
 import { default as a } from "./asset-link-format.js";
 import { C as t } from "../chunks/color-swatch-group.CUtNUbRn.js";
-import { C } from "../chunks/file-on-demand.CoA1eDl7.js";
+import { C } from "../chunks/file-on-demand.SSdM6tpu.js";
 export {
   a as CxAssetLinkFormat,
   t as CxColorSwatchGroup,

package/library/components/pagination.js

@@ -10,7 +10,7 @@ import { n as g } from "../chunks/when.Dr1es41R.js";
 import { C as z } from "../chunks/button.CVc2wJ0B.js";
 import v from "./icon-button.js";
 import { C as $ } from "../chunks/option.CPTRiPaF.js";
-import { C as S } from "../chunks/select.ByWIHETd.js";
+import { C as S } from "../chunks/select.BDpK9_aO.js";
 import I from "./tooltip.js";
 import { C as P } from "../chunks/typography.BFpl0WMA.js";
 import { c as w } from "../chunks/component.styles.CI-v8BZa.js";

package/library/components/select.js

@@ -10,7 +10,7 @@ import "../chunks/form.DycFDdkp.js";
 import "../chunks/i18n.GsJkEfVA.js";
 import "../chunks/scroll.DwPiX2Ox.js";
 import "../chunks/slot.DJLm4Dig.js";
-import { C as y } from "../chunks/select.ByWIHETd.js";
+import { C as y } from "../chunks/select.BDpK9_aO.js";
 import "../chunks/watch.BCJD77bD.js";
 import "../chunks/state.Cw55xXlb.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/size-input-group.js

@@ -1,6 +1,6 @@
 import f from "./icon-button.js";
 import d from "./input.js";
-import { C as g } from "../chunks/select.ByWIHETd.js";
+import { C as g } from "../chunks/select.BDpK9_aO.js";
 import v from "./space.js";
 import k from "./tooltip.js";
 import { i as P, n as r, C as $, x as h, c as b } from "../chunks/custom-element.vnXBMQxc.js";

package/library/components/tag.js

@@ -1,4 +1,4 @@
-import { i as m, n as i, C as p, x as g, c as u } from "../chunks/custom-element.vnXBMQxc.js";
+import { i as m, n as i, C as u, x as g, c as p } from "../chunks/custom-element.vnXBMQxc.js";
 import { c as v } from "../chunks/component.styles.CI-v8BZa.js";
 import { L as d } from "../chunks/i18n.GsJkEfVA.js";
 import { e as x } from "../chunks/class-map.CoZTSvbM.js";
@@ -24,11 +24,6 @@ const f = m`
     padding: 0;
   }
 
-  .tag__content::part(content) {
-    display: flex;
-    align-items: center;
-  }
-
   /*
    * Variant modifiers
    */
@@ -141,12 +136,12 @@ const f = m`
     padding-inline-end: 0;
   }
 `;
-var _ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (s, t, c, o) => {
-  for (var e = o > 1 ? void 0 : o ? z(t, c) : t, l = s.length - 1, n; l >= 0; l--)
-    (n = s[l]) && (e = (o ? n(t, c, e) : n(e)) || e);
-  return o && e && _(t, c, e), e;
+var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, t, c, o) => {
+  for (var a = o > 1 ? void 0 : o ? _(t, c) : t, l = s.length - 1, n; l >= 0; l--)
+    (n = s[l]) && (a = (o ? n(t, c, a) : n(a)) || a);
+  return o && a && z(t, c, a), a;
 };
-let r = class extends p {
+let r = class extends u {
   constructor() {
     super(...arguments), this.localize = new d(this), this.variant = "neutral", this.size = "medium", this.pill = !1, this.removable = !1;
   }
@@ -197,20 +192,20 @@ r.dependencies = {
   "cx-icon-button": h,
   "cx-line-clamp": b
 };
-a([
+e([
   i({ reflect: !0 })
 ], r.prototype, "variant", 2);
-a([
+e([
   i({ reflect: !0 })
 ], r.prototype, "size", 2);
-a([
+e([
   i({ reflect: !0, type: Boolean })
 ], r.prototype, "pill", 2);
-a([
+e([
   i({ type: Boolean })
 ], r.prototype, "removable", 2);
-r = a([
-  u("cx-tag")
+r = e([
+  p("cx-tag")
 ], r);
 export {
   r as default

package/library/components/types.js

@@ -57,7 +57,7 @@ import m9 from "./range.js";
 import { default as rGt } from "./rating.js";
 import { default as oGt } from "./relative-time.js";
 import qb from "./resize-observer.js";
-import { C as _d, i as oY } from "../chunks/select.ByWIHETd.js";
+import { C as _d, i as oY } from "../chunks/select.BDpK9_aO.js";
 import { default as sGt } from "./skeleton.js";
 import vi from "./space.js";
 import lu from "./spinner.js";
@@ -110,12 +110,12 @@ import { h as lr, D as HR, c as rO, C as yh, T as S9, M as WY, d as UR } from ".
 import { o as Cr } from "../chunks/if-defined.MfEgpxEN.js";
 import { c as Qn } from "../chunks/repeat.CauKaXyy.js";
 import E9 from "./dynamic-select.js";
-import { F as Ku, C as T9, a as G_ } from "../chunks/folder-select.Bq-NKzjL.js";
+import { F as Ku, C as T9, a as G_ } from "../chunks/folder-select.Z0-R-o2R.js";
 import { a as Io, E as Fn, b as Um, O as Ld, T as Fu, G as iO } from "../chunks/index.Cpamj0jB.js";
 import { C as MGt } from "../chunks/index.Cpamj0jB.js";
 import { g as A9, c as ry } from "../chunks/_commonjsHelpers.ByX85dGu.js";
-import { b as Qf, a as qR, d as oO, c as ak, s as GY, o as KY, U as O9, e as VR, i as Kd, f as YY } from "../chunks/file-on-demand.CoA1eDl7.js";
-import { C as NGt } from "../chunks/file-on-demand.CoA1eDl7.js";
+import { b as Qf, a as qR, d as oO, c as ak, s as GY, o as KY, U as O9, e as VR, i as Kd, f as YY } from "../chunks/file-on-demand.SSdM6tpu.js";
+import { C as NGt } from "../chunks/file-on-demand.SSdM6tpu.js";
 import { e as XY, t as JY } from "../chunks/directive.oAbCiebi.js";
 import { f as ZY, n as kl, e as _l } from "../chunks/ref.BaCjlzLO.js";
 import QY from "./masonry.js";

package/library/package.json

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

package/library/packages/atoms/src/components/select/select.d.ts

@@ -240,6 +240,11 @@ export default class CxSelect extends CortexElement implements CortexFormControl
      */
     getOptionDisabled: (option: HTMLElement) => boolean | undefined;
     stayOpenOnSelect: boolean;
+    /**
+     * When set to true, the select will close after each selection even when `multiple` is true.
+     * This is ignored when `stay-open-on-select` is true.
+     */
+    closeOnSelectWhenMultiple: boolean;
     /**
      * When set to true, the `cx-change` event will be emitted on every change of the value, even if the value is not changed.
      */

package/library/react-web-component.d.ts

@@ -3186,6 +3186,10 @@
           * 
         */
         stayOpenOnSelect?: boolean;
+        /**
+          * When set to true, the select will close after each selection even when `multiple` is true. This is ignored when `stay-open-on-select` is true.
+        */
+        closeOnSelectWhenMultiple?: boolean;
         /**
           * When set to true, the `cx-change` event will be emitted on every change of the value, even if the value is not changed.
         */

package/package.json

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