@orangelogic/design-system 2.78.0 → 2.79.0

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

@@ -3,7 +3,7 @@ import l from "./input-group.js";
 import m from "./space.js";
 import { n as h, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import f from "./bicolor-picker.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as v, x as c } from "../chunks/lit-element.jLBm65_O.js";
 import { c as b } from "../chunks/repeat.DbF2p5ae.js";
@@ -52,37 +52,18 @@ let i = class extends x {
     });
   }
   render() {
-    return c`<cx-space spacing="x-small" wrap="nowrap" align-items="end">
-      <cx-input-group @cx-change=${this.handleInputChange}>
-        ${b(
+    return c`<cx-space spacing="x-small" wrap="nowrap" align-items="end"><cx-input-group @cx-change=${this.handleInputChange}>${b(
       ["X", "Y", "Blur", "Spread"],
       (r) => r,
-      (r, e) => c`<cx-input
-              data-index=${e}
-              id=${r}
-              label=${r}
-              value=${this.value[e] ?? ""}
-              mask="numpx"
-              .maskBlocks=${{
+      (r, e) => c`<cx-input data-index=${e} id=${r} label=${r} value=${this.value[e] ?? ""} mask="numpx" .maskBlocks=${{
         num: {
           mask: Number,
           min: r === "Blur" ? 0 : -1 / 0,
           scale: 0,
           thousandsSeparator: ""
         }
-      }}
-              .form=${this.closest("form")}
-            >
-            </cx-input>`
-    )}
-      </cx-input-group>
-      <cx-bicolor-picker
-        part="border-color"
-        value=${`${this.value[4] ?? ""} ${this.value[5] ?? ""}`}
-        .form=${this.closest("form")}
-        @cx-bicolor-picker-change=${this.handleBicolorPickerChange}
-      ></cx-bicolor-picker>
-    </cx-space>`;
+      }} .form=${this.closest("form")}></cx-input>`
+    )}</cx-input-group><cx-bicolor-picker part="border-color" value=${`${this.value[4] ?? ""} ${this.value[5] ?? ""}`} .form=${this.closest("form")} @cx-bicolor-picker-change=${this.handleBicolorPickerChange}></cx-bicolor-picker></cx-space>`;
   }
 };
 i.styles = [d, $];

package/library/components/share-option-list.js

@@ -1,7 +1,7 @@
 import _ from "./icon.js";
 import I from "./resize-observer.js";
 import { n as h, C as P } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as C } from "../chunks/component.styles.DMSLciL5.js";
+import { c as C } from "../chunks/component.styles.CRO4Odto.js";
 import { c as O } from "../chunks/animate.El-MpOws.js";
 import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as E } from "../chunks/i18n.BUW7B9hr.js";
@@ -17,7 +17,7 @@ import { c as M } from "../chunks/repeat.DbF2p5ae.js";
 import { o as k } from "../chunks/style-map.llVFPd__.js";
 import { n as $ } from "../chunks/when.Dr1es41R.js";
 import T from "./tooltip.js";
-import { C as A } from "../chunks/typography.oDzoLbZS.js";
+import { C as A } from "../chunks/typography.DJC_UXgs.js";
 import { H as R } from "../chunks/slot.j5oheLJC.js";
 const N = (e, t) => {
   let i = 0;
@@ -68,49 +68,7 @@ if (!U) {
     }
   );
 }
-const D = z`
-  :host {
-    display: block;
-  }
-
-  .share-option-list-item {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-3x-small);
-    justify-content: center;
-  }
-
-  .share-option-list-item--disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .share-option-list-item__icon {
-    align-items: center;
-    border-radius: var(--cx-border-radius-medium);
-    border: 1px solid var(--cx-color-neutral-200);
-    display: flex;
-    height: var(--item-size, 3.5rem);
-    justify-content: center;
-    width: var(--item-size, 3.5rem);
-  }
-
-  .share-option-list-item--selected .share-option-list-item__icon {
-    border-color: var(--cx-color-primary);
-  }
-
-  .share-option-list-item__icon cx-icon {
-    --font-size: var(--item-font-size, 2rem);
-  }
-
-  .share-option-list-item--selected .share-option-list-item__label {
-    --color: var(--cx-color-primary);
-    --font-weight: var(--cx-font-weight-semibold);
-  }
-`;
+const D = z`:host{display:block}.share-option-list-item{cursor:pointer;align-items:center;gap:var(--cx-spacing-3x-small);flex-direction:column;justify-content:center;display:flex}.share-option-list-item--disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.share-option-list-item__icon{border-radius:var(--cx-border-radius-medium);border:1px solid var(--cx-color-neutral-200);height:var(--item-size,3.5rem);width:var(--item-size,3.5rem);justify-content:center;align-items:center;display:flex}.share-option-list-item--selected .share-option-list-item__icon{border-color:var(--cx-color-primary)}.share-option-list-item__icon cx-icon{--font-size:var(--item-font-size,2rem)}.share-option-list-item--selected .share-option-list-item__label{--color:var(--cx-color-primary);--font-weight:var(--cx-font-weight-semibold)}`;
 var B = Object.defineProperty, j = Object.getOwnPropertyDescriptor, p = (e, t, i, s) => {
   for (var o = s > 1 ? void 0 : s ? j(t, i) : t, n = e.length - 1, r; n >= 0; n--)
     (r = e[n]) && (o = (s ? r(t, i, o) : r(o)) || o);
@@ -138,31 +96,15 @@ let d = class extends P {
   }
   render() {
     const e = this.hasSlotController.test("[default]");
-    return g`<div
-      part="base"
-      class=${u({
+    return g`<div part="base" class=${u({
       "share-option-list-item": !0,
       "share-option-list-item--disabled": this.disabled,
       "share-option-list-item--selected": this.selected
-    })}
-      @click=${this.handleClick}
-    >
-      <cx-tooltip
-        content=${this.tooltip}
-        ?disabled=${this.disabled || !e}
-      >
-        <div class="share-option-list-item__icon">
-          ${$(
+    })} @click=${this.handleClick}><cx-tooltip content=${this.tooltip} ?disabled=${this.disabled || !e}><div class="share-option-list-item__icon">${$(
       this.isSVG,
       () => g`<cx-icon src=${this.processedIcon}></cx-icon>`,
       () => g`<cx-icon name=${this.icon}></cx-icon>`
-    )}
-        </div>
-        <cx-typography class="share-option-list-item__label" variant="small">
-          <slot></slot>
-        </cx-typography>
-      </cx-tooltip>
-    </div>`;
+    )}</div><cx-typography class="share-option-list-item__label" variant="small"><slot></slot></cx-typography></cx-tooltip></div>`;
   }
 };
 d.styles = [C, D];
@@ -195,173 +137,7 @@ p([
 d = p([
   w("cx-share-option-list-item")
 ], d);
-const V = z`
-  :host {
-    --border: none;
-    --border-radius: var(--cx-border-radius-small);
-    --height: 100%;
-    --item-size: 3.5rem;
-    --item-font-size: 2rem;
-    --scroll-hint: 0px;
-    --slide-gap: var(--cx-spacing-medium, 1rem);
-
-    display: flex;
-    height: var(--height);
-    width: 100%;
-  }
-
-  .share-option-list {
-    display: grid;
-    gap: var(--cx-spacing-medium);
-    align-items: center;
-    min-height: 100%;
-    min-width: 100%;
-    position: relative;
-  }
-
-  .share-option-list--horizontal {
-    grid-template-columns: minmax(2rem, max-content) 1fr minmax(
-        2rem,
-        max-content
-      );
-    grid-template-areas: '. slides .';
-  }
-
-  .share-option-list--vertical {
-    grid-template-rows: minmax(2rem, max-content) 1fr minmax(2rem, max-content);
-    grid-template-areas:
-      '.'
-      'slides'
-      '.';
-  }
-
-  .share-option-list__placeholder {
-    grid-area: slides;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    z-index: -1;
-    top: 0;
-    left: 0;
-  }
-
-  .share-option-list__slides {
-    grid-area: slides;
-    display: grid;
-    height: 100%;
-    width: min(100%, var(--width));
-    align-items: center;
-    overflow: auto;
-    overscroll-behavior-x: contain;
-    scrollbar-width: none;
-    border-radius: var(--cx-border-radius-small);
-    justify-self: start;
-
-    --slide-size: calc(
-      (100% - (var(--slides-per-page) - 1) * var(--slide-gap)) /
-        var(--slides-per-page)
-    );
-  }
-
-  .share-option-list__slides--horizontal {
-    grid-auto-flow: column;
-    grid-auto-columns: var(--slide-size);
-    grid-auto-rows: 100%;
-    column-gap: var(--slide-gap);
-    scroll-snap-type: x mandatory;
-    scroll-padding-inline: var(--scroll-hint);
-    padding-inline: var(--scroll-hint);
-    overflow-y: hidden;
-  }
-
-  .share-option-list__slides--vertical {
-    grid-auto-flow: row;
-    grid-auto-columns: 100%;
-    grid-auto-rows: var(--slide-size);
-    row-gap: var(--slide-gap);
-    scroll-snap-type: y mandatory;
-    scroll-padding-block: var(--scroll-hint);
-    padding-block: var(--scroll-hint);
-    overflow-x: hidden;
-  }
-
-  .share-option-list__navigation {
-    --font-size: var(--cx-font-size-x-large);
-
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size);
-    justify-content: space-between;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .share-option-list__navigation--horizontal {
-    height: 0;
-    left: 0;
-    transform: translateY(-50%);
-    width: 100%;
-    padding: 0 var(--cx-spacing-small);
-  }
-
-  .share-option-list__navigation--vertical {
-    flex-direction: column;
-    height: 100%;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    width: 0;
-    padding: var(--cx-spacing-small) 0;
-  }
-
-  .share-option-list__navigation-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    background: transparent;
-    border: none;
-    border-radius: var(--cx-border-radius-circle);
-    font-size: inherit;
-    color: var(--cx-color-neutral-600);
-    padding: 0;
-    cursor: pointer;
-    transition: var(--cx-transition-medium) color;
-    appearance: none;
-  }
-
-  .share-option-list__navigation-button--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .share-option-list__navigation-button--disabled::part(base) {
-    pointer-events: none;
-  }
-
-  .share-option-list__navigation-button--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .share-option-list__navigation-button--previous {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .share-option-list__navigation-button--next {
-    grid-column: 3;
-    grid-row: 1;
-  }
-
-  /* Focus styles */
-  .share-option-list__slides:focus-visible,
-  .share-option-list__navigation-button:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-`;
+const V = z`:host{--border:none;--border-radius:var(--cx-border-radius-small);--height:100%;--item-size:3.5rem;--item-font-size:2rem;--scroll-hint:0px;--slide-gap:var(--cx-spacing-medium,1rem);height:var(--height);width:100%;display:flex}.share-option-list{gap:var(--cx-spacing-medium);align-items:center;min-width:100%;min-height:100%;display:grid;position:relative}.share-option-list--horizontal{grid-template-columns:minmax(2rem,max-content) 1fr minmax(2rem,max-content);grid-template-areas:".slides."}.share-option-list--vertical{grid-template-rows:minmax(2rem,max-content) 1fr minmax(2rem,max-content);grid-template-areas:".""slides""."}.share-option-list__placeholder{opacity:0;pointer-events:none;z-index:-1;grid-area:slides;width:100%;height:100%;position:absolute;top:0;left:0}.share-option-list__slides{height:100%;width:min(100%, var(--width));overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--cx-border-radius-small);--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-area:slides;justify-self:start;align-items:center;display:grid;overflow:auto}.share-option-list__slides--horizontal{grid-auto-flow:column;grid-auto-columns:var(--slide-size);column-gap:var(--slide-gap);scroll-snap-type:x mandatory;scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint);grid-auto-rows:100%;overflow-y:hidden}.share-option-list__slides--vertical{grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:var(--slide-size);row-gap:var(--slide-gap);scroll-snap-type:y mandatory;scroll-padding-block:var(--scroll-hint);padding-block:var(--scroll-hint);overflow-x:hidden}.share-option-list__navigation{--font-size:var(--cx-font-size-x-large);font-size:var(--font-size);z-index:1;justify-content:space-between;align-items:center;display:flex;position:absolute}.share-option-list__navigation--horizontal{width:100%;height:0;padding:0 var(--cx-spacing-small);left:0;transform:translateY(-50%)}.share-option-list__navigation--vertical{width:0;height:100%;padding:var(--cx-spacing-small) 0;flex-direction:column;top:0;left:50%;transform:translate(-50%)}.share-option-list__navigation-button{border-radius:var(--cx-border-radius-circle);font-size:inherit;color:var(--cx-color-neutral-600);cursor:pointer;transition:var(--cx-transition-medium) color;appearance:none;background:0 0;border:none;flex:none;align-items:center;padding:0;display:flex}.share-option-list__navigation-button--disabled{opacity:.5;cursor:default}.share-option-list__navigation-button--disabled::part(base){pointer-events:none}.share-option-list__navigation-button--hidden{opacity:0;pointer-events:none}.share-option-list__navigation-button--previous{grid-area:1/1}.share-option-list__navigation-button--next{grid-area:1/3}.share-option-list__slides:focus-visible,.share-option-list__navigation-button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}`;
 var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, a = (e, t, i, s) => {
   for (var o = s > 1 ? void 0 : s ? H(t, i) : t, n = e.length - 1, r; n >= 0; n--)
     (r = e[n]) && (o = (s ? r(t, i, o) : r(o)) || o);
@@ -591,111 +367,43 @@ let l = class extends P {
   }
   render() {
     const { scrolling: e } = this, t = this.canScrollPrev(), i = this.canScrollNext(), s = this.localize.dir() === "ltr", o = getComputedStyle(this).getPropertyValue("--item-size"), n = getComputedStyle(this).getPropertyValue("--slide-gap");
-    return g`
-      <cx-resize-observer @cx-resize=${this.calculateSlidesPerPage}>
-        <div
-          part="base"
-          class=${u({
+    return g`<cx-resize-observer @cx-resize=${this.calculateSlidesPerPage}><div part="base" class=${u({
       "share-option-list": !0,
       "share-option-list--empty": this.data.length === 0,
       "share-option-list--horizontal": this.orientation === "horizontal",
       "share-option-list--vertical": this.orientation === "vertical"
-    })}
-          @cx-share-option-list-item-selected=${this.handleShareOptionListItemSelected}
-        >
-          <div class="share-option-list__placeholder"></div>
-          <div
-            id="scroll-container"
-            part="scroll-container"
-            class=${u({
+    })} @cx-share-option-list-item-selected=${this.handleShareOptionListItemSelected}><div class="share-option-list__placeholder"></div><div id="scroll-container" part="scroll-container" class=${u({
       "share-option-list__slides": !0,
       "share-option-list__slides--horizontal": this.orientation === "horizontal",
       "share-option-list__slides--vertical": this.orientation === "vertical"
-    })}
-            style=${k({
+    })} style=${k({
       "--slides-per-page": this.calculatedSlidesPerPage,
       "--width": `calc(${this.calculatedSlidesPerPage} * ${o} + (${this.calculatedSlidesPerPage - 1} * ${n}))`
-    })}
-            aria-busy=${e ? "true" : "false"}
-            aria-atomic="true"
-            tabindex="0"
-            @keydown=${this.handleKeyDown}
-            @scroll=${this.handleScroll}
-            @scrollend=${this.handleScrollEnd}
-          >
-            ${M(
+    })} aria-busy=${e ? "true" : "false"} aria-atomic="true" tabindex="0" @keydown=${this.handleKeyDown} @scroll=${this.handleScroll} @scrollend=${this.handleScrollEnd}>${M(
       this.data,
       (r) => r.id,
-      (r, c) => g`<cx-share-option-list-item
-                  data-index=${c}
-                  value=${r.id}
-                  icon=${r.icon}
-                  tooltip=${r.tooltip}
-                  ?disabled=${r.disabled}
-                  ?selected=${r.id === this.selectedItem}
-                >
-                  ${r.name}
-                </cx-share-option-list-item>`
-    )}
-          </div>
-
-          <slot hidden></slot>
-
-          ${$(
+      (r, c) => g`<cx-share-option-list-item data-index=${c} value=${r.id} icon=${r.icon} tooltip=${r.tooltip} ?disabled=${r.disabled} ?selected=${r.id === this.selectedItem}>${r.name}</cx-share-option-list-item>`
+    )}</div><slot hidden></slot>${$(
       this.navigation === "arrows" || this.navigation === "both",
       () => {
         let r = s ? "chevron_left" : "chevron_right", c = s ? "chevron_right" : "chevron_left";
-        return this.orientation === "vertical" && (r = "expand_less", c = "expand_more"), g`
-                <div
-                  part="navigation"
-                  class=${u({
+        return this.orientation === "vertical" && (r = "expand_less", c = "expand_more"), g`<div part="navigation" class=${u({
           "share-option-list__navigation": !0,
           "share-option-list__navigation--horizontal": this.orientation === "horizontal",
           "share-option-list__navigation--vertical": this.orientation === "vertical"
-        })}
-                >
-                  <button
-                    part="navigation-button navigation-button--previous"
-                    class=${u({
+        })}><button part="navigation-button navigation-button--previous" class=${u({
           "share-option-list__navigation-button": !0,
           "share-option-list__navigation-button--disabled": !t,
           "share-option-list__navigation-button--hidden": !t,
           "share-option-list__navigation-button--previous": !0
-        })}
-                    aria-label=${this.localize.term("previousSlide")}
-                    aria-controls="scroll-container"
-                    aria-disabled=${String(!t)}
-                    @click=${t ? this.handlePreviousButtonClick : null}
-                  >
-                    <slot name="previous-icon">
-                      <cx-icon name=${r}></cx-icon>
-                    </slot>
-                  </button>
-
-                  <button
-                    part="navigation-button navigation-button--next"
-                    class=${u({
+        })} aria-label=${this.localize.term("previousSlide")} aria-controls="scroll-container" aria-disabled=${String(!t)} @click=${t ? this.handlePreviousButtonClick : null}><slot name="previous-icon"><cx-icon name=${r}></cx-icon></slot></button><button part="navigation-button navigation-button--next" class=${u({
           "share-option-list__navigation-button": !0,
           "share-option-list__navigation-button--disabled": !i,
           "share-option-list__navigation-button--hidden": !i,
           "share-option-list__navigation-button--next": !0
-        })}
-                    aria-label=${this.localize.term("nextSlide")}
-                    aria-controls="scroll-container"
-                    aria-disabled=${String(!i)}
-                    @click=${i ? this.handleNextButtonClick : null}
-                  >
-                    <slot name="next-icon">
-                      <cx-icon name=${c}></cx-icon>
-                    </slot>
-                  </button>
-                </div>
-              `;
+        })} aria-label=${this.localize.term("nextSlide")} aria-controls="scroll-container" aria-disabled=${String(!i)} @click=${i ? this.handleNextButtonClick : null}><slot name="next-icon"><cx-icon name=${c}></cx-icon></slot></button></div>`;
       }
-    )}
-        </div>
-      </cx-resize-observer>
-    `;
+    )}</div></cx-resize-observer>`;
   }
 };
 l.styles = [C, V];