@transcodes/ui-components 0.3.4 → 0.3.6

package/dist/widgets/tc-offline-modal.js

@@ -1,202 +0,0 @@
-import { LitElement as c, html as h, css as p } from "lit";
-import { property as o, state as f, customElement as v } from "lit/decorators.js";
-import { AnimationController as m } from "../controllers/animation.controller.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (d, a, s, n) => {
-  for (var e = n > 1 ? void 0 : n ? b(a, s) : a, r = d.length - 1, l; r >= 0; r--)
-    (l = d[r]) && (e = (n ? l(a, s, e) : l(e)) || e);
-  return n && e && u(a, s, e), e;
-};
-let t = class extends c {
-  constructor() {
-    super(...arguments), this.title = "No Connection", this.description = "Please check your internet connection and try again.", this.retryLabel = "Try Again", this.autoDetect = !0, this.isOffline = !1, this.animation = new m(this, {
-      showDuration: 300,
-      hideDuration: 200
-    }), this.handleOnline = () => {
-      this.isOffline = !1, this.hide(), this.dispatchEvent(
-        new CustomEvent("tc-online", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this.handleOffline = () => {
-      this.isOffline = !0, this.show(), this.dispatchEvent(
-        new CustomEvent("tc-offline", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.autoDetect && (this.isOffline = !navigator.onLine, this.isOffline && this.show(), window.addEventListener("online", this.handleOnline), window.addEventListener("offline", this.handleOffline));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("online", this.handleOnline), window.removeEventListener("offline", this.handleOffline);
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    await this.animation.show(), this.updateDataState();
-  }
-  async hide() {
-    await this.animation.hide(), this.updateDataState();
-  }
-  handleRetry() {
-    this.dispatchEvent(
-      new CustomEvent("tc-retry", {
-        bubbles: !0,
-        composed: !0
-      })
-    ), navigator.onLine && this.handleOnline();
-  }
-  render() {
-    return h`
-      <div part="overlay" class="overlay">
-        <div
-          part="modal"
-          class="modal"
-          role="alertdialog"
-          aria-modal="true"
-          aria-labelledby="offline-title"
-          aria-describedby="offline-description"
-        >
-          <div part="icon" class="icon-container">
-            <tc-icon name="wifi-off" size="2rem"></tc-icon>
-          </div>
-          <tc-section part="content" class="content" gap="var(--space-sm)">
-            <tc-text
-              id="offline-title"
-              part="title"
-              class="title"
-              tag="h2"
-              size="lg"
-              weight="600"
-            >
-              ${this.title}
-            </tc-text>
-            <tc-text
-              id="offline-description"
-              part="description"
-              size="base"
-              color="tertiary"
-            >
-              ${this.description}
-            </tc-text>
-          </tc-section>
-          <div part="action" class="action">
-            <tc-button variant="primary" @tc-click=${this.handleRetry}>
-              ${this.retryLabel}
-            </tc-button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-t.styles = [
-  y,
-  p`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1001;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-lg);
-      background: var(--overlay-dark);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      max-width: 320px;
-      padding: var(--space-xl);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 20px 60px var(--overlay-shadow-heavy);
-      text-align: center;
-      transform: scale(0.95);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: scale(1);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: scale(0.95);
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      margin-bottom: var(--space-lg);
-      background: var(--error-bg);
-      border-radius: var(--radius-full);
-      color: var(--error-base);
-    }
-
-    .content {
-      margin-bottom: var(--space-xl);
-    }
-
-    .title {
-      margin-bottom: var(--space-sm);
-    }
-
-    .action {
-      width: 100%;
-    }
-  `
-];
-i([
-  o({ type: String })
-], t.prototype, "title", 2);
-i([
-  o({ type: String })
-], t.prototype, "description", 2);
-i([
-  o({ type: String, attribute: "retry-label" })
-], t.prototype, "retryLabel", 2);
-i([
-  o({ type: Boolean, attribute: "auto-detect" })
-], t.prototype, "autoDetect", 2);
-i([
-  f()
-], t.prototype, "isOffline", 2);
-t = i([
-  v("tc-offline-modal")
-], t);
-export {
-  t as TcOfflineModal
-};