@kya-os/consent 0.1.13 → 0.1.14

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

@@ -0,0 +1,335 @@
+"use strict";
+/**
+ * Consent Input Web Component
+ *
+ * A styled text input for consent pages with label and error support.
+ * Implements Form Associated Custom Elements for proper form participation.
+ *
+ * @module components/consent-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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentInput = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+/**
+ * ConsentInput - A themed input component with label
+ *
+ * @example
+ * ```html
+ * <consent-input
+ *   type="email"
+ *   name="email"
+ *   label="Email Address"
+ *   placeholder="you@example.com"
+ *   required
+ * ></consent-input>
+ * ```
+ *
+ * @fires input - Fired when input value changes
+ * @fires change - Fired when input loses focus after change
+ * @csspart input - The input element
+ * @csspart label - The label element
+ * @cssprop --consent-primary - Primary brand color for focus state
+ */
+let ConsentInput = class ConsentInput extends lit_1.LitElement {
+    constructor() {
+        super();
+        /**
+         * Input type
+         */
+        this.type = 'text';
+        /**
+         * Form field name
+         */
+        this.name = '';
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Label text
+         */
+        this.label = '';
+        /**
+         * Placeholder text
+         */
+        this.placeholder = '';
+        /**
+         * Required for form validation
+         */
+        this.required = false;
+        /**
+         * Disabled state
+         */
+        this.disabled = false;
+        /**
+         * Autocomplete attribute
+         */
+        this.autocomplete = '';
+        /**
+         * Show password toggle for password inputs
+         */
+        this.showPassword = false;
+        this.internals = this.attachInternals();
+    }
+    // Update form value when properties change
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this.value || null);
+        }
+    }
+    handleInput(e) {
+        const input = e.target;
+        this.value = input.value;
+        this.internals.setFormValue(this.value || null);
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleChange(e) {
+        const input = e.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    togglePasswordVisibility() {
+        this.showPassword = !this.showPassword;
+    }
+    renderPasswordToggle() {
+        if (this.type !== 'password')
+            return null;
+        const icon = this.showPassword
+            ? (0, lit_1.html) `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+            <line x1="1" y1="1" x2="23" y2="23"/>
+          </svg>
+        `
+            : (0, lit_1.html) `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+        `;
+        return (0, lit_1.html) `
+      <button
+        type="button"
+        class="password-toggle"
+        @click=${this.togglePasswordVisibility}
+        tabindex="-1"
+        aria-label=${this.showPassword ? 'Hide password' : 'Show password'}
+      >
+        ${icon}
+      </button>
+    `;
+    }
+    render() {
+        const inputType = this.type === 'password' && this.showPassword ? 'text' : this.type;
+        return (0, lit_1.html) `
+      <div class="field">
+        ${this.label
+            ? (0, lit_1.html) `
+              <label part="label" for="input">
+                ${this.label}${this.required ? (0, lit_1.html) `<span class="required">*</span>` : null}
+              </label>
+            `
+            : null}
+        <div class="input-wrapper${this.error ? ' has-error' : ''}">
+          <input
+            part="input"
+            id="input"
+            type=${inputType}
+            name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            autocomplete=${this.autocomplete || 'off'}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+          ${this.renderPasswordToggle()}
+        </div>
+        ${this.error ? (0, lit_1.html) `<div class="error-message">${this.error}</div>` : null}
+      </div>
+    `;
+    }
+};
+exports.ConsentInput = ConsentInput;
+// Enable form association
+ConsentInput.formAssociated = true;
+ConsentInput.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    /* Base input styles - use .input-wrapper for higher specificity */
+    .input-wrapper input {
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      font-size: 0.875rem;
+      font-family: inherit;
+      color: #111827;
+      background-color: white;
+      border: 1px solid #d1d5db;
+      border-radius: 0.5rem;
+      outline: none;
+      box-shadow: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .input-wrapper input:focus {
+      border-color: var(--consent-primary, #2563eb);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .input-wrapper input:disabled {
+      background-color: #f9fafb;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .input-wrapper input::placeholder {
+      color: #9ca3af;
+    }
+
+    /* Prevent browser validation styling before user interaction */
+    .input-wrapper input:invalid {
+      border-color: #d1d5db;
+      box-shadow: none;
+      outline: none;
+      background-color: white;
+    }
+
+    /* Override browser autofill styling */
+    .input-wrapper input:-webkit-autofill,
+    .input-wrapper input:-webkit-autofill:hover,
+    .input-wrapper input:-webkit-autofill:focus {
+      -webkit-box-shadow: 0 0 0 1000px white inset;
+      -webkit-text-fill-color: #111827;
+      border-color: #d1d5db;
+      transition: background-color 5000s ease-in-out 0s;
+    }
+
+    /* Only show validation styling after user interaction */
+    .input-wrapper input:user-invalid {
+      border-color: #ef4444;
+    }
+
+    .input-wrapper input:user-invalid:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    /* Password toggle */
+    .input-wrapper input[type='password'] {
+      padding-right: 2.5rem;
+    }
+
+    .password-toggle {
+      position: absolute;
+      right: 0.5rem;
+      padding: 0.375rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #6b7280;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .password-toggle:hover {
+      color: #374151;
+    }
+
+    .password-toggle svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    /* Error state - use class instead of attribute for proper specificity */
+    .input-wrapper.has-error input {
+      border-color: #ef4444;
+    }
+
+    .input-wrapper.has-error input:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .error-message {
+      font-size: 0.75rem;
+      color: #ef4444;
+      margin-top: 0.25rem;
+    }
+
+    /* Required indicator */
+    .required {
+      color: #ef4444;
+      margin-left: 0.125rem;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "type", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "value", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "label", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "placeholder", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], ConsentInput.prototype, "required", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ConsentInput.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "autocomplete", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ConsentInput.prototype, "error", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], ConsentInput.prototype, "showPassword", void 0);
+exports.ConsentInput = ConsentInput = __decorate([
+    (0, decorators_js_1.customElement)('consent-input')
+], ConsentInput);
+//# sourceMappingURL=consent-input.js.map

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

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