@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,233 +1 @@
-const SIZES = ['s', 'm', 'l'];
-class DbTextarea extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.handleInput = (event) => {
-            event.stopPropagation();
-            if (!this.field)
-                return;
-            this.updateCharacterCount();
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-            this.dispatchEvent(new CustomEvent('db-input', {
-                detail: { value: this.field.value, nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handleChange = (event) => {
-            event.stopPropagation();
-            if (!this.field)
-                return;
-            const nextValue = this.field.value;
-            if (this.getAttribute('value') !== nextValue) {
-                this.setAttribute('value', nextValue);
-            }
-            this.updateCharacterCount();
-            this.dispatchEvent(new Event('change', { bubbles: true }));
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: { value: nextValue, nativeEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'label',
-            'placeholder',
-            'value',
-            'default-value',
-            'name',
-            'size',
-            'rows',
-            'max-length',
-            'show-character-count',
-            'character-count-position',
-            'disabled',
-            'readonly',
-            'required',
-            'error',
-            'error-message',
-            'helper-text',
-            'full-width',
-            'resizable',
-        ];
-    }
-    get value() {
-        return this.field?.value ?? this.getAttribute('value') ?? '';
-    }
-    set value(value) {
-        this.setAttribute('value', value);
-        if (this.field) {
-            this.field.value = value;
-            this.updateCharacterCount();
-        }
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.build();
-        }
-        this.syncState();
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'value' && this.field) {
-            const next = this.getAttribute('value') || '';
-            if (this.field.value !== next) {
-                this.field.value = next;
-            }
-            this.updateCharacterCount();
-            return;
-        }
-        this.syncState();
-    }
-    focus() {
-        this.field?.focus();
-    }
-    get showCharacterCount() {
-        return this.hasAttribute('show-character-count');
-    }
-    get characterCountPosition() {
-        return this.getAttribute('character-count-position') || 'bottom';
-    }
-    build() {
-        const id = this.getAttribute('id') || `db-textarea-${Math.random().toString(36).slice(2)}`;
-        if (!this.hasAttribute('id'))
-            this.setAttribute('id', id);
-        this.labelEl = document.createElement('label');
-        this.labelEl.className = 'designbase-wc-textarea__label';
-        this.labelEl.htmlFor = id;
-        this.countTop = document.createElement('div');
-        this.countTop.className = 'designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top';
-        this.countTop.hidden = true;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'designbase-wc-textarea__wrapper';
-        this.field = document.createElement('textarea');
-        this.field.id = id;
-        this.field.className = 'designbase-wc-textarea__field';
-        this.field.addEventListener('input', this.handleInput);
-        this.field.addEventListener('change', this.handleChange);
-        wrapper.appendChild(this.field);
-        this.footerEl = document.createElement('div');
-        this.footerEl.className = 'designbase-wc-textarea__footer';
-        this.errorEl = document.createElement('div');
-        this.errorEl.className = 'designbase-wc-textarea__error-message';
-        this.errorEl.setAttribute('role', 'alert');
-        this.helperEl = document.createElement('div');
-        this.helperEl.className = 'designbase-wc-textarea__helper-text';
-        this.countBottom = document.createElement('div');
-        this.countBottom.className = 'designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom';
-        this.countBottom.hidden = true;
-        this.footerEl.append(this.errorEl, this.helperEl, this.countBottom);
-        this.append(this.labelEl, this.countTop, wrapper, this.footerEl);
-        this.built = true;
-    }
-    syncState() {
-        if (!this.field)
-            return;
-        const size = SIZES.includes(this.size) ? this.size : 'm';
-        const label = this.getAttribute('label') || '';
-        const helperText = this.getAttribute('helper-text') || '';
-        const errorMessage = this.getAttribute('error-message') || '';
-        const hasError = this.hasAttribute('error');
-        const value = this.getAttribute('value') ?? this.getAttribute('default-value') ?? '';
-        this.className = [
-            'designbase-wc-textarea',
-            `designbase-wc-textarea--${size}`,
-            hasError && 'designbase-wc-textarea--error',
-            this.hasAttribute('disabled') && 'designbase-wc-textarea--disabled',
-            this.hasAttribute('readonly') && 'designbase-wc-textarea--readonly',
-            this.hasAttribute('full-width') && 'designbase-wc-textarea--full-width',
-            this.hasAttribute('resizable') ? '' : 'designbase-wc-textarea--not-resizable',
-        ].filter(Boolean).join(' ');
-        if (this.labelEl) {
-            const requiredMark = this.hasAttribute('required') ? '<span aria-hidden="true"> *</span>' : '';
-            this.labelEl.innerHTML = label ? `${this.escape(label)}${requiredMark}` : '';
-            this.labelEl.hidden = !label;
-        }
-        this.field.placeholder = this.getAttribute('placeholder') || '';
-        this.field.name = this.getAttribute('name') || '';
-        if (this.field.value !== value) {
-            this.field.value = value;
-        }
-        this.field.rows = Number(this.getAttribute('rows') || 4);
-        this.field.disabled = this.hasAttribute('disabled');
-        this.field.readOnly = this.hasAttribute('readonly');
-        this.field.required = this.hasAttribute('required');
-        this.field.setAttribute('aria-invalid', String(hasError));
-        const maxLength = this.getAttribute('max-length');
-        if (maxLength)
-            this.field.maxLength = Number(maxLength);
-        else
-            this.field.removeAttribute('maxLength');
-        const helperId = `${this.getAttribute('id')}-helper`;
-        const errorId = `${this.getAttribute('id')}-error`;
-        if (hasError && errorMessage) {
-            this.errorEl.id = errorId;
-            this.errorEl.textContent = errorMessage;
-            this.errorEl.hidden = false;
-            this.helperEl.hidden = true;
-            this.field.setAttribute('aria-describedby', errorId);
-        }
-        else if (helperText) {
-            this.helperEl.id = helperId;
-            this.helperEl.textContent = helperText;
-            this.helperEl.hidden = false;
-            this.errorEl.hidden = true;
-            this.field.setAttribute('aria-describedby', helperId);
-        }
-        else {
-            this.helperEl.hidden = true;
-            this.errorEl.hidden = true;
-            this.field.removeAttribute('aria-describedby');
-        }
-        this.updateCharacterCount();
-    }
-    updateCharacterCount() {
-        if (!this.field || !this.countTop || !this.countBottom)
-            return;
-        const currentLength = this.field.value.length;
-        const maxLength = this.getAttribute('max-length');
-        const isOverLimit = Boolean(maxLength && currentLength > Number(maxLength));
-        const countText = `${currentLength}${maxLength ? ` / ${maxLength}` : ''}`;
-        const renderCount = (host) => {
-            host.innerHTML = `<span class="designbase-wc-textarea__character-count-text${isOverLimit ? ' designbase-wc-textarea__character-count-text--error' : ''}">${countText}</span>`;
-        };
-        if (this.showCharacterCount && this.characterCountPosition === 'top') {
-            renderCount(this.countTop);
-            this.countTop.hidden = false;
-            this.countBottom.hidden = true;
-        }
-        else if (this.showCharacterCount) {
-            renderCount(this.countBottom);
-            this.countBottom.hidden = false;
-            this.countTop.hidden = true;
-        }
-        else {
-            this.countTop.hidden = true;
-            this.countBottom.hidden = true;
-        }
-    }
-    escape(value) {
-        return value.replace(/[&<>"']/g, (char) => ({
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;',
-        }[char] || char));
-    }
-}
-if (!customElements.get('db-textarea')) {
-    customElements.define('db-textarea', DbTextarea);
-}
-
-export { DbTextarea };
+const t=["s","m","l"];class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleInput=t=>{t.stopPropagation(),this.field&&(this.updateCharacterCount(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:this.field.value,nativeEvent:t},bubbles:!0,composed:!0})))},this.handleChange=t=>{if(t.stopPropagation(),!this.field)return;const e=this.field.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this.updateCharacterCount(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,nativeEvent:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["label","placeholder","value","default-value","name","size","rows","max-length","show-character-count","character-count-position","disabled","readonly","required","error","error-message","helper-text","full-width","resizable"]}get value(){return this.field?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.field&&(this.field.value=t,this.updateCharacterCount())}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),void this.updateCharacterCount()}this.syncState()}}focus(){this.field?.focus()}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const t=this.getAttribute("id")||`db-textarea-${Math.random().toString(36).slice(2)}`;this.hasAttribute("id")||this.setAttribute("id",t),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=t,this.countTop=document.createElement("div"),this.countTop.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top",this.countTop.hidden=!0;const e=document.createElement("div");e.className="designbase-wc-textarea__wrapper",this.field=document.createElement("textarea"),this.field.id=t,this.field.className="designbase-wc-textarea__field",this.field.addEventListener("input",this.handleInput),this.field.addEventListener("change",this.handleChange),e.appendChild(this.field),this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-textarea__footer",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-textarea__error-message",this.errorEl.setAttribute("role","alert"),this.helperEl=document.createElement("div"),this.helperEl.className="designbase-wc-textarea__helper-text",this.countBottom=document.createElement("div"),this.countBottom.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom",this.countBottom.hidden=!0,this.footerEl.append(this.errorEl,this.helperEl,this.countBottom),this.append(this.labelEl,this.countTop,e,this.footerEl),this.built=!0}syncState(){if(!this.field)return;const e=t.includes(this.size)?this.size:"m",i=this.getAttribute("label")||"",s=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),h=this.getAttribute("value")??this.getAttribute("default-value")??"";if(this.className=["designbase-wc-textarea",`designbase-wc-textarea--${e}`,r&&"designbase-wc-textarea--error",this.hasAttribute("disabled")&&"designbase-wc-textarea--disabled",this.hasAttribute("readonly")&&"designbase-wc-textarea--readonly",this.hasAttribute("full-width")&&"designbase-wc-textarea--full-width",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"].filter(Boolean).join(" "),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=i?`${this.escape(i)}${t}`:"",this.labelEl.hidden=!i}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==h&&(this.field.value=h),this.field.rows=Number(this.getAttribute("rows")||4),this.field.disabled=this.hasAttribute("disabled"),this.field.readOnly=this.hasAttribute("readonly"),this.field.required=this.hasAttribute("required"),this.field.setAttribute("aria-invalid",String(r));const l=this.getAttribute("max-length");l?this.field.maxLength=Number(l):this.field.removeAttribute("maxLength");const n=`${this.getAttribute("id")}-helper`,d=`${this.getAttribute("id")}-error`;r&&a?(this.errorEl.id=d,this.errorEl.textContent=a,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",d)):s?(this.helperEl.id=n,this.helperEl.textContent=s,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",n)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby")),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.getAttribute("max-length"),i=Boolean(e&&t>Number(e)),s=`${t}${e?` / ${e}`:""}`,renderCount=t=>{t.innerHTML=`<span class="designbase-wc-textarea__character-count-text${i?" designbase-wc-textarea__character-count-text--error":""}">${s}</span>`};this.showCharacterCount&&"top"===this.characterCountPosition?(renderCount(this.countTop),this.countTop.hidden=!1,this.countBottom.hidden=!0):this.showCharacterCount?(renderCount(this.countBottom),this.countBottom.hidden=!1,this.countTop.hidden=!0):(this.countTop.hidden=!0,this.countBottom.hidden=!0)}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-textarea")||customElements.define("db-textarea",DbTextarea);export{DbTextarea};