@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-input.js

@@ -1,420 +1 @@
-import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
-import { getPasswordValidation } from './input-validation.js';
-import { attachNumberScrub, readNumericAttribute } from './number-scrub.js';
-
-const TYPES = ['text', 'email', 'password', 'url', 'search', 'tel', 'number'];
-const SIZES = ['s', 'm', 'l'];
-const ICON_NAMES = new Set([
-    'arrow-bar-left', 'arrow-bar-right', 'caret-down-filled', 'chevron-down', 'chevron-left',
-    'chevron-right', 'circle-checked', 'close', 'error-filled', 'edit', 'hide', 'info-filled',
-    'lock', 'mail', 'plus', 'search', 'share-alt', 'show', 'sparkle', 'trash', 'user', 'warning-filled',
-]);
-class DbInput extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.passwordVisible = false;
-        this.isFocused = false;
-        this.touched = false;
-        this.isScrubbing = false;
-        this.handleInput = (event) => {
-            event.stopPropagation();
-            const target = event.target;
-            this.updateDynamicUI();
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent('db-input', {
-                detail: { value: target.value, nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handleChange = (event) => {
-            event.stopPropagation();
-            const target = event.target;
-            this.dispatchEvent(new Event('change', { bubbles: true }));
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: { value: target.value, nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handleFocus = (event) => {
-            this.isFocused = true;
-            this.updateDynamicUI();
-            this.dispatchEvent(new CustomEvent('db-focus', {
-                detail: { nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handleBlur = (event) => {
-            this.isFocused = false;
-            this.touched = true;
-            this.updateDynamicUI();
-            this.dispatchEvent(new CustomEvent('db-blur', {
-                detail: { nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handlePasswordToggle = () => {
-            this.passwordVisible = !this.passwordVisible;
-            this.render();
-        };
-        this.handleSearchClear = () => {
-            if (!this.input)
-                return;
-            this.input.value = '';
-            this.setAttribute('value', '');
-            this.input.focus();
-            this.updateDynamicUI();
-            this.dispatchEvent(new CustomEvent('db-input', {
-                detail: { value: '', nativeEvent: null },
-                bubbles: true,
-                composed: true,
-            }));
-            this.dispatchEvent(new CustomEvent('db-clear', {
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'type',
-            'label',
-            'placeholder',
-            'value',
-            'default-value',
-            'size',
-            'disabled',
-            'readonly',
-            'required',
-            'error',
-            'error-message',
-            'helper-text',
-            'full-width',
-            'name',
-            'start-icon',
-            'end-icon',
-            'validate',
-            'validation-visibility',
-            'validate-on-blur',
-            'password-min-length',
-            'scrubbable',
-            'scrub-step',
-            'scrub-sensitivity',
-            'min',
-            'max',
-            'step',
-        ];
-    }
-    get value() {
-        return this.input?.value ?? this.getAttribute('value') ?? '';
-    }
-    set value(value) {
-        this.setAttribute('value', value);
-        if (this.input)
-            this.input.value = value;
-        this.updateDynamicUI();
-    }
-    get type() {
-        return this.getAttribute('type') || 'text';
-    }
-    set type(value) {
-        this.setAttribute('type', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-    }
-    get readOnly() {
-        return this.hasAttribute('readonly');
-    }
-    set readOnly(value) {
-        this.toggleAttribute('readonly', value);
-    }
-    connectedCallback() {
-        this.render();
-    }
-    disconnectedCallback() {
-        this.detachScrub?.();
-        this.detachScrub = undefined;
-    }
-    attributeChangedCallback(name) {
-        if (name === 'value' && this.isScrubbing)
-            return;
-        if (name === 'value' && this.input) {
-            const next = this.getAttribute('value') ?? '';
-            if (this.input.value !== next)
-                this.input.value = next;
-            this.updateDynamicUI();
-            return;
-        }
-        this.render();
-    }
-    focus() {
-        this.input?.focus();
-    }
-    get passwordMinLength() {
-        return Number(this.getAttribute('password-min-length') || 8);
-    }
-    get validationVisibility() {
-        return this.getAttribute('validation-visibility') || 'focus';
-    }
-    get validateOnBlur() {
-        return !this.hasAttribute('validate-on-blur') || this.getAttribute('validate-on-blur') !== 'false';
-    }
-    get isValidationEnabled() {
-        return this.hasAttribute('validate');
-    }
-    getIconSize() {
-        return getDbComponentIconSize(this.size);
-    }
-    resolveIconName(attribute) {
-        const value = this.getAttribute(attribute);
-        if (value && ICON_NAMES.has(value))
-            return value;
-        return undefined;
-    }
-    resolveStartIcon() {
-        const explicit = this.resolveIconName('start-icon');
-        if (explicit)
-            return explicit;
-        if (this.type === 'search')
-            return 'search';
-        return undefined;
-    }
-    getCurrentValue() {
-        return this.input?.value ?? this.getAttribute('value') ?? this.getAttribute('default-value') ?? '';
-    }
-    render() {
-        const value = this.getCurrentValue();
-        const type = TYPES.includes(this.type) ? this.type : 'text';
-        const isSearch = type === 'search';
-        const isPassword = type === 'password';
-        const actualType = isPassword && this.passwordVisible ? 'text' : isSearch ? 'text' : type;
-        const label = this.getAttribute('label') || '';
-        const helperText = this.getAttribute('helper-text') || '';
-        const errorMessage = this.getAttribute('error-message') || '';
-        const hasError = this.hasAttribute('error');
-        const startIcon = this.resolveStartIcon();
-        const endIcon = this.resolveIconName('end-icon');
-        this.classList.add('designbase-wc-input');
-        SIZES.forEach((size) => this.classList.remove(`designbase-wc-input--${size}`));
-        this.classList.add(`designbase-wc-input--${SIZES.includes(this.size) ? this.size : 'm'}`);
-        this.classList.toggle('designbase-wc-input--error', hasError);
-        this.classList.toggle('designbase-wc-input--disabled', this.disabled);
-        this.classList.toggle('designbase-wc-input--readonly', this.readOnly);
-        this.classList.toggle('designbase-wc-input--full-width', this.hasAttribute('full-width'));
-        this.classList.toggle('designbase-wc-input--with-start-icon', Boolean(startIcon));
-        const showSearchClear = isSearch && value.length > 0 && !this.disabled && !this.readOnly;
-        this.classList.toggle('designbase-wc-input--with-end-icon', Boolean(endIcon && !isPassword && !isSearch) || isPassword || showSearchClear);
-        this.classList.toggle('designbase-wc-input--with-password-toggle', isPassword);
-        this.classList.toggle('designbase-wc-input--with-search-clear', showSearchClear);
-        const isScrubbable = this.hasAttribute('scrubbable') && type === 'number' && !this.disabled && !this.readOnly;
-        this.classList.toggle('designbase-wc-input--scrubbable', isScrubbable);
-        this.classList.toggle('designbase-wc-input--scrubbing', this.isScrubbing);
-        const id = this.getAttribute('id') || `db-input-${Math.random().toString(36).slice(2)}`;
-        if (!this.hasAttribute('id'))
-            this.setAttribute('id', id);
-        const fieldId = `${id}-field`;
-        const helperId = `${id}-helper`;
-        const errorId = `${id}-error`;
-        const validationId = `${id}-validation`;
-        const min = this.getAttribute('min');
-        const max = this.getAttribute('max');
-        const step = this.getAttribute('step');
-        this.innerHTML = `
-            ${label ? `<label class="designbase-wc-input__label" for="${fieldId}">${this.escape(label)}${this.hasAttribute('required') ? '<span aria-hidden="true"> *</span>' : ''}</label>` : ''}
-            <span class="designbase-wc-input__wrapper">
-                ${startIcon ? '<span class="designbase-wc-input__start-icon" aria-hidden="true"></span>' : ''}
-                <input
-                    id="${fieldId}"
-                    class="designbase-wc-input__field"
-                    type="${actualType}"
-                    value="${this.escape(value)}"
-                    placeholder="${this.escape(this.getAttribute('placeholder') || '')}"
-                    ${isSearch ? 'role="searchbox"' : ''}
-                    ${this.getAttribute('name') ? `name="${this.escape(this.getAttribute('name') || '')}"` : ''}
-                    ${this.disabled ? 'disabled' : ''}
-                    ${this.readOnly ? 'readonly' : ''}
-                    ${this.hasAttribute('required') ? 'required' : ''}
-                    ${min !== null ? `min="${this.escape(min)}"` : ''}
-                    ${max !== null ? `max="${this.escape(max)}"` : ''}
-                    ${step !== null ? `step="${this.escape(step)}"` : ''}
-                    aria-invalid="${String(hasError)}"
-                />
-                ${isPassword ? `<button type="button" class="designbase-wc-input__password-toggle" ${this.disabled ? 'disabled' : ''} aria-label="${this.passwordVisible ? '비밀번호 숨기기' : '비밀번호 보기'}"></button>` : ''}
-                ${isSearch ? `<button type="button" class="designbase-wc-input__clear-button" hidden aria-label="검색어 지우기"></button>` : ''}
-                ${endIcon && !isPassword && !isSearch ? '<span class="designbase-wc-input__end-icon" aria-hidden="true"></span>' : ''}
-            </span>
-            ${this.isValidationEnabled && isPassword ? `<div class="designbase-wc-input__validation-slot" id="${validationId}"></div>` : ''}
-            ${helperText && !hasError ? `<p id="${helperId}" class="designbase-wc-input__helper-text">${this.escape(helperText)}</p>` : ''}
-            ${hasError && errorMessage ? `<p id="${errorId}" class="designbase-wc-input__error-message">${this.escape(errorMessage)}</p>` : ''}
-        `;
-        this.mountIcons(startIcon, endIcon && !isPassword && !isSearch ? endIcon : undefined, isPassword);
-        this.input = this.querySelector('input') || undefined;
-        if (this.input) {
-            this.input.value = value;
-            this.input.addEventListener('input', this.handleInput);
-            this.input.addEventListener('change', this.handleChange);
-            this.input.addEventListener('focus', this.handleFocus);
-            this.input.addEventListener('blur', this.handleBlur);
-        }
-        this.querySelector('.designbase-wc-input__password-toggle')
-            ?.addEventListener('click', this.handlePasswordToggle);
-        this.querySelector('.designbase-wc-input__clear-button')
-            ?.addEventListener('click', this.handleSearchClear);
-        this.detachScrub?.();
-        this.detachScrub = undefined;
-        if (isScrubbable && this.input) {
-            this.detachScrub = attachNumberScrub(this.input, {
-                isEnabled: () => this.hasAttribute('scrubbable') && this.type === 'number',
-                isInteractive: () => !this.disabled && !this.readOnly,
-                getValue: () => this.getCurrentValue(),
-                getStep: () => readNumericAttribute(this, 'scrub-step') ?? readNumericAttribute(this, 'step') ?? 1,
-                getMin: () => readNumericAttribute(this, 'min'),
-                getMax: () => readNumericAttribute(this, 'max'),
-                getSensitivity: () => readNumericAttribute(this, 'scrub-sensitivity') ?? 4,
-                onValueChange: (nextValue) => this.applyScrubValue(nextValue),
-                onScrubStateChange: (active) => {
-                    this.isScrubbing = active;
-                    this.classList.toggle('designbase-wc-input--scrubbing', active);
-                    if (!active && this.input) {
-                        this.dispatchEvent(new CustomEvent('db-change', {
-                            detail: { value: this.input.value, nativeEvent: null },
-                            bubbles: true,
-                            composed: true,
-                        }));
-                    }
-                },
-            });
-        }
-        this.updateDynamicUI();
-    }
-    mountIcons(startIcon, endIcon, isPassword = false) {
-        const iconSize = this.getIconSize();
-        if (startIcon) {
-            const host = this.querySelector('.designbase-wc-input__start-icon');
-            host?.replaceChildren(createDbIcon(startIcon, iconSize));
-        }
-        if (endIcon) {
-            const host = this.querySelector('.designbase-wc-input__end-icon');
-            host?.replaceChildren(createDbIcon(endIcon, iconSize));
-        }
-        if (isPassword) {
-            const toggle = this.querySelector('.designbase-wc-input__password-toggle');
-            toggle?.replaceChildren(createDbIcon(this.passwordVisible ? 'hide' : 'show', iconSize));
-        }
-        const clearButton = this.querySelector('.designbase-wc-input__clear-button');
-        clearButton?.replaceChildren(createDbIcon('close', iconSize));
-    }
-    shouldShowPasswordValidation(value) {
-        if (!this.isValidationEnabled || this.type !== 'password')
-            return false;
-        if (this.validationVisibility === 'never')
-            return false;
-        if (this.validationVisibility === 'always')
-            return true;
-        return this.isFocused || value.length > 0;
-    }
-    renderValidationMarkup(value) {
-        const validation = getPasswordValidation(value, this.passwordMinLength);
-        const segments = Array.from({ length: 4 }, (_, index) => {
-            const active = index < validation.score;
-            const levelClass = active ? ` designbase-wc-input__password-strength-segment--${validation.level}` : '';
-            return `<span class="designbase-wc-input__password-strength-segment${levelClass}"></span>`;
-        }).join('');
-        const requirements = validation.requirements.map((requirement) => {
-            const metClass = requirement.met ? ' designbase-wc-input__password-requirement--met' : '';
-            const icon = requirement.met
-                ? '<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"></span>'
-                : '<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"><span class="designbase-wc-input__password-requirement-dot"></span></span>';
-            return `<li class="designbase-wc-input__password-requirement${metClass}">${icon}<span class="designbase-wc-input__password-requirement-label">${this.escape(requirement.label)}</span></li>`;
-        }).join('');
-        return `
-            <div class="designbase-wc-input__validation" aria-live="polite">
-                <div class="designbase-wc-input__password-strength">
-                    <div class="designbase-wc-input__password-strength-bar" role="progressbar" aria-valuemin="0" aria-valuemax="4" aria-valuenow="${validation.score}" aria-label="비밀번호 강도">${segments}</div>
-                    <span class="designbase-wc-input__password-strength-label designbase-wc-input__password-strength-label--${validation.level}">${validation.levelLabel}</span>
-                </div>
-                <ul class="designbase-wc-input__password-requirements">${requirements}</ul>
-            </div>
-        `;
-    }
-    updateDynamicUI() {
-        const value = this.getCurrentValue();
-        const isSearch = this.type === 'search';
-        const showSearchClear = isSearch && value.length > 0 && !this.disabled && !this.readOnly;
-        this.classList.toggle('designbase-wc-input--with-search-clear', showSearchClear);
-        const clearButton = this.querySelector('.designbase-wc-input__clear-button');
-        if (clearButton) {
-            clearButton.hidden = !showSearchClear;
-            clearButton.replaceChildren(createDbIcon('close', this.getIconSize()));
-        }
-        const validationSlot = this.querySelector('.designbase-wc-input__validation-slot');
-        if (validationSlot) {
-            if (this.shouldShowPasswordValidation(value)) {
-                validationSlot.innerHTML = this.renderValidationMarkup(value);
-                validationSlot.querySelectorAll('.designbase-wc-input__password-requirement--met .designbase-wc-input__password-requirement-icon')
-                    .forEach((iconHost) => {
-                    iconHost.replaceChildren(createDbIcon('circle-checked', 12));
-                });
-            }
-            else {
-                validationSlot.innerHTML = '';
-            }
-        }
-        if (this.input) {
-            const helperId = `${this.getAttribute('id')}-helper`;
-            const errorId = `${this.getAttribute('id')}-error`;
-            const validationId = `${this.getAttribute('id')}-validation`;
-            const helperText = this.getAttribute('helper-text') || '';
-            const errorMessage = this.getAttribute('error-message') || '';
-            const hasError = this.hasAttribute('error');
-            const describedBy = [
-                helperText && !hasError ? helperId : '',
-                this.shouldShowPasswordValidation(value) ? validationId : '',
-                hasError && errorMessage ? errorId : '',
-            ].filter(Boolean).join(' ') || undefined;
-            if (describedBy)
-                this.input.setAttribute('aria-describedby', describedBy);
-            else
-                this.input.removeAttribute('aria-describedby');
-        }
-    }
-    applyScrubValue(nextValue) {
-        if (!this.input)
-            return;
-        this.input.value = nextValue;
-        this.setAttribute('value', nextValue);
-        this.updateDynamicUI();
-        this.dispatchEvent(new CustomEvent('db-input', {
-            detail: { value: nextValue, nativeEvent: null },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    escape(value) {
-        return value.replace(/[&<>"']/g, (char) => ({
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;',
-        }[char] || char));
-    }
-}
-if (!customElements.get('db-input')) {
-    customElements.define('db-input', DbInput);
-}
-
-export { DbInput };
+import{getDbComponentIconSize as t,createDbIcon as e}from"./db-icons.js";import{getPasswordValidation as s}from"./input-validation.js";import{attachNumberScrub as i,readNumericAttribute as n}from"./number-scrub.js";const a=["text","email","password","url","search","tel","number"],r=["s","m","l"],l=new Set(["arrow-bar-left","arrow-bar-right","caret-down-filled","chevron-down","chevron-left","chevron-right","circle-checked","close","error-filled","edit","hide","info-filled","lock","mail","plus","search","share-alt","show","sparkle","trash","user","warning-filled"]);class DbInput extends HTMLElement{constructor(){super(...arguments),this.passwordVisible=!1,this.isFocused=!1,this.touched=!1,this.isScrubbing=!1,this.handleInput=t=>{t.stopPropagation();const e=t.target;this.updateDynamicUI(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleChange=t=>{t.stopPropagation();const e=t.target;this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleFocus=t=>{this.isFocused=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-focus",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handleBlur=t=>{this.isFocused=!1,this.touched=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-blur",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handlePasswordToggle=()=>{this.passwordVisible=!this.passwordVisible,this.render()},this.handleSearchClear=()=>{this.input&&(this.input.value="",this.setAttribute("value",""),this.input.focus(),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:"",nativeEvent:null},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["type","label","placeholder","value","default-value","size","disabled","readonly","required","error","error-message","helper-text","full-width","name","start-icon","end-icon","validate","validation-visibility","validate-on-blur","password-min-length","scrubbable","scrub-step","scrub-sensitivity","min","max","step"]}get value(){return this.input?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.input&&(this.input.value=t),this.updateDynamicUI()}get type(){return this.getAttribute("type")||"text"}set type(t){this.setAttribute("type",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.render()}disconnectedCallback(){this.detachScrub?.(),this.detachScrub=void 0}attributeChangedCallback(t){if("value"!==t||!this.isScrubbing){if("value"===t&&this.input){const t=this.getAttribute("value")??"";return this.input.value!==t&&(this.input.value=t),void this.updateDynamicUI()}this.render()}}focus(){this.input?.focus()}get passwordMinLength(){return Number(this.getAttribute("password-min-length")||8)}get validationVisibility(){return this.getAttribute("validation-visibility")||"focus"}get validateOnBlur(){return!this.hasAttribute("validate-on-blur")||"false"!==this.getAttribute("validate-on-blur")}get isValidationEnabled(){return this.hasAttribute("validate")}getIconSize(){return t(this.size)}resolveIconName(t){const e=this.getAttribute(t);if(e&&l.has(e))return e}resolveStartIcon(){const t=this.resolveIconName("start-icon");return t||("search"===this.type?"search":void 0)}getCurrentValue(){return this.input?.value??this.getAttribute("value")??this.getAttribute("default-value")??""}render(){const t=this.getCurrentValue(),e=a.includes(this.type)?this.type:"text",s="search"===e,l="password"===e,u=l&&this.passwordVisible||s?"text":e,d=this.getAttribute("label")||"",h=this.getAttribute("helper-text")||"",c=this.getAttribute("error-message")||"",o=this.hasAttribute("error"),b=this.resolveStartIcon(),p=this.resolveIconName("end-icon");this.classList.add("designbase-wc-input"),r.forEach(t=>this.classList.remove(`designbase-wc-input--${t}`)),this.classList.add(`designbase-wc-input--${r.includes(this.size)?this.size:"m"}`),this.classList.toggle("designbase-wc-input--error",o),this.classList.toggle("designbase-wc-input--disabled",this.disabled),this.classList.toggle("designbase-wc-input--readonly",this.readOnly),this.classList.toggle("designbase-wc-input--full-width",this.hasAttribute("full-width")),this.classList.toggle("designbase-wc-input--with-start-icon",Boolean(b));const g=s&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-end-icon",Boolean(p&&!l&&!s)||l||g),this.classList.toggle("designbase-wc-input--with-password-toggle",l),this.classList.toggle("designbase-wc-input--with-search-clear",g);const v=this.hasAttribute("scrubbable")&&"number"===e&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--scrubbable",v),this.classList.toggle("designbase-wc-input--scrubbing",this.isScrubbing);const w=this.getAttribute("id")||`db-input-${Math.random().toString(36).slice(2)}`;this.hasAttribute("id")||this.setAttribute("id",w);const m=`${w}-field`,_=`${w}-helper`,y=`${w}-error`,$=`${w}-validation`,A=this.getAttribute("min"),E=this.getAttribute("max"),S=this.getAttribute("step");this.innerHTML=`\n            ${d?`<label class="designbase-wc-input__label" for="${m}">${this.escape(d)}${this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':""}</label>`:""}\n            <span class="designbase-wc-input__wrapper">\n                ${b?'<span class="designbase-wc-input__start-icon" aria-hidden="true"></span>':""}\n                <input\n                    id="${m}"\n                    class="designbase-wc-input__field"\n                    type="${u}"\n                    value="${this.escape(t)}"\n                    placeholder="${this.escape(this.getAttribute("placeholder")||"")}"\n                    ${s?'role="searchbox"':""}\n                    ${this.getAttribute("name")?`name="${this.escape(this.getAttribute("name")||"")}"`:""}\n                    ${this.disabled?"disabled":""}\n                    ${this.readOnly?"readonly":""}\n                    ${this.hasAttribute("required")?"required":""}\n                    ${null!==A?`min="${this.escape(A)}"`:""}\n                    ${null!==E?`max="${this.escape(E)}"`:""}\n                    ${null!==S?`step="${this.escape(S)}"`:""}\n                    aria-invalid="${String(o)}"\n                />\n                ${l?`<button type="button" class="designbase-wc-input__password-toggle" ${this.disabled?"disabled":""} aria-label="${this.passwordVisible?"비밀번호 숨기기":"비밀번호 보기"}"></button>`:""}\n                ${s?'<button type="button" class="designbase-wc-input__clear-button" hidden aria-label="검색어 지우기"></button>':""}\n                ${!p||l||s?"":'<span class="designbase-wc-input__end-icon" aria-hidden="true"></span>'}\n            </span>\n            ${this.isValidationEnabled&&l?`<div class="designbase-wc-input__validation-slot" id="${$}"></div>`:""}\n            ${h&&!o?`<p id="${_}" class="designbase-wc-input__helper-text">${this.escape(h)}</p>`:""}\n            ${o&&c?`<p id="${y}" class="designbase-wc-input__error-message">${this.escape(c)}</p>`:""}\n        `,this.mountIcons(b,!p||l||s?void 0:p,l),this.input=this.querySelector("input")||void 0,this.input&&(this.input.value=t,this.input.addEventListener("input",this.handleInput),this.input.addEventListener("change",this.handleChange),this.input.addEventListener("focus",this.handleFocus),this.input.addEventListener("blur",this.handleBlur)),this.querySelector(".designbase-wc-input__password-toggle")?.addEventListener("click",this.handlePasswordToggle),this.querySelector(".designbase-wc-input__clear-button")?.addEventListener("click",this.handleSearchClear),this.detachScrub?.(),this.detachScrub=void 0,v&&this.input&&(this.detachScrub=i(this.input,{isEnabled:()=>this.hasAttribute("scrubbable")&&"number"===this.type,isInteractive:()=>!this.disabled&&!this.readOnly,getValue:()=>this.getCurrentValue(),getStep:()=>n(this,"scrub-step")??n(this,"step")??1,getMin:()=>n(this,"min"),getMax:()=>n(this,"max"),getSensitivity:()=>n(this,"scrub-sensitivity")??4,onValueChange:t=>this.applyScrubValue(t),onScrubStateChange:t=>{this.isScrubbing=t,this.classList.toggle("designbase-wc-input--scrubbing",t),!t&&this.input&&this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.input.value,nativeEvent:null},bubbles:!0,composed:!0}))}})),this.updateDynamicUI()}mountIcons(t,s,i=!1){const n=this.getIconSize();if(t){const s=this.querySelector(".designbase-wc-input__start-icon");s?.replaceChildren(e(t,n))}if(s){const t=this.querySelector(".designbase-wc-input__end-icon");t?.replaceChildren(e(s,n))}if(i){const t=this.querySelector(".designbase-wc-input__password-toggle");t?.replaceChildren(e(this.passwordVisible?"hide":"show",n))}const a=this.querySelector(".designbase-wc-input__clear-button");a?.replaceChildren(e("close",n))}shouldShowPasswordValidation(t){return!(!this.isValidationEnabled||"password"!==this.type)&&("never"!==this.validationVisibility&&("always"===this.validationVisibility||(this.isFocused||t.length>0)))}renderValidationMarkup(t){const e=s(t,this.passwordMinLength),i=Array.from({length:4},(t,s)=>`<span class="designbase-wc-input__password-strength-segment${s<e.score?` designbase-wc-input__password-strength-segment--${e.level}`:""}"></span>`).join(""),n=e.requirements.map(t=>`<li class="designbase-wc-input__password-requirement${t.met?" designbase-wc-input__password-requirement--met":""}">${t.met?'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"></span>':'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"><span class="designbase-wc-input__password-requirement-dot"></span></span>'}<span class="designbase-wc-input__password-requirement-label">${this.escape(t.label)}</span></li>`).join("");return`\n            <div class="designbase-wc-input__validation" aria-live="polite">\n                <div class="designbase-wc-input__password-strength">\n                    <div class="designbase-wc-input__password-strength-bar" role="progressbar" aria-valuemin="0" aria-valuemax="4" aria-valuenow="${e.score}" aria-label="비밀번호 강도">${i}</div>\n                    <span class="designbase-wc-input__password-strength-label designbase-wc-input__password-strength-label--${e.level}">${e.levelLabel}</span>\n                </div>\n                <ul class="designbase-wc-input__password-requirements">${n}</ul>\n            </div>\n        `}updateDynamicUI(){const t=this.getCurrentValue(),s="search"===this.type&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-search-clear",s);const i=this.querySelector(".designbase-wc-input__clear-button");i&&(i.hidden=!s,i.replaceChildren(e("close",this.getIconSize())));const n=this.querySelector(".designbase-wc-input__validation-slot");if(n&&(this.shouldShowPasswordValidation(t)?(n.innerHTML=this.renderValidationMarkup(t),n.querySelectorAll(".designbase-wc-input__password-requirement--met .designbase-wc-input__password-requirement-icon").forEach(t=>{t.replaceChildren(e("circle-checked",12))})):n.innerHTML=""),this.input){const e=`${this.getAttribute("id")}-helper`,s=`${this.getAttribute("id")}-error`,i=`${this.getAttribute("id")}-validation`,n=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),l=[n&&!r?e:"",this.shouldShowPasswordValidation(t)?i:"",r&&a?s:""].filter(Boolean).join(" ")||void 0;l?this.input.setAttribute("aria-describedby",l):this.input.removeAttribute("aria-describedby")}}applyScrubValue(t){this.input&&(this.input.value=t,this.setAttribute("value",t),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:t,nativeEvent:null},bubbles:!0,composed:!0})))}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-input")||customElements.define("db-input",DbInput);export{DbInput};