@skf-design-system/ui-components 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/toast/toast.singleton.js

@@ -0,0 +1,53 @@
+import "../toast-item/toast-item.js";
+import "../toast-wrapper/toast-wrapper.js";
+class a {
+  constructor(t) {
+    if (this.data = [], this.root = t, this.usePopover = !0, this.root.nodeType !== Node.DOCUMENT_NODE)
+      throw new Error("Root node must be a document node");
+    return a.instance || (a.instance = this), a.instance;
+  }
+  hasToasts() {
+    return this.data.length > 0;
+  }
+  popToast() {
+    return this.data.pop();
+  }
+  getData() {
+    return this.data;
+  }
+  setData(t) {
+    this.data = t;
+  }
+  addData(t) {
+    this.data = [...this.data, t], this.udpateUI();
+  }
+  udpateUI() {
+    const t = c(this.root, this.usePopover);
+    this.usePopover && t.showPopover(), u();
+    function u() {
+      const n = new a(document);
+      for (; n.hasToasts(); ) {
+        const e = n.popToast();
+        if (!e) return;
+        e.debug && (t.debug = !0);
+        const o = document.createElement("skf-toast-item");
+        o.timer = e.timer, o.severity = e.severity, o.icon = "warning", e.closeable && o.setAttribute("closeable", "true"), o.originEl = e.originEl, o.innerText = String(e.text);
+        const s = document.createElement("div");
+        s.classList.add("toast-item-wrapper"), s.appendChild(o), t.prepend(s);
+      }
+    }
+    function c(n, e) {
+      var p;
+      const s = ((p = new a(document).getData()[0]) == null ? void 0 : p.topOffset) ?? null, i = n.querySelector("body");
+      let r = i == null ? void 0 : i.querySelector("skf-toast-wrapper");
+      if (!r) {
+        if (r = document.createElement("skf-toast-wrapper"), !r) throw new Error("Could not create toast wrapper element");
+        e && r.setAttribute("popover", "auto"), s && r.setAttribute("top-offset", s.toString()), document.body.appendChild(r);
+      }
+      return r;
+    }
+  }
+}
+export {
+  a as Singleton
+};

package/dist/components/toast/toast.style.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/toast/toast.style.js

@@ -0,0 +1,9 @@
+import { css as s } from "lit";
+const t = s`
+	:host {
+		display: none;
+	}
+`;
+export {
+  t as styles
+};

package/dist/components/toast-item/toast-item.component.d.ts

@@ -0,0 +1,21 @@
+import { SkfAlert } from '@components/alert/alert.component.js';
+export declare class SkfToastItem extends SkfAlert {
+    static styles: import("lit").CSSResultGroup[];
+    protected _closeableInitialState: boolean;
+    protected _parentAnimationDiv: HTMLDivElement | null;
+    /** If not cloaseable, timeout id for the toast */
+    private _currentTimeoutId;
+    /** If not closseable, time left on the timer when the mouse enters the toast */
+    private _timeleft;
+    /** If not closseable, time when the timeout started */
+    private _timeoutStarted;
+    originEl: HTMLElement | null;
+    timer: number;
+    constructor();
+    firstUpdated(): void;
+    _animateIn(): void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: () => void;
+    _removeToast: () => void;
+    get parentAnimationDiv(): HTMLDivElement;
+}

package/dist/components/toast-item/toast-item.component.js

@@ -0,0 +1,65 @@
+import { SkfAlert as l } from "../alert/alert.component.js";
+import { MOTION_DURATIONS as h } from "@skf-design-system/ui-assets";
+import { property as u } from "lit/decorators.js";
+import p from "./toast-item.style.js";
+var d = Object.defineProperty, f = (a, t, e, m) => {
+  for (var i = void 0, r = a.length - 1, o; r >= 0; r--)
+    (o = a[r]) && (i = o(t, e, i) || i);
+  return i && d(t, e, i), i;
+};
+const n = class n extends l {
+  constructor() {
+    super(), this.timer = 0, this._handleMouseEnter = () => {
+      this._closeableInitialState || (this.closeable = !0, this._timeleft = this.timer * 1e3 - (Date.now() - this._timeoutStarted), this._currentTimeoutId && clearTimeout(this._currentTimeoutId));
+    }, this._handleMouseLeave = () => {
+      this._closeableInitialState || (this.closeable = this._closeableInitialState, this._currentTimeoutId = setTimeout(this._removeToast, this._timeleft));
+    }, this._removeToast = () => {
+      const e = this.parentAnimationDiv.animate(
+        [
+          { gridTemplateRows: "1fr", opacity: 1 },
+          { gridTemplateRows: "0fr", opacity: 0 }
+        ],
+        {
+          duration: h.normal,
+          fill: "forwards"
+        }
+      );
+      e.onfinish = () => {
+        this.originEl && this.originEl.remove(), this.parentAnimationDiv.remove();
+      };
+    }, this.originEl = null, this._parentAnimationDiv = this.parentElement, this._currentTimeoutId = null, this._timeleft = 0, this._timeoutStarted = 0, this._closeableInitialState = !!this.closeable;
+  }
+  firstUpdated() {
+    this.addEventListener("skf-alert-close", this._removeToast), this.closeable || (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseout", this._handleMouseLeave)), this._animateIn();
+  }
+  _animateIn() {
+    const t = this.parentAnimationDiv;
+    "vibrate" in navigator && navigator.vibrate(500);
+    const e = t.animate(
+      [
+        { gridTemplateRows: "0fr", opacity: 0 },
+        { gridTemplateRows: "1fr", opacity: 1 }
+      ],
+      {
+        duration: h.slow,
+        fill: "forwards"
+      }
+    );
+    e.onfinish = () => {
+      this.timer > 0 && !this.closeable && (this._timeoutStarted = Date.now(), this._currentTimeoutId = setTimeout(this._removeToast, this.timer * 1e3));
+    };
+  }
+  get parentAnimationDiv() {
+    const t = this.parentElement;
+    if (!t) throw new Error("Parent animation div not found");
+    return t;
+  }
+};
+n.styles = [l.styles, p];
+let s = n;
+f([
+  u({ type: Number, reflect: !0 })
+], s.prototype, "timer");
+export {
+  s as SkfToastItem
+};

package/dist/components/toast-item/toast-item.d.ts

@@ -0,0 +1,6 @@
+import { SkfToastItem } from './toast-item.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-toast-item': SkfToastItem;
+    }
+}

package/dist/components/toast-item/toast-item.js

@@ -0,0 +1,2 @@
+import { SkfToastItem as t } from "./toast-item.component.js";
+t.define("skf-toast-item");

package/dist/components/toast-item/toast-item.style.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/toast-item/toast-item.style.js

@@ -0,0 +1,16 @@
+import { css as r } from "lit";
+const s = r`
+	:host {
+		overflow: hidden;
+		padding-block-end: 3px;
+	}
+
+	#root {
+		background-color: var(--skf-bg-color-neutral-1);
+		border-inline-start: var(--skf-size-8) solid
+			var(--_skf-alert-border-color, var(--skf-border-color-primary));
+	}
+`;
+export {
+  s as default
+};

package/dist/components/toast-wrapper/toast-wrapper.component.d.ts

@@ -0,0 +1,24 @@
+import type { SkfAlert } from '@components/alert/alert.component.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The alert components that the toast creates will render here.
+ *
+ * @tagname skf-toast-wrapper
+ */
+export declare class SkfToastWrapper extends SkfElement {
+    static styles: CSSResultGroup;
+    debug: boolean;
+    /** @internal */
+    _slottedChildren: SkfAlert[];
+    /** @internal */
+    topOffset?: number;
+    firstUpdated(): void;
+    /** @internal */
+    _handleSlotChange: () => void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/toast-wrapper/toast-wrapper.component.js

@@ -0,0 +1,37 @@
+import { SkfElement as h } from "../../internal/components/skf-element.js";
+import d from "../../styles/component.styles.js";
+import { html as m } from "lit";
+import { property as p, queryAssignedElements as a } from "lit/decorators.js";
+import { styles as u } from "./toast-wrapper.style.js";
+var y = Object.defineProperty, r = (l, i, n, g) => {
+  for (var t = void 0, o = l.length - 1, f; o >= 0; o--)
+    (f = l[o]) && (t = f(i, n, t) || t);
+  return t && y(i, n, t), t;
+};
+const s = class s extends h {
+  constructor() {
+    super(...arguments), this.debug = !1, this._handleSlotChange = () => {
+      this._slottedChildren.length === 0 && this.remove();
+    };
+  }
+  firstUpdated() {
+    this._handleSlotChange(), this.topOffset && this.style.setProperty("--skf-toast-offset-top", `${this.topOffset.toString()}px`);
+  }
+  render() {
+    return m`<slot @slotchange=${this._handleSlotChange}></slot>`;
+  }
+};
+s.styles = [d, u];
+let e = s;
+r([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "debug");
+r([
+  a()
+], e.prototype, "_slottedChildren");
+r([
+  p({ type: Number, reflect: !0 })
+], e.prototype, "topOffset");
+export {
+  e as SkfToastWrapper
+};

package/dist/components/toast-wrapper/toast-wrapper.d.ts

@@ -0,0 +1,8 @@
+import { SkfToastWrapper } from './toast-wrapper.component';
+export * from './toast-wrapper.component';
+export default SkfToastWrapper;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-toast-wrapper': SkfToastWrapper;
+    }
+}

package/dist/components/toast-wrapper/toast-wrapper.js

@@ -0,0 +1,6 @@
+import { SkfToastWrapper as r } from "./toast-wrapper.component.js";
+r.define("skf-toast-wrapper");
+export {
+  r as SkfToastWrapper,
+  r as default
+};

package/dist/components/toast-wrapper/toast-wrapper.style.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/toast-wrapper/toast-wrapper.style.js

@@ -0,0 +1,20 @@
+import { css as s } from "lit";
+const t = s`
+	:host {
+		all: unset;
+		display: flex;
+		flex-direction: column;
+		gap: calc(0.5rem - 3px);
+		inline-size: min(calc(100% - var(--skf-spacing-200)), 520px);
+		inset: var(--skf-toast-offset-top, var(--skf-spacing-100)) 0 auto;
+		margin-inline: auto;
+		position: fixed;
+	}
+
+	::slotted(.toast-item-wrapper) {
+		display: grid;
+	}
+`;
+export {
+  t as styles
+};