@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

package/src/components/page-layout/page-layout.ts

@@ -1,41 +1,44 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-export type LayoutVariant = 'app-shell' | 'content-sidebar' | 'single-column' | 'three-column';
+export type LayoutVariant = "app-shell" | "content-sidebar" | "single-column" | "three-column";
 
-@customElement('st-page-layout')
+@customElement("st-page-layout")
 export class StPageLayout extends LitElement {
   /**
    * Defines the structural layout variant to render.
    */
-  @property({ type: String, reflect: true })
-  variant: LayoutVariant = 'single-column';
+  @property({type: String, reflect: true})
+  variant: LayoutVariant = "single-column";
 
   /**
    * Maximum width for the left sidebar section (e.g., '20rem', '300px').
    */
-  @property({ type: String, attribute: 'sidebar-width' })
-  sidebarWidth = '';
+  @property({type: String, attribute: "sidebar-width"})
+  sidebarWidth = "";
 
   /**
    * Maximum width for the right sidebar section (e.g., '16rem', '250px').
    */
-  @property({ type: String, attribute: 'right-sidebar-width' })
-  rightSidebarWidth = '';
+  @property({type: String, attribute: "right-sidebar-width"})
+  rightSidebarWidth = "";
 
   /**
    * Optional maximum width for the main content area (e.g., '48rem', '800px').
    */
-  @property({ type: String, attribute: 'main-max-width' })
-  mainMaxWidth = '';
+  @property({type: String, attribute: "main-max-width"})
+  mainMaxWidth = "";
 
   /**
    * When true, expands the main content area to fill 100% of the available width between sidebars.
    */
-  @property({ type: Boolean, attribute: 'fill-main', reflect: true })
+  @property({type: Boolean, attribute: "fill-main", reflect: true})
   fillMain = false;
 
+  @property({type: Boolean, attribute: "clear-footer-padding", reflect: true})
+  clearFooterPadding = false;
+
   @state()
   private _mobileMenuOpen = false;
 
@@ -46,27 +49,27 @@ export class StPageLayout extends LitElement {
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('sidebarWidth')) {
+    if (changedProperties.has("sidebarWidth")) {
       if (this.sidebarWidth) {
-        this.style.setProperty('--layout-sidebar-width', this.sidebarWidth);
+        this.style.setProperty("--layout-sidebar-width", this.sidebarWidth);
       } else {
-        this.style.removeProperty('--layout-sidebar-width');
+        this.style.removeProperty("--layout-sidebar-width");
       }
     }
 
-    if (changedProperties.has('rightSidebarWidth')) {
+    if (changedProperties.has("rightSidebarWidth")) {
       if (this.rightSidebarWidth) {
-        this.style.setProperty('--layout-right-sidebar-width', this.rightSidebarWidth);
+        this.style.setProperty("--layout-right-sidebar-width", this.rightSidebarWidth);
       } else {
-        this.style.removeProperty('--layout-right-sidebar-width');
+        this.style.removeProperty("--layout-right-sidebar-width");
       }
     }
 
-    if (changedProperties.has('mainMaxWidth')) {
+    if (changedProperties.has("mainMaxWidth")) {
       if (this.mainMaxWidth) {
-        this.style.setProperty('--layout-main-max-width', this.mainMaxWidth);
+        this.style.setProperty("--layout-main-max-width", this.mainMaxWidth);
       } else {
-        this.style.removeProperty('--layout-main-max-width');
+        this.style.removeProperty("--layout-main-max-width");
       }
     }
   }
@@ -82,9 +85,9 @@ export class StPageLayout extends LitElement {
   // Only close if an actual navigation link/item was clicked
   private _handleNavClick = (e: MouseEvent) => {
     const path = e.composedPath();
-    const clickedLink = path.some(node => {
+    const clickedLink = path.some((node) => {
       const el = node as HTMLElement;
-      return el.tagName === 'A' || el.tagName === 'ST-VERTICAL-NAV-ITEM';
+      return el.tagName === "A" || el.tagName === "ST-VERTICAL-NAV-ITEM";
     });
 
     if (clickedLink) {
@@ -97,7 +100,7 @@ export class StPageLayout extends LitElement {
     this._touchStartX = e.touches[0].clientX;
     this._isDragging = true;
     const sidebar = e.currentTarget as HTMLElement;
-    sidebar.style.transition = 'none';
+    sidebar.style.transition = "none";
   };
 
   private _handleTouchMove = (e: TouchEvent) => {
@@ -116,13 +119,13 @@ export class StPageLayout extends LitElement {
     if (!this._isDragging || window.innerWidth >= 768) return;
     this._isDragging = false;
     const sidebar = e.currentTarget as HTMLElement;
-    sidebar.style.transition = '';
+    sidebar.style.transition = "";
 
     if (this._currentTranslateX < -70) {
       this._closeMobileMenu();
-      sidebar.style.transform = '';
+      sidebar.style.transform = "";
     } else {
-      sidebar.style.transform = '';
+      sidebar.style.transform = "";
     }
     this._currentTranslateX = 0;
   };
@@ -135,12 +138,12 @@ export class StPageLayout extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('resize', this._resizeListener);
+    window.addEventListener("resize", this._resizeListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('resize', this._resizeListener);
+    window.removeEventListener("resize", this._resizeListener);
   }
 
   static styles = [
@@ -158,7 +161,9 @@ export class StPageLayout extends LitElement {
         --layout-nav-height: 4rem;
       }
 
-      *, *::before, *::after {
+      *,
+      *::before,
+      *::after {
         box-sizing: inherit;
       }
 
@@ -283,7 +288,7 @@ export class StPageLayout extends LitElement {
         overflow: hidden;
         background-color: var(--layout-surface-color);
       }
-      
+
       .app-shell-sidebar {
         display: none;
         border-right: 1px solid var(--layout-border-color);
@@ -294,14 +299,14 @@ export class StPageLayout extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-      
+
       .app-shell-content {
         display: flex;
         flex-direction: column;
         flex: 1;
         width: 100%;
       }
-      
+
       .app-shell-nav {
         height: var(--layout-nav-height);
         border-bottom: 1px solid var(--layout-border-color);
@@ -310,13 +315,13 @@ export class StPageLayout extends LitElement {
         align-items: center;
         padding: 0 var(--st-spacing-md);
       }
-      
+
       .app-shell-main {
         flex: 1;
         overflow-y: auto;
         padding: var(--st-spacing-lg);
       }
-      
+
       .app-shell-footer {
         background: var(--layout-bg-color);
         border-top: 1px solid var(--layout-border-color);
@@ -342,12 +347,12 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         background: var(--layout-bg-color);
       }
-      
+
       .content-sidebar-nav {
         border-bottom: 1px solid var(--layout-border-color);
         background: var(--layout-bg-color);
       }
-      
+
       .content-sidebar-container {
         flex: 1;
         width: 100%;
@@ -358,17 +363,17 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         gap: var(--st-spacing-xl);
       }
-      
+
       .content-sidebar-main {
         flex: 1;
         max-width: 48rem;
       }
-      
+
       .content-sidebar-aside {
         width: 100%;
         flex-shrink: 0;
       }
-      
+
       .content-sidebar-footer {
         margin-top: auto;
         border-top: 1px solid var(--layout-border-color);
@@ -399,7 +404,7 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         background: var(--layout-bg-color);
       }
-      
+
       .single-column-nav {
         position: sticky;
         top: 0;
@@ -408,13 +413,13 @@ export class StPageLayout extends LitElement {
         background: var(--layout-bg-color);
         border-bottom: 1px solid var(--layout-border-color);
       }
-      
+
       .single-column-main {
         flex: 1;
         display: flex;
         flex-direction: column;
       }
-      
+
       .single-column-footer {
         margin-top: auto;
       }
@@ -502,6 +507,10 @@ export class StPageLayout extends LitElement {
         padding: var(--st-spacing-lg);
       }
 
+      :host([clear-footer-padding]) footer {
+        padding: 0;
+      }
+
       @media (min-width: 768px) {
         .three-column-sidebar-left {
           display: block;
@@ -548,19 +557,23 @@ export class StPageLayout extends LitElement {
           overflow-y: auto;
         }
       }
-    `
+    `,
   ];
 
   render() {
     const backdrop = html`
-      <div 
-        class="mobile-backdrop ${this._mobileMenuOpen ? 'open' : ''}" 
+      <div
+        class="mobile-backdrop ${this._mobileMenuOpen ? "open" : ""}"
         @click=${this._closeMobileMenu}
       ></div>
     `;
 
     const hamburgerBtn = html`
-      <button class="mobile-menu-btn" @click=${this._toggleMobileMenu} aria-label="Open Navigation Menu">
+      <button
+        class="mobile-menu-btn"
+        @click=${this._toggleMobileMenu}
+        aria-label="Open Navigation Menu"
+      >
         <svg viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"></path></svg>
       </button>
     `;
@@ -568,18 +581,23 @@ export class StPageLayout extends LitElement {
     const drawerHeader = html`
       <div class="mobile-drawer-header">
         <span class="mobile-drawer-title">Menu</span>
-        <button class="mobile-close-btn" @click=${this._closeMobileMenu} aria-label="Close Navigation Menu">
+        <button
+          class="mobile-close-btn"
+          @click=${this._closeMobileMenu}
+          aria-label="Close Navigation Menu"
+        >
           <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"></path></svg>
         </button>
       </div>
     `;
 
-    if (this.variant === 'app-shell') {
+    if (this.variant === "app-shell") {
       return html`
         ${backdrop}
         <div class="layout-app-shell">
-          <aside 
-            class="app-shell-sidebar ${this._mobileMenuOpen ? 'open' : ''}" 
+          <aside
+            class="app-shell-sidebar ${this._mobileMenuOpen ? "open" : ""}"
+            aria-label="Primary Sidebar"
             @click=${this._handleNavClick}
             @touchstart=${this._handleTouchStart}
             @touchmove=${this._handleTouchMove}
@@ -590,17 +608,17 @@ export class StPageLayout extends LitElement {
               <slot name="sidebar"></slot>
             </div>
           </aside>
-          
+
           <div class="app-shell-content">
             <header class="app-shell-nav">
               ${hamburgerBtn}
               <slot name="nav"></slot>
             </header>
-            
+
             <main class="app-shell-main">
               <slot></slot>
             </main>
-            
+
             <footer class="app-shell-footer">
               <slot name="footer"></slot>
             </footer>
@@ -609,27 +627,29 @@ export class StPageLayout extends LitElement {
       `;
     }
 
-    if (this.variant === 'content-sidebar') {
+    if (this.variant === "content-sidebar") {
       return html`
         <div class="layout-content-sidebar">
           <header class="content-sidebar-nav">
-            <div style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);">
+            <div
+              style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);"
+            >
               <slot name="nav"></slot>
             </div>
           </header>
-          
+
           <div class="content-sidebar-container">
             <main class="content-sidebar-main">
               <slot></slot>
             </main>
-            
-            <aside class="content-sidebar-aside">
+
+            <aside class="content-sidebar-aside" aria-label="Related Content">
               <div class="content-sidebar-aside-inner">
                 <slot name="aside"></slot>
               </div>
             </aside>
           </div>
-          
+
           <footer class="content-sidebar-footer">
             <slot name="footer"></slot>
           </footer>
@@ -637,7 +657,7 @@ export class StPageLayout extends LitElement {
       `;
     }
 
-    if (this.variant === 'three-column') {
+    if (this.variant === "three-column") {
       return html`
         ${backdrop}
         <div class="layout-three-column">
@@ -647,8 +667,9 @@ export class StPageLayout extends LitElement {
           </header>
 
           <div class="three-column-body">
-            <aside 
-              class="three-column-sidebar-left ${this._mobileMenuOpen ? 'open' : ''}" 
+            <aside
+              class="three-column-sidebar-left ${this._mobileMenuOpen ? "open" : ""}"
+              aria-label="Primary Sidebar"
               @click=${this._handleNavClick}
               @touchstart=${this._handleTouchStart}
               @touchmove=${this._handleTouchMove}
@@ -664,7 +685,7 @@ export class StPageLayout extends LitElement {
               <slot></slot>
             </main>
 
-            <aside class="three-column-sidebar-right">
+            <aside class="three-column-sidebar-right" aria-label="Secondary Sidebar">
               <div class="three-column-sidebar-right-inner">
                 <slot name="sidebar-right"></slot>
               </div>
@@ -681,16 +702,20 @@ export class StPageLayout extends LitElement {
     return html`
       <div class="layout-single-column">
         <header class="single-column-nav">
-          <div style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);">
+          <div
+            style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);"
+          >
             <slot name="nav"></slot>
           </div>
         </header>
-        
+
         <main class="single-column-main">
           <slot></slot>
         </main>
-        
-        <footer class="single-column-footer">
+
+        <footer
+          class="single-column-footer ${this.clearFooterPadding ? "clear-footer-padding" : ""}"
+        >
           <slot name="footer"></slot>
         </footer>
       </div>
@@ -700,6 +725,6 @@ export class StPageLayout extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-page-layout': StPageLayout;
+    "st-page-layout": StPageLayout;
   }
-}
+}

package/src/components/pin-input/pin-input.ts

@@ -0,0 +1,249 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAll, state} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-pin-input")
+export class StPinInput extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+  @property({type: Number}) length = 6;
+  @property({type: String}) value = "";
+
+  // Obscures the input for secure PINs
+  @property({type: Boolean}) mask = false;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: String}) error = "";
+
+  @queryAll(".pin-box") private _inputs!: NodeListOf<HTMLInputElement>;
+
+  @state() private _touched = false;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: inherit;
+      }
+
+      label {
+        display: block;
+        font-size: var(--st-font-size-sm);
+        font-weight: 500;
+        color: var(--st-color-text-muted);
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .pin-container {
+        display: flex;
+        gap: var(--st-spacing-sm);
+      }
+
+      .pin-box {
+        width: 48px;
+        height: 56px;
+        text-align: center;
+        font-size: var(--st-font-size-xl);
+        font-weight: var(--st-font-weight-semibold);
+        color: var(--st-color-text);
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-sizing: border-box;
+        transition:
+          border-color 0.2s,
+          box-shadow 0.2s,
+          background-color 0.2s;
+        /* iOS optimization for numeric pads */
+        caret-color: var(--st-color-primary);
+      }
+
+      .pin-box:focus {
+        outline: none;
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+      }
+
+      .pin-box:disabled {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        color: var(--st-color-text-muted);
+        cursor: not-allowed;
+      }
+
+      .is-invalid .pin-box {
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      .error-msg {
+        display: block;
+        margin-top: var(--st-spacing-xs);
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-danger, #dc2626);
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("required") ||
+      changedProperties.has("error")
+    ) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    this.invalid = false;
+
+    if (this.error) {
+      this._internals.setValidity({customError: true}, this.error);
+      this.invalid = true;
+      return;
+    }
+
+    if (this.required && (this.value.length < this.length || this.value.includes(" "))) {
+      this._internals.setValidity({valueMissing: true}, `Please enter all ${this.length} digits.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    this._internals.setValidity({});
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    this._touched = true;
+    this._syncValidity();
+    return this._internals.reportValidity();
+  }
+
+  private _updateValue() {
+    const chars = Array.from(this._inputs).map((input) => input.value || " ");
+    this.value = chars.join("");
+
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+
+    // Only fire 'change' if the pin is completely filled
+    if (!this.value.includes(" ")) {
+      this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    }
+  }
+
+  // Handle typing and auto-advancing
+  private _handleInput(e: InputEvent, index: number) {
+    this._touched = true;
+    const input = e.target as HTMLInputElement;
+
+    // If the user typed a character, move to the next input
+    if (input.value && index < this.length - 1) {
+      this._inputs[index + 1].focus();
+    }
+
+    this._updateValue();
+  }
+
+  // Handle backspace rewinding and arrow keys
+  private _handleKeyDown(e: KeyboardEvent, index: number) {
+    const input = e.target as HTMLInputElement;
+
+    if (e.key === "Backspace") {
+      // If current box is empty, jump to previous box and clear it
+      if (!input.value && index > 0) {
+        e.preventDefault();
+        this._inputs[index - 1].value = "";
+        this._inputs[index - 1].focus();
+        this._updateValue();
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      this._inputs[index - 1].focus();
+    } else if (e.key === "ArrowRight" && index < this.length - 1) {
+      e.preventDefault();
+      this._inputs[index + 1].focus();
+    }
+  }
+
+  // Handle cross-field pasting (e.g. pasting "123456" into the first box)
+  private _handlePaste(e: ClipboardEvent, startIndex: number) {
+    e.preventDefault();
+    this._touched = true;
+
+    const pasteData = e.clipboardData?.getData("text") || "";
+    // Clean the string (optional: restrict to numbers if you want strict numeric PINs)
+    const chars = pasteData.replace(/\s/g, "").split("");
+
+    if (!chars.length) return;
+
+    let currentIndex = startIndex;
+    for (const char of chars) {
+      if (currentIndex < this.length) {
+        this._inputs[currentIndex].value = char;
+        currentIndex++;
+      }
+    }
+
+    // Focus the last filled input (or the very last input if we filled them all)
+    const focusIndex = Math.min(currentIndex, this.length - 1);
+    this._inputs[focusIndex].focus();
+
+    this._updateValue();
+  }
+
+  render() {
+    // Break the current value into an array of characters for rendering
+    const values = this.value.padEnd(this.length, " ").split("");
+
+    const isInvalid = this.invalid || !!this.error;
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : ""}
+
+      <div class=${classMap({"pin-container": true, "is-invalid": isInvalid})}>
+        ${values
+          .slice(0, this.length)
+          .map(
+            (char, index) => html`
+              <input
+                class="pin-box"
+                aria-label="Digit ${index + 1}"
+                type=${this.mask ? "password" : "text"}
+                inputmode="numeric"
+                autocomplete="${"one-time-code" as any}"
+                maxlength="1"
+                .value=${char.trim()}
+                ?disabled=${this.disabled}
+                @input=${(e: InputEvent) => this._handleInput(e, index)}
+                @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}
+                @paste=${(e: ClipboardEvent) => this._handlePaste(e, index)}
+              />
+            `,
+          )}
+      </div>
+
+      ${isInvalid && this.error ? html`<span class="error-msg">${this.error}</span>` : ""}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pin-input": StPinInput;
+  }
+}