@orangelogic/design-system 2.70.0 → 2.71.0

package/library/chunks/icon-button.Dxz2J4cg.js

@@ -0,0 +1,683 @@
+import { n as r, C as p } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as x } from "./component.styles.DMSLciL5.js";
+import { c as h } from "./custom-element.L4WJXn1j.js";
+import { L as m } from "./i18n.BU7mYVLM.js";
+import { r as f } from "./state.CSDxrqLd.js";
+import { e as v } from "./query.BBf1UFkC.js";
+import { e as y } from "./class-map.BiVq-cVR.js";
+import { o as c } from "./if-defined.BRoBj_Rp.js";
+import { n as k } from "./when.Dr1es41R.js";
+import { i as d, u as b } from "./static.UA3G1Deq.js";
+import w from "../components/icon.js";
+import _ from "../components/spinner.js";
+import { i as z } from "./lit-element.jLBm65_O.js";
+var g = /* @__PURE__ */ ((o) => (o.Large = "large", o.Medium = "medium", o.Small = "small", o.XLarge = "x-large", o))(g || {});
+const $ = z`
+  :host {
+    display: inline-block;
+    color: var(--cx-color-neutral-600);
+    --group-divider-color: rgb(128 128 128 / 33%);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--cx-border-radius-medium);
+    font-size: inherit;
+    color: inherit;
+    padding: var(--cx-spacing-x-small);
+    cursor: pointer;
+    transition: var(--cx-transition-x-fast) color;
+    position: relative;
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .icon-button:focus-visible {
+    outline: var(--cx-focus-ring);
+    outline-offset: var(--cx-focus-ring-offset);
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+    margin: auto;
+  }
+
+  .icon-button--small {
+    font-size: var(--cx-font-size-x-small);
+    padding: var(--cx-spacing-2x-small);
+    min-height: var(--cx-input-height-small);
+    min-width: var(--cx-input-height-small);
+  }
+
+  .icon-button--medium {
+    font-size: var(--cx-font-size-large);
+    padding: var(--cx-spacing-2x-small);
+    min-height: var(--cx-input-height-medium);
+    min-width: var(--cx-input-height-medium);
+  }
+
+  .icon-button--large {
+    font-size: var(--cx-font-size-large);
+    padding: var(--cx-spacing-x-small);
+    min-height: var(--cx-input-height-large);
+    min-width: var(--cx-input-width-large);
+  }
+
+  .icon-button--x-large {
+    font-size: var(--cx-font-size-large);
+    padding: var(--cx-spacing-small);
+    min-height: var(--cx-input-height-x-large);
+    min-width: var(--cx-input-height-x-large);
+  }
+
+  /*
+   * Standard buttons
+   */
+
+  /* Default */
+  .icon-button.icon-button--default {
+    background-color: var(--cx-color-neutral-100);
+    border-color: var(--cx-color-neutral-100);
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button.icon-button--default:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--default.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-neutral-200);
+    border-color: var(--cx-color-neutral-200);
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button.icon-button--default:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-neutral-300);
+    border-color: var(--cx-color-neutral-300);
+    color: var(--cx-color-neutral);
+  }
+
+  /* Primary */
+  .icon-button.icon-button--primary {
+    background-color: var(--cx-color-primary);
+    border-color: var(--cx-color-primary);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--primary:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--primary.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-primary-500);
+    border-color: var(--cx-color-primary-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--primary:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-primary-700);
+    border-color: var(--cx-color-primary-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Success */
+  .icon-button.icon-button--success {
+    background-color: var(--cx-color-success);
+    border-color: var(--cx-color-success);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--success:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--success.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-success-500);
+    border-color: var(--cx-color-success-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--success:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-success-700);
+    border-color: var(--cx-color-success-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Warning */
+  .icon-button.icon-button--warning {
+    background-color: var(--cx-color-warning);
+    border-color: var(--cx-color-warning);
+    color: var(--cx-color-neutral-0);
+  }
+  .icon-button.icon-button--warning:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--warning.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-warning-500);
+    border-color: var(--cx-color-warning-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--warning:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-warning-700);
+    border-color: var(--cx-color-warning-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Danger */
+  .icon-button.icon-button--danger {
+    background-color: var(--cx-color-danger);
+    border-color: var(--cx-color-danger);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--danger:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--danger.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-danger-500);
+    border-color: var(--cx-color-danger-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button.icon-button--danger:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-danger-700);
+    border-color: var(--cx-color-danger-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Custom */
+  .icon-button.icon-button--custom {
+    background-color: var(--background-color);
+    border-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .icon-button.icon-button--custom:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--custom.icon-button--focused:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--background-color);
+    border-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .icon-button.icon-button--custom:active:not(.icon-button--disabled) {
+    background-color: var(--background-color);
+    border-color: var(--background-color);
+    color: var(--color);
+  }
+
+  /*
+   * Outline buttons
+   */
+
+  .icon-button--outline {
+    background: none;
+    border: solid var(--cx-input-border-width);
+    border-color: var(--cx-input-border-color);
+  }
+
+  /* Default */
+  .icon-button--outline.icon-button--default {
+    border-color: var(--cx-input-border-color);
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--outline.icon-button--default:hover:not(.icon-button--disabled),
+  .icon-button--outline.icon-button--default.icon-button--focused:not(
+      .icon-button--disabled
+    ),
+  .icon-button--outline.icon-button--default.icon-button--checked:not(
+      .icon-button--disabled
+    ) {
+    border-color: var(--cx-color-neutral-300);
+    background-color: var(--cx-color-neutral-100);
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--outline.icon-button--default:active:not(
+      .icon-button--disabled
+    ) {
+    border-color: var(--cx-color-neutral-300);
+    background-color: var(--cx-color-neutral-200);
+    color: var(--cx-color-neutral);
+  }
+
+  /* Primary */
+  .icon-button--outline.icon-button--primary {
+    border-color: var(--cx-color-primary);
+    color: var(--cx-color-primary);
+  }
+
+  .icon-button--outline.icon-button--primary:hover:not(.icon-button--disabled),
+  .icon-button--outline.icon-button--primary.icon-button--focused:not(
+      .icon-button--disabled
+    ),
+  .icon-button--outline.icon-button--primary.icon-button--checked:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-primary-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button--outline.icon-button--primary:active:not(
+      .icon-button--disabled
+    ) {
+    border-color: var(--cx-color-primary-700);
+    background-color: var(--cx-color-primary-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Success */
+  .icon-button--outline.icon-button--success {
+    border-color: var(--cx-color-success);
+    color: var(--cx-color-success);
+  }
+
+  .icon-button--outline.icon-button--success:hover:not(.icon-button--disabled),
+  .icon-button--outline.icon-button--success.icon-button--focused:not(
+      .icon-button--disabled
+    ),
+  .icon-button--outline.icon-button--success.icon-button--checked:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-success-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button--outline.icon-button--success:active:not(
+      .icon-button--disabled
+    ) {
+    border-color: var(--cx-color-success);
+    background-color: var(--cx-color-success);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Warning */
+  .icon-button--outline.icon-button--warning {
+    border-color: var(--cx-color-warning);
+    color: var(--cx-color-warning);
+  }
+
+  .icon-button--outline.icon-button--warning:hover:not(.icon-button--disabled),
+  .icon-button--outline.icon-button--warning.icon-button--focused:not(
+      .icon-button--disabled
+    ),
+  .icon-button--outline.icon-button--warning.icon-button--checked:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-warning-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button--outline.icon-button--warning:active:not(
+      .icon-button--disabled
+    ) {
+    border-color: var(--cx-color-warning-700);
+    background-color: var(--cx-color-warning-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /* Danger */
+  .icon-button--outline.icon-button--danger {
+    border-color: var(--cx-color-danger);
+    color: var(--cx-color-danger);
+  }
+
+  .icon-button--outline.icon-button--danger:hover:not(.icon-button--disabled),
+  .icon-button--outline.icon-button--danger.icon-button--focused:not(
+      .icon-button--disabled
+    ),
+  .icon-button--outline.icon-button--danger.icon-button--checked:not(
+      .icon-button--disabled
+    ) {
+    background-color: var(--cx-color-danger-500);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .icon-button--outline.icon-button--danger:active:not(.icon-button--disabled) {
+    border-color: var(--cx-color-danger-700);
+    background-color: var(--cx-color-danger-700);
+    color: var(--cx-color-neutral-0);
+  }
+
+  /*
+   * Tertiary buttons
+   */
+
+  .icon-button--tertiary {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--tertiary:hover:not(.icon-button--disabled),
+  .icon-button--tertiary.icon-button--focused:not(.icon-button--disabled) {
+    background-color: var(--cx-color-neutral-100);
+    border-color: transparent;
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--tertiary:focus-visible:not(.icon-button--disabled) {
+    background-color: var(--cx-color-neutral-200);
+    border-color: transparent;
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--tertiary:active:not(.icon-button--disabled) {
+    background-color: var(--cx-color-neutral-300);
+    border-color: transparent;
+    color: var(--cx-color-neutral);
+  }
+
+  .icon-button--circle {
+    border-radius: var(--cx-border-radius-circle);
+  }
+
+  /*
+   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
+   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
+   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
+   * buttons and we style them here instead.
+   */
+
+  :host(
+      [data-cx-button-group__button--first]:not(
+        [data-cx-button-group__button--last]
+      )
+    )
+    .icon-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-cx-button-group__button--inner]) .icon-button {
+    border-radius: 0;
+  }
+
+  :host(
+      [data-cx-button-group__button--last]:not(
+        [data-cx-button-group__button--first]
+      )
+    )
+    .icon-button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host(
+    [data-cx-button-group__button]:not([data-cx-button-group__button--first])
+  ) {
+    margin-inline-start: calc(-1 * var(--cx-input-border-width));
+  }
+
+  /* Add a visual separator between solid buttons */
+  :host(
+      [data-cx-button-group__button]:not(
+          [data-cx-button-group__button--first],
+          [data-cx-button-group__button--radio],
+          [variant='default']
+        ):not(:hover)
+    )
+    .icon-button:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    border-left: solid 1px var(--group-divider-color);
+    mix-blend-mode: multiply;
+  }
+
+  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
+  :host([data-cx-button-group__button--hover]) {
+    z-index: 1;
+  }
+
+  /* Focus and checked are always on top */
+  :host([data-cx-button-group__button--focus]),
+  :host([data-cx-button-group__button][checked]) {
+    z-index: 2;
+  }
+
+  /*
+   * Badges
+   */
+
+  .icon-button ::slotted(cx-badge) {
+    position: absolute !important;
+    top: 0 !important;
+    left: unset !important;
+    right: 0 !important;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+
+  .icon-button--rtl ::slotted(cx-badge) {
+    right: auto;
+    left: 0;
+    translate: -50% -50%;
+  }
+
+  .icon-button--small ::slotted(cx-badge) {
+    --padding: 0.1em 0.32em;
+    --font-size: var(--cx-font-size-x-small);
+  }
+
+  .icon-button--medium ::slotted(cx-badge) {
+    --font-size: var(--cx-font-size-small);
+  }
+
+  .icon-button--large ::slotted(cx-badge) {
+    --font-size: var(--cx-font-size-medium);
+  }
+
+  .icon-button--x-large ::slotted(cx-badge) {
+    --font-size: var(--cx-font-size-medium);
+  }
+
+  .icon-button__icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .icon-button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .icon-button--loading cx-spinner {
+    --indicator-color: currentColor;
+    position: absolute;
+    font-size: calc(1em);
+    height: calc(1em);
+    width: calc(1em);
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
+`;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, i, l, a) => {
+  for (var e = a > 1 ? void 0 : a ? S(i, l) : i, u = o.length - 1, s; u >= 0; u--)
+    (s = o[u]) && (e = (a ? s(i, l, e) : s(e)) || e);
+  return a && e && C(i, l, e), e;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.localize = new m(this), this.hasFocus = !1, this.variant = "outlined", this.buttonVariant = "text", this.label = "", this.disabled = !1, this.loading = !1, this.iconClass = "", this.size = g.Medium, this.outline = !1, this.circle = !1;
+  }
+  connectedUpdatedCallback() {
+    this.syncStyles(), this.styleObserver = new MutationObserver(() => this.syncStyles()), this.styleObserver.observe(this, {
+      attributeFilter: ["style"],
+      attributes: !0
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.styleObserver?.disconnect();
+  }
+  syncStyles() {
+    const o = this.style.fontSize;
+    o && this.button && (this.icon.style.setProperty("--font-size", o), this.button.style.fontSize = "inherit", this.style.fontSize = "");
+  }
+  handleBlur() {
+    this.hasFocus = !1, this.emit("cx-blur");
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.emit("cx-focus");
+  }
+  handleClick(o) {
+    this.disabled && (o.preventDefault(), o.stopPropagation());
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(o) {
+    this.button.focus(o);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const o = !!this.href, i = o ? d`a` : d`button`;
+    return b`
+      <${i}
+        part="base"
+        class=${y({
+      "icon-button": !0,
+      "icon-button--circle": this.circle,
+      "icon-button--custom": !!this.src,
+      "icon-button--danger": this.buttonVariant === "danger",
+      "icon-button--default": this.buttonVariant === "default" || this.buttonVariant === "neutral",
+      "icon-button--disabled": !o && this.disabled,
+      "icon-button--focused": this.hasFocus,
+      "icon-button--large": this.size === "large",
+      "icon-button--loading": this.loading,
+      "icon-button--medium": this.size === "medium",
+      "icon-button--outline": this.outline,
+      "icon-button--primary": this.buttonVariant === "primary",
+      "icon-button--rtl": this.localize.dir() === "rtl",
+      "icon-button--small": this.size === "small",
+      "icon-button--success": this.buttonVariant === "success",
+      "icon-button--tertiary": this.buttonVariant === "tertiary",
+      "icon-button--text": this.buttonVariant === "text",
+      "icon-button--warning": this.buttonVariant === "warning",
+      "icon-button--x-large": this.size === "x-large"
+    })}
+        ?disabled=${c(o ? void 0 : this.disabled)}
+        type=${c(o ? void 0 : "button")}
+        href=${c(o ? this.href : void 0)}
+        target=${c(o ? this.target : void 0)}
+        download=${c(o ? this.download : void 0)}
+        rel=${c(
+      o && this.target ? "noreferrer noopener" : void 0
+    )}
+        role=${c(o ? void 0 : "button")}
+        aria-disabled=${this.disabled || this.loading ? "true" : "false"}
+        aria-label=${this.label}
+        tabindex=${this.disabled || this.loading ? "-1" : "0"}
+        aria-busy=${this.loading ? "true" : "false"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+      <div class="icon-button__icon-container">
+        ${k(
+      this.loading,
+      () => b`<cx-spinner
+              part="spinner"
+              role="status"
+              aria-live="polite"
+            ></cx-spinner>`,
+      () => b`<cx-icon
+              class="icon-button__icon"
+              icon-class=${c(this.iconClass)}
+              name=${c(this.name)}
+              variant=${this.variant}
+              src=${c(this.src)}
+              aria-hidden="true"
+              part="icon"
+            ></cx-icon>`
+    )}
+        <slot name="badge"></slot>
+      </div>
+      </${i}>
+    `;
+  }
+};
+t.styles = [x, $];
+t.dependencies = { "cx-icon": w, "cx-spinner": _ };
+n([
+  v(".icon-button")
+], t.prototype, "button", 2);
+n([
+  v(".icon-button__icon")
+], t.prototype, "icon", 2);
+n([
+  f()
+], t.prototype, "hasFocus", 2);
+n([
+  r()
+], t.prototype, "name", 2);
+n([
+  r({ type: String })
+], t.prototype, "variant", 2);
+n([
+  r({ attribute: "button-variant", reflect: !0, type: String })
+], t.prototype, "buttonVariant", 2);
+n([
+  r()
+], t.prototype, "src", 2);
+n([
+  r()
+], t.prototype, "href", 2);
+n([
+  r()
+], t.prototype, "target", 2);
+n([
+  r()
+], t.prototype, "download", 2);
+n([
+  r()
+], t.prototype, "label", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "loading", 2);
+n([
+  r({ attribute: "icon-class", type: String })
+], t.prototype, "iconClass", 2);
+n([
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "outline", 2);
+n([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "circle", 2);
+t = n([
+  h("cx-icon-button")
+], t);
+export {
+  t as C,
+  g as I
+};

package/library/chunks/{iframe.BlzVfeBc.js → iframe.Dx7QScC8.js}

@@ -1,7 +1,7 @@
 import { n as r, C as d } from "./lib-cortex-element.CVMmyPMC.js";
 import { c as h } from "./component.styles.DMSLciL5.js";
 import { c as y } from "./custom-element.L4WJXn1j.js";
-import { L as u } from "./i18n.C0iakJkV.js";
+import { L as u } from "./i18n.BU7mYVLM.js";
 import { w as g } from "./watch.BCJD77bD.js";
 import { i as v, x as p } from "./lit-element.jLBm65_O.js";
 import { e as b } from "./query.BBf1UFkC.js";

package/library/chunks/{image.B3WjaCXP.js → image.Q7doiTcu.js}

@@ -6,7 +6,7 @@ import { E as He, b as de, a as $e } from "./index.Cpamj0jB.js";
 import { c as We } from "./component.styles.DMSLciL5.js";
 import { c as Ae } from "./custom-element.L4WJXn1j.js";
 import { d as Oe } from "./debounce.DaHuiSGU.js";
-import { L as Me } from "./i18n.C0iakJkV.js";
+import { L as Me } from "./i18n.BU7mYVLM.js";
 import { w as q } from "./watch.BCJD77bD.js";
 import { e as j } from "./class-map.BiVq-cVR.js";
 import { o as De } from "./if-defined.BRoBj_Rp.js";

package/library/chunks/{index.CmVKj_wl.js → index.xnuklZH8.js}

@@ -11,7 +11,7 @@ import "./default-value.COZopaet.js";
 import "./drag.DXEXVXPv.js";
 import "./event.mFzZi4sr.js";
 import { f as x } from "./form.DgwYWi0O.js";
-import "./i18n.C0iakJkV.js";
+import "./i18n.BU7mYVLM.js";
 import "./math.DqTA6ya4.js";
 import "./scroll.xtO5yojm.js";
 import { j as M } from "./dom.BQVKDNd8.js";