@kya-os/consent 0.1.21 → 0.1.23

package/dist/components/consent-input.js

@@ -1,332 +0,0 @@
-/**
- * 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;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from '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 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
-            ? 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>
-        `
-            : 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 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 html `
-      <div class="field">
-        ${this.label
-            ? html `
-              <label part="label" for="input">
-                ${this.label}${this.required ? 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 ? html `<div class="error-message">${this.error}</div>` : null}
-      </div>
-    `;
-    }
-};
-// Enable form association
-ConsentInput.formAssociated = true;
-ConsentInput.styles = 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([
-    property({ type: String })
-], ConsentInput.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean })
-], ConsentInput.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ConsentInput.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "autocomplete", void 0);
-__decorate([
-    property({ type: String })
-], ConsentInput.prototype, "error", void 0);
-__decorate([
-    state()
-], ConsentInput.prototype, "showPassword", void 0);
-ConsentInput = __decorate([
-    customElement('consent-input')
-], ConsentInput);
-export { ConsentInput };
-//# sourceMappingURL=consent-input.js.map

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

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

package/dist/components/consent-oauth-button.d.ts

@@ -1,87 +0,0 @@
-/**
- * Consent OAuth Button Web Component
- *
- * A styled button for OAuth provider authentication with provider branding.
- * Supports common OAuth providers with built-in icons.
- *
- * @module components/consent-oauth-button
- */
-import { LitElement, TemplateResult } from 'lit';
-/**
- * Supported OAuth providers with built-in styling
- */
-export type OAuthProvider = 'google' | 'microsoft' | 'apple' | 'github' | 'twitter' | 'facebook' | 'custom';
-/**
- * ConsentOAuthButton - OAuth provider sign-in button
- *
- * @example
- * ```html
- * <consent-oauth-button
- *   provider="google"
- *   url="/auth/google"
- * ></consent-oauth-button>
- *
- * <consent-oauth-button
- *   provider="custom"
- *   provider-name="Acme Corp"
- *   url="/auth/acme"
- * ></consent-oauth-button>
- * ```
- *
- * @fires oauth-click - When button is clicked (includes provider and url in detail)
- * @csspart button - The button element
- * @csspart icon - The provider icon
- * @csspart text - The button text
- */
-export declare class ConsentOAuthButton extends LitElement {
-    /**
-     * OAuth provider type
-     */
-    provider: OAuthProvider;
-    /**
-     * Custom provider name (used when provider='custom')
-     */
-    providerName?: string;
-    /**
-     * OAuth authorization URL
-     */
-    url: string;
-    /**
-     * Custom button text (overrides default)
-     */
-    buttonText?: string;
-    /**
-     * Loading state
-     */
-    loading: boolean;
-    /**
-     * Disabled state
-     */
-    disabled: boolean;
-    /**
-     * Full width mode
-     */
-    fullWidth: boolean;
-    /**
-     * Custom icon SVG string (for custom providers)
-     */
-    customIcon?: string;
-    /**
-     * Internal state for tracking redirect
-     */
-    private redirecting;
-    static styles: import("lit").CSSResult;
-    private get config();
-    private get displayName();
-    private get displayText();
-    private handleClick;
-    private renderProviderIcon;
-    protected updated(changedProperties: Map<string, unknown>): void;
-    render(): TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'consent-oauth-button': ConsentOAuthButton;
-    }
-}
-//# sourceMappingURL=consent-oauth-button.d.ts.map