@kya-os/consent 0.1.0 → 0.1.1

package/dist/components/consent-otp-input.js

@@ -0,0 +1,378 @@
+/**
+ * Consent OTP Input Web Component
+ *
+ * Individual digit input boxes for one-time password entry.
+ * Supports auto-focus, paste handling, and keyboard navigation.
+ * Implements Form Associated Custom Elements for proper form participation.
+ *
+ * @module components/consent-otp-input
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state, queryAll } from 'lit/decorators.js';
+/**
+ * ConsentOTPInput - OTP digit input boxes
+ *
+ * @example
+ * ```html
+ * <consent-otp-input
+ *   length="6"
+ *   name="otp"
+ * ></consent-otp-input>
+ * ```
+ *
+ * @fires input - Fired on each digit entry
+ * @fires complete - Fired when all digits are entered
+ * @fires change - Fired when value changes
+ * @csspart container - The container for all digit boxes
+ * @csspart input - Individual digit input
+ * @cssprop --consent-primary - Primary brand color for focus state
+ */
+let ConsentOTPInput = class ConsentOTPInput extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Number of OTP digits
+         */
+        this.length = 6;
+        /**
+         * Form field name
+         */
+        this.name = 'otp';
+        /**
+         * Current OTP value
+         */
+        this.value = '';
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Error state
+         */
+        this.error = false;
+        /**
+         * Auto-focus first input on mount
+         */
+        this.autoFocus = false;
+        /**
+         * Input type (text or number)
+         */
+        this.inputType = 'text';
+        /**
+         * Internal digit values
+         */
+        this.digits = [];
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeDigits();
+    }
+    initializeDigits() {
+        this.digits = Array.from({ length: this.length }, () => '');
+        if (this.value) {
+            // Filter non-digits (consistent with handleInput and handlePaste)
+            const digitsOnly = this.value.replace(/\D/g, '').slice(0, this.length);
+            const chars = digitsOnly.split('');
+            chars.forEach((char, i) => {
+                this.digits[i] = char;
+            });
+        }
+    }
+    firstUpdated() {
+        if (this.autoFocus && this.inputs.length > 0) {
+            this.inputs[0]?.focus();
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value') && !changedProperties.has('digits')) {
+            this.initializeDigits();
+        }
+        if (changedProperties.has('length')) {
+            this.initializeDigits();
+        }
+        // Update form value
+        const fullValue = this.digits.join('');
+        this.internals.setFormValue(fullValue || null);
+    }
+    getFullValue() {
+        return this.digits.join('');
+    }
+    handleInput(index, e) {
+        const input = e.target;
+        let newValue = input.value;
+        // Only keep last character if multiple entered
+        if (newValue.length > 1) {
+            newValue = newValue.slice(-1);
+        }
+        // Validate input (only digits for OTP)
+        if (newValue && !/^\d$/.test(newValue)) {
+            input.value = this.digits[index] ?? '';
+            return;
+        }
+        this.digits[index] = newValue;
+        this.digits = [...this.digits]; // Trigger update
+        input.value = newValue;
+        const fullValue = this.getFullValue();
+        this.value = fullValue;
+        // Dispatch input event
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: fullValue, index, digit: newValue },
+            bubbles: true,
+            composed: true,
+        }));
+        // Move to next input if digit entered
+        if (newValue && index < this.length - 1) {
+            this.inputs[index + 1]?.focus();
+        }
+        // Check if complete
+        if (fullValue.length === this.length) {
+            this.dispatchEvent(new CustomEvent('complete', {
+                detail: { value: fullValue },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        // Dispatch change event
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: fullValue },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleKeyDown(index, e) {
+        switch (e.key) {
+            case 'Backspace':
+                if (!this.digits[index] && index > 0) {
+                    // Move to previous input if current is empty
+                    e.preventDefault();
+                    this.inputs[index - 1]?.focus();
+                    this.digits[index - 1] = '';
+                    this.digits = [...this.digits];
+                }
+                else {
+                    // Clear current
+                    this.digits[index] = '';
+                    this.digits = [...this.digits];
+                }
+                this.value = this.getFullValue();
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (index > 0) {
+                    this.inputs[index - 1]?.focus();
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (index < this.length - 1) {
+                    this.inputs[index + 1]?.focus();
+                }
+                break;
+            case 'Delete':
+                this.digits[index] = '';
+                this.digits = [...this.digits];
+                this.value = this.getFullValue();
+                break;
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const pastedData = e.clipboardData?.getData('text') || '';
+        const digits = pastedData.replace(/\D/g, '').slice(0, this.length);
+        if (digits) {
+            this.digits = Array.from({ length: this.length }, (_, i) => digits[i] || '');
+            this.value = this.getFullValue();
+            // Update inputs
+            this.requestUpdate();
+            // Focus appropriate input
+            const focusIndex = Math.min(digits.length, this.length - 1);
+            setTimeout(() => {
+                this.inputs[focusIndex]?.focus();
+            }, 0);
+            // Always dispatch change event so parent components can track the value
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { value: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+            // Check if complete
+            if (digits.length === this.length) {
+                this.dispatchEvent(new CustomEvent('complete', {
+                    detail: { value: this.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+    }
+    handleFocus(e) {
+        const input = e.target;
+        input.select();
+    }
+    /**
+     * Focus the first empty input or the last input
+     */
+    focus() {
+        const emptyIndex = this.digits.findIndex((d) => !d);
+        const focusIndex = emptyIndex >= 0 ? emptyIndex : this.length - 1;
+        this.inputs[focusIndex]?.focus();
+    }
+    /**
+     * Clear all digits
+     */
+    clear() {
+        this.digits = Array.from({ length: this.length }, () => '');
+        this.value = '';
+        this.inputs[0]?.focus();
+    }
+    renderDigitInput(index) {
+        const digit = this.digits[index] || '';
+        const isFilled = digit !== '';
+        return html `
+      <input
+        part="input"
+        type=${this.inputType}
+        inputmode="numeric"
+        pattern="[0-9]*"
+        maxlength="1"
+        .value=${digit}
+        ?disabled=${this.disabled}
+        placeholder="○"
+        class=${isFilled ? 'filled' : ''}
+        @input=${(e) => this.handleInput(index, e)}
+        @keydown=${(e) => this.handleKeyDown(index, e)}
+        @paste=${this.handlePaste}
+        @focus=${this.handleFocus}
+        aria-label=${`Digit ${index + 1} of ${this.length}`}
+      />
+    `;
+    }
+    render() {
+        return html `
+      <div class="container" part="container" role="group" aria-label="One-time password input">
+        ${Array.from({ length: this.length }, (_, i) => this.renderDigitInput(i))}
+      </div>
+    `;
+    }
+};
+// Enable form association
+ConsentOTPInput.formAssociated = true;
+ConsentOTPInput.styles = css `
+    :host {
+      display: block;
+      --_primary: var(--consent-primary, #2563eb);
+    }
+
+    .container {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+    }
+
+    input {
+      width: 2.75rem;
+      height: 3.5rem;
+      text-align: center;
+      font-size: 1.5rem;
+      font-weight: 600;
+      font-family: inherit;
+      color: #111827;
+      background: white;
+      border: 1px solid #d1d5db;
+      border-radius: 0.5rem;
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+      /* Hide spinner for number inputs */
+      -moz-appearance: textfield;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input:focus {
+      border-color: var(--_primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    input:disabled {
+      background: #f9fafb;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    input::placeholder {
+      color: #d1d5db;
+    }
+
+    /* Error state */
+    :host([error]) input {
+      border-color: #ef4444;
+    }
+
+    :host([error]) input:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    /* Filled state */
+    input.filled {
+      border-color: var(--_primary);
+      background: #f0f9ff;
+    }
+
+    /* Responsive: smaller on mobile */
+    @media (max-width: 400px) {
+      input {
+        width: 2.25rem;
+        height: 3rem;
+        font-size: 1.25rem;
+      }
+
+      .container {
+        gap: 0.375rem;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], ConsentOTPInput.prototype, "length", void 0);
+__decorate([
+    property({ type: String })
+], ConsentOTPInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], ConsentOTPInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ConsentOTPInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ConsentOTPInput.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-focus' })
+], ConsentOTPInput.prototype, "autoFocus", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-type' })
+], ConsentOTPInput.prototype, "inputType", void 0);
+__decorate([
+    state()
+], ConsentOTPInput.prototype, "digits", void 0);
+__decorate([
+    queryAll('input')
+], ConsentOTPInput.prototype, "inputs", void 0);
+ConsentOTPInput = __decorate([
+    customElement('consent-otp-input')
+], ConsentOTPInput);
+export { ConsentOTPInput };
+//# sourceMappingURL=consent-otp-input.js.map

package/dist/components/consent-otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-otp-input.js","sourceRoot":"","sources":["../../src/components/consent-otp-input.ts"],"names":[],"mappings":"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"}

package/dist/components/consent-permissions.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Consent Permissions Web Component
+ *
+ * Renders a list of permission scopes that the agent is requesting.
+ * Can be interactive (with checkboxes) or display-only.
+ *
+ * @module components/consent-permissions
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * Permission item structure
+ */
+export interface PermissionItem {
+    /** Unique scope identifier */
+    id: string;
+    /** Human-readable label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this permission is required (non-optional) */
+    required?: boolean;
+}
+/**
+ * ConsentPermissions - Permission list component
+ *
+ * @example
+ * ```html
+ * <!-- Display-only mode -->
+ * <consent-permissions
+ *   scopes='["read:profile", "write:data"]'
+ * ></consent-permissions>
+ *
+ * <!-- Interactive mode -->
+ * <consent-permissions
+ *   scopes='[{"id": "read:profile", "label": "Read profile", "required": true}]'
+ *   interactive
+ * ></consent-permissions>
+ * ```
+ *
+ * @fires change - Fired when permissions selection changes (interactive mode)
+ * @csspart list - The permissions list container
+ * @csspart item - Individual permission item
+ * @cssprop --consent-primary - Primary brand color for icons/checkboxes
+ */
+export declare class ConsentPermissions extends LitElement {
+    /**
+     * Permission scopes - can be string array or PermissionItem array
+     * Accepts JSON string for attribute binding
+     */
+    scopes: (string | PermissionItem)[];
+    /**
+     * Enable interactive mode with checkboxes
+     */
+    interactive: boolean;
+    /**
+     * Pre-select all scopes in interactive mode (default: only required scopes are pre-selected)
+     */
+    selectAll: boolean;
+    /**
+     * Icon to show next to each permission
+     * Options: 'check', 'bullet', 'shield'
+     */
+    iconStyle: 'check' | 'bullet' | 'shield';
+    /**
+     * Internal state for selected permissions in interactive mode
+     */
+    private selectedScopes;
+    /**
+     * Track previous scope IDs to detect newly added scopes
+     * (used to distinguish new scopes from user-deselected scopes)
+     */
+    private previousScopeIds;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Re-initialize selected scopes when scopes change dynamically.
+     * Preserves existing valid selections while adding new scopes based on selectAll/required settings.
+     */
+    private reinitializeSelectedScopes;
+    private initializeSelectedScopes;
+    /**
+     * Normalize scopes to PermissionItem format
+     */
+    private get normalizedScopes();
+    /**
+     * Convert scope ID to human-readable label
+     */
+    private formatScopeLabel;
+    /**
+     * Get currently selected scopes
+     */
+    getSelectedScopes(): string[];
+    private handleCheckboxChange;
+    private renderIcon;
+    private renderPermissionItem;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'consent-permissions': ConsentPermissions;
+    }
+}
+//# sourceMappingURL=consent-permissions.d.ts.map

package/dist/components/consent-permissions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-permissions.d.ts","sourceRoot":"","sources":["../../src/components/consent-permissions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD;;;OAGG;IAuBH,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAM;IAEzC;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAW;IAEnD;;OAEG;IAEH,OAAO,CAAC,cAAc,CAA0B;IAEhD;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAA0B;IAElD,OAAgB,MAAM,0BA6IpB;IAEO,iBAAiB;cAQP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAOlE;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAsClC,OAAO,CAAC,wBAAwB;IAqBhC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAU3B;IAED;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IACI,iBAAiB,IAAI,MAAM,EAAE;IAIpC,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,UAAU;IAmClB,OAAO,CAAC,oBAAoB;IAoCnB,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}