@erplora/outfitkit 0.1.8 → 0.1.9

package/dist/components/ok-pinpad/ok-pinpad.d.ts

@@ -13,13 +13,33 @@ export declare class OkPinpad extends LitElement {
     length?: number;
     /** Enmascara la pantalla con •. */
     masked: boolean;
+    /**
+     * Pantalla como N círculos grandes (estilo PIN clásico) en vez de la barra con
+     * puntitos. Requiere `length` (cuántos círculos). Implica enmascarado.
+     */
+    dots: boolean;
+    /** Tiñe la pantalla de error (rojo). Útil para «PIN incorrecto». */
+    error: boolean;
+    /**
+     * Tecla de acción secundaria opcional (esquina inferior IZQUIERDA, junto al 0).
+     * Si se define, ocupa el hueco de la izquierda con el icono indicado (p.ej.
+     * `arrow-back-outline` para «cambiar usuario») y el borrado se queda en su sitio
+     * de siempre (derecha). Al pulsarla emite `ok-secondary`. Si NO se define, el
+     * layout es el de siempre: `[hueco] [0] [borrar]` (compatible hacia atrás).
+     */
+    secondaryIcon?: string;
+    /** aria-label de la tecla de acción secundaria. */
+    secondaryLabel?: string;
     /** Textos traducibles (merge sobre los defaults en inglés). */
     labels: Partial<OkPinpadLabels>;
     private get t();
     private press;
     private backspace;
     private emitInput;
+    private secondary;
+    private renderBackspace;
     private renderDisplay;
+    private renderCircles;
     render(): unknown;
 }
 declare global {

package/dist/ok-pinpad.js

@@ -19,6 +19,8 @@ class OkPinpad extends LitElement {
     super(...arguments);
     this.value = "";
     this.masked = false;
+    this.dots = false;
+    this.error = false;
     this.labels = {};
   }
   static {
@@ -67,6 +69,33 @@ class OkPinpad extends LitElement {
       font-weight: 400;
       font-size: 1rem;
     }
+    /* Variante dots: N círculos grandes (estilo PIN clásico), sin barra de fondo. */
+    .circles {
+      min-height: 2.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ok-pinpad-circle-gap, 0.9rem);
+    }
+    .circle {
+      width: var(--ok-pinpad-circle-size, 1rem);
+      height: var(--ok-pinpad-circle-size, 1rem);
+      border-radius: 50%;
+      border: 2px solid var(--ok-pinpad-circle-border, var(--ion-color-medium, #92949c));
+      background: transparent;
+      box-sizing: border-box;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .circle.filled {
+      background: var(--dot-color);
+      border-color: var(--dot-color);
+    }
+    .circles.error .circle {
+      border-color: var(--ion-color-danger, #eb445a);
+    }
+    .circles.error .circle.filled {
+      background: var(--ion-color-danger, #eb445a);
+    }
     /* Rejilla de teclas 3×4. */
     .grid {
       display: grid;
@@ -122,6 +151,18 @@ class OkPinpad extends LitElement {
       })
     );
   }
+  // Emite `ok-secondary` (pulsación de la tecla de acción secundaria).
+  secondary() {
+    this.dispatchEvent(
+      new CustomEvent("ok-secondary", { bubbles: true, composed: true })
+    );
+  }
+  // Botón de borrado (reutilizado en ambos layouts).
+  renderBackspace() {
+    return html`<ion-button fill="clear" aria-label=${this.t.backspace} @click=${() => this.backspace()}>
+      <ion-icon slot="icon-only" name="backspace-outline"></ion-icon>
+    </ion-button>`;
+  }
   // Pinta la pantalla: dots si `masked`, dígitos si no, placeholder si vacío.
   renderDisplay() {
     if (!this.value) {
@@ -132,10 +173,24 @@ class OkPinpad extends LitElement {
     }
     return html`<span>${this.value}</span>`;
   }
+  // Variante `dots`: N círculos grandes (estilo PIN clásico). Requiere `length`.
+  renderCircles() {
+    const n = this.length ?? 0;
+    return html`<div
+      class="circles ${this.error ? "error" : ""}"
+      role="status"
+      aria-live="polite"
+    >
+      ${Array.from(
+      { length: n },
+      (_, i) => html`<span class="circle ${i < this.value.length ? "filled" : ""}"></span>`
+    )}
+    </div>`;
+  }
   render() {
     const digits = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
     return html`
-      <div class="display" role="status" aria-live="polite">${this.renderDisplay()}</div>
+      ${this.dots && this.length != null ? this.renderCircles() : html`<div class="display" role="status" aria-live="polite">${this.renderDisplay()}</div>`}
       <div class="grid" role="group" aria-label=${this.t.keypad}>
         ${digits.map(
       (d) => html`<ion-button
@@ -144,11 +199,13 @@ class OkPinpad extends LitElement {
             @click=${() => this.press(d)}
           >${d}</ion-button>`
     )}
-        <span class="spacer" aria-hidden="true"></span>
+        ${this.secondaryIcon ? html`<ion-button
+              fill="clear"
+              aria-label=${this.secondaryLabel ?? this.secondaryIcon}
+              @click=${() => this.secondary()}
+            ><ion-icon slot="icon-only" name=${this.secondaryIcon}></ion-icon></ion-button>` : html`<span class="spacer" aria-hidden="true"></span>`}
         <ion-button fill="outline" aria-label="0" @click=${() => this.press("0")}>0</ion-button>
-        <ion-button fill="clear" aria-label=${this.t.backspace} @click=${() => this.backspace()}>
-          <ion-icon slot="icon-only" name="backspace-outline"></ion-icon>
-        </ion-button>
+        ${this.renderBackspace()}
       </div>
     `;
   }
@@ -162,6 +219,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], OkPinpad.prototype, "masked");
+__decorateClass([
+  property({ type: Boolean })
+], OkPinpad.prototype, "dots");
+__decorateClass([
+  property({ type: Boolean })
+], OkPinpad.prototype, "error");
+__decorateClass([
+  property({ type: String, attribute: "secondary-icon" })
+], OkPinpad.prototype, "secondaryIcon");
+__decorateClass([
+  property({ type: String, attribute: "secondary-label" })
+], OkPinpad.prototype, "secondaryLabel");
 __decorateClass([
   property({ attribute: false })
 ], OkPinpad.prototype, "labels");