@orangelogic/design-system 2.78.0 → 2.79.0

package/library/chunks/{list-editor.DluUZa06.js → list-editor.DNa6ROgr.js}

@@ -1,19 +1,19 @@
-import { C as _ } from "./button.DS64Tr8Z.js";
-import { C as q, D as G } from "./dialog.BdXQkCKY.js";
+import { C as _ } from "./button.B-ktz-w4.js";
+import { C as q, D as G } from "./dialog.B1nzoJak.js";
 import j from "../components/grid.js";
 import P from "../components/grid-item.js";
 import S from "../components/input.js";
 import R from "../components/line-clamp.js";
-import { C as F } from "./option.Csqefux_.js";
+import { C as F } from "./option.DljDoFx4.js";
 import B from "../components/radio.js";
 import K from "../components/radio-group.js";
 import U from "../components/select.js";
 import E from "../components/space.js";
-import { C as H, H as V } from "./table.CcqrVieF.js";
-import { C as L } from "./typography.oDzoLbZS.js";
+import { C as H, H as V } from "./table.B8LpbiGE.js";
+import { C as L } from "./typography.DJC_UXgs.js";
 import { n as o, C as T } from "./lib-cortex-element.CVMmyPMC.js";
 import W from "../components/dynamic-select.js";
-import { c as D } from "./component.styles.DMSLciL5.js";
+import { c as D } from "./component.styles.CRO4Odto.js";
 import { c as M } from "./custom-element.L4WJXn1j.js";
 import { d as J } from "./debounce.DaHuiSGU.js";
 import { L as z } from "./i18n.BUW7B9hr.js";
@@ -28,8 +28,8 @@ import { o as Q } from "./map.D8heArFD.js";
 import { c as b } from "./repeat.DbF2p5ae.js";
 import { n as N } from "./when.Dr1es41R.js";
 import { t as ee } from "./toString.CL_lYXbK.js";
-import { C as ae } from "./icon-button.C3eqeQl9.js";
-import { C as te } from "./image.DHBgKeJp.js";
+import { C as ae } from "./icon-button.BuhCp--_.js";
+import { C as te } from "./image.4eLWAZ3-.js";
 import { a as ie, D as $ } from "./asset.DWZ2Lzb6.js";
 import { a as ne } from "./index.Cpamj0jB.js";
 import { A as v } from "./content-builder.B4Tqoc6M.js";
@@ -817,45 +817,7 @@ function pe(e) {
   var a = ++de;
   return ee(e) + a;
 }
-const ue = O`
-  :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;
-  }
-`;
+const ue = O`: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{z-index:1;position:relative}.asset-picker__image{--height:150px;--width:200px;border-radius:var(--cx-border-radius-medium)}.asset-picker__input{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}`;
 var he = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, u = (e, a, t, i) => {
   for (var s = i > 1 ? void 0 : i ? ve(a, t) : a, d = e.length - 1, c; d >= 0; d--)
     (c = e[d]) && (s = (i ? c(a, t, s) : c(s)) || s);
@@ -927,75 +889,29 @@ let p = class extends T {
   }
   renderAssetPreview() {
     if (this.value && this.acceptsType(v.Image))
-      return l`<cx-image
-        part="image"
-        class="asset-picker__image"
-        src=${this.value}
-        alt=${this.name}
-        width="200px"
-        object-fit=${ne.Cover}
-      ></cx-image>`;
+      return l`<cx-image part="image" class="asset-picker__image" src=${this.value} alt=${this.name} width="200px" object-fit=${ne.Cover}></cx-image>`;
     if (this.name && this.acceptsType(v.Video))
-      return l`
-        <cx-typography variant="body-2">
-          ${w(this.name, 30, 11, 11)}
-        </cx-typography>
-      `;
+      return l`<cx-typography variant="body-2">${w(this.name, 30, 11, 11)}</cx-typography>`;
     if (this.name && (this.acceptsType(v.Other) || this.acceptsType(v.All))) {
       const e = this.name.split(",");
-      return l`<cx-typography variant="body-2">
-        ${w(e[0], 30, 11, 11)}
+      return l`<cx-typography variant="body-2">${w(e[0], 30, 11, 11)}
         ${N(
         e.length > 1,
         () => l` ${this.localize.term("andOthers", e.length - 1)}`
-      )}
-      </cx-typography>`;
+      )}</cx-typography>`;
     }
     return null;
   }
   render() {
-    return l`
-      <cx-space
-        part="base"
-        class="asset-picker"
-        spacing="2x-small"
-        direction="horizontal"
-        align-items=${this.acceptsType(v.Image) ? "flex-start" : "center"}
-      >
-        ${this.renderAssetPreview()}
+    return l`<cx-space part="base" class="asset-picker" spacing="2x-small" direction="horizontal" align-items=${this.acceptsType(v.Image) ? "flex-start" : "center"}>${this.renderAssetPreview()}
         ${N(
       !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>
-            ${N(
+      () => 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>${N(
         this.value,
-        () => l`<cx-icon-button
-                  label=${this.localize.term("delete")}
-                  name="delete"
-                  @click=${this.handleDeleteClick}
-                >
-                </cx-icon-button>`
+        () => l`<cx-icon-button label=${this.localize.term("delete")} name="delete" @click=${this.handleDeleteClick}></cx-icon-button>`
       )}
           `
-    )}
-      </cx-space>
-    `;
+    )}</cx-space>`;
   }
 };
 p.styles = [D, ue];
@@ -1055,55 +971,7 @@ u([
 p = u([
   M("cx-asset-picker")
 ], p);
-const ge = O`
-  :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;
-    --cell-bottom-border-color: transparent;
-    --header-font-size: var(--cx-font-size-small);
-    --row-header-border-color: transparent;
-    --cell-horizontal-padding: var(--cx-spacing-2x-small);
-    --table-min-height: var(--overridden-min-height);
-    --table-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 {
-    --body-spacing: 0;
-    --header-spacing: var(--cx-spacing-small) var(--cx-spacing-large) 0;
-    --width: 540px;
-  }
-
-  .list-editor__tab-group {
-    --padding: 0;
-    --tab-group-nav-padding: 0 var(--cx-spacing-large);
-  }
-`;
+const ge = O`:host{--overridden-min-height:var(--min-height,160px);--overridden-max-height:var(--max-height,260px);width:100%;display:block}.list-editor{width:100%}.list-editor__table{--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-small);--row-header-border-color:transparent;--cell-horizontal-padding:var(--cx-spacing-2x-small);--table-min-height:var(--overridden-min-height);--table-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{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:540px}.list-editor__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large)}`;
 var Ne = Object.defineProperty, be = Object.getOwnPropertyDescriptor, r = (e, a, t, i) => {
   for (var s = i > 1 ? void 0 : i ? be(a, t) : a, d = e.length - 1, c; d >= 0; d--)
     (c = e[d]) && (s = (i ? c(a, t, s) : c(s)) || s);
@@ -1262,21 +1130,7 @@ let n = class extends T {
         ${b(
         this.translatableControls,
         (t) => t.field,
-        (t) => l`
-              <cx-grid
-                columns="4"
-                spacing="var(--cx-spacing-small)"
-                column-spacing="0"
-                use-flex-gap
-                row-spacing="0"
-                wrap="wrap"
-              >
-                <cx-grid-item xs="4" sm="1">
-                  <cx-typography variant="body2">${t.title}</cx-typography>
-                </cx-grid-item>
-                <cx-grid-item xs="4" sm="3">
-                  <cx-space direction="vertical" spacing="x-small" wrap="nowrap">
-                    ${Q(this.supportedLanguages, (i) => {
+        (t) => l`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing="0" wrap="wrap"><cx-grid-item xs="4" sm="1"><cx-typography variant="body2">${t.title}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${Q(this.supportedLanguages, (i) => {
           const s = this.localize.languageName(i) || ce.getName(i) || i, d = (c) => {
             const m = c.target.value;
             this.editedItem = {
@@ -1284,43 +1138,21 @@ let n = class extends T {
               [`${t.field}-${i}`]: m
             };
           };
-          return l`
-                        <cx-input
-                          ?disabled=${i.toLowerCase() === this.defaultLanguage?.toLowerCase()}
-                          label=${s}
-                          value=${this.editedItem?.[`${t.field}-${i}`] ?? this.editedItem?.[`${t.field}`] ?? ""}
-                          @cx-change=${d}
-                        ></cx-input>
-                      `;
-        })}
-                  </cx-space>
-                </cx-grid-item>
-              </cx-grid>`
+          return l`<cx-input ?disabled=${i.toLowerCase() === this.defaultLanguage?.toLowerCase()} label=${s} value=${this.editedItem?.[`${t.field}-${i}`] ?? this.editedItem?.[`${t.field}`] ?? ""} @cx-change=${d}></cx-input>`;
+        })}</cx-space></cx-grid-item></cx-grid>`
       )}
       `;
       return l`<cx-space direction="vertical" wrap="nowrap">${a}</cx-space>`;
     }
-    return l`
-      <cx-grid columns="3" spacing="var(--cx-spacing-small)" wrap="wrap">
-        ${b(
+    return l`<cx-grid columns="3" spacing="var(--cx-spacing-small)" wrap="wrap">${b(
       this.sortedEntries,
       ([a]) => a,
-      ([a, t]) => l`<cx-grid-item xs="3" sm="1">
-                <cx-typography variant="body2">
-                  ${this.columnsMap[a].title}
-                </cx-typography>
-              </cx-grid-item>
-              <cx-grid-item xs="3" sm="2">
-                ${Y(
+      ([a, t]) => l`<cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.columnsMap[a].title}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2">${Y(
         this.columnsMap[a].controlType,
         [
           [
             "image-picker",
-            () => l`<cx-asset-picker
-                          value=${t}
-                          type="image"
-                          id=${a}
-                          @cx-content-builder-asset-select=${async (d) => {
+            () => l`<cx-asset-picker value=${t} type="image" id=${a} @cx-content-builder-asset-select=${async (d) => {
               if (Array.isArray(d.detail))
                 return;
               const { src: c } = d.detail;
@@ -1328,200 +1160,53 @@ let n = class extends T {
                 ...this.editedItem,
                 [a]: c
               };
-            }}
-                          @cx-content-builder-asset-delete=${async () => {
+            }} @cx-content-builder-asset-delete=${async () => {
               this.editedItem = {
                 ...this.editedItem,
                 [a]: ""
               };
-            }}
-                          @cx-asset-request-status=${this.handleAssetRequestStatus}
-                          .onRequestAsset=${this.onRequestAsset}
-                        >
-                        </cx-asset-picker>`
+            }} @cx-asset-request-status=${this.handleAssetRequestStatus} .onRequestAsset=${this.onRequestAsset}></cx-asset-picker>`
           ],
           [
             "radio-group",
-            () => l`
-                          <cx-radio-group
-                            data-id=${a}
-                            data-testid="radio-group-control"
-                            horizontal
-                            value=${(t || this.columnsMap[a].defaultValue) ?? ""}
-                            size="medium"
-                            @cx-change=${this.handleChange}
-                          >
-                            ${b(
+            () => l`<cx-radio-group data-id=${a} data-testid="radio-group-control" horizontal value=${(t || this.columnsMap[a].defaultValue) ?? ""} size="medium" @cx-change=${this.handleChange}>${b(
               this.columnsMap[a].options ?? [],
               (i) => i.value,
-              (i) => l`<cx-radio value=${i.value}>
-                                  ${i.name}
-                                </cx-radio>`
-            )}
-                          </cx-radio-group>
-                        `
+              (i) => l`<cx-radio value=${i.value}>${i.name}</cx-radio>`
+            )}</cx-radio-group>`
           ],
           [
             "select",
-            () => this.columnsMap[a].api ? l`<cx-dynamic-select
-                            data-id=${a}
-                            hoist
-                            value=${t}
-                            @cx-change=${this.handleChange}
-                            .api=${this.columnsMap[a].api}
-                          ></cx-dynamic-select>` : l`<cx-select
-                          data-id=${a}
-                          hoist
-                          value=${t}
-                          @cx-change=${this.handleChange}
-                        >
-                          ${b(
+            () => this.columnsMap[a].api ? l`<cx-dynamic-select data-id=${a} hoist value=${t} @cx-change=${this.handleChange} .api=${this.columnsMap[a].api}></cx-dynamic-select>` : l`<cx-select data-id=${a} hoist value=${t} @cx-change=${this.handleChange}>${b(
               this.columnsMap[a].options ?? [],
               (i) => i.value,
               (i) => l`<cx-option value=${i.value}>${i.name}</cx-option>`
-            )}
-                        </cx-select>`
+            )}</cx-select>`
           ]
         ],
-        () => l`
-                      <cx-input
-                        data-id=${a}
-                        value=${t}
-                        @cx-change=${this.handleChange}
-                      ></cx-input>
-                    `
-      )}
-              </cx-grid-item>`
-    )}
-      </cx-grid>
-    `;
+        () => l`<cx-input data-id=${a} value=${t} @cx-change=${this.handleChange}></cx-input>`
+      )}</cx-grid-item>`
+    )}</cx-grid>`;
   }
   render() {
-    return l`
-      <cx-space direction="vertical" align-items="flex-start">
-        <div class="list-editor">
-          <cx-table
-            part="table"
-            class=${Z({
+    return l`<cx-space direction="vertical" align-items="flex-start"><div class="list-editor"><cx-table part="table" class=${Z({
       "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=${xe}
-            .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"
-            divider-position=${G.Footer}
-            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>
-              ${N(
+    })} ?movable-rows=${this.sortable} ?no-header=${this.noHeader} layout="fitColumns" row-height=${this.rowHeight} .columns=${this.columns} .columnDefaults=${xe} .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" divider-position=${G.Footer} 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>${N(
       !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>
-            ${N(
+      () => l`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.editedItem?.[this.displayField]}</cx-line-clamp></cx-typography>`
+    )}</cx-space>${N(
       this.tabs.length >= 1,
-      () => l`
-              <cx-tab-group
-                class="list-editor__tab-group"
-                placement="top"
-              >
-                ${b(
+      () => l`<cx-tab-group class="list-editor__tab-group" placement="top">${b(
         this.tabs,
         (e) => e,
-        (e) => l`
-                    <cx-tab
-                      slot="nav"
-                      panel=${e}
-                    >
-                      ${this.localize.term(e)}
-                    </cx-tab>
-                    <cx-tab-panel
-                      name=${e}
-                    >
-                      <cx-space
-                        direction="vertical"
-                        spacing="x-small"
-                        wrap="nowrap"
-                      >
-                        ${this.renderControls(e)}
-                      </cx-space>
-                    </cx-tab-panel>
-                  `
-      )}
-              </cx-tab-group>`,
-      () => l`
-                <cx-space
-                  direction="vertical"
-                  spacing="x-small"
-                  wrap="nowrap"
-                >
-                  ${this.renderControls(this.tabs[0])}
-                </cx-space>
-              `
-    )}
-            <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>
-        ${N(
+        (e) => l`<cx-tab slot="nav" panel=${e}>${this.localize.term(e)}</cx-tab><cx-tab-panel name=${e}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderControls(e)}</cx-space></cx-tab-panel>`
+      )}</cx-tab-group>`,
+      () => l`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderControls(this.tabs[0])}</cx-space>`
+    )}<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>${N(
       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>
-    `;
+      () => l`<cx-button data-testid="add-button" variant="default" size="medium" @click=${this.handleAddClick}>${this.addItemText || this.localize.term("add")}</cx-button>`
+    )}</cx-space>`;
   }
 };
 n.styles = [D, ge];

package/library/chunks/{map.DbgNAGxD.js → map.CqM2O6LB.js}

@@ -1,7 +1,7 @@
-import { J as Wi, e as N, a4 as fi, b4 as En, bc as Nn, ap as ri, G as we, P as Rn, a as gt, L as Ji, T as Vi, D as In, F as pi, I as gi, am as Se, aF as Hi, k as zn, bd as Bn, aZ as Ft, be as kn, m as jn, w as Yn, f as Xn, ax as di, y as mi, z as Ee, t as yi, bf as $n, aj as Gn, K as Zn, bg as xe, a2 as An, C as _i, az as On, b as Fn, bh as bn } from "./am-chart.oZVBmpnn.js";
+import { J as Wi, e as N, a4 as fi, b4 as En, bc as Nn, ap as ri, G as we, P as Rn, a as gt, L as Ji, T as Vi, D as In, F as pi, I as gi, am as Se, aF as Hi, k as zn, bd as Bn, aZ as Ft, be as kn, m as jn, w as Yn, f as Xn, ax as di, y as mi, z as Ee, t as yi, bf as $n, aj as Gn, K as Zn, bg as xe, a2 as An, C as _i, az as On, b as Fn, bh as bn } from "./am-chart.H2jnOzFc.js";
 import { g as Wn, a as Jn } from "./_commonjsHelpers.DQNKXVTB.js";
 import { i as Vn } from "./index.DU0XUO4k.js";
-import { a as qi } from "./ZoomTools.cgwuIB0e.js";
+import { a as qi } from "./ZoomTools.D5JPehoL.js";
 class b {
   constructor() {
     this._partials = new Float64Array(32), this._n = 0;

package/library/chunks/option.DljDoFx4.js

@@ -0,0 +1,123 @@
+import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as m } from "./component.styles.CRO4Odto.js";
+import { c as v } from "./custom-element.L4WJXn1j.js";
+import { L as g } from "./i18n.BUW7B9hr.js";
+import { w as d } from "./watch.BCJD77bD.js";
+import { i as b, x as h } from "./lit-element.jLBm65_O.js";
+import { r as f } from "./state.CSDxrqLd.js";
+import { e as _ } from "./query.BBf1UFkC.js";
+import { e as y } from "./class-map.BiVq-cVR.js";
+import { n as u } from "./when.Dr1es41R.js";
+import k from "../components/icon.js";
+import w from "../components/space.js";
+var r = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(r || {});
+const C = b`:host{-webkit-user-select:none;user-select:none;display:block}:host(:focus){outline:none}.option{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--option-font-weight,var(--cx-font-weight-regular));line-height:var(--cx-line-height-large);letter-spacing:var(--cx-letter-spacing-normal);color:var(--option-color,var(--cx-color-neutral-700));padding:var(--cx-spacing-x-small) var(--cx-spacing-medium) var(--cx-spacing-x-small) var(--cx-spacing-x-small);transition:var(--cx-transition-fast) fill;cursor:pointer;align-items:center;display:flex;position:relative}.option:not(.option--show-check){padding-inline:var(--cx-spacing-small)}.option--hover:not(.option--current):not(.option--disabled){background-color:var(--cx-menu-item-background-color-hover)}.option--current,.option--current.option--disabled{background-color:var(--cx-menu-item-background-color-hover);opacity:1}.option--selected{color:var(--option-selected-color,var(--cx-color-primary));font-weight:var(--option-selected-font-weight,var(--cx-font-weight-regular))}.option--disabled{opacity:.5;cursor:default;outline:none}.option__content{flex:1}.option__label{line-height:var(--cx-line-height-medium);flex:auto;display:inline-block}.option .option__check{visibility:hidden;flex:none;justify-content:center;align-items:center;padding-inline-end:var(--cx-spacing-2x-small);display:none}.option--show-check .option__check{display:block}.option--show-check.option--selected .option__check{visibility:visible}.option__help-text{color:var(--option-help-text-color,var(--cx-color-neutral-600));font-weight:var(--option-help-text-font-weight,var(--cx-font-weight-regular))}.option--selected .option__content .option__help-text{color:var(--option-selected-help-text-color,var(--cx-color-primary));font-weight:var(--option-selected-help-text-font-weight,var(--cx-font-weight-regular))}.option__prefix,.option__suffix{flex:none;align-items:center;display:flex}.option__prefix::slotted(*){margin-inline-end:var(--cx-spacing-x-small)}.option__suffix::slotted(*){margin-inline-start:var(--cx-spacing-x-small)}.option__prefix{align-self:var(--prefix-alignment,center)}.option__suffix{align-self:var(--suffix-alignment,center)}.option__check{align-self:var(--check-alignment,center)}@media (forced-colors:active){:host(:hover:not([aria-disabled=true])) .option{outline-offset:-1px;outline:1px dashed selecteditem}}`;
+var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, n, i, l) => {
+  for (var a = l > 1 ? void 0 : l ? E(n, i) : n, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (a = (l ? p(n, i, a) : p(a)) || a);
+  return l && a && L(n, i, a), a;
+};
+let e = class extends x {
+  constructor() {
+    super(...arguments), this.localize = new g(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement = r.Left;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
+  }
+  handleDefaultSlotChange() {
+    const t = this.getTextLabel();
+    if (typeof this.cachedTextLabel > "u") {
+      this.cachedTextLabel = t;
+      return;
+    }
+    t !== this.cachedTextLabel && (this.cachedTextLabel = t, this.emit("slotchange", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !1
+    }));
+  }
+  handleMouseEnter() {
+    this.hasHover = !0;
+  }
+  handleMouseLeave() {
+    this.hasHover = !1;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    typeof this.value != "string" && (this.value = String(this.value)), this.value.includes(" ") && (console.error(
+      "Option values cannot include a space. All spaces have been replaced with underscores.",
+      this
+    ), this.value = this.value.replace(/ /g, "_"));
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const t = this.childNodes;
+    let n = "";
+    return [...t].forEach((i) => {
+      i.nodeType === Node.ELEMENT_NODE && (i.hasAttribute("slot") || (n += i.textContent)), i.nodeType === Node.TEXT_NODE && (n += i.textContent);
+    }), n.trim();
+  }
+  render() {
+    return h`<div part="base" class=${y({
+      option: !0,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--hover": this.hasHover,
+      "option--selected": this.selected,
+      "option--show-check": this.showCheck
+    })} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>${u(
+      this.checkPlacement === r.Left,
+      () => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
+    )}<slot part="prefix" name="prefix" class="option__prefix"></slot><cx-space part="content" class="option__content" direction="vertical" spacing="3x-small"><slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot><slot part="help-text" name="help-text" class="option__help-text"></slot></cx-space><slot part="suffix" name="suffix" class="option__suffix"></slot>${u(
+      this.checkPlacement === r.Right,
+      () => h`<cx-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></cx-icon>`
+    )}</div>`;
+  }
+};
+e.styles = [m, C];
+e.dependencies = { "cx-icon": k, "cx-space": w };
+o([
+  _(".option__label")
+], e.prototype, "defaultSlot", 2);
+o([
+  f()
+], e.prototype, "current", 2);
+o([
+  f()
+], e.prototype, "selected", 2);
+o([
+  f()
+], e.prototype, "hasHover", 2);
+o([
+  s({ reflect: !0 })
+], e.prototype, "value", 2);
+o([
+  s({ reflect: !0, type: Boolean })
+], e.prototype, "disabled", 2);
+o([
+  s({ attribute: "show-check", reflect: !0, type: Boolean })
+], e.prototype, "showCheck", 2);
+o([
+  s({ attribute: "check-placement", reflect: !0, type: String })
+], e.prototype, "checkPlacement", 2);
+o([
+  d("disabled")
+], e.prototype, "handleDisabledChange", 1);
+o([
+  d("selected")
+], e.prototype, "handleSelectedChange", 1);
+o([
+  d("value")
+], e.prototype, "handleValueChange", 1);
+e = o([
+  v("cx-option")
+], e);
+export {
+  e as C,
+  r as a
+};