@mhmo91/schmancy 0.3.8 → 0.4.2

package/dist/typewriter-P4fs9-rU.js

@@ -0,0 +1,437 @@
+import { c as W } from "./consume-5D1qfVWM.js";
+import "rxjs";
+import "lit/directives/class-map.js";
+import "lit/directives/style-map.js";
+import { $ as X } from "./litElement.mixin-CUhEpTgZ.js";
+import "./tailwind.mixin-t3Yj_Xbu.js";
+import { h as J, d as G } from "./delay-pKHFTza9.js";
+import { i as Y } from "./intersection-CJxzz8c-.js";
+import { css as Z, html as tt } from "lit";
+import { property as f, query as et, queryAssignedNodes as st, queryAssignedElements as it, customElement as rt } from "lit/decorators.js";
+const F = (s) => Array.isArray(s), k = (s) => F(s) ? s : [s], B = "data-typeit-id", y = "ti-cursor", nt = { started: !1, completed: !1, frozen: !1, destroyed: !1 }, g = { breakLines: !0, cursor: { autoPause: !0, autoPauseDelay: 500, animation: { frames: [0, 0, 1].map((s) => ({ opacity: s })), options: { iterations: 1 / 0, easing: "steps(2, start)", fill: "forwards" } } }, cursorChar: "|", cursorSpeed: 1e3, deleteSpeed: null, html: !0, lifeLike: !0, loop: !1, loopDelay: 750, nextStringDelay: 750, speed: 100, startDelay: 250, startDelete: !1, strings: [], waitUntilVisible: !1, beforeString: () => {
+}, afterString: () => {
+}, beforeStep: () => {
+}, afterStep: () => {
+}, afterComplete: () => {
+} }, ot = `[${B}]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}`, P = (s) => document.createElement(s), q = (s) => document.createTextNode(s), A = (s, t = "") => {
+  let e = P("style");
+  e.id = t, e.appendChild(q(s)), document.head.appendChild(e);
+}, _ = (s) => (F(s) || (s = [s / 2, s / 2]), s), $ = (s, t) => Math.abs(Math.random() * (s + t - (s - t)) + (s - t));
+let O = (s) => s / 2;
+const j = (s) => Array.from(s);
+let L = (s) => ([...s.childNodes].forEach((t) => {
+  if (t.nodeValue) return [...t.nodeValue].forEach((e) => {
+    t.parentNode.insertBefore(q(e), t);
+  }), void t.remove();
+  L(t);
+}), s);
+const K = (s) => {
+  let t = document.implementation.createHTMLDocument();
+  return t.body.innerHTML = s, L(t.body);
+};
+function Q(s, t = !1, e = !1) {
+  let i, r = s.querySelector(`.${y}`), n = document.createTreeWalker(s, NodeFilter.SHOW_ALL, { acceptNode: (a) => {
+    if (r && e) {
+      if (a.classList?.contains(y)) return NodeFilter.FILTER_ACCEPT;
+      if (r.contains(a)) return NodeFilter.FILTER_REJECT;
+    }
+    return a.classList?.contains(y) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+  } }), o = [];
+  for (; i = n.nextNode(); ) i.originalParent || (i.originalParent = i.parentNode), o.push(i);
+  return t ? o.reverse() : o;
+}
+function at(s, t = !0) {
+  return t ? Q(K(s)) : j(s).map(q);
+}
+const ht = ({ index: s, newIndex: t, queueItems: e, cleanUp: i }) => {
+  for (let r = s + 1; r < t + 1; r++) i(e[r][0]);
+}, U = (s) => Number.isInteger(s), H = ({ queueItems: s, selector: t, cursorPosition: e, to: i }) => {
+  if (U(t)) return -1 * t;
+  let r = new RegExp("END", "i").test(i), n = t ? [...s].reverse().findIndex(({ char: o }) => {
+    let a = o.parentElement, l = a.matches(t);
+    return !(!r || !l) || l && a.firstChild.isSameNode(o);
+  }) : -1;
+  return n < 0 && (n = r ? 0 : s.length - 1), n - e + (r ? 0 : 1);
+}, v = (s, t) => new Array(t).fill(s);
+let S = (s) => new Promise((t) => {
+  requestAnimationFrame(async () => {
+    t(await s());
+  });
+}), R = (s) => s?.getAnimations().find((t) => t.id === s.dataset.tiAnimationId), V = ({ cursor: s, frames: t, options: e }) => {
+  let i = s.animate(t, e);
+  return i.pause(), i.id = s.dataset.tiAnimationId, S(() => {
+    S(() => {
+      i.play();
+    });
+  }), i;
+}, z = (s) => s.func?.call(null), lt = async ({ index: s, queueItems: t, wait: e, cursor: i, cursorOptions: r }) => {
+  let n = t[s][1], o = [], a = s, l = n, u = () => l && !l.delay, h = n.shouldPauseCursor() && r.autoPause;
+  for (; u(); ) o.push(l), u() && a++, l = t[a] ? t[a][1] : null;
+  if (o.length) return await S(async () => {
+    for (let w of o) await z(w);
+  }), a - 1;
+  let c, m = R(i);
+  return m && (c = { ...m.effect.getComputedTiming(), delay: h ? r.autoPauseDelay : 0 }), await e(async () => {
+    m && h && m.cancel(), await S(() => {
+      z(n);
+    });
+  }, n.delay), await (({ cursor: w, options: x, cursorOptions: D }) => {
+    if (!w || !D) return;
+    let E, C = R(w);
+    C && (x.delay = C.effect.getComputedTiming().delay, E = C.currentTime, C.cancel());
+    let M = V({ cursor: w, frames: D.animation.frames, options: x });
+    return E && (M.currentTime = E), M;
+  })({ cursor: i, options: c, cursorOptions: r }), s;
+};
+const T = (s) => "value" in s;
+let b = (s) => typeof s == "function" ? s() : s, N = (s, t = document, e = !1) => t["querySelector" + (e ? "All" : "")](s);
+const I = (s, t) => Object.assign({}, s, t);
+let ut = { "font-family": "", "font-weight": "", "font-size": "", "font-style": "", "line-height": "", color: "", transform: "translateX(-.125em)" };
+class ct {
+  element;
+  timeouts;
+  cursorPosition;
+  predictedCursorPosition;
+  statuses = { started: !1, completed: !1, frozen: !1, destroyed: !1, firing: !1 };
+  opts;
+  id;
+  queue;
+  cursor;
+  flushCallback = null;
+  unfreeze = () => {
+  };
+  constructor(t, e = {}) {
+    var i;
+    this.opts = I(g, e), this.element = typeof (i = t) == "string" ? N(i) : i, this.timeouts = [], this.cursorPosition = 0, this.unfreeze = () => {
+    }, this.predictedCursorPosition = null, this.statuses = I({}, nt), this.id = Math.random().toString().substring(2, 9), this.queue = function(r) {
+      let n = function(h) {
+        return k(h).forEach((c) => u.set(Symbol(c.char?.innerText), o({ ...c }))), this;
+      }, o = (h) => (h.shouldPauseCursor = function() {
+        return !!(this.typeable || this.cursorable || this.deletable);
+      }, h), a = () => u, l = () => Array.from(u.values()), u = /* @__PURE__ */ new Map();
+      return n(r), { add: n, set: function(h, c) {
+        let m = [...u.keys()];
+        u.set(m[h], o(c));
+      }, wipe: function() {
+        u = /* @__PURE__ */ new Map(), n(r);
+      }, done: (h, c = !1) => c ? u.delete(h) : u.get(h).done = !0, reset: function() {
+        u.forEach((h) => delete h.done);
+      }, destroy: (h) => u.delete(h), getItems: (h = !1) => h ? l() : l().filter((c) => !c.done), getQueue: a, getTypeable: () => l().filter((h) => h.typeable), getPendingQueueItems: () => {
+        const h = [];
+        for (let [, c] of a()) c.done || h.push(c);
+        return h;
+      } };
+    }([{ delay: this.opts.startDelay }]), this.#v(e), this.cursor = this.#P(), this.element.dataset.typeitId = this.id, A(ot), this.opts.strings.length && this.#C();
+  }
+  go() {
+    return this.statuses.started ? this : (this.#m(), this.opts.waitUntilVisible ? (t = this.element, e = this.#i.bind(this), new IntersectionObserver((i, r) => {
+      i.forEach((n) => {
+        n.isIntersecting && (e(), r.unobserve(t));
+      });
+    }, { threshold: 1 }).observe(t), this) : (this.#i(), this));
+    var t, e;
+  }
+  destroy(t = !0) {
+    this.timeouts = (this.timeouts.forEach(clearTimeout), []), b(t) && this.cursor && this.#c(this.cursor), this.statuses.destroyed = !0;
+  }
+  reset(t) {
+    !this.is("destroyed") && this.destroy(), t ? (this.queue.wipe(), t(this)) : this.queue.reset(), this.cursorPosition = 0;
+    for (let e in this.statuses) this.statuses[e] = !1;
+    return this.element[this.#l() ? "value" : "innerHTML"] = "", this;
+  }
+  is = function(t) {
+    return this.statuses[t];
+  };
+  type(t, e = {}) {
+    t = b(t);
+    let { instant: i } = e, r = this.#r(e), n = at(t, this.opts.html).map((a) => {
+      return { func: () => this.#u(a), char: a, delay: i || (l = a, /<(.+)>(.*?)<\/(.+)>/.test(l.outerHTML)) ? 0 : this.#s(), typeable: a.nodeType === Node.TEXT_NODE };
+      var l;
+    }), o = [r[0], { func: async () => await this.opts.beforeString(t, this) }, ...n, { func: async () => await this.opts.afterString(t, this) }, r[1]];
+    return this.#t(o, e);
+  }
+  break(t = {}) {
+    return this.#t({ func: () => this.#u(P("BR")), typeable: !0 }, t);
+  }
+  move(t, e = {}) {
+    t = b(t);
+    let i = this.#r(e), { instant: r, to: n } = e, o = H({ queueItems: this.queue.getTypeable(), selector: t === null ? "" : t, to: n, cursorPosition: this.#a }), a = o < 0 ? -1 : 1;
+    return this.predictedCursorPosition = this.#a + o, this.#t([i[0], ...v({ func: () => this.#d(a), delay: r ? 0 : this.#s(), cursorable: !0 }, Math.abs(o)), i[1]], e);
+  }
+  exec(t, e = {}) {
+    let i = this.#r(e);
+    return this.#t([i[0], { func: () => t(this) }, i[1]], e);
+  }
+  options(t, e = {}) {
+    return t = b(t), this.#n(t), this.#t({}, e);
+  }
+  pause(t, e = {}) {
+    return this.#t({ delay: b(t) }, e);
+  }
+  delete(t = null, e = {}) {
+    t = b(t);
+    let i = this.#r(e), r = t, { instant: n, to: o } = e, a = this.queue.getTypeable(), l = r === null ? a.length : U(r) ? r : H({ queueItems: a, selector: r, cursorPosition: this.#a, to: o });
+    return this.#t([i[0], ...v({ func: this.#o.bind(this), delay: n ? 0 : this.#s(1), deletable: !0 }, l), i[1]], e);
+  }
+  freeze() {
+    this.statuses.frozen = !0;
+  }
+  flush(t = null) {
+    return this.flushCallback = t || this.flushCallback, this.statuses.firing || (this.#m(), this.#i(!1).then(() => {
+      if (this.queue.getPendingQueueItems().length > 0) return this.flush();
+      this.flushCallback(), this.flushCallback = null;
+    })), this;
+  }
+  getQueue() {
+    return this.queue;
+  }
+  getOptions() {
+    return this.opts;
+  }
+  updateOptions(t) {
+    return this.#n(t);
+  }
+  getElement() {
+    return this.element;
+  }
+  empty(t = {}) {
+    return this.#t({ func: this.#b.bind(this) }, t);
+  }
+  async #b() {
+    this.#l() ? this.element.value = "" : this.#e.forEach(this.#c.bind(this));
+  }
+  async #i(t = !0) {
+    this.statuses.started = !0, this.statuses.firing = !0;
+    let e = (i) => {
+      this.queue.done(i, !t);
+    };
+    try {
+      let i = [...this.queue.getQueue()];
+      for (let n = 0; n < i.length; n++) {
+        let [o, a] = i[n];
+        if (!a.done) {
+          if (!a.deletable || a.deletable && this.#e.length) {
+            let l = await this.#p(n, i);
+            ht({ index: n, newIndex: l, queueItems: i, cleanUp: e }), n = l;
+          }
+          e(o);
+        }
+      }
+      if (!t) return this.statuses.firing = !1, this;
+      if (this.statuses.completed = !0, this.statuses.firing = !1, await this.opts.afterComplete(this), !this.opts.loop) throw "";
+      let r = this.opts.loopDelay;
+      this.#y(async () => {
+        await this.#w(r[0]), this.#i();
+      }, r[1]);
+    } catch {
+    }
+    return this.statuses.firing = !1, this;
+  }
+  async #d(t) {
+    var e, i, r;
+    this.cursorPosition = (e = t, i = this.cursorPosition, r = this.#e, Math.min(Math.max(i + e, 0), r.length)), ((n, o, a) => {
+      let l = o[a - 1], u = N(`.${y}`, n);
+      (n = l?.parentNode || n).insertBefore(u, l || null);
+    })(this.element, this.#e, this.cursorPosition);
+  }
+  async #w(t) {
+    let e = this.#a;
+    e && await this.#d({ value: e });
+    let i = this.#e.map((r) => [Symbol(), { func: this.#o.bind(this), delay: this.#s(1), deletable: !0, shouldPauseCursor: () => !0 }]);
+    for (let r = 0; r < i.length; r++) await this.#p(r, i);
+    this.queue.reset(), this.queue.set(0, { delay: t });
+  }
+  #p(t, e) {
+    return lt({ index: t, queueItems: e, wait: this.#y.bind(this), cursor: this.cursor, cursorOptions: this.opts.cursor });
+  }
+  async #y(t, e, i = !1) {
+    this.statuses.frozen && await new Promise((r) => {
+      this.unfreeze = () => {
+        this.statuses.frozen = !1, r();
+      };
+    }), i || await this.opts.beforeStep(this), await ((r, n, o) => new Promise((a) => {
+      o.push(setTimeout(async () => {
+        await r(), a();
+      }, n || 0));
+    }))(t, e, this.timeouts), i || await this.opts.afterStep(this);
+  }
+  async #m() {
+    if (!this.#l() && this.cursor && this.element.appendChild(this.cursor), this.#g) {
+      ((r, n) => {
+        let o = `[${B}='${r}'] .${y}`, a = getComputedStyle(n), l = Object.entries(ut).reduce((u, [h, c]) => `${u} ${h}: var(--ti-cursor-${h}, ${c || a[h]});`, "");
+        A(`${o} { display: inline-block; width: 0; ${l} }`, r);
+      })(this.id, this.element), this.cursor.dataset.tiAnimationId = this.id;
+      let { animation: t } = this.opts.cursor, { frames: e, options: i } = t;
+      V({ frames: e, cursor: this.cursor, options: { duration: this.opts.cursorSpeed, ...i } });
+    }
+  }
+  #l() {
+    return T(this.element);
+  }
+  #t(t, e) {
+    return this.queue.add(t), this.#I(e), this;
+  }
+  #I(t = {}) {
+    let e = t.delay;
+    e && this.queue.add({ delay: e });
+  }
+  #r(t = {}) {
+    return [{ func: () => this.#n(t) }, { func: () => this.#n(this.opts) }];
+  }
+  async #n(t) {
+    this.opts = I(this.opts, t);
+  }
+  #C() {
+    let t = this.opts.strings.filter((e) => !!e);
+    t.forEach((e, i) => {
+      if (this.type(e), i + 1 === t.length) return;
+      let r = this.opts.breakLines ? [{ func: () => this.#u(P("BR")), typeable: !0 }] : v({ func: this.#o.bind(this), delay: this.#s(1) }, this.queue.getTypeable().length);
+      this.#f(r);
+    });
+  }
+  #v = (t) => {
+    this.opts.cursor = ((e) => {
+      if (typeof e == "object") {
+        let i = {}, { frames: r, options: n } = g.cursor.animation;
+        return i.animation = e.animation || {}, i.animation.frames = e.animation?.frames || r, i.animation.options = I(n, e.animation?.options || {}), i.autoPause = e.autoPause ?? g.cursor.autoPause, i.autoPauseDelay = e.autoPauseDelay || g.cursor.autoPauseDelay, i;
+      }
+      return e === !0 ? g.cursor : e;
+    })(t.cursor ?? g.cursor), this.opts.strings = this.#T(k(this.opts.strings)), this.opts = I(this.opts, { html: !this.#h && this.opts.html, nextStringDelay: _(this.opts.nextStringDelay), loopDelay: _(this.opts.loopDelay) });
+  };
+  #T(t) {
+    let e = this.element.innerHTML;
+    return e ? (this.element.innerHTML = "", this.opts.startDelete ? (this.element.innerHTML = e, L(this.element), this.#f(v({ func: this.#o.bind(this), delay: this.#s(1), deletable: !0 }, this.#e.length)), t) : (i = e, i.replace(/<!--(.+?)-->/g, "").trim().split(/<br(?:\s*?)(?:\/)?>/)).concat(t)) : t;
+    var i;
+  }
+  #P() {
+    if (this.#h) return null;
+    let t = P("span");
+    return t.className = y, this.#g ? (t.innerHTML = K(this.opts.cursorChar).innerHTML, t) : (t.style.visibility = "hidden", t);
+  }
+  #f(t) {
+    let e = this.opts.nextStringDelay;
+    this.queue.add([{ delay: e[0] }, ...t, { delay: e[1] }]);
+  }
+  #u(t) {
+    ((e, i) => {
+      if (T(e)) return void (e.value = `${e.value}${i.textContent}`);
+      i.innerHTML = "";
+      let r = (n = i.originalParent, /body/i.test(n?.tagName) ? e : i.originalParent || e);
+      var n;
+      let o = N("." + y, r) || null;
+      o && o.parentElement !== r && (r = o.parentElement), r.insertBefore(i, o);
+    })(this.element, t);
+  }
+  #o() {
+    this.#e.length && (this.#h ? this.element.value = this.element.value.slice(0, -1) : this.#c(this.#e[this.cursorPosition]));
+  }
+  #c(t) {
+    ((e, i) => {
+      if (!e) return;
+      let r = e.parentNode;
+      (r.childNodes.length > 1 || r.isSameNode(i) ? e : r).remove();
+    })(t, this.element);
+  }
+  #s(t = 0) {
+    return function(e) {
+      let { speed: i, deleteSpeed: r, lifeLike: n } = e;
+      return r = r !== null ? r : i / 3, n ? [$(i, O(i)), $(r, O(r))] : [i, r];
+    }(this.opts)[t];
+  }
+  get #a() {
+    return this.predictedCursorPosition ?? this.cursorPosition;
+  }
+  get #h() {
+    return T(this.element);
+  }
+  get #g() {
+    return !!this.opts.cursor && !this.#h;
+  }
+  get #e() {
+    return t = this.element, T(t) ? j(t.value) : Q(t, !0).filter((e) => !(e.childNodes.length > 0));
+    var t;
+  }
+}
+var dt = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, p = (s, t, e, i) => {
+  for (var r, n = i > 1 ? void 0 : i ? pt(t, e) : t, o = s.length - 1; o >= 0; o--) (r = s[o]) && (n = (i ? r(t, e, n) : r(n)) || n);
+  return i && n && dt(t, e, n), n;
+};
+let d = class extends X(Z`
+	:host {
+		display: inherit;
+	}
+
+	#typewriter {
+		--ti-cursor-display: initial;
+	}
+
+	#typewriter .ti-cursor {
+		display: var(--ti-cursor-display);
+	}
+`) {
+  constructor() {
+    super(...arguments), this.speed = 50, this.delay = 0, this.autoStart = !0, this.cursorChar = "", this.deleteSpeed = 25, this.once = !0, this.typeItInstance = null, this.sessionKey = "";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._destroyTypeIt();
+  }
+  _startTyping() {
+    if (this._destroyTypeIt(), this.sessionKey = this.generateSessionKey(), this.once && sessionStorage.getItem(this.sessionKey) === "true") return void this.shadowRoot?.querySelector("slot")?.removeAttribute("hidden");
+    if (!this.typewriterContainer) return;
+    const s = { speed: this.speed, startDelay: this.delay, cursor: !!this.cursorChar, cursorChar: this.cursorChar, deleteSpeed: this.deleteSpeed, afterComplete: () => {
+      if (this.once) try {
+        sessionStorage.setItem(this.sessionKey, "true");
+      } catch {
+      }
+      this.dispatchEvent(new CustomEvent("typeit-complete", { bubbles: !0, composed: !0 })), this.typewriterContainer.style.setProperty("--ti-cursor-display", "none");
+    } };
+    this.typeItInstance = new ct(this.typewriterContainer, s), this._getSlottedNodes.forEach((t) => {
+      t.nodeType === Node.TEXT_NODE ? this.typeItInstance?.type(t.textContent || "") : t instanceof HTMLElement && this._processCustomElement(t);
+    }), Y(this.shadowRoot?.host).subscribe(() => {
+      this.typeItInstance?.go();
+    });
+  }
+  generateSessionKey() {
+    const s = this._getSlottedElements.map((t) => t.outerHTML).join("");
+    return this.once ? J(s) : "";
+  }
+  _destroyTypeIt() {
+    if (this.typeItInstance) {
+      try {
+        this.typeItInstance.destroy();
+      } catch {
+      }
+      this.typeItInstance = null;
+    }
+  }
+  _processCustomElement(s) {
+    const t = s.getAttribute("action"), e = s.getAttribute("value");
+    switch (t) {
+      case "pause":
+        this.typeItInstance?.pause(parseInt(e || "0", 10));
+        break;
+      case "delete":
+        this.typeItInstance?.delete(parseInt(e || "0", 10));
+        break;
+      default:
+        s.tagName === "P" && this.typeItInstance.break(), this.typeItInstance?.type(s.textContent || "");
+    }
+  }
+  render() {
+    return tt`<div id="typewriter" aria-live="polite"></div>
+
+			<div class="typewriter">
+				<slot
+					hidden
+					@slotchange=${() => {
+      this._startTyping();
+    }}
+				></slot>
+			</div> `;
+  }
+};
+p([f({ type: Number })], d.prototype, "speed", 2), p([W({ context: G, subscribe: !0 }), f({ type: Number })], d.prototype, "delay", 2), p([f({ type: Boolean })], d.prototype, "autoStart", 2), p([f({ type: String })], d.prototype, "cursorChar", 2), p([f({ type: Number })], d.prototype, "deleteSpeed", 2), p([f({ type: Boolean })], d.prototype, "once", 2), p([et("#typewriter")], d.prototype, "typewriterContainer", 2), p([st({ flatten: !0 })], d.prototype, "_getSlottedNodes", 2), p([it({ flatten: !0 })], d.prototype, "_getSlottedElements", 2), d = p([rt("schmancy-typewriter")], d);
+export {
+  d as T
+};
+//# sourceMappingURL=typewriter-P4fs9-rU.js.map