@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,233 @@
-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};
+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 };