ds-one 0.2.5-alpha.9 → 0.3.0-alpha.2

package/DS1/3-unit/ds-form.ts

@@ -0,0 +1,304 @@
+// ds-form.ts
+// Form component for handling form submissions and validation
+
+import { LitElement, html, css } from "lit";
+
+export interface FormData {
+  [key: string]: string | number | boolean | null;
+}
+
+export interface FormValidationResult {
+  valid: boolean;
+  errors: { [key: string]: string };
+}
+
+export class Form extends LitElement {
+  static properties = {
+    action: { type: String },
+    method: { type: String },
+    name: { type: String },
+    novalidate: { type: Boolean, reflect: true },
+    autocomplete: { type: String },
+    _isSubmitting: { type: Boolean, state: true },
+  };
+
+  declare action: string;
+  declare method: "get" | "post";
+  declare name: string;
+  declare novalidate: boolean;
+  declare autocomplete: "on" | "off";
+  declare _isSubmitting: boolean;
+
+  constructor() {
+    super();
+    this.action = "";
+    this.method = "post";
+    this.name = "";
+    this.novalidate = false;
+    this.autocomplete = "on";
+    this._isSubmitting = false;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--05) * var(--sf, 1));
+      width: 100%;
+    }
+
+    ::slotted(*) {
+      width: 100%;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  `;
+
+  /**
+   * Get all form data as an object
+   */
+  getFormData(): FormData {
+    const data: FormData = {};
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+
+    for (const element of elements) {
+      this._collectFormData(element as HTMLElement, data);
+    }
+
+    return data;
+  }
+
+  private _collectFormData(element: HTMLElement, data: FormData): void {
+    // Check if element has name and value properties
+    const name = element.getAttribute("name") || (element as any).name;
+    if (name) {
+      const value = (element as any).value;
+      if (value !== undefined) {
+        // Handle checkboxes and radio buttons
+        if (
+          element instanceof HTMLInputElement &&
+          (element.type === "checkbox" || element.type === "radio")
+        ) {
+          if (element.type === "checkbox") {
+            data[name] = element.checked;
+          } else if (element.type === "radio" && element.checked) {
+            data[name] = value;
+          }
+        } else {
+          data[name] = value;
+        }
+      }
+    }
+
+    // Recursively check children
+    const children =
+      element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._collectFormData(child as HTMLElement, data);
+    });
+  }
+
+  /**
+   * Validate the form
+   */
+  validate(): FormValidationResult {
+    const result: FormValidationResult = {
+      valid: true,
+      errors: {},
+    };
+
+    if (this.novalidate) {
+      return result;
+    }
+
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+
+    for (const element of elements) {
+      this._validateElement(element as HTMLElement, result);
+    }
+
+    return result;
+  }
+
+  private _validateElement(
+    element: HTMLElement,
+    result: FormValidationResult
+  ): void {
+    const name = element.getAttribute("name") || (element as any).name;
+
+    // Check for custom validation on ds-input elements
+    if (element.tagName.toLowerCase() === "ds-input") {
+      const input = element as any;
+      if (input.required && !input.value) {
+        result.valid = false;
+        result.errors[name || "unknown"] = "This field is required";
+      }
+    }
+
+    // Check native form elements
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (!element.checkValidity()) {
+        result.valid = false;
+        result.errors[name || "unknown"] = element.validationMessage;
+      }
+    }
+
+    // Recursively check children
+    const children =
+      element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._validateElement(child as HTMLElement, result);
+    });
+  }
+
+  /**
+   * Reset the form
+   */
+  reset(): void {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+
+    for (const element of elements) {
+      this._resetElement(element as HTMLElement);
+    }
+
+    this.dispatchEvent(new CustomEvent("form-reset", { bubbles: true }));
+  }
+
+  private _resetElement(element: HTMLElement): void {
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        element.checked = false;
+      } else {
+        element.value = "";
+      }
+    }
+
+    // Handle ds-input elements
+    if (element.tagName.toLowerCase() === "ds-input") {
+      (element as any).value = "";
+    }
+
+    // Recursively reset children
+    const children =
+      element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._resetElement(child as HTMLElement);
+    });
+  }
+
+  /**
+   * Submit the form
+   */
+  async submit(): Promise<void> {
+    if (this._isSubmitting) return;
+
+    const validationResult = this.validate();
+    if (!validationResult.valid) {
+      this.dispatchEvent(
+        new CustomEvent("form-invalid", {
+          detail: validationResult.errors,
+          bubbles: true,
+        })
+      );
+      return;
+    }
+
+    this._isSubmitting = true;
+    const formData = this.getFormData();
+
+    this.dispatchEvent(
+      new CustomEvent("form-submit", {
+        detail: { data: formData },
+        bubbles: true,
+      })
+    );
+
+    // If action is provided, submit to the server
+    if (this.action) {
+      try {
+        const response = await fetch(this.action, {
+          method: this.method.toUpperCase(),
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        this.dispatchEvent(
+          new CustomEvent("form-response", {
+            detail: { response, data: formData },
+            bubbles: true,
+          })
+        );
+      } catch (error) {
+        this.dispatchEvent(
+          new CustomEvent("form-error", {
+            detail: { error, data: formData },
+            bubbles: true,
+          })
+        );
+      }
+    }
+
+    this._isSubmitting = false;
+  }
+
+  private _handleSubmit(e: Event): void {
+    e.preventDefault();
+    this.submit();
+  }
+
+  private _handleKeydown(e: KeyboardEvent): void {
+    if (e.key === "Enter" && !e.shiftKey) {
+      const target = e.target as HTMLElement;
+      // Don't submit if in a textarea
+      if (target.tagName.toLowerCase() !== "textarea") {
+        e.preventDefault();
+        this.submit();
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <form
+        .action=${this.action}
+        .method=${this.method}
+        .name=${this.name}
+        ?novalidate=${this.novalidate}
+        autocomplete=${this.autocomplete}
+        @submit=${this._handleSubmit}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </form>
+    `;
+  }
+}
+
+customElements.define("ds-form", Form);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-form": Form;
+  }
+}

package/DS1/3-unit/ds-list.ts

@@ -1,21 +1,12 @@
-// ds-banner.ts
+// ds-list.ts
 // Unit component that
-// can be used to show a list of items consiting of compoentnts from core
+// can be used to show a list of items consisting of components from core
 
-
-
-
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-list.css?inline";
 
 export class List extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     return html`<slot></slot>`;

package/DS1/3-unit/ds-row.ts

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-row.css?inline";
 
 declare global {
   interface CustomElementRegistry {
@@ -19,24 +20,7 @@ export class Row extends LitElement {
     this.type = "fill";
   }
 
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--sf));
-    }
-
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--sf));
-    }
-
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--sf));
-      gap: calc(var(--025) * var(--sf));
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     return html`<slot></slot>`;

package/DS1/3-unit/ds-table.ts

@@ -1,7 +1,8 @@
 // ds-table.ts
 // Data table component
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-table.css?inline";
 
 export interface TableRow {
   product: string;
@@ -28,96 +29,12 @@ export class DsTable extends LitElement {
     this.showStatus = true;
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .table-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    .table-header {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      height: 20px;
-      width: 400px;
-    }
-
-    .table-body {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      border: 1px solid var(--black);
-      width: 400px;
-    }
-
-    .header-cell {
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      padding:  0 2px;
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .data-cell {
-      height: 20px;
-      margin-top: -1px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-    
-      outline: 1px solid var(--black);
-
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .status-cell {
-      background-color: var(--light-green);
-    }
-
-    .product-cell {
-      text-align: left;
-      justify-content: flex-start;
-    }
-
-    .users-cell,
-    .retention-cell {
-      text-align: center;
-    }
-
-    .status-cell {
-      text-align: center;
-    }
-
-    /* Responsive adjustments */
-    @media (max-width: 480px) {
-      .table-header,
-      .table-body {
-        width: 100%;
-        grid-template-columns: 1fr 60px 60px 60px;
-      }
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     return html`
       <div class="table-container">
         <div class="table-header">
-        
           <div class="header-cell product-cell">Product</div>
           <div class="header-cell users-cell">Users</div>
           <div class="header-cell retention-cell">Retention</div>

package/DS1/3-unit/styles/ds-accordion.css

@@ -0,0 +1,46 @@
+/* ds-accordion.css */
+/* Accordion component styles using native <details>/<summary> */
+
+:host {
+  display: block;
+  width: calc(240px * var(--sf));
+  color: var(--text-color-primary);
+}
+
+details {
+  width: 100%;
+}
+
+summary {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  outline: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.summaryRow {
+  width: 100%;
+}
+
+ds-icon.chevron {
+  transform: rotate(0deg);
+  transition: transform 140ms ease;
+}
+
+details[open] ds-icon.chevron {
+  transform: rotate(180deg);
+}
+
+.detailsBody {
+  padding-top: calc(var(--half) * var(--sf));
+}
+
+.detailsText {
+  display: block;
+  white-space: normal;
+  text-align: left;
+}

package/DS1/3-unit/styles/ds-list.css

@@ -0,0 +1,9 @@
+/* ds-list.css */
+/* List component styles for displaying a list of items */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+}

package/DS1/3-unit/styles/ds-row.css

@@ -0,0 +1,19 @@
+/* ds-row.css */
+/* Row component styles */
+
+:host {
+  display: flex;
+  align-items: end;
+  width: calc(240px * var(--sf));
+}
+
+:host([type="fill"]) {
+  justify-content: space-between;
+  height: calc(var(--1) * var(--sf));
+}
+
+:host([type="centered"]) {
+  justify-content: center;
+  height: calc(var(--1) * var(--sf));
+  gap: calc(var(--025) * var(--sf));
+}

package/DS1/3-unit/styles/ds-table.css

@@ -0,0 +1,80 @@
+/* ds-table.css */
+/* Data table component styles */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 160px 80px 80px 80px;
+  height: 20px;
+  width: 400px;
+}
+
+.table-body {
+  display: grid;
+  grid-template-columns: 160px 80px 80px 80px;
+  border: 1px solid var(--black);
+  width: 400px;
+}
+
+.header-cell {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  padding: 0 2px;
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: var(--type-lineheight-default);
+  color: var(--black);
+  letter-spacing: -0.26px;
+}
+
+.data-cell {
+  height: 20px;
+  margin-top: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  outline: 1px solid var(--black);
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: var(--type-lineheight-default);
+  color: var(--black);
+  letter-spacing: -0.26px;
+}
+
+.status-cell {
+  background-color: var(--apple-green);
+  text-align: center;
+}
+
+.product-cell {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.users-cell,
+.retention-cell {
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .table-header,
+  .table-body {
+    width: 100%;
+    grid-template-columns: 1fr 60px 60px 60px;
+  }
+}

package/DS1/4-page/ds-container.ts

@@ -0,0 +1,28 @@
+// ds-container.ts
+// Container component with responsive width constraints
+
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-container.css?inline";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Container extends LitElement {
+  static styles = unsafeCSS(styles);
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define("ds-container", Container);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-container": Container;
+  }
+}