secure-ui-components 0.2.2 → 0.2.4

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

@@ -29,573 +29,4 @@
  *
  * @module secure-datetime
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-import { SecurityTier } from '../../core/security-config.js';
-/**
- * Secure DateTime Web Component
- *
- * Provides a security-hardened date/time picker with progressive enhancement.
- * The component works as a standard HTML5 date/time input without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * @extends SecureBaseComponent
- */
-export class SecureDateTime extends SecureBaseComponent {
-    /**
-     * Input element reference
-     * @private
-     */
-    #inputElement = null;
-    /**
-     * Label element reference
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Error container element reference
-     * @private
-     */
-    #errorContainer = null;
-    /**
-     * Timezone display element
-     * @private
-     */
-    #timezoneElement = null;
-    /**
-     * Unique ID for this datetime instance
-     * @private
-     */
-    #instanceId = `secure-datetime-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'type',
-            'label',
-            'required',
-            'min',
-            'max',
-            'step',
-            'value',
-            'show-timezone'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-    }
-    /**
-     * Render the datetime component
-     *
-     * Security Note: We use native HTML5 date/time inputs wrapped in our web component
-     * to ensure progressive enhancement and browser-native date validation.
-     *
-     * @protected
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'datetime-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 input wrapper
-        const inputWrapper = document.createElement('div');
-        inputWrapper.className = 'input-wrapper';
-        inputWrapper.setAttribute('part', 'wrapper');
-        // Create the datetime input element
-        this.#inputElement = document.createElement('input');
-        this.#inputElement.id = this.#instanceId;
-        this.#inputElement.className = 'datetime-field';
-        this.#inputElement.setAttribute('part', 'input');
-        // Apply attributes
-        this.#applyDateTimeAttributes();
-        // Set up event listeners
-        this.#attachEventListeners();
-        inputWrapper.appendChild(this.#inputElement);
-        // Add timezone display if requested
-        if (this.hasAttribute('show-timezone')) {
-            this.#timezoneElement = document.createElement('span');
-            this.#timezoneElement.className = 'timezone-display';
-            this.#timezoneElement.textContent = this.#getTimezoneString();
-            inputWrapper.appendChild(this.#timezoneElement);
-        }
-        container.appendChild(inputWrapper);
-        // 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);
-        // Add component styles (CSP-compliant via adoptedStyleSheets)
-        this.addComponentStyles(this.#getComponentStyles());
-        fragment.appendChild(container);
-        return fragment;
-    }
-    /**
-     * Apply attributes to the datetime input
-     *
-     * @private
-     */
-    #applyDateTimeAttributes() {
-        const config = this.config;
-        // Name attribute
-        const name = this.getAttribute('name');
-        if (name) {
-            this.#inputElement.name = this.sanitizeValue(name);
-        }
-        // Accessible name fallback when no visible label is provided
-        if (!this.getAttribute('label') && name) {
-            this.#inputElement.setAttribute('aria-label', this.sanitizeValue(name));
-        }
-        // Link input to its error container for screen readers
-        this.#inputElement.setAttribute('aria-describedby', `${this.#instanceId}-error`);
-        // Timezone element label
-        if (this.#timezoneElement) {
-            this.#timezoneElement.setAttribute('aria-label', `Timezone: ${this.#getTimezoneString()}`);
-        }
-        // Type attribute (date, time, datetime-local, month, week)
-        const type = this.getAttribute('type') || 'date';
-        const validTypes = ['date', 'time', 'datetime-local', 'month', 'week'];
-        if (validTypes.includes(type)) {
-            this.#inputElement.type = type;
-        }
-        else {
-            console.warn(`Invalid datetime type "${type}", defaulting to "date"`);
-            this.#inputElement.type = 'date';
-        }
-        // Required attribute
-        if (this.hasAttribute('required') || config.validation.required) {
-            this.#inputElement.required = true;
-            this.#inputElement.setAttribute('aria-required', 'true');
-        }
-        // Min/max constraints
-        const min = this.getAttribute('min');
-        if (min) {
-            this.#inputElement.min = this.#validateDateTimeValue(min);
-        }
-        const max = this.getAttribute('max');
-        if (max) {
-            this.#inputElement.max = this.#validateDateTimeValue(max);
-        }
-        // Step attribute
-        const step = this.getAttribute('step');
-        if (step) {
-            this.#inputElement.step = step;
-        }
-        // Disabled state
-        if (this.hasAttribute('disabled')) {
-            this.#inputElement.disabled = true;
-        }
-        // Readonly state
-        if (this.hasAttribute('readonly')) {
-            this.#inputElement.readOnly = true;
-        }
-        // Autocomplete control
-        if (!config.storage.allowAutocomplete) {
-            this.#inputElement.autocomplete = 'off';
-        }
-        // Initial value
-        const value = this.getAttribute('value');
-        if (value) {
-            this.#inputElement.value = this.#validateDateTimeValue(value);
-        }
-    }
-    /**
-     * Validate and sanitize datetime value
-     *
-     * Security Note: Prevent injection of invalid date formats
-     *
-     * @private
-     */
-    #validateDateTimeValue(value) {
-        if (!value)
-            return '';
-        // Basic format validation based on input type
-        const type = this.#inputElement?.type || this.getAttribute('type') || 'date';
-        const patterns = {
-            'date': /^\d{4}-\d{2}-\d{2}$/,
-            // eslint-disable-next-line security/detect-unsafe-regex
-            'time': /^\d{2}:\d{2}(:\d{2})?$/,
-            // eslint-disable-next-line security/detect-unsafe-regex
-            'datetime-local': /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/,
-            'month': /^\d{4}-\d{2}$/,
-            'week': /^\d{4}-W\d{2}$/
-        };
-        const pattern = Object.hasOwn(patterns, type) ? patterns[type] : undefined;
-        if (pattern && !pattern.test(value)) {
-            console.warn(`Invalid ${type} format: ${value}`);
-            return '';
-        }
-        return value;
-    }
-    /**
-     * Get timezone string for display
-     *
-     * @private
-     */
-    #getTimezoneString() {
-        const offset = new Date().getTimezoneOffset();
-        const hours = Math.abs(Math.floor(offset / 60));
-        const minutes = Math.abs(offset % 60);
-        const sign = offset <= 0 ? '+' : '-';
-        return `UTC${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
-    }
-    /**
-     * Attach event listeners
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // Focus event - audit logging + telemetry
-        this.#inputElement.addEventListener('focus', () => {
-            this.recordTelemetryFocus();
-            this.audit('datetime_focused', {
-                name: this.#inputElement.name,
-                type: this.#inputElement.type
-            });
-        });
-        // Input event - real-time validation + telemetry
-        this.#inputElement.addEventListener('input', (e) => {
-            this.recordTelemetryInput(e);
-            this.#handleInput(e);
-        });
-        // Change event - validation and audit
-        this.#inputElement.addEventListener('change', (e) => {
-            this.#handleChange(e);
-        });
-        // Blur event - final validation + telemetry
-        this.#inputElement.addEventListener('blur', () => {
-            this.recordTelemetryBlur();
-            this.#validateAndShowErrors();
-            this.audit('datetime_blurred', {
-                name: this.#inputElement.name,
-                hasValue: this.#inputElement.value.length > 0
-            });
-        });
-    }
-    /**
-     * Handle input events
-     *
-     * @private
-     */
-    #handleInput(_event) {
-        // Clear previous errors on input
-        this.#clearErrors();
-        // Dispatch custom event for parent forms
-        this.dispatchEvent(new CustomEvent('secure-datetime', {
-            detail: {
-                name: this.#inputElement.name,
-                value: this.#inputElement.value,
-                type: this.#inputElement.type,
-                tier: this.securityTier
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Handle change events
-     *
-     * @private
-     */
-    #handleChange(_event) {
-        const value = this.#inputElement.value;
-        // Validate the value
-        const isValid = this.#validateDateTimeValue(value);
-        if (!isValid && value) {
-            this.#showError('Invalid date/time format');
-            return;
-        }
-        // Clear errors
-        this.#clearErrors();
-        // Audit log
-        this.audit('datetime_changed', {
-            name: this.#inputElement.name,
-            type: this.#inputElement.type,
-            value: value
-        });
-    }
-    /**
-     * Validate the datetime 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;
-        }
-        const value = this.#inputElement.value;
-        // Check required
-        if (this.#inputElement.required && !value) {
-            this.#showError('This field is required');
-            return;
-        }
-        // Check min/max constraints
-        if (value) {
-            if (this.#inputElement.min && value < this.#inputElement.min) {
-                this.#showError(`Value must be after ${this.#formatDateForDisplay(this.#inputElement.min)}`);
-                return;
-            }
-            if (this.#inputElement.max && value > this.#inputElement.max) {
-                this.#showError(`Value must be before ${this.#formatDateForDisplay(this.#inputElement.max)}`);
-                return;
-            }
-        }
-        // Additional validation for CRITICAL tier
-        if (this.securityTier === SecurityTier.CRITICAL && value) {
-            const date = new Date(value);
-            // Ensure date is valid
-            if (isNaN(date.getTime())) {
-                this.#showError('Invalid date/time');
-                return;
-            }
-            // Prevent dates too far in the past or future (potential attack)
-            const year = date.getFullYear();
-            if (year < 1900 || year > 2100) {
-                this.#showError('Date must be between 1900 and 2100');
-                return;
-            }
-        }
-    }
-    /**
-     * Format date for display in error messages
-     *
-     * @private
-     */
-    #formatDateForDisplay(dateString) {
-        try {
-            const date = new Date(dateString);
-            return date.toLocaleString();
-        }
-        catch (_e) {
-            return dateString;
-        }
-    }
-    /**
-     * 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.#inputElement.classList.add('error');
-        this.#inputElement.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.#inputElement.classList.remove('error');
-        this.#inputElement.removeAttribute('aria-invalid');
-    }
-    /**
-     * Get component-specific styles
-     *
-     * @private
-     */
-    #getComponentStyles() {
-        return new URL('./secure-datetime.css', import.meta.url).href;
-    }
-    /**
-     * Handle attribute changes
-     *
-     * @protected
-     */
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.#inputElement)
-            return;
-        switch (name) {
-            case 'disabled':
-                this.#inputElement.disabled = this.hasAttribute('disabled');
-                break;
-            case 'readonly':
-                this.#inputElement.readOnly = this.hasAttribute('readonly');
-                break;
-            case 'value':
-                if (newValue !== this.#inputElement.value) {
-                    this.#inputElement.value = this.#validateDateTimeValue(newValue || '');
-                }
-                break;
-            case 'min':
-                this.#inputElement.min = this.#validateDateTimeValue(newValue || '');
-                break;
-            case 'max':
-                this.#inputElement.max = this.#validateDateTimeValue(newValue || '');
-                break;
-        }
-    }
-    /**
-     * Get the current value
-     *
-     * @public
-     */
-    get value() {
-        return this.#inputElement ? this.#inputElement.value : '';
-    }
-    /**
-     * Set the value
-     *
-     * @public
-     */
-    set value(value) {
-        if (this.#inputElement) {
-            this.#inputElement.value = this.#validateDateTimeValue(value || '');
-        }
-    }
-    /**
-     * Get the input name
-     *
-     * @public
-     */
-    get name() {
-        return this.#inputElement ? this.#inputElement.name : '';
-    }
-    /**
-     * Get value as Date object
-     *
-     * @public
-     */
-    getValueAsDate() {
-        if (!this.#inputElement || !this.#inputElement.value) {
-            return null;
-        }
-        try {
-            const date = new Date(this.#inputElement.value);
-            return isNaN(date.getTime()) ? null : date;
-        }
-        catch (_e) {
-            return null;
-        }
-    }
-    /**
-     * Set value from Date object
-     *
-     * @public
-     */
-    setValueFromDate(date) {
-        if (!this.#inputElement || !(date instanceof Date)) {
-            return;
-        }
-        const type = this.#inputElement.type;
-        let value = '';
-        switch (type) {
-            case 'date':
-                value = date.toISOString().split('T')[0];
-                break;
-            case 'time':
-                value = date.toTimeString().slice(0, 5);
-                break;
-            case 'datetime-local':
-                value = date.toISOString().slice(0, 16);
-                break;
-            case 'month':
-                value = date.toISOString().slice(0, 7);
-                break;
-            case 'week':
-                // ISO week calculation
-                const weekDate = new Date(date);
-                weekDate.setHours(0, 0, 0, 0);
-                weekDate.setDate(weekDate.getDate() + 4 - (weekDate.getDay() || 7));
-                const yearStart = new Date(weekDate.getFullYear(), 0, 1);
-                const weekNo = Math.ceil((((weekDate.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
-                value = `${weekDate.getFullYear()}-W${weekNo.toString().padStart(2, '0')}`;
-                break;
-        }
-        this.#inputElement.value = value;
-    }
-    /**
-     * Check if the datetime is valid
-     *
-     * @public
-     */
-    get valid() {
-        const required = this.hasAttribute('required') || this.config.validation.required;
-        const value = this.#inputElement ? this.#inputElement.value : '';
-        // Check required
-        if (required && !value) {
-            return false;
-        }
-        // Check format
-        if (value && !this.#validateDateTimeValue(value)) {
-            return false;
-        }
-        // Check min/max
-        if (this.#inputElement) {
-            if (this.#inputElement.min && value < this.#inputElement.min) {
-                return false;
-            }
-            if (this.#inputElement.max && value > this.#inputElement.max) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Focus the input
-     *
-     * @public
-     */
-    focus() {
-        if (this.#inputElement) {
-            this.#inputElement.focus();
-        }
-    }
-    /**
-     * Blur the input
-     *
-     * @public
-     */
-    blur() {
-        if (this.#inputElement) {
-            this.#inputElement.blur();
-        }
-    }
-    /**
-     * Cleanup on disconnect
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clear value
-        if (this.#inputElement) {
-            this.#inputElement.value = '';
-        }
-    }
-}
-// Define the custom element
-customElements.define('secure-datetime', SecureDateTime);
-export default SecureDateTime;
-//# sourceMappingURL=secure-datetime.js.map
+ */import{SecureBaseComponent as u}from"../../core/base-component.js";import{SecurityTier as d}from"../../core/security-config.js";class l extends u{#t=null;#r=null;#e=null;#a=null;#n=`secure-datetime-${Math.random().toString(36).substring(2,11)}`;static get observedAttributes(){return[...super.observedAttributes,"name","type","label","required","min","max","step","value","show-timezone"]}constructor(){super()}render(){const t=document.createDocumentFragment(),e=document.createElement("div");e.className="datetime-container",e.setAttribute("part","container");const i=this.getAttribute("label");i&&(this.#r=document.createElement("label"),this.#r.htmlFor=this.#n,this.#r.textContent=this.sanitizeValue(i),this.#r.setAttribute("part","label"),e.appendChild(this.#r));const s=document.createElement("div");return s.className="input-wrapper",s.setAttribute("part","wrapper"),this.#t=document.createElement("input"),this.#t.id=this.#n,this.#t.className="datetime-field",this.#t.setAttribute("part","input"),this.#d(),this.#o(),s.appendChild(this.#t),this.hasAttribute("show-timezone")&&(this.#a=document.createElement("span"),this.#a.className="timezone-display",this.#a.textContent=this.#h(),s.appendChild(this.#a)),e.appendChild(s),this.#e=document.createElement("div"),this.#e.className="error-container hidden",this.#e.setAttribute("role","alert"),this.#e.setAttribute("part","error"),this.#e.id=`${this.#n}-error`,e.appendChild(this.#e),this.addComponentStyles(this.#b()),t.appendChild(e),t}#d(){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.#n}-error`),this.#a&&this.#a.setAttribute("aria-label",`Timezone: ${this.#h()}`);const i=this.getAttribute("type")||"date";["date","time","datetime-local","month","week"].includes(i)?this.#t.type=i:(console.warn(`Invalid datetime type "${i}", defaulting to "date"`),this.#t.type="date"),(this.hasAttribute("required")||t.validation.required)&&(this.#t.required=!0,this.#t.setAttribute("aria-required","true"));const a=this.getAttribute("min");a&&(this.#t.min=this.#i(a));const r=this.getAttribute("max");r&&(this.#t.max=this.#i(r));const n=this.getAttribute("step");n&&(this.#t.step=n),this.hasAttribute("disabled")&&(this.#t.disabled=!0),this.hasAttribute("readonly")&&(this.#t.readOnly=!0),t.storage.allowAutocomplete||(this.#t.autocomplete="off");const h=this.getAttribute("value");h&&(this.#t.value=this.#i(h))}#i(t){if(!t)return"";const e=this.#t?.type||this.getAttribute("type")||"date",i={date:/^\d{4}-\d{2}-\d{2}$/,time:/^\d{2}:\d{2}(:\d{2})?$/,"datetime-local":/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/,month:/^\d{4}-\d{2}$/,week:/^\d{4}-W\d{2}$/},s=Object.hasOwn(i,e)?i[e]:void 0;return s&&!s.test(t)?(console.warn(`Invalid ${e} format: ${t}`),""):t}#h(){const t=new Date().getTimezoneOffset(),e=Math.abs(Math.floor(t/60)),i=Math.abs(t%60);return`UTC${t<=0?"+":"-"}${e.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}#o(){this.#t.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.audit("datetime_focused",{name:this.#t.name,type:this.#t.type})}),this.#t.addEventListener("input",t=>{this.recordTelemetryInput(t),this.#c(t)}),this.#t.addEventListener("change",t=>{this.#m(t)}),this.#t.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#p(),this.audit("datetime_blurred",{name:this.#t.name,hasValue:this.#t.value.length>0})})}#c(t){this.#u(),this.dispatchEvent(new CustomEvent("secure-datetime",{detail:{name:this.#t.name,value:this.#t.value,type:this.#t.type,tier:this.securityTier},bubbles:!0,composed:!0}))}#m(t){const e=this.#t.value;if(!this.#i(e)&&e){this.#s("Invalid date/time format");return}this.#u(),this.audit("datetime_changed",{name:this.#t.name,type:this.#t.type,value:e})}#p(){const t=this.checkRateLimit();if(!t.allowed){this.#s(`Too many attempts. Please wait ${Math.ceil(t.retryAfter/1e3)} seconds.`);return}const e=this.#t.value;if(this.#t.required&&!e){this.#s("This field is required");return}if(e){if(this.#t.min&&e<this.#t.min){this.#s(`Value must be after ${this.#l(this.#t.min)}`);return}if(this.#t.max&&e>this.#t.max){this.#s(`Value must be before ${this.#l(this.#t.max)}`);return}}if(this.securityTier===d.CRITICAL&&e){const i=new Date(e);if(isNaN(i.getTime())){this.#s("Invalid date/time");return}const s=i.getFullYear();if(s<1900||s>2100){this.#s("Date must be between 1900 and 2100");return}}}#l(t){try{return new Date(t).toLocaleString()}catch{return t}}#s(t){this.#e.textContent=t,this.#e.offsetHeight,this.#e.classList.remove("hidden"),this.#t.classList.add("error"),this.#t.setAttribute("aria-invalid","true")}#u(){this.#e.classList.add("hidden"),this.#e.addEventListener("transitionend",()=>{this.#e.classList.contains("hidden")&&(this.#e.textContent="")},{once:!0}),this.#t.classList.remove("error"),this.#t.removeAttribute("aria-invalid")}#b(){return new URL("./secure-datetime.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=this.#i(i||""));break;case"min":this.#t.min=this.#i(i||"");break;case"max":this.#t.max=this.#i(i||"");break}}get value(){return this.#t?this.#t.value:""}set value(t){this.#t&&(this.#t.value=this.#i(t||""))}get name(){return this.#t?this.#t.name:""}getValueAsDate(){if(!this.#t||!this.#t.value)return null;try{const t=new Date(this.#t.value);return isNaN(t.getTime())?null:t}catch{return null}}setValueFromDate(t){if(!this.#t||!(t instanceof Date))return;const e=this.#t.type;let i="";switch(e){case"date":i=t.toISOString().split("T")[0];break;case"time":i=t.toTimeString().slice(0,5);break;case"datetime-local":i=t.toISOString().slice(0,16);break;case"month":i=t.toISOString().slice(0,7);break;case"week":const s=new Date(t);s.setHours(0,0,0,0),s.setDate(s.getDate()+4-(s.getDay()||7));const a=new Date(s.getFullYear(),0,1),r=Math.ceil(((s.getTime()-a.getTime())/864e5+1)/7);i=`${s.getFullYear()}-W${r.toString().padStart(2,"0")}`;break}this.#t.value=i}get valid(){const t=this.hasAttribute("required")||this.config.validation.required,e=this.#t?this.#t.value:"";return!(t&&!e||e&&!this.#i(e)||this.#t&&(this.#t.min&&e<this.#t.min||this.#t.max&&e>this.#t.max))}focus(){this.#t&&this.#t.focus()}blur(){this.#t&&this.#t.blur()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&(this.#t.value="")}}customElements.define("secure-datetime",l);var p=l;export{l as SecureDateTime,p as default};