secure-ui-components 0.2.2 → 0.2.4

package/dist/components/secure-submit-button/secure-submit-button.js

@@ -19,381 +19,4 @@
  *
  * @module secure-submit-button
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-import { getTierConfig } from '../../core/security-config.js';
-/**
- * Secure Submit Button Web Component
- *
- * Provides a security-aware submit button that monitors parent form validity
- * and enables/disables based on the form's security tier requirements.
- *
- * @extends SecureBaseComponent
- */
-export class SecureSubmitButton extends SecureBaseComponent {
-    /**
-     * Button element reference inside shadow DOM
-     * @private
-     */
-    #buttonElement = null;
-    /**
-     * Label span element
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Loading indicator element
-     * @private
-     */
-    #loadingElement = null;
-    /**
-     * Reference to the parent <secure-form> element
-     * @private
-     */
-    #parentForm = null;
-    /**
-     * Whether the parent form is currently valid
-     * @private
-     */
-    #isFormValid = false;
-    /**
-     * Whether a submission is in progress
-     * @private
-     */
-    #isSubmitting = false;
-    /**
-     * Effective security tier (inherited from form or explicit)
-     * @private
-     */
-    #effectiveTier = 'critical';
-    /**
-     * Effective tier config
-     * @private
-     */
-    #effectiveConfig;
-    /**
-     * Unique instance ID for aria attribute association
-     * @private
-     */
-    #instanceId = `secure-submit-button-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Bound event handler for field change events
-     * @private
-     */
-    #boundHandleFieldChange;
-    /**
-     * Bound click handler
-     * @private
-     */
-    #boundHandleClick;
-    /**
-     * Observed attributes
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'label',
-            'loading-label',
-            'disabled'
-        ];
-    }
-    constructor() {
-        super();
-        this.#effectiveConfig = getTierConfig(this.#effectiveTier);
-        this.#boundHandleFieldChange = this.#handleFieldChange.bind(this);
-        this.#boundHandleClick = this.#handleClick.bind(this);
-    }
-    /**
-     * Connected to DOM — discover form, attach listeners, evaluate state
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        // Defer form discovery to ensure parent secure-form has initialized
-        // (secure-form creates its <form> element in its own connectedCallback)
-        queueMicrotask(() => {
-            this.#discoverParentForm();
-            this.#resolveEffectiveTier();
-            this.#attachFormListeners();
-            this.#evaluateValidity();
-            this.audit('submit_button_initialized', {
-                tier: this.#effectiveTier,
-                hasParentForm: !!this.#parentForm
-            });
-        });
-    }
-    /**
-     * Render the button inside shadow DOM
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'submit-container';
-        // Visually hidden hint explains why the button may be disabled (WCAG 1.3.5, 4.1.2)
-        const hintId = `${this.#instanceId}-hint`;
-        const hint = document.createElement('p');
-        hint.id = hintId;
-        hint.className = 'sr-only';
-        hint.textContent = 'Complete all required fields to enable this button';
-        container.appendChild(hint);
-        // Create button (type="button" — cannot use type="submit" in shadow DOM)
-        this.#buttonElement = document.createElement('button');
-        this.#buttonElement.type = 'button';
-        this.#buttonElement.className = 'submit-btn';
-        this.#buttonElement.disabled = true; // Disabled by default until validity is evaluated
-        this.#buttonElement.setAttribute('aria-disabled', 'true');
-        this.#buttonElement.setAttribute('aria-describedby', hintId);
-        // Label span
-        this.#labelElement = document.createElement('span');
-        this.#labelElement.className = 'btn-label';
-        this.#labelElement.textContent = this.sanitizeValue(this.getAttribute('label') || 'Submit');
-        // Loading indicator span (hidden by default)
-        this.#loadingElement = document.createElement('span');
-        this.#loadingElement.className = 'btn-loading hidden';
-        this.#loadingElement.setAttribute('aria-hidden', 'true');
-        const spinner = document.createElement('span');
-        spinner.className = 'spinner';
-        const loadingText = document.createElement('span');
-        loadingText.textContent = this.sanitizeValue(this.getAttribute('loading-label') || 'Submitting...');
-        this.#loadingElement.appendChild(spinner);
-        this.#loadingElement.appendChild(loadingText);
-        this.#buttonElement.appendChild(this.#labelElement);
-        this.#buttonElement.appendChild(this.#loadingElement);
-        // Click handler
-        this.#buttonElement.addEventListener('click', this.#boundHandleClick);
-        container.appendChild(this.#buttonElement);
-        fragment.appendChild(container);
-        this.addComponentStyles(this.#getComponentStyles());
-        return fragment;
-    }
-    // ---------------------------------------------------------------------------
-    // Form discovery & tier resolution
-    // ---------------------------------------------------------------------------
-    /**
-     * Find the parent <secure-form> element
-     * @private
-     */
-    #discoverParentForm() {
-        this.#parentForm = this.closest('secure-form');
-    }
-    /**
-     * Determine the effective security tier.
-     * If the button has an explicit security-tier attribute, use it.
-     * Otherwise, inherit from the parent form.
-     * @private
-     */
-    #resolveEffectiveTier() {
-        const ownTier = this.getAttribute('security-tier');
-        if (!ownTier && this.#parentForm) {
-            // Inherit from parent form
-            this.#effectiveTier = this.#parentForm.securityTier;
-        }
-        else {
-            this.#effectiveTier = this.securityTier;
-        }
-        this.#effectiveConfig = getTierConfig(this.#effectiveTier);
-    }
-    // ---------------------------------------------------------------------------
-    // Validation monitoring
-    // ---------------------------------------------------------------------------
-    /**
-     * Attach event listeners on the parent form to monitor field changes
-     * @private
-     */
-    #attachFormListeners() {
-        const target = this.#parentForm || this.parentElement;
-        if (!target)
-            return;
-        target.addEventListener('secure-input', this.#boundHandleFieldChange);
-        target.addEventListener('secure-textarea', this.#boundHandleFieldChange);
-        target.addEventListener('secure-select', this.#boundHandleFieldChange);
-        target.addEventListener('secure-datetime', this.#boundHandleFieldChange);
-    }
-    /**
-     * Handle a field change event — re-evaluate form validity
-     * @private
-     */
-    #handleFieldChange(_event) {
-        this.#evaluateValidity();
-    }
-    /**
-     * Evaluate form validity and enable/disable the button accordingly
-     * @private
-     */
-    #evaluateValidity() {
-        // If manually disabled via attribute, stay disabled
-        if (this.hasAttribute('disabled')) {
-            this.#setButtonDisabled(true);
-            return;
-        }
-        // If currently submitting, stay disabled
-        if (this.#isSubmitting) {
-            return;
-        }
-        // Public tier: validation not required, button always enabled
-        if (!this.#effectiveConfig.validation.required) {
-            this.#isFormValid = true;
-            this.#setButtonDisabled(false);
-            return;
-        }
-        // Authenticated / Sensitive / Critical: check form validity
-        if (this.#parentForm && typeof this.#parentForm.valid === 'boolean') {
-            this.#isFormValid = this.#parentForm.valid;
-        }
-        else {
-            // Fallback: manually query fields
-            this.#isFormValid = this.#checkFieldsValid();
-        }
-        this.#setButtonDisabled(!this.#isFormValid);
-    }
-    /**
-     * Fallback field validation when no parent form is found
-     * @private
-     */
-    #checkFieldsValid() {
-        const container = this.#parentForm || this.parentElement;
-        if (!container)
-            return false;
-        const fields = container.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        for (const field of fields) {
-            const typedField = field;
-            if (typeof typedField.valid === 'boolean' && !typedField.valid) {
-                return false;
-            }
-        }
-        // If there are no fields and validation is required, stay disabled
-        return fields.length > 0;
-    }
-    /**
-     * Update the button's disabled state
-     * @private
-     */
-    #setButtonDisabled(disabled) {
-        if (!this.#buttonElement)
-            return;
-        this.#buttonElement.disabled = disabled;
-        this.#buttonElement.setAttribute('aria-disabled', String(disabled));
-    }
-    // ---------------------------------------------------------------------------
-    // Click & submission
-    // ---------------------------------------------------------------------------
-    /**
-     * Handle button click — rate limit, audit, trigger form submission
-     * @private
-     */
-    #handleClick() {
-        if (this.#isSubmitting || this.#buttonElement?.disabled)
-            return;
-        // Rate limit check
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            this.audit('submit_button_rate_limited', {
-                retryAfter: rateLimitCheck.retryAfter
-            });
-            return;
-        }
-        this.audit('submit_button_clicked', {
-            tier: this.#effectiveTier,
-            formValid: this.#isFormValid
-        });
-        // Show loading state
-        this.#setLoading(true);
-        // Trigger form submission via parent secure-form
-        if (this.#parentForm) {
-            this.#parentForm.submit();
-        }
-        this.#setLoading(false);
-        // Loading state remains until explicitly reset via setLoading(false)
-        // or the form's success/error response handler resets it.
-    }
-    /**
-     * Toggle loading/submitting state
-     * @private
-     */
-    #setLoading(loading) {
-        this.#isSubmitting = loading;
-        if (this.#buttonElement) {
-            this.#buttonElement.disabled = loading;
-            this.#buttonElement.setAttribute('aria-disabled', String(loading));
-        }
-        if (this.#labelElement) {
-            this.#labelElement.classList.toggle('hidden', loading);
-        }
-        if (this.#loadingElement) {
-            this.#loadingElement.classList.toggle('hidden', !loading);
-            this.#loadingElement.setAttribute('aria-hidden', String(!loading));
-        }
-    }
-    // ---------------------------------------------------------------------------
-    // Attribute changes
-    // ---------------------------------------------------------------------------
-    handleAttributeChange(name, _oldValue, newValue) {
-        switch (name) {
-            case 'label':
-                if (this.#labelElement) {
-                    this.#labelElement.textContent = this.sanitizeValue(newValue || 'Submit');
-                }
-                break;
-            case 'loading-label':
-                if (this.#loadingElement) {
-                    const textSpan = this.#loadingElement.querySelector('span:last-child');
-                    if (textSpan) {
-                        textSpan.textContent = this.sanitizeValue(newValue || 'Submitting...');
-                    }
-                }
-                break;
-            case 'disabled':
-                this.#evaluateValidity();
-                break;
-        }
-    }
-    // ---------------------------------------------------------------------------
-    // Public API
-    // ---------------------------------------------------------------------------
-    /**
-     * Whether the button is disabled
-     */
-    get disabled() {
-        return this.#buttonElement ? this.#buttonElement.disabled : true;
-    }
-    set disabled(value) {
-        if (value) {
-            this.setAttribute('disabled', '');
-        }
-        else {
-            this.removeAttribute('disabled');
-        }
-        this.#evaluateValidity();
-    }
-    /**
-     * The button label text
-     */
-    get label() {
-        return this.getAttribute('label') || 'Submit';
-    }
-    set label(value) {
-        this.setAttribute('label', value);
-    }
-    // ---------------------------------------------------------------------------
-    // Styles
-    // ---------------------------------------------------------------------------
-    #getComponentStyles() {
-        return new URL('./secure-submit-button.css', import.meta.url).href;
-    }
-    // ---------------------------------------------------------------------------
-    // Cleanup
-    // ---------------------------------------------------------------------------
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        const target = this.#parentForm || this.parentElement;
-        if (target) {
-            target.removeEventListener('secure-input', this.#boundHandleFieldChange);
-            target.removeEventListener('secure-textarea', this.#boundHandleFieldChange);
-            target.removeEventListener('secure-select', this.#boundHandleFieldChange);
-            target.removeEventListener('secure-datetime', this.#boundHandleFieldChange);
-        }
-    }
-}
-// Register the custom element
-customElements.define('secure-submit-button', SecureSubmitButton);
-export default SecureSubmitButton;
-//# sourceMappingURL=secure-submit-button.js.map
+ */import{SecureBaseComponent as h}from"../../core/base-component.js";import{getTierConfig as a}from"../../core/security-config.js";class l extends h{#t=null;#n=null;#i=null;#e=null;#a=!1;#h=!1;#r="critical";#d;#b=`secure-submit-button-${Math.random().toString(36).substring(2,11)}`;#s;#c;static get observedAttributes(){return[...super.observedAttributes,"label","loading-label","disabled"]}constructor(){super(),this.#d=a(this.#r),this.#s=this.#g.bind(this),this.#c=this.#C.bind(this)}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.#m(),this.#f(),this.#p(),this.#l(),this.audit("submit_button_initialized",{tier:this.#r,hasParentForm:!!this.#e})})}render(){const t=document.createDocumentFragment(),i=document.createElement("div");i.className="submit-container";const s=`${this.#b}-hint`,e=document.createElement("p");e.id=s,e.className="sr-only",e.textContent="Complete all required fields to enable this button",i.appendChild(e),this.#t=document.createElement("button"),this.#t.type="button",this.#t.className="submit-btn",this.#t.disabled=!0,this.#t.setAttribute("aria-disabled","true"),this.#t.setAttribute("aria-describedby",s),this.#n=document.createElement("span"),this.#n.className="btn-label",this.#n.textContent=this.sanitizeValue(this.getAttribute("label")||"Submit"),this.#i=document.createElement("span"),this.#i.className="btn-loading hidden",this.#i.setAttribute("aria-hidden","true");const n=document.createElement("span");n.className="spinner";const r=document.createElement("span");return r.textContent=this.sanitizeValue(this.getAttribute("loading-label")||"Submitting..."),this.#i.appendChild(n),this.#i.appendChild(r),this.#t.appendChild(this.#n),this.#t.appendChild(this.#i),this.#t.addEventListener("click",this.#c),i.appendChild(this.#t),t.appendChild(i),this.addComponentStyles(this.#E()),t}#m(){this.#e=this.closest("secure-form")}#f(){!this.getAttribute("security-tier")&&this.#e?this.#r=this.#e.securityTier:this.#r=this.securityTier,this.#d=a(this.#r)}#p(){const t=this.#e||this.parentElement;t&&(t.addEventListener("secure-input",this.#s),t.addEventListener("secure-textarea",this.#s),t.addEventListener("secure-select",this.#s),t.addEventListener("secure-datetime",this.#s))}#g(t){this.#l()}#l(){if(this.hasAttribute("disabled")){this.#u(!0);return}if(!this.#h){if(!this.#d.validation.required){this.#a=!0,this.#u(!1);return}this.#e&&typeof this.#e.valid=="boolean"?this.#a=this.#e.valid:this.#a=this.#v(),this.#u(!this.#a)}}#v(){const t=this.#e||this.parentElement;if(!t)return!1;const i=t.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload");for(const s of i){const e=s;if(typeof e.valid=="boolean"&&!e.valid)return!1}return i.length>0}#u(t){this.#t&&(this.#t.disabled=t,this.#t.setAttribute("aria-disabled",String(t)))}#C(){if(this.#h||this.#t?.disabled)return;const t=this.checkRateLimit();if(!t.allowed){this.audit("submit_button_rate_limited",{retryAfter:t.retryAfter});return}this.audit("submit_button_clicked",{tier:this.#r,formValid:this.#a}),this.#o(!0),this.#e&&this.#e.submit(),this.#o(!1)}#o(t){this.#h=t,this.#t&&(this.#t.disabled=t,this.#t.setAttribute("aria-disabled",String(t))),this.#n&&this.#n.classList.toggle("hidden",t),this.#i&&(this.#i.classList.toggle("hidden",!t),this.#i.setAttribute("aria-hidden",String(!t)))}handleAttributeChange(t,i,s){switch(t){case"label":this.#n&&(this.#n.textContent=this.sanitizeValue(s||"Submit"));break;case"loading-label":if(this.#i){const e=this.#i.querySelector("span:last-child");e&&(e.textContent=this.sanitizeValue(s||"Submitting..."))}break;case"disabled":this.#l();break}}get disabled(){return this.#t?this.#t.disabled:!0}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.#l()}get label(){return this.getAttribute("label")||"Submit"}set label(t){this.setAttribute("label",t)}#E(){return new URL("./secure-submit-button.css",import.meta.url).href}disconnectedCallback(){super.disconnectedCallback();const t=this.#e||this.parentElement;t&&(t.removeEventListener("secure-input",this.#s),t.removeEventListener("secure-textarea",this.#s),t.removeEventListener("secure-select",this.#s),t.removeEventListener("secure-datetime",this.#s))}}customElements.define("secure-submit-button",l);var o=l;export{l as SecureSubmitButton,o as default};