@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/chunks/xy.Df1hy9ac.js

@@ -0,0 +1,333 @@
+import { au as J, G as K, m as I, a0 as ee, a6 as te, a1 as V, aX as se, a as ie, a3 as ae, e as ne, V as q, aY as oe, aZ as re, L as E, T as R, aW as y, x as le } from "./am-chart.B_OdX4Q-.js";
+import { A as de, aV as ve, aU as Te, at as Ae, as as be, a$ as Ne, Q as ye, a_ as De, b0 as Pe, av as we, X as Ie } from "./am-chart.B_OdX4Q-.js";
+import { S as $ } from "./Scrollbar.DK48nKk4.js";
+import { B as Fe } from "./BaseColumnSeries.B6rG-Ylz.js";
+import { C as z } from "./EditableAxisLabel.CykTMTsG.js";
+import { E as Se } from "./EditableAxisLabel.CykTMTsG.js";
+import { C as W, a as Q } from "./CandlestickSeries.C-YfO-57.js";
+import { A as Le, G as Me } from "./CandlestickSeries.C-YfO-57.js";
+import { A as ke } from "./AxisLabelRadial.CgPb7ghO.js";
+import { C as Ge } from "./ColumnSeries.CZi2LBZ2.js";
+import { c as j, a as B } from "./MonotoneXTension.CJMEHHj3.js";
+import { c as H } from "./cardinal.BCA_LB0u.js";
+function Z(l, t) {
+  this._context = l, this._t = t;
+}
+Z.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x = this._y = NaN, this._point = 0;
+  },
+  lineEnd: function() {
+    0 < this._t && this._t < 1 && this._point === 2 && this._context.lineTo(this._x, this._y), (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line >= 0 && (this._t = 1 - this._t, this._line = 1 - this._line);
+  },
+  point: function(l, t) {
+    switch (l = +l, t = +t, this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(l, t) : this._context.moveTo(l, t);
+        break;
+      case 1:
+        this._point = 2;
+      // falls through
+      default: {
+        if (this._t <= 0)
+          this._context.lineTo(this._x, t), this._context.lineTo(l, t);
+        else {
+          var e = this._x * (1 - this._t) + l * this._t;
+          this._context.lineTo(e, this._y), this._context.lineTo(e, t);
+        }
+        break;
+      }
+    }
+    this._x = l, this._y = t;
+  }
+};
+function he(l) {
+  return new Z(l, 1);
+}
+class Y extends $ {
+  constructor() {
+    super(...arguments), this.chart = this.children.push(J.new(this._root, {
+      themeTags: ["chart"],
+      interactive: !1,
+      interactiveChildren: !1,
+      panX: !1,
+      panY: !1,
+      wheelX: "none",
+      wheelY: "none"
+    })), this.overlay = this.children.push(K.new(this._root, {
+      themeTags: ["overlay"],
+      interactive: !1
+    }));
+  }
+  _afterNew() {
+    this._addOrientationClass(), this._settings.themeTags = I(this._settings.themeTags, ["scrollbar", "xy", "chart", this._settings.orientation]);
+    const t = this.children;
+    t.moveValue(this.thumb), t.moveValue(this.startGrip), t.moveValue(this.endGrip), this.thumb.set("opacity", 0), this.thumb.states.create("hover", { opacity: 0.2 });
+    const e = this.chart.plotContainer;
+    e.set("interactive", !1), e.remove("background"), e.children.removeValue(this.chart.zoomOutButton), super._afterNew();
+  }
+  _updateThumb() {
+    super._updateThumb(), this.overlay.set("draw", (t) => {
+      const e = this.startGrip, s = this.endGrip;
+      let i = e.x(), a = e.y(), n = s.x(), o = s.y();
+      const r = this.height(), h = this.width();
+      i > n && ([i, n] = [n, i]), a > o && ([a, o] = [o, a]), this.get("orientation") === "horizontal" ? (t.moveTo(0, 0), t.lineTo(i, 0), t.lineTo(i, r), t.lineTo(0, r), t.lineTo(0, 0), t.moveTo(n, 0), t.lineTo(h, 0), t.lineTo(h, r), t.lineTo(n, r), t.lineTo(n, 0)) : (t.moveTo(0, 0), t.lineTo(0, a), t.lineTo(h, a), t.lineTo(h, 0), t.lineTo(0, 0), t.moveTo(0, o), t.lineTo(0, r), t.lineTo(h, r), t.lineTo(h, o), t.lineTo(0, o));
+    });
+  }
+}
+Y.className = "XYChartScrollbar";
+Y.classNames = $.classNames.concat([Y.className]);
+class S extends z {
+  constructor() {
+    super(...arguments), this._frequency = 1, this._itemMap = {};
+  }
+  _afterNew() {
+    this._settings.themeTags = I(this._settings.themeTags, ["axis"]), this.fields.push("category"), super._afterNew();
+  }
+  _prepareAxisItems() {
+    this.setPrivateRaw("baseInterval", this.get("baseInterval"));
+    const t = this.get("renderer"), e = this.dataItems.length;
+    let s = this.startIndex();
+    s > 0 && s--;
+    let i = this.endIndex();
+    i < e && i++;
+    let a = t.axisLength() / Math.max(t.get("minGridDistance"), 1 / Number.MAX_SAFE_INTEGER), n = Math.min(e, Math.ceil((i - s) / a));
+    s = Math.floor(s / n) * n, this._frequency = n;
+    for (let m = 0; m < e; m++)
+      this._toggleDataItem(this.dataItems[m], !1);
+    let o = Number(this.dataItems[s].get("category")), r = Number(this.dataItems[i - 1].get("category")), h = r - o;
+    i - s < a && (h = r - o - ((r - o) / this.baseDuration() - (i - s)) * this.baseDuration());
+    let c = ee(0, h, a, this.get("gridIntervals"));
+    const A = te(c.timeUnit), b = this.getPrivate("baseInterval");
+    V(c) < this.baseDuration() && (c = Object.assign({}, b));
+    const P = this.get("dateFormats");
+    let u = -1 / 0, _ = -1 / 0, d = -1 / 0, x, g = [], v = !1;
+    for (let m = s; m < i; m++) {
+      let T = this.dataItems[m], f = T.get("index"), w = !1, D = Number(T.get("category")), N = new Date(D), p = se(N, c.timeUnit);
+      x = P[c.timeUnit];
+      let G = !1;
+      c.timeUnit != "year" && c.timeUnit != "week" && A && this.get("markUnitChange") && ie(u) && ae(D, u, A, this._root.utc) && (x = this.get("periodChangeDateFormats")[c.timeUnit], f - n * 0.5 < _ && g.pop(), g.push({ format: x, dataItem: T }), v = !0, G = !0, _ = f, d = p);
+      let F = !1;
+      c.timeUnit === "day" || c.timeUnit === "week" ? f - _ >= n && (F = !0) : p % c.count === 0 && p != d && (F = !0), !G && F && (f - n * 0.7 < _ && v && (w = !0), w || (g.push({ format: x, dataItem: T }), _ = f, d = p), v = !1), u = D;
+    }
+    if (g.length > 0) {
+      let m = g[0].dataItem.get("index", 0);
+      ne(g, (T) => {
+        const f = T.dataItem, w = T.format;
+        this._createAssets(f, []), this._toggleDataItem(f, !0);
+        let D = Number(f.get("category")), N = new Date(D);
+        const p = f.get("label");
+        p && p.set("text", this._root.dateFormatter.format(N, w)), m++, this._prepareDataItem(f, m, n);
+      });
+    }
+  }
+  /**
+   * Returns a duration of currently active `baseInterval` in milliseconds.
+   *
+   * @return Duration
+   */
+  baseDuration() {
+    return V(this.getPrivate("baseInterval"));
+  }
+  /**
+   * Returns text to be used in an axis tooltip for specific relative position.
+   *
+   * @param   position  Position
+   * @return            Tooltip text
+   */
+  getTooltipText(t, e) {
+    let s = this.dataItems[this.axisPositionToIndex(t)];
+    if (s) {
+      let i = this.get("dateFormats")[this.getPrivate("baseInterval").timeUnit];
+      return this._root.dateFormatter.format(new Date(s.get("category", 0)), this.get("tooltipDateFormat", i));
+    }
+  }
+  _updateTooltipText(t, e) {
+    t.label.set("text", this.getTooltipText(e));
+  }
+}
+S.className = "CategoryDateAxis";
+S.classNames = z.classNames.concat([S.className]);
+class C extends q {
+  constructor() {
+    super(...arguments), this._dataGrouped = !1, this._groupingCalculated = !1, this._intervalDuration = 1;
+  }
+  _afterNew() {
+    this._settings.themeTags = I(this._settings.themeTags, ["axis"]), super._afterNew();
+  }
+  _adjustMinMax(t, e, s, i) {
+    let a;
+    const n = this.getDurationFormatter(), o = this.get("baseUnit");
+    if (this.setRaw("maxPrecision", 0), o == "millisecond" || o == "second" || o == "minute" || o == "hour") {
+      s <= 1 && (s = 1), s = Math.round(s);
+      let r = e - t;
+      r === 0 && (r = Math.abs(e));
+      let h = r / s, c = [60, 30, 20, 15, 10, 2, 1], A = 1;
+      o == "hour" && (c = [24, 12, 6, 4, 2, 1]);
+      for (let x of c)
+        if (r / x > s) {
+          A = x;
+          break;
+        }
+      let b = Math.ceil((e - t) / A / s), P = Math.log(Math.abs(b)) * Math.LOG10E, u = Math.pow(10, Math.floor(P)) / 10, _ = b / u;
+      b = oe(c, _) * u, h = A * b, t = Math.floor(t / h) * h, e = Math.ceil(e / h) * h, a = { min: t, max: e, step: h };
+    } else
+      a = super._adjustMinMax(t, e, s, i);
+    return this.setPrivateRaw("durationFormat", n.getFormat(a.step, a.max, o)), a;
+  }
+  _formatText(t) {
+    return this.getDurationFormatter().format(t, this.getPrivate("durationFormat"), this.get("baseUnit"));
+  }
+  /**
+   * Returns text to be used in an axis tooltip for specific relative position.
+   *
+   * @param   position  Position
+   * @return            Tooltip text
+   */
+  getTooltipText(t, e) {
+    const s = this.getDurationFormatter(), i = this.get("extraTooltipPrecision", 0), a = this.getPrivate("stepDecimalPlaces", 0) + i, n = re(this.positionToValue(t), a);
+    return s.format(n, this.getPrivate("durationFormat"), this.get("baseUnit"));
+  }
+}
+C.className = "DurationAxis";
+C.classNames = q.classNames.concat([C.className]);
+class X extends W {
+  _draw() {
+    const t = this._display;
+    t.moveTo(this.get("lowX1", 0), this.get("lowY1", 0)), t.lineTo(this.get("highX1", 0), this.get("highY1", 0));
+    let e = this.width(), s = this.height();
+    if (this.get("orientation") == "vertical") {
+      let i = s, a = 0;
+      t.moveTo(0, i), t.lineTo(e / 2, i), t.moveTo(e / 2, a), t.lineTo(e, a);
+    } else {
+      let i = 0, a = e;
+      t.moveTo(i, 0), t.lineTo(i, s / 2), t.moveTo(a, s / 2), t.lineTo(a, s);
+    }
+  }
+}
+X.className = "OHLC";
+X.classNames = W.classNames.concat([X.className]);
+class L extends Q {
+  constructor() {
+    super(...arguments), this.columns = this.addDisposer(new E(R.new({
+      themeTags: ["autocolor"]
+    }), () => X._new(this._root, {
+      themeTags: I(this.columns.template.get("themeTags", []), ["ohlc", "series", "column"])
+    }, [this.columns.template])));
+  }
+  /**
+   * @ignore
+   */
+  makeColumn(t, e) {
+    const s = this.mainContainer.children.push(e.make());
+    return s._setDataItem(t), e.push(s), s;
+  }
+  _processAxisRange(t) {
+    super._processAxisRange(t), t.columns = new E(R.new({}), () => X._new(this._root, {
+      themeTags: I(t.columns.template.get("themeTags", []), ["ohlc", "series", "column"])
+    }, [this.columns.template, t.columns.template]));
+  }
+}
+L.className = "OHLCSeries";
+L.classNames = Q.classNames.concat([L.className]);
+class M extends y {
+  _afterNew() {
+    this._setDefault("curveFactory", j(this.get("tension", 0.5))), super._afterNew();
+  }
+  _updateChildren() {
+    this.isDirty("tension") && (this.set("curveFactory", j(this.get("tension", 0.5))), this._valuesDirty = !0), super._updateChildren();
+  }
+}
+M.className = "SmoothedYLineSeries";
+M.classNames = y.classNames.concat([M.className]);
+class O extends y {
+  _afterNew() {
+    this._setDefault("curveFactory", B(this.get("tension", 0.5))), super._afterNew();
+  }
+  _updateChildren() {
+    this.isDirty("tension") && (this.set("curveFactory", B(this.get("tension", 0.5))), this._valuesDirty = !0), super._updateChildren();
+  }
+}
+O.className = "SmoothedXLineSeries";
+O.classNames = y.classNames.concat([O.className]);
+class k extends y {
+  _afterNew() {
+    this._setDefault("curveFactory", H.tension(this.get("tension", 0.5))), super._afterNew();
+  }
+  _updateChildren() {
+    this.isDirty("tension") && (this.set("curveFactory", H.tension(this.get("tension", 0.5))), this._valuesDirty = !0), super._updateChildren();
+  }
+}
+k.className = "SmoothedXYLineSeries";
+k.classNames = y.classNames.concat([k.className]);
+class U extends y {
+  _afterNew() {
+    this._setDefault("curveFactory", he), super._afterNew();
+  }
+  _getPoints(t, e) {
+    let s = e.points, i = this.get("stepWidth", le).value / 2, a = t.get("locationX", e.locationX), n = t.get("locationY", e.locationY), o = a, r = n;
+    e.baseAxis === e.xAxis ? (a -= i, o += i) : e.baseAxis === e.yAxis && (n -= i, r += i);
+    let h = e.xAxis.getDataItemPositionX(t, e.xField, a, e.vcx), c = e.yAxis.getDataItemPositionY(t, e.yField, n, e.vcy), A = e.xAxis.getDataItemPositionX(t, e.xField, o, e.vcx), b = e.yAxis.getDataItemPositionY(t, e.yField, r, e.vcy);
+    if (this._shouldInclude(h)) {
+      const P = this.getPoint(h, c), u = [P.x, P.y], _ = this.getPoint(A, b), d = [_.x, _.y];
+      if (e.fillVisible) {
+        let x = h, g = c, v = A, m = b;
+        if (e.baseAxis === e.xAxis ? (g = e.basePosY, m = e.basePosY) : e.baseAxis === e.yAxis && (x = e.basePosX, v = e.basePosX), e.getOpen) {
+          let w = t.get(e.xOpenField), D = t.get(e.yOpenField);
+          if (w != null && D != null)
+            if (a = t.get("openLocationX", e.openLocationX), n = t.get("openLocationY", e.openLocationY), o = a, r = n, e.baseAxis === e.xAxis ? (a -= i, o += i) : e.baseAxis === e.yAxis && (n -= i, r += i), e.stacked) {
+              let N = t.get("stackToItemX"), p = t.get("stackToItemY");
+              N ? (x = e.xAxis.getDataItemPositionX(N, e.xField, a, N.component.get("vcx")), v = e.xAxis.getDataItemPositionX(N, e.xField, o, N.component.get("vcx"))) : e.yAxis === e.baseAxis ? (x = e.basePosX, v = e.basePosX) : e.baseAxis === e.yAxis && (x = e.xAxis.getDataItemPositionX(t, e.xOpenField, a, e.vcx), v = e.xAxis.getDataItemPositionX(t, e.xOpenField, o, e.vcx)), p ? (g = e.yAxis.getDataItemPositionY(p, e.yField, n, p.component.get("vcy")), m = e.yAxis.getDataItemPositionY(p, e.yField, r, p.component.get("vcy"))) : e.xAxis === e.baseAxis ? (g = e.basePosY, m = e.basePosY) : e.baseAxis === e.yAxis && (g = e.yAxis.getDataItemPositionY(t, e.yOpenField, n, e.vcy), m = e.yAxis.getDataItemPositionY(t, e.yOpenField, r, e.vcy));
+            } else
+              x = e.xAxis.getDataItemPositionX(t, e.xOpenField, a, e.vcx), g = e.yAxis.getDataItemPositionY(t, e.yOpenField, n, e.vcy), v = e.xAxis.getDataItemPositionX(t, e.xOpenField, o, e.vcx), m = e.yAxis.getDataItemPositionY(t, e.yOpenField, r, e.vcy);
+        }
+        let T = this.getPoint(x, g), f = this.getPoint(v, m);
+        u[2] = T.x, u[3] = T.y, d[2] = f.x, d[3] = f.y;
+      }
+      s.push(u), s.push(d), t.set("point", { x: u[0] + (d[0] - u[0]) / 2, y: u[1] + (d[1] - u[1]) / 2 });
+    }
+    this.get("noRisers") && (e.points = [], e.segments.push(s));
+  }
+}
+U.className = "StepLineSeries";
+U.classNames = y.classNames.concat([U.className]);
+export {
+  de as Axis,
+  Le as AxisBullet,
+  ve as AxisLabel,
+  ke as AxisLabelRadial,
+  Te as AxisRenderer,
+  Ae as AxisRendererX,
+  be as AxisRendererY,
+  Ne as AxisTick,
+  Fe as BaseColumnSeries,
+  W as Candlestick,
+  Q as CandlestickSeries,
+  z as CategoryAxis,
+  S as CategoryDateAxis,
+  Ge as ColumnSeries,
+  ye as DateAxis,
+  De as DefaultTheme,
+  C as DurationAxis,
+  Se as EditableAxisLabel,
+  Me as GaplessDateAxis,
+  Pe as Grid,
+  y as LineSeries,
+  X as OHLC,
+  L as OHLCSeries,
+  O as SmoothedXLineSeries,
+  k as SmoothedXYLineSeries,
+  M as SmoothedYLineSeries,
+  U as StepLineSeries,
+  q as ValueAxis,
+  J as XYChart,
+  Y as XYChartScrollbar,
+  we as XYCursor,
+  Ie as XYSeries
+};

package/library/components/alert.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/alert/alert'
+import _default from '../packages/atoms/src/components/alert/alert'
+export default _default

package/library/components/alert.js

@@ -0,0 +1,352 @@
+import { n as s, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as x } from "../chunks/component.styles.DMSLciL5.js";
+import { s as u, a as p } from "../chunks/animate.El-MpOws.js";
+import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
+import { w as m } from "../chunks/event.mFzZi4sr.js";
+import { L as C } from "../chunks/i18n.Bge6Wbrz.js";
+import { H as T } from "../chunks/slot.j5oheLJC.js";
+import { w } from "../chunks/watch.q1sEjPWL.js";
+import { i as I, x as h } from "../chunks/lit-element.jLBm65_O.js";
+import { r as A } from "../chunks/state.CSDxrqLd.js";
+import { e as g } from "../chunks/query.BBf1UFkC.js";
+import { e as f } from "../chunks/class-map.BiVq-cVR.js";
+import { s as _, g as v } from "../chunks/animation-registry.HmpwNuGH.js";
+import H from "./icon-button.js";
+const k = I`
+  :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(--cx-panel-background-color);
+    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
+    border-top-width: calc(var(--cx-panel-border-width) * 3);
+    border-radius: var(--cx-border-radius-small);
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-small);
+    font-weight: var(--cx-font-weight-regular);
+    line-height: 1.6;
+    color: var(--cx-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(--cx-font-size-large);
+    padding-inline-start: var(--cx-spacing-large);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
+  .alert--primary {
+    border-top-color: var(--cx-color-primary);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--cx-color-primary);
+  }
+
+  .alert--success {
+    border-top-color: var(--cx-color-success);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--cx-color-success);
+  }
+
+  .alert--neutral {
+    border-top-color: var(--cx-color-neutral);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--cx-color-neutral);
+  }
+
+  .alert--warning {
+    border-top-color: var(--cx-color-warning);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--cx-color-warning);
+  }
+
+  .alert--danger {
+    border-top-color: var(--cx-color-danger);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--cx-color-danger);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--cx-spacing-large);
+    overflow: hidden;
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--cx-font-size-medium);
+    padding-inline-end: var(--cx-spacing-medium);
+  }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--cx-panel-border-width) * 3);
+    background-color: var(--cx-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(--cx-color-primary);
+  }
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--cx-color-success);
+  }
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--cx-color-neutral-600);
+  }
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--cx-color-warning);
+  }
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--cx-color-danger);
+  }
+  .alert__timer {
+    display: none;
+  }
+`;
+var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, o, n, l) => {
+  for (var a = l > 1 ? void 0 : l ? $(o, n) : o, c = r.length - 1, d; c >= 0; c--)
+    (d = r[c]) && (a = (l ? d(o, n, a) : d(a)) || a);
+  return l && a && z(o, n, a), a;
+};
+const i = Object.assign(document.createElement("div"), {
+  className: "cx-toast-stack"
+});
+let e = class extends b {
+  constructor() {
+    super(...arguments), this.hasSlotController = new T(
+      this,
+      "icon",
+      "suffix"
+    ), this.localize = new C(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0, this.remainingTime = this.duration;
+  }
+  runFirstUpdated() {
+    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() {
+    this.countdownAnimation?.pause(), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(
+      () => this.hide(),
+      this.remainingTime
+    ), this.remainingTimeInterval = window.setInterval(() => {
+      this.remainingTime -= 100;
+    }, 100), this.countdownAnimation?.play());
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < 1 / 0 && this.countdown) {
+      const { countdownElement: r } = this, o = "100%", n = "0";
+      this.countdownAnimation = r.animate(
+        [{ width: o }, { width: n }],
+        {
+          duration: this.duration,
+          easing: "linear"
+        }
+      );
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("cx-show"), this.duration < 1 / 0 && this.restartAutoHide(), await u(this.base), this.base.hidden = !1;
+      const { keyframes: r, options: o } = v(this, "alert.show", {
+        dir: this.localize.dir()
+      });
+      await p(this.base, r, o), this.emit("cx-after-show");
+    } else {
+      this.emit("cx-hide"), clearTimeout(this.autoHideTimeout), clearInterval(this.remainingTimeInterval), await u(this.base);
+      const { keyframes: r, options: o } = v(this, "alert.hide", {
+        dir: this.localize.dir()
+      });
+      await p(this.base, r, o), this.base.hidden = !0, this.emit("cx-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, m(this, "cx-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (this.open)
+      return this.open = !1, m(this, "cx-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((r) => {
+      this.handleCountdownChange(), i.parentElement === null && document.body.append(i), i.appendChild(this), requestAnimationFrame(() => {
+        this.clientWidth, this.show();
+      }), this.addEventListener(
+        "cx-after-hide",
+        () => {
+          i.removeChild(this), r(), i.querySelector("cx-alert") === null && i.remove();
+        },
+        { once: !0 }
+      );
+    });
+  }
+  render() {
+    return h`
+      <div
+        part="base"
+        class=${f({
+      alert: !0,
+      "alert--closable": this.closable,
+      "alert--danger": this.variant === "danger",
+      "alert--has-countdown": !!this.countdown,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--neutral": this.variant === "neutral",
+      "alert--open": this.open,
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--warning": this.variant === "warning"
+    })}
+        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 ? h`
+              <cx-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="close"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></cx-icon-button>
+            ` : ""}
+
+        <div role="timer" class="alert__timer">${this.remainingTime}</div>
+        ${this.countdown ? h`
+              <div
+                class=${f({
+      alert__countdown: !0,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+              >
+                <div class="alert__countdown-elapsed"></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+e.styles = [x, k];
+e.dependencies = { "cx-icon-button": H };
+t([
+  g('[part~="base"]')
+], e.prototype, "base", 2);
+t([
+  g(".alert__countdown-elapsed")
+], e.prototype, "countdownElement", 2);
+t([
+  s({ reflect: !0, type: Boolean })
+], e.prototype, "open", 2);
+t([
+  s({ reflect: !0, type: Boolean })
+], e.prototype, "closable", 2);
+t([
+  s({ reflect: !0 })
+], e.prototype, "variant", 2);
+t([
+  s({ type: Number })
+], e.prototype, "duration", 2);
+t([
+  s({ reflect: !0, type: String })
+], e.prototype, "countdown", 2);
+t([
+  A()
+], e.prototype, "remainingTime", 2);
+t([
+  w("open", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleOpenChange", 1);
+t([
+  w("duration")
+], e.prototype, "handleDurationChange", 1);
+e = t([
+  y("cx-alert")
+], e);
+_("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+_("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+export {
+  e as default
+};

package/library/components/am-chart.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/am-chart/am-chart'
+import _default from '../packages/atoms/src/components/am-chart/am-chart'
+export default _default