@diniz/webcomponents 1.1.6 → 1.1.7

package/dist/form-demo-page-F1iLCgfh.js

@@ -0,0 +1,351 @@
+import { B as d, c as l, h as p, v as u, g as f } from "./index-DiYekJaQ.js";
+const g = `<section class="form-hero">
+	<div>			
+		<h1>Form Elements</h1>
+		<p class="hero-subtitle">
+			Bring inputs, selects, checkboxes, uploads, and native fields together in one cohesive flow.
+		</p>
+	</div>	
+</section>
+
+<section class="form-shell">
+	<form id="formLab" class="form-grid">
+		<div class="form-panel">
+			<h2>Project setup</h2>
+			<p>Collect the essentials to launch a workspace.</p>
+
+			<ui-input label="Workspace name" placeholder="Studio Atlas" name="workspace" required></ui-input>
+			<ui-input label="Owner email" type="email" placeholder="owner@company.com" name="ownerEmail" required></ui-input>
+
+			<div class="split">
+				<ui-select id="roleSelect" label="Default role" name="role"></ui-select>
+				<ui-select id="regionSelect" label="Region" name="region"></ui-select>
+				
+			</div>
+			<ui-select id="categorySelect" label="Category" name="category"></ui-select>
+			<ui-date-picker label="Launch date" name="launchDate" placeholder="Select date" format="MM/DD/YYYY"></ui-date-picker>
+
+			<ui-upload
+				label="Brand assets"
+				helper="Upload logos or product shots. PNG, JPG, or SVG."
+				name="brandAssets"
+				accept=".png,.jpg,.jpeg,.svg"
+				multiple
+			></ui-upload>
+		</div>		
+
+		<div class="form-actions">
+			<ui-button type="submit" variant="primary" icon="check">Save form</ui-button>
+			<ui-button type="button" id="resetForm" variant="ghost">Reset</ui-button>
+		</div>
+	</form>
+
+	<div class="form-output">
+		<div class="output-head">
+			<h3>Helper output</h3>
+			<span>getFormValues()</span>
+		</div>
+		<pre id="formResult">Submit the form to see values.</pre>
+	</div>
+</section>
+`, h = `
+	:host {
+		display: block;
+		color: var(--color-ink);
+	}
+
+	.form-hero {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1.5rem;
+		padding: 2rem;
+		border-radius: 20px;
+		background: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),
+			linear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.95));
+		border: 1px solid rgba(52, 168, 235, 0.2);
+		margin-bottom: 2rem;
+		flex-wrap: wrap;
+	}
+
+	.eyebrow {
+		text-transform: uppercase;
+		letter-spacing: 0.2em;
+		font-size: 0.7rem;
+		color: rgba(15, 23, 42, 0.55);
+		margin: 0 0 0.75rem;
+		font-weight: 700;
+	}
+
+	h1 {
+		font-size: 2.4rem;
+		margin: 0 0 0.5rem;
+	}
+
+	.hero-subtitle {
+		max-width: 520px;
+		margin: 0;
+		color: rgba(15, 23, 42, 0.65);
+		font-size: 1rem;
+		line-height: 1.6;
+	}
+
+	.hero-chip {
+		padding: 0.4rem 0.9rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+		background: #0f172a;
+		color: #ffffff;
+		box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
+	}
+
+	.form-shell {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 320px;
+		gap: 2rem;
+	}
+
+	.form-grid {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1.5rem;
+		align-items: start;
+	}
+
+	.form-panel {
+		padding: 1.5rem;
+		border-radius: 16px;
+		border: 1px solid rgba(148, 163, 184, 0.3);
+		background: #ffffff;
+		box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.form-panel h2 {
+		margin: 0;
+		font-size: 1.35rem;
+	}
+
+	.form-panel p {
+		margin: 0;
+		color: rgba(15, 23, 42, 0.6);
+		font-size: 0.95rem;
+	}
+
+	.split {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1rem;
+	}
+
+	textarea {
+		min-height: 120px;
+		padding: 0.75rem 0.85rem;
+		font-size: 0.95rem;
+		font-family: inherit;
+		border: 1.5px solid var(--color-border);
+		border-radius: 8px;
+		background: #ffffff;
+		color: var(--color-ink);
+		transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	}
+
+	textarea:focus {
+		outline: none;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 3px rgba(36, 236, 113, 0.15);
+	}
+
+	.native-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+		font-size: 0.9rem;
+		color: var(--color-ink);
+	}
+
+	.native-group select {
+		padding: 0.65rem 0.85rem;
+		border: 1.5px solid var(--color-border);
+		border-radius: 8px;
+		font-size: 0.95rem;
+		font-family: inherit;
+		background: #ffffff;
+		color: var(--color-ink);
+	}
+
+	.checkbox-stack {
+		display: grid;
+		gap: 0.75rem;
+	}
+
+	.checkbox-inline {
+		display: grid;
+		gap: 0.5rem;
+		font-size: 0.9rem;
+		color: var(--color-ink);
+	}
+
+	.inline-options {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.inline-options label {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	.form-actions {
+		grid-column: 1 / -1;
+		display: flex;
+		gap: 0.75rem;
+		align-items: center;
+	}
+
+	.form-output {
+		background: #0f172a;
+		color: #f8fafc;
+		border-radius: 16px;
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
+		height: fit-content;
+		position: sticky;
+		top: 1.5rem;
+	}
+
+	.output-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 0.85rem;
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+		color: rgba(248, 250, 252, 0.7);
+	}
+
+	.output-head h3 {
+		margin: 0;
+		font-size: 0.95rem;
+		color: #ffffff;
+	}
+
+	pre {
+		margin: 0;
+		white-space: pre-wrap;
+		font-family: "Cascadia Mono", "Fira Code", monospace;
+		font-size: 0.82rem;
+		line-height: 1.5;
+		background: rgba(15, 23, 42, 0.45);
+		padding: 1rem;
+		border-radius: 12px;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+	}
+
+	@media (max-width: 1024px) {
+		.form-shell {
+			grid-template-columns: 1fr;
+		}
+
+		.form-output {
+			position: static;
+		}
+	}
+
+	@media (max-width: 720px) {
+		.form-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.split {
+			grid-template-columns: 1fr;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+	}
+`, b = [
+  { value: "admin", label: "Administrator" },
+  { value: "manager", label: "Manager" },
+  { value: "developer", label: "Developer" },
+  { value: "designer", label: "Designer" }
+], x = [
+  { value: "us-east", label: "US East" },
+  { value: "us-west", label: "US West" },
+  { value: "eu-west", label: "EU West" },
+  { value: "apac", label: "APAC" }
+];
+class y extends d {
+  async connectedCallback() {
+    super.connectedCallback(), await new Promise((t) => requestAnimationFrame(t)), await Promise.all([
+      customElements.whenDefined("ui-select"),
+      customElements.whenDefined("ui-upload"),
+      customElements.whenDefined("ui-input"),
+      customElements.whenDefined("ui-checkbox"),
+      customElements.whenDefined("ui-date-picker")
+    ]), await new Promise((t) => setTimeout(t, 50)), this.setupSelects(), this.setupForm();
+  }
+  async setupSelects() {
+    const t = l(this.shadowRoot, "#roleSelect"), r = l(this.shadowRoot, "#regionSelect"), s = l(this.shadowRoot, "#categorySelect"), o = await p.get("https://dummyjson.com/products/categories");
+    if (t && t.setAttribute("options", JSON.stringify(b)), r && r.setAttribute("options", JSON.stringify(x)), s && Array.isArray(o)) {
+      const a = o.map((i) => ({
+        value: i.slug,
+        label: i.name
+      }));
+      s.setAttribute("options", JSON.stringify(a));
+    }
+  }
+  setupForm() {
+    const t = l(this.shadowRoot, "#formLab"), r = l(this.shadowRoot, "#formResult"), s = l(this.shadowRoot, "#resetForm");
+    if (!t) {
+      console.error("Form not found");
+      return;
+    }
+    t.addEventListener("submit", (o) => {
+      if (o.preventDefault(), !r) return;
+      const a = u(t);
+      if (!a.isValid) {
+        const c = Object.entries(a.errors).map(([e, n]) => `${e}: ${n}`).join(`
+`);
+        r.textContent = `Validation Errors:
+${c}`;
+        return;
+      }
+      const i = f(t, { includeEmpty: !1 }), m = JSON.stringify(i, (c, e) => e instanceof File ? `File: ${e.name} (${(e.size / 1024).toFixed(1)} KB)` : e, 2);
+      r.textContent = m;
+    }), s == null || s.addEventListener("click", () => {
+      var o, a, i, m, c;
+      t == null || t.reset(), r && (r.textContent = "Submit the form to see values."), (o = this.shadowRoot) == null || o.querySelectorAll("ui-input").forEach((e) => {
+        e.value = "";
+      }), (a = this.shadowRoot) == null || a.querySelectorAll("ui-select").forEach((e) => {
+        e.removeAttribute("value");
+      }), (i = this.shadowRoot) == null || i.querySelectorAll("ui-checkbox").forEach((e) => {
+        var n;
+        (n = e.setChecked) == null || n.call(e, !1);
+      }), (m = this.shadowRoot) == null || m.querySelectorAll("ui-date-picker").forEach((e) => {
+        e.removeAttribute("value");
+      }), (c = this.shadowRoot) == null || c.querySelectorAll("ui-upload").forEach((e) => {
+        var n;
+        (n = e.clear) == null || n.call(e);
+      });
+    });
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${h}</style>
+			${g}
+		`;
+  }
+}
+customElements.define("form-demo-page", y);