@diniz/webcomponents 1.1.5 → 1.1.7

package/dist/toast-demo-page-DLVacHXA.js

@@ -0,0 +1,260 @@
+var r = Object.defineProperty;
+var h = (i, o, n) => o in i ? r(i, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[o] = n;
+var s = (i, o, n) => h(i, typeof o != "symbol" ? o + "" : o, n);
+import { B as c, d as t, e as a } from "./index-DiYekJaQ.js";
+const d = `<div class="demo-container">
+	<h1>Toast Component Demo</h1>
+	<p>Elegant notification system with smooth animations and glassmorphic design.</p>
+
+	<div class="demo-section">
+		<h2>With Descriptions</h2>
+		<div class="demo-controls">
+			<ui-button id="showSuccessDesc" variant="primary">
+				Success with Details
+			</ui-button>
+			<ui-button id="showErrorDesc" variant="danger">
+				Error with Details
+			</ui-button>
+			<ui-button id="showWarningDesc" variant="secondary">
+				Warning with Details
+			</ui-button>
+		</div>
+	</div>
+
+	<div class="demo-section">
+		<h2>Duration Options</h2>
+		<div class="demo-controls">
+			<ui-button id="showQuick" variant="ghost">
+				Quick (2s)
+			</ui-button>
+			<ui-button id="showNormal" variant="ghost">
+				Normal (5s)
+			</ui-button>
+			<ui-button id="showLong" variant="ghost">
+				Long (10s)
+			</ui-button>
+			<ui-button id="showPersistent" variant="ghost">
+				Persistent (No auto-dismiss)
+			</ui-button>
+		</div>
+	</div>
+
+	<div class="demo-section">
+		<h2>Position Control</h2>
+		<p class="demo-hint">Change toast container position</p>
+		<div class="demo-controls position-grid">
+			<ui-button id="posTopLeft" variant="ghost" size="sm">
+				Top Left
+			</ui-button>
+			<ui-button id="posTopCenter" variant="ghost" size="sm">
+				Top Center
+			</ui-button>
+			<ui-button id="posTopRight" variant="ghost" size="sm">
+				Top Right
+			</ui-button>
+			<ui-button id="posBottomLeft" variant="ghost" size="sm">
+				Bottom Left
+			</ui-button>
+			<ui-button id="posBottomCenter" variant="ghost" size="sm">
+				Bottom Center
+			</ui-button>
+			<ui-button id="posBottomRight" variant="ghost" size="sm">
+				Bottom Right
+			</ui-button>
+		</div>
+	</div>
+
+	<div class="demo-section">
+		<h2>Multiple Toasts</h2>
+		<div class="demo-controls">
+			<ui-button id="showMultiple" variant="primary" icon="layers">
+				Show Multiple Toasts
+			</ui-button>
+			<ui-button id="dismissAll" variant="danger" icon="x">
+				Dismiss All
+			</ui-button>
+		</div>
+	</div>
+
+	
+
+	<div class="current-position">
+		Current position: <strong id="currentPosition">top-right</strong>
+	</div>
+</div>
+
+<!-- Toast Container -->
+<ui-toast id="toastContainer"></ui-toast>
+`, u = `.demo-container {
+	max-width: 1000px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+h1 {
+	font-size: 2rem;
+	font-weight: 700;
+	color: var(--color-ink);
+	margin: 0 0 0.5rem 0;
+}
+
+h1 + p {
+	color: #64748b;
+	margin: 0 0 2rem 0;
+	font-size: 1.05rem;
+}
+
+.demo-section {
+	background: var(--color-muted);
+	border-radius: 12px;
+	padding: 1.5rem;
+	margin-bottom: 1.5rem;
+}
+
+.demo-section h2 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--color-ink);
+	margin: 0 0 0.75rem 0;
+}
+
+.demo-hint {
+	color: #64748b;
+	font-size: 0.9rem;
+	margin: 0 0 0.75rem 0;
+}
+
+.demo-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem;
+	align-items: center;
+}
+
+.position-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 0.5rem;
+}
+
+.current-position {
+	display: inline-block;
+	background: var(--color-primary);
+	color: white;
+	padding: 0.75rem 1.25rem;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	margin-top: 1rem;
+}
+
+.current-position strong {
+	font-weight: 700;
+}
+
+@media (max-width: 768px) {
+	.demo-container {
+		padding: 1rem;
+	}
+
+	h1 {
+		font-size: 1.5rem;
+	}
+
+	.demo-section {
+		padding: 1rem;
+	}
+
+	.position-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+`;
+class l extends c {
+  constructor() {
+    super(...arguments);
+    s(this, "toastContainer", null);
+    s(this, "isReady", !1);
+    s(this, "currentPosition", this.useSignal("top-right"));
+  }
+  async connectedCallback() {
+    super.connectedCallback(), await Promise.all([
+      customElements.whenDefined("ui-toast"),
+      customElements.whenDefined("ui-button")
+    ]), await new Promise((n) => setTimeout(n, 10)), this.isReady = !0, this.render();
+  }
+  showSucessToast() {
+    this.toastContainer && this.toastContainer.success("Success!", "This is a success toast message.", 5e3);
+  }
+  setupEventListeners() {
+    if (!this.toastContainer) return;
+    t(this.shadowRoot, "showError", "click", () => {
+      this.toastContainer.error("Error occurred!", void 0, 5e3);
+    }), t(this.shadowRoot, "showWarning", "click", () => {
+      this.toastContainer.warning("Warning message", void 0, 5e3);
+    }), t(this.shadowRoot, "showInfo", "click", () => {
+      this.toastContainer.info("Information", void 0, 5e3);
+    }), t(this.shadowRoot, "showSuccessDesc", "click", () => {
+      this.toastContainer.success(
+        "Changes saved!",
+        "Your document has been successfully saved to the cloud.",
+        5e3
+      );
+    }), t(this.shadowRoot, "showErrorDesc", "click", () => {
+      this.toastContainer.error(
+        "Failed to connect",
+        "Unable to reach the server. Please check your internet connection.",
+        5e3
+      );
+    }), t(this.shadowRoot, "showWarningDesc", "click", () => {
+      this.toastContainer.warning(
+        "Storage almost full",
+        "You have used 95% of your available storage space.",
+        5e3
+      );
+    }), t(this.shadowRoot, "showQuick", "click", () => {
+      this.toastContainer.info("Quick notification", "This will disappear in 2 seconds", 2e3);
+    }), t(this.shadowRoot, "showNormal", "click", () => {
+      this.toastContainer.info("Normal duration", "This will disappear in 5 seconds", 5e3);
+    }), t(this.shadowRoot, "showLong", "click", () => {
+      this.toastContainer.info("Long duration", "This will disappear in 10 seconds", 1e4);
+    }), t(this.shadowRoot, "showPersistent", "click", () => {
+      this.toastContainer.info(
+        "Persistent notification",
+        "This will stay until you close it manually",
+        0
+      );
+    });
+    const n = (e) => {
+      this.currentPosition.set(e), this.toastContainer.info("Position changed", `Toast position is now ${e}`, 3e3);
+    };
+    t(this.shadowRoot, "posTopLeft", "click", () => {
+      n("top-left");
+    }), t(this.shadowRoot, "posTopCenter", "click", () => {
+      n("top-center");
+    }), t(this.shadowRoot, "posTopRight", "click", () => {
+      n("top-right");
+    }), t(this.shadowRoot, "posBottomLeft", "click", () => {
+      n("bottom-left");
+    }), t(this.shadowRoot, "posBottomCenter", "click", () => {
+      n("bottom-center");
+    }), t(this.shadowRoot, "posBottomRight", "click", () => {
+      n("bottom-right");
+    }), t(this.shadowRoot, "showMultiple", "click", () => {
+      setTimeout(() => this.toastContainer.success("First notification", "This is the first toast"), 0), setTimeout(() => this.toastContainer.info("Second notification", "This is the second toast"), 200), setTimeout(() => this.toastContainer.warning("Third notification", "This is the third toast"), 400), setTimeout(() => this.toastContainer.error("Fourth notification", "This is the fourth toast"), 600);
+    }), t(this.shadowRoot, "dismissAll", "click", () => {
+      this.toastContainer.dismissAll();
+    });
+  }
+  getToastContainer() {
+    return a(this.shadowRoot, "toastContainer");
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>${u}</style>
+      ${d}
+    `;
+    const n = a(this.shadowRoot, "currentPosition");
+    n && (n.textContent = this.currentPosition.get()), this.toastContainer = this.getToastContainer(), this.toastContainer && this.toastContainer.setAttribute("position", this.currentPosition.get()), this.isReady && this.setupEventListeners();
+  }
+}
+customElements.define("toast-demo-page", l);