nve-designsystem 2.0.2 → 2.2.0

package/chunks/chunk.R45OWEVP.js

@@ -1,343 +0,0 @@
-import { b as g } from "./chunk.LD4M4QGE.js";
-import { S as w } from "./chunk.7E4JTYWU.js";
-import { s as u, g as n } from "./chunk.K7JGTRV7.js";
-import { s as l, a as c, w as d } from "./chunk.B4BZKR24.js";
-import { H as _ } from "./chunk.NYIIDP5N.js";
-import { L as b } from "./chunk.6CTB5ZDJ.js";
-import { a as y, x as s } from "./lit-element.js";
-import { w as m } from "./chunk.GMYPQTFK.js";
-import { c as k, d as a, S as T } from "./chunk.4TUIT776.js";
-import { e as h } from "./class-map.js";
-import { n as i } from "./property.js";
-import { r as S } from "./state.js";
-import { e as p } from "./query.js";
-var C = y`
-  :host {
-    display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
-  }
-
-  .alert {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-top-width: calc(var(--sl-panel-border-width) * 3);
-    border-radius: var(--sl-border-radius-medium);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    line-height: 1.6;
-    color: var(--sl-color-neutral-700);
-    margin: inherit;
-    overflow: hidden;
-  }
-
-  .alert:not(.alert--has-icon) .alert__icon,
-  .alert:not(.alert--closable) .alert__close-button {
-    display: none;
-  }
-
-  .alert__icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-large);
-    padding-inline-start: var(--sl-spacing-large);
-  }
-
-  .alert--has-countdown {
-    border-bottom: none;
-  }
-
-  .alert--primary {
-    border-top-color: var(--sl-color-primary-600);
-  }
-
-  .alert--primary .alert__icon {
-    color: var(--sl-color-primary-600);
-  }
-
-  .alert--success {
-    border-top-color: var(--sl-color-success-600);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--sl-color-success-600);
-  }
-
-  .alert--neutral {
-    border-top-color: var(--sl-color-neutral-600);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--sl-color-neutral-600);
-  }
-
-  .alert--warning {
-    border-top-color: var(--sl-color-warning-600);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--sl-color-warning-600);
-  }
-
-  .alert--danger {
-    border-top-color: var(--sl-color-danger-600);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--sl-color-danger-600);
-  }
-
-  .alert__message {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--sl-spacing-large);
-    overflow: hidden;
-  }
-
-  .alert__close-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-medium);
-    margin-inline-end: var(--sl-spacing-medium);
-    align-self: center;
-  }
-
-  .alert__countdown {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: calc(var(--sl-panel-border-width) * 3);
-    background-color: var(--sl-panel-border-color);
-    display: flex;
-  }
-
-  .alert__countdown--ltr {
-    justify-content: flex-end;
-  }
-
-  .alert__countdown .alert__countdown-elapsed {
-    height: 100%;
-    width: 0;
-  }
-
-  .alert--primary .alert__countdown-elapsed {
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .alert--success .alert__countdown-elapsed {
-    background-color: var(--sl-color-success-600);
-  }
-
-  .alert--neutral .alert__countdown-elapsed {
-    background-color: var(--sl-color-neutral-600);
-  }
-
-  .alert--warning .alert__countdown-elapsed {
-    background-color: var(--sl-color-warning-600);
-  }
-
-  .alert--danger .alert__countdown-elapsed {
-    background-color: var(--sl-color-danger-600);
-  }
-
-  .alert__timer {
-    display: none;
-  }
-`, e = class r extends T {
-  constructor() {
-    super(...arguments), this.hasSlotController = new _(this, "icon", "suffix"), this.localize = new b(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0, this.remainingTime = this.duration;
-  }
-  static get toastStack() {
-    return this.currentToastStack || (this.currentToastStack = Object.assign(document.createElement("div"), {
-      className: "sl-toast-stack"
-    })), this.currentToastStack;
-  }
-  firstUpdated() {
-    this.base.hidden = !this.open;
-  }
-  restartAutoHide() {
-    this.handleCountdownChange(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), this.open && this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration), this.remainingTime = this.duration, this.remainingTimeInterval = window.setInterval(() => {
-      this.remainingTime -= 100;
-    }, 100));
-  }
-  pauseAutoHide() {
-    var t;
-    (t = this.countdownAnimation) == null || t.pause(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval);
-  }
-  resumeAutoHide() {
-    var t;
-    this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime), this.remainingTimeInterval = window.setInterval(() => {
-      this.remainingTime -= 100;
-    }, 100), (t = this.countdownAnimation) == null || t.play());
-  }
-  handleCountdownChange() {
-    if (this.open && this.duration < 1 / 0 && this.countdown) {
-      const { countdownElement: t } = this, o = "100%", f = "0";
-      this.countdownAnimation = t.animate([{ width: o }, { width: f }], {
-        duration: this.duration,
-        easing: "linear"
-      });
-    }
-  }
-  handleCloseClick() {
-    this.hide();
-  }
-  async handleOpenChange() {
-    if (this.open) {
-      this.emit("sl-show"), this.duration < 1 / 0 && this.restartAutoHide(), await l(this.base), this.base.hidden = !1;
-      const { keyframes: t, options: o } = n(this, "alert.show", { dir: this.localize.dir() });
-      await c(this.base, t, o), this.emit("sl-after-show");
-    } else {
-      g(this), this.emit("sl-hide"), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), await l(this.base);
-      const { keyframes: t, options: o } = n(this, "alert.hide", { dir: this.localize.dir() });
-      await c(this.base, t, o), this.base.hidden = !0, this.emit("sl-after-hide");
-    }
-  }
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-  /** Shows the alert. */
-  async show() {
-    if (!this.open)
-      return this.open = !0, d(this, "sl-after-show");
-  }
-  /** Hides the alert */
-  async hide() {
-    if (this.open)
-      return this.open = !1, d(this, "sl-after-hide");
-  }
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise((t) => {
-      this.handleCountdownChange(), r.toastStack.parentElement === null && document.body.append(r.toastStack), r.toastStack.appendChild(this), requestAnimationFrame(() => {
-        this.clientWidth, this.show();
-      }), this.addEventListener(
-        "sl-after-hide",
-        () => {
-          r.toastStack.removeChild(this), t(), r.toastStack.querySelector("sl-alert") === null && r.toastStack.remove();
-        },
-        { once: !0 }
-      );
-    });
-  }
-  render() {
-    return s`
-      <div
-        part="base"
-        class=${h({
-      alert: !0,
-      "alert--open": this.open,
-      "alert--closable": this.closable,
-      "alert--has-countdown": !!this.countdown,
-      "alert--has-icon": this.hasSlotController.test("icon"),
-      "alert--primary": this.variant === "primary",
-      "alert--success": this.variant === "success",
-      "alert--neutral": this.variant === "neutral",
-      "alert--warning": this.variant === "warning",
-      "alert--danger": this.variant === "danger"
-    })}
-        role="alert"
-        aria-hidden=${this.open ? "false" : "true"}
-        @mouseenter=${this.pauseAutoHide}
-        @mouseleave=${this.resumeAutoHide}
-      >
-        <div part="icon" class="alert__icon">
-          <slot name="icon"></slot>
-        </div>
-
-        <div part="message" class="alert__message" aria-live="polite">
-          <slot></slot>
-        </div>
-
-        ${this.closable ? s`
-              <sl-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="alert__close-button"
-                name="x-lg"
-                library="system"
-                label=${this.localize.term("close")}
-                @click=${this.handleCloseClick}
-              ></sl-icon-button>
-            ` : ""}
-
-        <div role="timer" class="alert__timer">${this.remainingTime}</div>
-
-        ${this.countdown ? s`
-              <div
-                class=${h({
-      alert__countdown: !0,
-      "alert__countdown--ltr": this.countdown === "ltr"
-    })}
-              >
-                <div class="alert__countdown-elapsed"></div>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-e.styles = [k, C];
-e.dependencies = { "sl-icon-button": w };
-a([
-  p('[part~="base"]')
-], e.prototype, "base", 2);
-a([
-  p(".alert__countdown-elapsed")
-], e.prototype, "countdownElement", 2);
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "open", 2);
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "closable", 2);
-a([
-  i({ reflect: !0 })
-], e.prototype, "variant", 2);
-a([
-  i({ type: Number })
-], e.prototype, "duration", 2);
-a([
-  i({ type: String, reflect: !0 })
-], e.prototype, "countdown", 2);
-a([
-  S()
-], e.prototype, "remainingTime", 2);
-a([
-  m("open", { waitUntilFirstUpdate: !0 })
-], e.prototype, "handleOpenChange", 1);
-a([
-  m("duration")
-], e.prototype, "handleDurationChange", 1);
-var v = e;
-u("alert.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 250, easing: "ease" }
-});
-u("alert.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
-  ],
-  options: { duration: 250, easing: "ease" }
-});
-var j = v;
-v.define("sl-alert");
-export {
-  j as a
-};