secure-ui-components 0.2.3 → 0.2.4

package/dist/components/secure-textarea/secure-textarea.js

@@ -27,494 +27,4 @@
  *
  * @module secure-textarea
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-/**
- * Secure Textarea Web Component
- *
- * Provides a security-hardened textarea field with progressive enhancement.
- * The component works as a standard form textarea without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * @extends SecureBaseComponent
- */
-export class SecureTextarea extends SecureBaseComponent {
-    /**
-     * Textarea element reference
-     * @private
-     */
-    #textareaElement = null;
-    /**
-     * Label element reference
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Error container element reference
-     * @private
-     */
-    #errorContainer = null;
-    /**
-     * Threat feedback container — separate from validation errors so
-     * #clearErrors() never clobbers an active threat message.
-     * @private
-     */
-    #threatContainer = null;
-    /**
-     * Character count display element
-     * @private
-     */
-    #charCountElement = null;
-    /**
-     * Unique ID for this textarea instance
-     * @private
-     */
-    #instanceId = `secure-textarea-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'label',
-            'placeholder',
-            'required',
-            'minlength',
-            'maxlength',
-            'rows',
-            'cols',
-            'wrap',
-            'value'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-    }
-    /**
-     * Render the textarea component
-     *
-     * Security Note: We use a native <textarea> element wrapped in our web component
-     * to ensure progressive enhancement. The native textarea works without JavaScript,
-     * and we enhance it with security features when JS is available.
-     *
-     * @protected
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'textarea-container';
-        container.setAttribute('part', 'container');
-        // Create label
-        const label = this.getAttribute('label');
-        if (label) {
-            this.#labelElement = document.createElement('label');
-            this.#labelElement.htmlFor = this.#instanceId;
-            this.#labelElement.textContent = this.sanitizeValue(label);
-            this.#labelElement.setAttribute('part', 'label');
-            container.appendChild(this.#labelElement);
-        }
-        // Create textarea wrapper for progressive enhancement
-        const textareaWrapper = document.createElement('div');
-        textareaWrapper.className = 'textarea-wrapper';
-        textareaWrapper.setAttribute('part', 'wrapper');
-        // Create the actual textarea element
-        this.#textareaElement = document.createElement('textarea');
-        this.#textareaElement.id = this.#instanceId;
-        this.#textareaElement.className = 'textarea-field';
-        this.#textareaElement.setAttribute('part', 'textarea');
-        // Apply attributes from web component to native textarea
-        this.#applyTextareaAttributes();
-        // Set up event listeners
-        this.#attachEventListeners();
-        textareaWrapper.appendChild(this.#textareaElement);
-        container.appendChild(textareaWrapper);
-        // Create character count display
-        this.#charCountElement = document.createElement('span');
-        this.#charCountElement.className = 'char-count';
-        this.#updateCharCount();
-        container.appendChild(this.#charCountElement);
-        // Create error container
-        // role="alert" already implies aria-live="assertive" — do not override with polite
-        this.#errorContainer = document.createElement('div');
-        this.#errorContainer.className = 'error-container hidden';
-        this.#errorContainer.setAttribute('role', 'alert');
-        this.#errorContainer.setAttribute('part', 'error');
-        this.#errorContainer.id = `${this.#instanceId}-error`;
-        container.appendChild(this.#errorContainer);
-        // Threat feedback container — kept separate from #errorContainer so
-        // #clearErrors() (called on every input event) never clobbers a threat message.
-        this.#threatContainer = document.createElement('div');
-        this.#threatContainer.className = 'threat-container hidden';
-        this.#threatContainer.setAttribute('role', 'alert');
-        this.#threatContainer.setAttribute('part', 'threat');
-        this.#threatContainer.id = `${this.#instanceId}-threat`;
-        container.appendChild(this.#threatContainer);
-        // Add component styles (CSP-compliant via adoptedStyleSheets)
-        this.addComponentStyles(this.#getComponentStyles());
-        fragment.appendChild(container);
-        return fragment;
-    }
-    /**
-     * Apply attributes from the web component to the native textarea
-     *
-     * Security Note: This is where we enforce tier-specific security controls
-     * like autocomplete, caching, and validation rules.
-     *
-     * @private
-     */
-    #applyTextareaAttributes() {
-        const config = this.config;
-        // Name attribute (required for form submission)
-        const name = this.getAttribute('name');
-        if (name) {
-            this.#textareaElement.name = this.sanitizeValue(name);
-        }
-        // Accessible name fallback when no visible label is provided
-        if (!this.getAttribute('label') && name) {
-            this.#textareaElement.setAttribute('aria-label', this.sanitizeValue(name));
-        }
-        // Link textarea to its error container for screen readers
-        this.#textareaElement.setAttribute('aria-describedby', `${this.#instanceId}-error`);
-        // Placeholder
-        const placeholder = this.getAttribute('placeholder');
-        if (placeholder) {
-            this.#textareaElement.placeholder = this.sanitizeValue(placeholder);
-        }
-        // Required attribute
-        if (this.hasAttribute('required') || config.validation.required) {
-            this.#textareaElement.required = true;
-            this.#textareaElement.setAttribute('aria-required', 'true');
-        }
-        // Length constraints
-        const minLength = this.getAttribute('minlength');
-        if (minLength) {
-            this.#textareaElement.minLength = parseInt(minLength, 10);
-        }
-        const maxLength = this.getAttribute('maxlength') || config.validation.maxLength;
-        if (maxLength) {
-            this.#textareaElement.maxLength = parseInt(String(maxLength), 10);
-        }
-        // Rows and columns
-        const rows = this.getAttribute('rows') || 3;
-        this.#textareaElement.rows = parseInt(String(rows), 10);
-        const cols = this.getAttribute('cols');
-        if (cols) {
-            this.#textareaElement.cols = parseInt(cols, 10);
-        }
-        // Wrap attribute
-        const wrap = this.getAttribute('wrap') || 'soft';
-        this.#textareaElement.wrap = wrap;
-        // CRITICAL SECURITY: Autocomplete control based on tier
-        // For SENSITIVE and CRITICAL tiers, we disable autocomplete to prevent
-        // browser storage of sensitive data
-        if (config.storage.allowAutocomplete) {
-            const autocomplete = this.getAttribute('autocomplete') || 'on';
-            this.#textareaElement.autocomplete = autocomplete;
-        }
-        else {
-            this.#textareaElement.autocomplete = 'off';
-        }
-        // Disabled state
-        if (this.hasAttribute('disabled')) {
-            this.#textareaElement.disabled = true;
-        }
-        // Readonly state
-        if (this.hasAttribute('readonly')) {
-            this.#textareaElement.readOnly = true;
-        }
-        // Initial value
-        const value = this.getAttribute('value');
-        if (value) {
-            this.#textareaElement.value = value;
-        }
-    }
-    /**
-     * Attach event listeners to the textarea
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // Focus event - audit logging + telemetry
-        this.#textareaElement.addEventListener('focus', () => {
-            this.recordTelemetryFocus();
-            this.audit('textarea_focused', {
-                name: this.#textareaElement.name
-            });
-        });
-        // Input event - real-time validation and character counting + telemetry
-        this.#textareaElement.addEventListener('input', (e) => {
-            this.recordTelemetryInput(e);
-            this.#handleInput(e);
-        });
-        // Blur event - final validation + telemetry
-        this.#textareaElement.addEventListener('blur', () => {
-            this.recordTelemetryBlur();
-            this.#validateAndShowErrors();
-            this.audit('textarea_blurred', {
-                name: this.#textareaElement.name,
-                hasValue: this.#textareaElement.value.length > 0
-            });
-        });
-        // Change event - audit logging
-        this.#textareaElement.addEventListener('change', () => {
-            this.audit('textarea_changed', {
-                name: this.#textareaElement.name,
-                valueLength: this.#textareaElement.value.length
-            });
-        });
-    }
-    /**
-     * Handle input events
-     *
-     * Security Note: This is where we implement real-time validation and character counting.
-     *
-     * @private
-     */
-    #handleInput(_event) {
-        this.detectInjection(this.#textareaElement.value, this.#textareaElement.name);
-        // Update character count
-        this.#updateCharCount();
-        // Clear previous errors on input (improve UX)
-        this.#clearErrors();
-        // Dispatch custom event for parent forms
-        this.dispatchEvent(new CustomEvent('secure-textarea', {
-            detail: {
-                name: this.#textareaElement.name,
-                value: this.#textareaElement.value,
-                tier: this.securityTier
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Update character count display
-     *
-     * @private
-     */
-    #updateCharCount() {
-        const currentLength = this.#textareaElement.value.length;
-        const maxLength = this.#textareaElement.maxLength;
-        if (maxLength > 0) {
-            this.#charCountElement.textContent = `${currentLength} / ${maxLength}`;
-            // Warn when approaching limit
-            if (currentLength > maxLength * 0.9) {
-                this.#charCountElement.classList.add('warning');
-            }
-            else {
-                this.#charCountElement.classList.remove('warning');
-            }
-        }
-        else {
-            this.#charCountElement.textContent = `${currentLength}`;
-        }
-    }
-    /**
-     * Validate the textarea and show error messages
-     *
-     * @private
-     */
-    #validateAndShowErrors() {
-        // Check rate limit first
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            this.#showError(`Too many attempts. Please wait ${Math.ceil(rateLimitCheck.retryAfter / 1000)} seconds.`);
-            return;
-        }
-        // Perform validation
-        const minLength = this.getAttribute('minlength');
-        const maxLength = this.getAttribute('maxlength');
-        const validation = this.validateInput(this.#textareaElement.value, {
-            required: this.hasAttribute('required') || this.config.validation.required,
-            minLength: minLength ? parseInt(minLength, 10) : 0,
-            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
-        });
-        if (!validation.valid) {
-            this.#showError(validation.errors.join(', '));
-        }
-    }
-    /**
-     * Show error message
-     *
-     * @private
-     */
-    #showError(message) {
-        this.#errorContainer.textContent = message;
-        // Force reflow so browser registers the hidden state with content,
-        // then remove hidden to trigger the CSS transition
-        void this.#errorContainer.offsetHeight;
-        this.#errorContainer.classList.remove('hidden');
-        this.#textareaElement.classList.add('error');
-        this.#textareaElement.setAttribute('aria-invalid', 'true');
-    }
-    /**
-     * Clear error messages
-     *
-     * @private
-     */
-    #clearErrors() {
-        // Start the hide animation first, clear text only after transition ends
-        this.#errorContainer.classList.add('hidden');
-        this.#errorContainer.addEventListener('transitionend', () => {
-            if (this.#errorContainer.classList.contains('hidden')) {
-                this.#errorContainer.textContent = '';
-            }
-        }, { once: true });
-        this.#textareaElement.classList.remove('error');
-        this.#textareaElement.removeAttribute('aria-invalid');
-    }
-    /**
-     * Get component-specific styles
-     *
-     * @private
-     */
-    #getComponentStyles() {
-        return new URL('./secure-textarea.css', import.meta.url).href;
-    }
-    /**
-     * Handle attribute changes
-     *
-     * @protected
-     */
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.#textareaElement)
-            return;
-        switch (name) {
-            case 'disabled':
-                this.#textareaElement.disabled = this.hasAttribute('disabled');
-                break;
-            case 'readonly':
-                this.#textareaElement.readOnly = this.hasAttribute('readonly');
-                break;
-            case 'value':
-                if (newValue !== this.#textareaElement.value) {
-                    this.#textareaElement.value = newValue || '';
-                    this.#updateCharCount();
-                }
-                break;
-        }
-    }
-    /**
-     * Get the current value
-     *
-     * @public
-     */
-    get value() {
-        return this.#textareaElement ? this.#textareaElement.value : '';
-    }
-    /**
-     * Set the value
-     *
-     * @public
-     */
-    set value(value) {
-        if (this.#textareaElement) {
-            this.#textareaElement.value = value || '';
-            this.#updateCharCount();
-        }
-    }
-    /**
-     * Get the textarea name
-     *
-     * @public
-     */
-    get name() {
-        return this.#textareaElement ? this.#textareaElement.name : '';
-    }
-    /**
-     * Check if the textarea is valid
-     *
-     * @public
-     */
-    get valid() {
-        const minLength = this.getAttribute('minlength');
-        const maxLength = this.getAttribute('maxlength');
-        const validation = this.validateInput(this.#textareaElement.value, {
-            required: this.hasAttribute('required') || this.config.validation.required,
-            minLength: minLength ? parseInt(minLength, 10) : 0,
-            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
-        });
-        return validation.valid;
-    }
-    /**
-     * Focus the textarea
-     *
-     * @public
-     */
-    focus() {
-        if (this.#textareaElement) {
-            this.#textareaElement.focus();
-        }
-    }
-    /**
-     * Blur the textarea
-     *
-     * @public
-     */
-    blur() {
-        if (this.#textareaElement) {
-            this.#textareaElement.blur();
-        }
-    }
-    /**
-     * Cleanup on disconnect
-     */
-    /**
-     * Show inline threat feedback inside the component's shadow DOM.
-     * @protected
-     */
-    showThreatFeedback(patternId, tier) {
-        if (!this.#threatContainer || !this.#textareaElement)
-            return;
-        this.#threatContainer.textContent = '';
-        const msg = document.createElement('span');
-        msg.className = 'threat-message';
-        msg.textContent = this.getThreatLabel(patternId);
-        const patternBadge = document.createElement('span');
-        patternBadge.className = 'threat-badge';
-        patternBadge.textContent = patternId;
-        const tierBadge = document.createElement('span');
-        tierBadge.className = `threat-tier threat-tier--${tier}`;
-        tierBadge.textContent = tier;
-        this.#threatContainer.appendChild(msg);
-        this.#threatContainer.appendChild(patternBadge);
-        this.#threatContainer.appendChild(tierBadge);
-        void this.#threatContainer.offsetHeight;
-        this.#threatContainer.classList.remove('hidden');
-        this.#textareaElement.classList.add('threat');
-        this.#textareaElement.setAttribute('aria-invalid', 'true');
-    }
-    /**
-     * Clear the threat feedback container.
-     * @protected
-     */
-    clearThreatFeedback() {
-        if (!this.#threatContainer || !this.#textareaElement)
-            return;
-        this.#threatContainer.classList.add('hidden');
-        this.#threatContainer.addEventListener('transitionend', () => {
-            if (this.#threatContainer.classList.contains('hidden')) {
-                this.#threatContainer.textContent = '';
-            }
-        }, { once: true });
-        this.#textareaElement.classList.remove('threat');
-        this.#textareaElement.removeAttribute('aria-invalid');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clear sensitive data from memory
-        if (this.#textareaElement) {
-            this.#textareaElement.value = '';
-        }
-    }
-}
-// Define the custom element
-customElements.define('secure-textarea', SecureTextarea);
-export default SecureTextarea;
-//# sourceMappingURL=secure-textarea.js.map
+ */import{SecureBaseComponent as u}from"../../core/base-component.js";class h extends u{#t=null;#a=null;#i=null;#e=null;#s=null;#r=`secure-textarea-${Math.random().toString(36).substring(2,11)}`;static get observedAttributes(){return[...super.observedAttributes,"name","label","placeholder","required","minlength","maxlength","rows","cols","wrap","value"]}constructor(){super()}render(){const t=document.createDocumentFragment(),e=document.createElement("div");e.className="textarea-container",e.setAttribute("part","container");const i=this.getAttribute("label");i&&(this.#a=document.createElement("label"),this.#a.htmlFor=this.#r,this.#a.textContent=this.sanitizeValue(i),this.#a.setAttribute("part","label"),e.appendChild(this.#a));const s=document.createElement("div");return s.className="textarea-wrapper",s.setAttribute("part","wrapper"),this.#t=document.createElement("textarea"),this.#t.id=this.#r,this.#t.className="textarea-field",this.#t.setAttribute("part","textarea"),this.#l(),this.#o(),s.appendChild(this.#t),e.appendChild(s),this.#s=document.createElement("span"),this.#s.className="char-count",this.#n(),e.appendChild(this.#s),this.#i=document.createElement("div"),this.#i.className="error-container hidden",this.#i.setAttribute("role","alert"),this.#i.setAttribute("part","error"),this.#i.id=`${this.#r}-error`,e.appendChild(this.#i),this.#e=document.createElement("div"),this.#e.className="threat-container hidden",this.#e.setAttribute("role","alert"),this.#e.setAttribute("part","threat"),this.#e.id=`${this.#r}-threat`,e.appendChild(this.#e),this.addComponentStyles(this.#m()),t.appendChild(e),t}#l(){const t=this.config,e=this.getAttribute("name");e&&(this.#t.name=this.sanitizeValue(e)),!this.getAttribute("label")&&e&&this.#t.setAttribute("aria-label",this.sanitizeValue(e)),this.#t.setAttribute("aria-describedby",`${this.#r}-error`);const i=this.getAttribute("placeholder");i&&(this.#t.placeholder=this.sanitizeValue(i)),(this.hasAttribute("required")||t.validation.required)&&(this.#t.required=!0,this.#t.setAttribute("aria-required","true"));const s=this.getAttribute("minlength");s&&(this.#t.minLength=parseInt(s,10));const a=this.getAttribute("maxlength")||t.validation.maxLength;a&&(this.#t.maxLength=parseInt(String(a),10));const l=this.getAttribute("rows")||3;this.#t.rows=parseInt(String(l),10);const r=this.getAttribute("cols");r&&(this.#t.cols=parseInt(r,10));const o=this.getAttribute("wrap")||"soft";if(this.#t.wrap=o,t.storage.allowAutocomplete){const d=this.getAttribute("autocomplete")||"on";this.#t.autocomplete=d}else this.#t.autocomplete="off";this.hasAttribute("disabled")&&(this.#t.disabled=!0),this.hasAttribute("readonly")&&(this.#t.readOnly=!0);const n=this.getAttribute("value");n&&(this.#t.value=n)}#o(){this.#t.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.audit("textarea_focused",{name:this.#t.name})}),this.#t.addEventListener("input",t=>{this.recordTelemetryInput(t),this.#d(t)}),this.#t.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#u(),this.audit("textarea_blurred",{name:this.#t.name,hasValue:this.#t.value.length>0})}),this.#t.addEventListener("change",()=>{this.audit("textarea_changed",{name:this.#t.name,valueLength:this.#t.value.length})})}#d(t){this.detectInjection(this.#t.value,this.#t.name),this.#n(),this.#c(),this.dispatchEvent(new CustomEvent("secure-textarea",{detail:{name:this.#t.name,value:this.#t.value,tier:this.securityTier},bubbles:!0,composed:!0}))}#n(){const t=this.#t.value.length,e=this.#t.maxLength;e>0?(this.#s.textContent=`${t} / ${e}`,t>e*.9?this.#s.classList.add("warning"):this.#s.classList.remove("warning")):this.#s.textContent=`${t}`}#u(){const t=this.checkRateLimit();if(!t.allowed){this.#h(`Too many attempts. Please wait ${Math.ceil(t.retryAfter/1e3)} seconds.`);return}const e=this.getAttribute("minlength"),i=this.getAttribute("maxlength"),s=this.validateInput(this.#t.value,{required:this.hasAttribute("required")||this.config.validation.required,minLength:e?parseInt(e,10):0,maxLength:i?parseInt(i,10):this.config.validation.maxLength});s.valid||this.#h(s.errors.join(", "))}#h(t){this.#i.textContent=t,this.#i.offsetHeight,this.#i.classList.remove("hidden"),this.#t.classList.add("error"),this.#t.setAttribute("aria-invalid","true")}#c(){this.#i.classList.add("hidden"),this.#i.addEventListener("transitionend",()=>{this.#i.classList.contains("hidden")&&(this.#i.textContent="")},{once:!0}),this.#t.classList.remove("error"),this.#t.removeAttribute("aria-invalid")}#m(){return new URL("./secure-textarea.css",import.meta.url).href}handleAttributeChange(t,e,i){if(this.#t)switch(t){case"disabled":this.#t.disabled=this.hasAttribute("disabled");break;case"readonly":this.#t.readOnly=this.hasAttribute("readonly");break;case"value":i!==this.#t.value&&(this.#t.value=i||"",this.#n());break}}get value(){return this.#t?this.#t.value:""}set value(t){this.#t&&(this.#t.value=t||"",this.#n())}get name(){return this.#t?this.#t.name:""}get valid(){const t=this.getAttribute("minlength"),e=this.getAttribute("maxlength");return this.validateInput(this.#t.value,{required:this.hasAttribute("required")||this.config.validation.required,minLength:t?parseInt(t,10):0,maxLength:e?parseInt(e,10):this.config.validation.maxLength}).valid}focus(){this.#t&&this.#t.focus()}blur(){this.#t&&this.#t.blur()}showThreatFeedback(t,e){if(!this.#e||!this.#t)return;this.#e.textContent="";const i=document.createElement("span");i.className="threat-message",i.textContent=this.getThreatLabel(t);const s=document.createElement("span");s.className="threat-badge",s.textContent=t;const a=document.createElement("span");a.className=`threat-tier threat-tier--${e}`,a.textContent=e,this.#e.appendChild(i),this.#e.appendChild(s),this.#e.appendChild(a),this.#e.offsetHeight,this.#e.classList.remove("hidden"),this.#t.classList.add("threat"),this.#t.setAttribute("aria-invalid","true")}clearThreatFeedback(){!this.#e||!this.#t||(this.#e.classList.add("hidden"),this.#e.addEventListener("transitionend",()=>{this.#e.classList.contains("hidden")&&(this.#e.textContent="")},{once:!0}),this.#t.classList.remove("threat"),this.#t.removeAttribute("aria-invalid"))}disconnectedCallback(){super.disconnectedCallback(),this.#t&&(this.#t.value="")}}customElements.define("secure-textarea",h);var p=h;export{h as SecureTextarea,p as default};