@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/icon-button.js

@@ -1,681 +1,16 @@
-import { n as r, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
-import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as h } from "../chunks/i18n.C0iakJkV.js";
-import { r as m } from "../chunks/state.CSDxrqLd.js";
-import { e as v } from "../chunks/query.BBf1UFkC.js";
-import { e as f } from "../chunks/class-map.BiVq-cVR.js";
-import { o as c } from "../chunks/if-defined.BRoBj_Rp.js";
-import { n as y } from "../chunks/when.Dr1es41R.js";
-import { i as d, u as b } from "../chunks/static.UA3G1Deq.js";
-import k from "./icon.js";
-import w from "./spinner.js";
-import { i as _ } from "../chunks/lit-element.jLBm65_O.js";
-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 $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, i, l, a) => {
-  for (var e = a > 1 ? void 0 : a ? C(i, l) : i, u = t.length - 1, s; u >= 0; u--)
-    (s = t[u]) && (e = (a ? s(i, l, e) : s(e)) || e);
-  return a && e && $(i, l, e), e;
-};
-let o = class extends g {
-  constructor() {
-    super(...arguments), this.localize = new h(this), this.hasFocus = !1, this.variant = "outlined", this.buttonVariant = "text", this.label = "", this.disabled = !1, this.loading = !1, this.iconClass = "", this.size = "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 t = this.style.fontSize;
-    t && this.button && (this.icon.style.setProperty("--font-size", t), 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(t) {
-    this.disabled && (t.preventDefault(), t.stopPropagation());
-  }
-  /** Simulates a click on the icon button. */
-  click() {
-    this.button.click();
-  }
-  /** Sets focus on the icon button. */
-  focus(t) {
-    this.button.focus(t);
-  }
-  /** Removes focus from the icon button. */
-  blur() {
-    this.button.blur();
-  }
-  render() {
-    const t = !!this.href, i = t ? d`a` : d`button`;
-    return b`
-      <${i}
-        part="base"
-        class=${f({
-      "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": !t && 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(t ? void 0 : this.disabled)}
-        type=${c(t ? void 0 : "button")}
-        href=${c(t ? this.href : void 0)}
-        target=${c(t ? this.target : void 0)}
-        download=${c(t ? this.download : void 0)}
-        rel=${c(
-      t && this.target ? "noreferrer noopener" : void 0
-    )}
-        role=${c(t ? 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">
-        ${y(
-      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}>
-    `;
-  }
-};
-o.styles = [p, z];
-o.dependencies = { "cx-icon": k, "cx-spinner": w };
-n([
-  v(".icon-button")
-], o.prototype, "button", 2);
-n([
-  v(".icon-button__icon")
-], o.prototype, "icon", 2);
-n([
-  m()
-], o.prototype, "hasFocus", 2);
-n([
-  r()
-], o.prototype, "name", 2);
-n([
-  r({ type: String })
-], o.prototype, "variant", 2);
-n([
-  r({ attribute: "button-variant", reflect: !0, type: String })
-], o.prototype, "buttonVariant", 2);
-n([
-  r()
-], o.prototype, "src", 2);
-n([
-  r()
-], o.prototype, "href", 2);
-n([
-  r()
-], o.prototype, "target", 2);
-n([
-  r()
-], o.prototype, "download", 2);
-n([
-  r()
-], o.prototype, "label", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], o.prototype, "disabled", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], o.prototype, "loading", 2);
-n([
-  r({ attribute: "icon-class", type: String })
-], o.prototype, "iconClass", 2);
-n([
-  r({ reflect: !0 })
-], o.prototype, "size", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], o.prototype, "outline", 2);
-n([
-  r({ reflect: !0, type: Boolean })
-], o.prototype, "circle", 2);
-o = n([
-  x("cx-icon-button")
-], o);
+import "../chunks/lib-cortex-element.CVMmyPMC.js";
+import "../chunks/component.styles.CRO4Odto.js";
+import { C } from "../chunks/icon-button.rKe0N4VB.js";
+import "../chunks/custom-element.L4WJXn1j.js";
+import "../chunks/i18n.BFqTRDCA.js";
+import "../chunks/state.CSDxrqLd.js";
+import "../chunks/query.BBf1UFkC.js";
+import "../chunks/class-map.BiVq-cVR.js";
+import "../chunks/if-defined.BRoBj_Rp.js";
+import "../chunks/when.Dr1es41R.js";
+import "../chunks/static.UA3G1Deq.js";
+import "./icon.js";
+import "./spinner.js";
 export {
-  o as default
+  C as default
 };