@designbasekorea/ui-wc 0.2.0 → 0.2.2

package/dist/esm/components/db-form.d.ts

@@ -0,0 +1,94 @@
+import './db-input.js';
+import './db-textarea.js';
+import './db-select.js';
+import './db-checkbox.js';
+import './db-radio.js';
+import './db-button.js';
+
+/**
+ * Form Web Component
+ * packages/ui Form.tsx 기준 — ui-wc 폼 필드(db-input, db-select 등) 조합
+ */
+
+interface DbFormFieldOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface DbFormFieldValidation {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+}
+interface DbFormFieldData {
+    name: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea' | 'select' | 'radio' | 'checkbox';
+    label?: string;
+    placeholder?: string;
+    value?: string | number | boolean | string[];
+    defaultValue?: string | number | boolean | string[];
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    errorMessage?: string;
+    helpText?: string;
+    options?: DbFormFieldOption[];
+    multiple?: boolean;
+    checkboxGroup?: boolean;
+    radioGroup?: boolean;
+    validation?: DbFormFieldValidation;
+}
+declare class DbForm extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private formEl;
+    private headerEl;
+    private fieldsEl;
+    private actionsEl;
+    private submitBtn;
+    private resetBtn;
+    private values;
+    private errors;
+    private touched;
+    private initialValues;
+    private fieldWrappers;
+    private boundSubmit;
+    private boundReset;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get fields(): DbFormFieldData[];
+    set fields(value: DbFormFieldData[] | string);
+    private parseFields;
+    private parseInitialValues;
+    private bootstrapValues;
+    private buildShell;
+    private syncAll;
+    private syncClasses;
+    private syncHeader;
+    private syncActions;
+    private renderFields;
+    private refreshFieldState;
+    private refreshAllFieldStates;
+    private createFieldControl;
+    private handleFieldChange;
+    private validateField;
+    private validateForm;
+    private handleSubmit;
+    private handleReset;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-form': DbForm;
+    }
+}
+
+export { DbForm };
+export type { DbFormFieldData, DbFormFieldOption, DbFormFieldValidation };

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

@@ -0,0 +1 @@
+import"./db-input.js";import"./db-textarea.js";import"./db-select.js";import"./db-checkbox.js";import"./db-radio.js";import"./db-button.js";const e="designbase-wc-form";class DbForm extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.formEl=null,this.headerEl=null,this.fieldsEl=null,this.actionsEl=null,this.submitBtn=null,this.resetBtn=null,this.values={},this.errors={},this.touched={},this.initialValues={},this.fieldWrappers=new Map,this.boundSubmit=e=>this.handleSubmit(e),this.boundReset=e=>this.handleReset(e)}static get observedAttributes(){return["fields","columns","size","variant","title","description","submit-text","reset-text","show-reset","submit-loading","submit-disabled","initial-values"]}connectedCallback(){this.built||(this.buildShell(),this.built=!0),this.bootstrapValues(),this.syncAll()}attributeChangedCallback(e){this.built&&("initial-values"===e&&this.bootstrapValues(),"fields"===e&&this.bootstrapValues(),this.syncAll())}get fields(){return this.parseFields(this.getAttribute("fields"))}set fields(e){this.setAttribute("fields","string"==typeof e?e:JSON.stringify(e))}parseFields(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}parseInitialValues(){const e=this.getAttribute("initial-values");if(!e)return{};try{const t=JSON.parse(e);return t&&"object"==typeof t?t:{}}catch{return{}}}bootstrapValues(){this.initialValues=this.parseInitialValues();const e={...this.initialValues};this.fields.forEach(t=>{void 0===e[t.name]&&(void 0===t.value?void 0===t.defaultValue?"checkbox"===t.type&&t.checkboxGroup?e[t.name]=[]:"checkbox"!==t.type?e[t.name]="":e[t.name]=!1:e[t.name]=t.defaultValue:e[t.name]=t.value)}),this.values=e}buildShell(){this.formEl=document.createElement("form"),this.formEl.className=`${e}__native`,this.formEl.noValidate=!0,this.formEl.addEventListener("submit",this.boundSubmit),this.headerEl=document.createElement("div"),this.headerEl.className=`${e}__header`,this.fieldsEl=document.createElement("div"),this.fieldsEl.className=`${e}__fields`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.submitBtn=document.createElement("db-button"),this.submitBtn.setAttribute("type","submit"),this.submitBtn.setAttribute("variant","primary"),this.resetBtn=document.createElement("db-button"),this.resetBtn.setAttribute("type","button"),this.resetBtn.setAttribute("variant","secondary"),this.resetBtn.addEventListener("click",this.boundReset),this.actionsEl.append(this.submitBtn,this.resetBtn),this.formEl.append(this.fieldsEl,this.actionsEl),this.append(this.headerEl,this.formEl)}syncAll(){this.syncClasses(),this.syncHeader(),this.renderFields(),this.syncActions()}syncClasses(){const t=this.getAttribute("columns")||"1",i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default";this.className=[e,`${e}--columns-${t}`,`${e}--${i}`,`${e}--${s}`,this.hasAttribute("submit-loading")&&`${e}--loading`].filter(Boolean).join(" ")}syncHeader(){if(!this.headerEl)return;const t=this.getAttribute("title")||"",i=this.getAttribute("description")||"";if(this.headerEl.innerHTML="",t||i){if(this.headerEl.hidden=!1,t){const i=document.createElement("h3");i.className=`${e}__title`,i.textContent=t,this.headerEl.appendChild(i)}if(i){const t=document.createElement("p");t.className=`${e}__description`,t.textContent=i,this.headerEl.appendChild(t)}}else this.headerEl.hidden=!0}syncActions(){const e=this.getAttribute("submit-text")||"제출",t=this.getAttribute("reset-text")||"리셋",i=this.hasAttribute("show-reset");this.submitBtn&&(this.submitBtn.textContent=e,this.hasAttribute("submit-loading")?this.submitBtn.setAttribute("loading",""):this.submitBtn.removeAttribute("loading"),this.hasAttribute("submit-disabled")?this.submitBtn.setAttribute("disabled",""):this.submitBtn.removeAttribute("disabled")),this.resetBtn&&(this.resetBtn.textContent=t,this.resetBtn.hidden=!i)}renderFields(){if(!this.fieldsEl)return;const t=this.getAttribute("size")||"m";this.fieldsEl.innerHTML="",this.fieldWrappers.clear(),this.fields.forEach(i=>{const s=document.createElement("div");if(s.className=`${e}__field-wrapper ${e}__field-wrapper--${i.type||"text"}`,s.dataset.field=i.name,i.label&&("checkbox"!==i.type||i.checkboxGroup)){const t=document.createElement("label");if(t.className=`${e}__label`,t.htmlFor=`db-form-${i.name}`,t.textContent=i.label,i.required||i.validation?.required){const i=document.createElement("span");i.className=`${e}__required`,i.textContent="*",i.setAttribute("aria-hidden","true"),t.appendChild(i)}s.appendChild(t)}s.appendChild(this.createFieldControl(i,t)),this.fieldsEl.appendChild(s),this.fieldWrappers.set(i.name,s),this.refreshFieldState(i.name)})}refreshFieldState(t){const i=this.fields.find(e=>e.name===t),s=this.fieldWrappers.get(t);if(!i||!s)return;const r=Boolean(this.touched[t]&&this.errors[t]);s.classList.toggle(`${e}__field-wrapper--error`,r),s.querySelector(`.${e}__error`)?.remove(),s.querySelector(`.${e}__help`)?.remove();const a=s.querySelector(`.${e}__field, db-input, db-textarea, db-select, db-checkbox`);if(a&&(r?(a.setAttribute("error",""),a.setAttribute("error-message",this.errors[t])):(a.removeAttribute("error"),a.removeAttribute("error-message"))),r){const i=document.createElement("div");return i.className=`${e}__error`,i.textContent=this.errors[t],void s.appendChild(i)}if(i.helpText){const t=document.createElement("div");t.className=`${e}__help`,t.textContent=i.helpText,s.appendChild(t)}}refreshAllFieldStates(){this.fields.forEach(e=>this.refreshFieldState(e.name))}createFieldControl(t,i){const s=t.type||"text",r=this.values[t.name],a=Boolean(this.touched[t.name]&&this.errors[t.name]),n=a?this.errors[t.name]:"";if("textarea"===s){const s=document.createElement("db-textarea");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),s.setAttribute("full-width",""),t.placeholder&&s.setAttribute("placeholder",t.placeholder),void 0!==r&&s.setAttribute("value",String(r)),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),t.maxLength&&s.setAttribute("max-length",String(t.maxLength)),a&&(s.setAttribute("error",""),s.setAttribute("error-message",n)),s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),s.addEventListener("db-input",e=>{const i=e.detail;this.handleFieldChange(t,i.value,!1)}),s}if("select"===s){const s=document.createElement("db-select");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),s.setAttribute("full-width",""),t.placeholder&&s.setAttribute("placeholder",t.placeholder),t.options&&s.setAttribute("options",JSON.stringify(t.options)),t.multiple&&s.setAttribute("multiple",""),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),void 0!==r&&s.setAttribute("value",Array.isArray(r)?JSON.stringify(r):String(r)),a&&(s.setAttribute("error",""),s.setAttribute("error-message",n)),s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),s}if("radio"===s&&t.radioGroup){const s=document.createElement("div");return s.className=`${e}__radio-group`,s.setAttribute("role","radiogroup"),(t.options||[]).forEach(e=>{const a=document.createElement("db-radio");a.setAttribute("name",t.name),a.setAttribute("value",e.value),a.setAttribute("size",i),r===e.value&&a.setAttribute("checked",""),(t.disabled||e.disabled)&&a.setAttribute("disabled",""),a.textContent=e.label,a.addEventListener("db-change",i=>{i.detail.checked&&this.handleFieldChange(t,e.value)}),s.appendChild(a)}),s}if("checkbox"===s&&t.checkboxGroup){const s=document.createElement("div");s.className=`${e}__checkbox-group`;const a=Array.isArray(r)?r:[];return(t.options||[]).forEach(e=>{const r=document.createElement("db-checkbox");r.setAttribute("name",t.name),r.setAttribute("value",e.value),r.setAttribute("size",i),a.includes(e.value)&&r.setAttribute("checked",""),(t.disabled||e.disabled)&&r.setAttribute("disabled",""),r.textContent=e.label,r.addEventListener("db-change",i=>{const s=i.detail,r=Array.isArray(this.values[t.name])?[...this.values[t.name]]:[],a=s.checked?[...new Set([...r,e.value])]:r.filter(t=>t!==e.value);this.handleFieldChange(t,a)}),s.appendChild(r)}),s}if("checkbox"===s){const s=document.createElement("db-checkbox");return s.className=`${e}__field`,s.setAttribute("name",t.name),s.id=`db-form-${t.name}`,s.setAttribute("size",i),r&&s.setAttribute("checked",""),t.disabled&&s.setAttribute("disabled",""),t.readOnly&&s.setAttribute("readonly",""),t.required&&s.setAttribute("required",""),s.textContent=t.label||"",s.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.checked)}),s}const l=document.createElement("db-input");return l.className=`${e}__field`,l.setAttribute("name",t.name),l.id=`db-form-${t.name}`,l.setAttribute("type",s),l.setAttribute("size",i),l.setAttribute("full-width",""),t.placeholder&&l.setAttribute("placeholder",t.placeholder),void 0!==r&&!1!==r&&l.setAttribute("value",String(r)),t.disabled&&l.setAttribute("disabled",""),t.readOnly&&l.setAttribute("readonly",""),t.required&&l.setAttribute("required",""),void 0!==t.min&&l.setAttribute("min",String(t.min)),void 0!==t.max&&l.setAttribute("max",String(t.max)),void 0!==t.minLength&&l.setAttribute("minlength",String(t.minLength)),void 0!==t.maxLength&&l.setAttribute("maxlength",String(t.maxLength)),t.pattern&&l.setAttribute("pattern",t.pattern),a&&(l.setAttribute("error",""),l.setAttribute("error-message",n)),l.addEventListener("db-change",e=>{const i=e.detail;this.handleFieldChange(t,i.value)}),l.addEventListener("db-input",e=>{const i=e.detail;this.handleFieldChange(t,i.value,!1)}),l}handleFieldChange(e,t,i=!0){this.values[e.name]=t,i&&(this.touched[e.name]=!0);const s=this.validateField(e,t);this.errors[e.name]=s||"",this.refreshFieldState(e.name),this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{values:{...this.values}}}))}validateField(e,t){const i=e.validation||{};if((i.required??e.required)&&(null==t||""===t||!1===t||Array.isArray(t)&&0===t.length))return e.errorMessage||`${e.label||e.name}은(는) 필수입니다.`;if(void 0!==i.min&&Number(t)<i.min)return e.errorMessage||`최소값은 ${i.min}입니다.`;if(void 0!==i.max&&Number(t)>i.max)return e.errorMessage||`최대값은 ${i.max}입니다.`;if(void 0!==i.minLength&&String(t).length<i.minLength)return e.errorMessage||`최소 ${i.minLength}자 이상 입력해주세요.`;if(void 0!==i.maxLength&&String(t).length>i.maxLength)return e.errorMessage||`최대 ${i.maxLength}자까지 입력 가능합니다.`;const s=i.pattern||e.pattern;if(s&&String(t))try{if(!new RegExp(s).test(String(t)))return e.errorMessage||"올바른 형식으로 입력해주세요."}catch{}}validateForm(){let e=!0;return this.fields.forEach(t=>{const i=this.validateField(t,this.values[t.name]);i?(this.errors[t.name]=i,e=!1):this.errors[t.name]=""}),e}handleSubmit(e){e.preventDefault(),this.fields.forEach(e=>{this.touched[e.name]=!0}),this.validateForm()?this.dispatchEvent(new CustomEvent("db-submit",{bubbles:!0,composed:!0,detail:{values:{...this.values}}})):this.refreshAllFieldStates()}handleReset(e){e.preventDefault(),this.values={...this.initialValues},this.bootstrapValues(),this.errors={},this.touched={},this.renderFields(),this.dispatchEvent(new CustomEvent("db-reset",{bubbles:!0,composed:!0,detail:{values:{...this.values}}})),this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{values:{...this.values}}}))}}customElements.get("db-form")||customElements.define("db-form",DbForm);export{DbForm};

package/dist/esm/components/db-gradient.d.ts

@@ -0,0 +1,26 @@
+interface GradientColor {
+    color: string;
+    position?: number;
+}
+declare class DbGradient extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    get colors(): GradientColor[];
+    set colors(value: GradientColor[] | string);
+    private parseColors;
+    private directionMap;
+    private colorStops;
+    private generateGradientStyle;
+    private generateAnimatedStyle;
+    private generateMeshStyle;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-gradient': DbGradient;
+    }
+}
+
+export { DbGradient };

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

@@ -0,0 +1 @@
+const t="designbase-wc-gradient";class DbGradient extends HTMLElement{static get observedAttributes(){return["colors","direction","size","variant","animation-duration","animation-delay","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.updateUI()}attributeChangedCallback(){this.updateUI()}getBool(t){return this.hasAttribute(t)&&"false"!==this.getAttribute(t)}get colors(){return this.parseColors()}set colors(t){this.setAttribute("colors","string"==typeof t?t:JSON.stringify(t))}parseColors(){try{const t=JSON.parse(this.getAttribute("colors")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}directionMap(t){return{"to-right":"to right","to-left":"to left","to-bottom":"to bottom","to-top":"to top","to-bottom-right":"to bottom right","to-bottom-left":"to bottom left","to-top-right":"to top right","to-top-left":"to top left",radial:"circle"}[t]}colorStops(t){return t.map(t=>{const e=void 0!==t.position?`${t.position}%`:"";return e?`${t.color} ${e}`:t.color}).join(", ")}generateGradientStyle(t,e){if(0===t.length)return{};const i=this.colorStops(t);return"radial"===e?{background:`radial-gradient(circle, ${i})`}:{background:`linear-gradient(${this.directionMap(e)}, ${i})`}}generateAnimatedStyle(t,e,i,o){const r=t.map((t,e)=>{const i=((void 0!==t.position?t.position:0)+20*e)%100;return`${t.color} ${i}%`}).join(", ");return{background:"radial"===e?`radial-gradient(circle, ${r})`:`linear-gradient(${this.directionMap(e)}, ${r})`,animation:`gradient-shift ${i}s ease-in-out ${o}s infinite`,backgroundSize:"200% 200%"}}generateMeshStyle(t){return{background:`conic-gradient(from 0deg, ${t.slice(0,4).map((t,e)=>{const i=void 0!==t.position?t.position:33.33*e;return`${t.color} ${i}%`}).join(", ")})`}}updateUI(){const e=this.parseColors(),i=this.getAttribute("direction")||"to-right",o=this.getAttribute("size")||"m",r=this.getAttribute("variant")||"default",n=Number(this.getAttribute("animation-duration")||3),a=Number(this.getAttribute("animation-delay")||0),s=this.getBool("full-width"),l=this.getBool("full-height");this.className=[t,`${t}--size-${o}`,`${t}--variant-${r}`,`${t}--direction-${i}`,s&&`${t}--full-width`,l&&`${t}--full-height`].filter(Boolean).join(" ");let d={};d="animated"===r?this.generateAnimatedStyle(e,i,n,a):"mesh"===r?this.generateMeshStyle(e):this.generateGradientStyle(e,i),Object.assign(this.style,d)}}customElements.get("db-gradient")||customElements.define("db-gradient",DbGradient);export{DbGradient};

package/dist/esm/components/db-grid.d.ts

@@ -0,0 +1,20 @@
+declare class DbGrid extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private syncClasses;
+}
+declare class DbGridItem extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private syncClasses;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-grid': DbGrid;
+        'db-grid-item': DbGridItem;
+    }
+}
+
+export { DbGrid, DbGridItem };

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

@@ -0,0 +1 @@
+class DbGrid extends HTMLElement{static get observedAttributes(){return["columns","gap","fixed","no-padding","full-width"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const t=Math.max(1,Number(this.getAttribute("columns")||12)),s=this.getAttribute("gap")||"m",e=["none","xs","s","m","l","xl"].includes(s)?s:"m",i={none:"0",xs:"var(--db-gap-xs)",s:"var(--db-gap-s)",m:"var(--db-gap-m)",l:"var(--db-gap-l)",xl:"var(--db-gap-xl)"};this.className=["designbase-wc-grid",`designbase-wc-grid--gap-${e}`,this.hasAttribute("fixed")&&"designbase-wc-grid--fixed",this.hasAttribute("no-padding")&&"designbase-wc-grid--no-padding",this.hasAttribute("full-width")&&"designbase-wc-grid--full-width"].filter(Boolean).join(" "),this.style.setProperty("--db-wc-grid-columns",String(t)),this.style.display="grid",this.style.gridTemplateColumns=`repeat(${t}, minmax(0, 1fr))`,this.style.gap=i[e]||i.m,this.style.alignItems="start"}}class DbGridItem extends HTMLElement{static get observedAttributes(){return["span","span-sm","span-md","span-lg","span-xl"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const parseSpan=(t,s=12)=>{const e=Number(t??s);return Math.min(12,Math.max(1,Number.isFinite(e)?e:s))},t=parseSpan(this.getAttribute("span")),s=parseSpan(this.getAttribute("span-sm"),t),e=parseSpan(this.getAttribute("span-md"),s),i=parseSpan(this.getAttribute("span-lg"),e),a=parseSpan(this.getAttribute("span-xl"),i);this.className="designbase-wc-grid__item",this.style.gridColumn=`span ${t}`,this.style.setProperty("--db-wc-grid-item-span",String(t)),this.style.setProperty("--db-wc-grid-item-span-sm",String(s)),this.style.setProperty("--db-wc-grid-item-span-md",String(e)),this.style.setProperty("--db-wc-grid-item-span-lg",String(i)),this.style.setProperty("--db-wc-grid-item-span-xl",String(a))}}customElements.get("db-grid")||customElements.define("db-grid",DbGrid),customElements.get("db-grid-item")||customElements.define("db-grid-item",DbGridItem);export{DbGrid,DbGridItem};

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

@@ -0,0 +1 @@
+const l={"arrow-bar-left":'<path fill="currentColor" d="M20.75 20h-1.5V4h1.5zM11.03 6.53l-4.72 4.72H16v1.5H6.31l4.72 4.72-1.06 1.06L3.44 12l6.53-6.53z"/>',"arrow-bar-right":'<path fill="currentColor" d="M4.75 20h-1.5V4h1.5zm15.81-8-6.53 6.53-1.06-1.06 4.72-4.72H8v-1.5h9.69l-4.72-4.72 1.06-1.06z"/>',award:'<path fill="currentColor" d="M11.753 15.5c-1.8 0-3.5-.7-4.77-1.98a6.74 6.74 0 0 1-1.98-4.77c0-1.8.7-3.5 1.98-4.77A6.74 6.74 0 0 1 11.753 2c1.8 0 3.5.7 4.77 1.98a6.74 6.74 0 0 1 1.98 4.77c0 1.8-.7 3.5-1.98 4.77a6.74 6.74 0 0 1-4.77 1.98m0-12c-1.4 0-2.72.55-3.71 1.54a5.22 5.22 0 0 0-1.54 3.71c0 1.4.55 2.72 1.54 3.71a5.22 5.22 0 0 0 3.71 1.54c1.4 0 2.72-.55 3.71-1.54a5.22 5.22 0 0 0 1.54-3.71c0-1.4-.55-2.72-1.54-3.71a5.22 5.22 0 0 0-3.71-1.54"/><path fill="currentColor" d="M15.313 21.5a.74.74 0 0 1-.64-.37l-3.56-5.96a.751.751 0 1 1 1.29-.77l2.86 4.8 1.06-2.07a.76.76 0 0 1 .72-.41l2.33.17-2.95-4.99a.76.76 0 0 1 .26-1.03c.36-.21.82-.09 1.03.26l3.68 6.22c.14.24.14.54 0 .78s-.4.37-.69.35l-3.27-.23-1.45 2.83c-.12.24-.37.4-.64.41h-.02z"/><path fill="currentColor" d="M8.193 21.5h-.02c-.27 0-.52-.17-.64-.41l-1.45-2.83-3.28.23a.75.75 0 0 1-.69-.35.73.73 0 0 1 0-.78l3.69-6.18c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-2.95 4.95 2.34-.17c.31-.01.58.14.72.41l1.06 2.07 2.86-4.8c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-3.56 5.96c-.14.23-.38.37-.64.37z"/>',apple:'<path fill="currentColor" fill-rule="evenodd" d="M18.644 18.648q-.807 1.15-1.316 1.592-.787.723-1.692.744-.649.001-1.562-.373-.914-.372-1.683-.371-.805-.001-1.73.371-.924.375-1.495.393-.866.038-1.729-.764-.55-.48-1.377-1.648-.885-1.245-1.455-2.891-.61-1.78-.611-3.447 0-1.91.826-3.292a4.86 4.86 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662q.69.001 1.81.422t1.436.422q.237 0 1.593-.498 1.279-.46 2.163-.384 2.4.192 3.6 1.895-2.145 1.301-2.123 3.637.02 1.82 1.317 3.023a4.3 4.3 0 0 0 1.315.863q-.159.46-.336.882a10.3 10.3 0 0 1-1.021 1.837M14.959 5.039c-.836.976-1.846 1.541-2.941 1.452a3 3 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688q.528-.607 1.343-1.009.813-.397 1.536-.435.02.192.019.381-.001 1.426-1.039 2.659" clip-rule="evenodd"/>',"play-store":'<path fill="currentColor" fill-rule="evenodd" d="M15.911 8.659 6.36 3.29c-.633-.342-1.226-.39-1.746-.016l8.34 8.34zm3.578 4.69c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4 4.659v14.706c0 .38.084.709.236.97l8.097-8.098L4.1 4.002c-.064.197-.1.417-.1.658m.902 16.25q.232.09.495.09.47 0 .968-.275l9.255-5.197-2.666-2.67z" clip-rule="evenodd"/>',"arrow-right":'<path fill="currentColor" d="m20.06 12-7.53 7.53-1.06-1.06 5.72-5.72H4v-1.5h13.19l-5.72-5.72 1.06-1.06z"/>',star:'<path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"star-filled":'<path fill="currentColor" d="M23 9c-.1-.4-.4-.6-.8-.7l-6.4-.9-2.9-5.8c-.3-.7-1.5-.7-1.8 0L8.2 7.4l-6.4.9c-.4 0-.7.3-.8.7s0 .8.3 1l4.6 4.5-1.1 6.4c0 .4 0 .8.4 1 .3.2.7.3 1.1 0l5.7-3 5.7 3c.1 0 .3.1.5.1s.4 0 .6-.2c.3-.2.5-.6.4-1l-1.1-6.4 4.6-4.5c.3-.3.4-.7.3-1z"/>',"star-half":'<path fill="currentColor" d="M8.9 8.3 2 9.3l5 4.8L5.8 21l6.2-3.2V2z"/><path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"trending-up":'<path fill="currentColor" d="M22 11V5h-6"/><path fill="currentColor" fill-rule="evenodd" d="M21.53 6.53 13 15.06l-3-3-6.47 6.47-1.06-1.06L10 9.94l3 3 7.47-7.47z" clip-rule="evenodd"/>',cart:'<path fill="currentColor" d="M3 2.25c.945 0 1.714.75 1.747 1.688L4.94 6.25h16.899l-1.167 10.5h-2.093a2.75 2.75 0 1 1-3.156 0H9.578a2.75 2.75 0 1 1-3.156 0H4.31L3.253 4.063 3.25 4.03V4A.25.25 0 0 0 3 3.75H1v-1.5zm5 15.5a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 8 17.75m9 0a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 17 17.75m-11.31-2.5h13.64l.832-7.5H5.064z"/>',"bell-active":'<path fill="currentColor" fill-rule="evenodd" d="M6.75 10.015V13c0 1.445-.466 2.453-1.06 3.25h12.62c-.594-.797-1.06-1.805-1.06-3.25v-2.985c-.047-1.117-.55-2.449-1.465-3.497C14.879 5.479 13.6 4.75 12 4.75s-2.879.73-3.785 1.768c-.914 1.048-1.418 2.38-1.465 3.497m.335-4.483C8.229 4.221 9.9 3.25 12 3.25s3.771.97 4.915 2.282c1.132 1.298 1.777 2.96 1.834 4.44l.001.028v3c0 1.67.788 2.477 1.78 3.47a.75.75 0 0 1-.53 1.28H4a.75.75 0 0 1-.53-1.28c.992-.992 1.78-1.8 1.78-3.47V9.971c.057-1.48.703-3.141 1.835-4.439" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9 16.25a.75.75 0 0 1 .75.75v1c0 1.286.964 2.25 2.25 2.25s2.25-.964 2.25-2.25v-1a.75.75 0 0 1 1.5 0v1c0 2.114-1.636 3.75-3.75 3.75S8.25 20.114 8.25 18v-1a.75.75 0 0 1 .75-.75M17.424 2.52a.75.75 0 0 1 1.056-.096c1.307 1.089 2.463 2.786 3.19 4.24a.75.75 0 1 1-1.34.671c-.673-1.345-1.717-2.848-2.81-3.759a.75.75 0 0 1-.096-1.056M6.576 2.52a.75.75 0 0 1-.096 1.056c-1.093.911-2.137 2.414-2.81 3.76a.75.75 0 0 1-1.34-.671c.727-1.455 1.883-3.152 3.19-4.241a.75.75 0 0 1 1.056.096M12 1.25a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75" clip-rule="evenodd"/>',"caret-down-filled":'<path fill="currentColor" d="m12 14.5 5-5H7z"/>',"caret-updown-filled":'<path fill="currentColor" fill-rule="evenodd" d="m7 10 5-5 5 5zM17 14l-5 5-5-5z" clip-rule="evenodd"/>',"chevron-down":'<path fill="currentColor" fill-rule="evenodd" d="m5.47 9.53 1.06-1.06L12 13.94l5.47-5.47 1.06 1.06L12 16.06z" clip-rule="evenodd"/>',"chevron-up":'<path fill="currentColor" fill-rule="evenodd" d="m12 7.94 6.53 6.53-1.06 1.06L12 10.06l-5.47 5.47-1.06-1.06z" clip-rule="evenodd"/>',"chevron-left":'<path fill="currentColor" fill-rule="evenodd" d="m10.06 12 5.47-5.47-1.06-1.06L7.94 12l6.53 6.53 1.06-1.06z" clip-rule="evenodd"/>',"chevron-right":'<path fill="currentColor" fill-rule="evenodd" d="M9.53 5.47 16.06 12l-6.53 6.53-1.06-1.06L13.94 12 8.47 6.53z" clip-rule="evenodd"/>',calendar:'<path fill="currentColor" fill-rule="evenodd" d="M16.25 8V2h1.5v6zM6.25 8V2h1.5v6zM21 11.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75a.25.25 0 0 0-.25.25v14c0 .138.112.25.25.25h16a.25.25 0 0 0 .25-.25V6a.25.25 0 0 0-.25-.25zM2.25 6c0-.966.784-1.75 1.75-1.75h16c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 20 21.75H4A1.75 1.75 0 0 1 2.25 20z" clip-rule="evenodd"/>',clock:'<path fill="currentColor" fill-rule="evenodd" d="M12.75 11.25V6h-1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12" clip-rule="evenodd"/>',bulb:'<path fill="currentColor" d="M15.5 17.5H8v-.75s-.02-1.79-1.06-3.21l-.29-.39C5.88 12.12 5 10.95 5 8.93 5 5.11 8.03 2 11.75 2s6.75 3.11 6.75 6.93c0 2-.87 3.17-1.65 4.2l-.29.39c-1.05 1.45-1.06 3.21-1.06 3.23zM9.44 16h4.62c.11-.81.42-2.16 1.29-3.36l.31-.41c.69-.93 1.35-1.8 1.35-3.31 0-2.99-2.36-5.43-5.25-5.43S6.5 5.93 6.5 8.93c0 1.52.66 2.4 1.35 3.32l.31.41c.86 1.19 1.17 2.53 1.28 3.34M15.75 20h-8v1.5h8z"/>',"circle-checked":'<path fill="currentColor" fill-rule="evenodd" d="m10.32 14.27 6.15-6.134 1.06 1.062-7.22 7.2L6.467 12.5l1.068-1.054z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1.25 12C1.25 6.086 6.086 1.25 12 1.25S22.75 6.086 22.75 12 17.914 22.75 12 22.75 1.25 17.914 1.25 12M12 2.75c-5.086 0-9.25 4.164-9.25 9.25s4.164 9.25 9.25 9.25 9.25-4.164 9.25-9.25S17.086 2.75 12 2.75" clip-rule="evenodd"/>',"cloud-close":'<path fill="currentColor" fill-rule="evenodd" d="M5.23 9.323A7.75 7.75 0 0 1 12.5 4.25c3.782 0 6.923 2.71 7.606 6.291A4.74 4.74 0 0 1 23.25 15a4.75 4.75 0 0 1-4.75 4.75H6A5.25 5.25 0 0 1 .75 14.5c0-2.64 1.95-4.805 4.48-5.177M12.5 5.75a6.25 6.25 0 0 0-5.993 4.483l-.15.512-.534.025A3.74 3.74 0 0 0 2.25 14.5 3.75 3.75 0 0 0 6 18.25h12.5a3.243 3.243 0 0 0 .763-6.398l-.504-.122-.064-.514A6.25 6.25 0 0 0 12.5 5.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m14.47 15.53-5-5 1.06-1.06 5 5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m9.47 14.47 5-5 1.06 1.06-5 5z" clip-rule="evenodd"/>',close:'<path fill="currentColor" fill-rule="evenodd" d="m5.47 17.47 12-12 1.06 1.06-12 12z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m6.53 5.47 12 12-1.06 1.06-12-12z" clip-rule="evenodd"/>',done:'<path fill="currentColor" fill-rule="evenodd" d="M9.476 15.936 18.97 6.47l1.06 1.062L9.468 18.064l-5.502-5.58 1.068-1.053z" clip-rule="evenodd"/>',"error-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5M8.47 9.53l1.06-1.06L12 10.94l2.47-2.47 1.06 1.06L13.06 12l2.47 2.47-1.06 1.06L12 13.06l-2.47 2.47-1.06-1.06L10.94 12z" clip-rule="evenodd"/>',edit:'<path fill="currentColor" fill-rule="evenodd" d="M15.506 3.322a3.655 3.655 0 0 1 5.172 0 3.655 3.655 0 0 1 0 5.172L7.466 21.75H2.25v-5.215zm2.586.428c-.572 0-1.121.227-1.525.632l-.002.001L3.75 17.157v3.093h3.093L19.618 7.434a2.16 2.16 0 0 0-1.526-3.684" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.7 10.453 13.548 6.3l1.06-1.06 4.154 4.154z" clip-rule="evenodd"/>',eyedropper:'<path fill="currentColor" d="M17.889 11.615a.25.25 0 0 0 0-.353l-5.657-5.657a.25.25 0 0 0-.354 0l-1.414 1.414a.25.25 0 0 0 0 .354l5.657 5.656a.25.25 0 0 0 .354 0zm-.354 2.475a1.75 1.75 0 0 1-2.475 0L9.404 8.433a1.75 1.75 0 0 1 0-2.475l1.414-1.414a1.75 1.75 0 0 1 2.475 0l5.657 5.657a1.75 1.75 0 0 1 0 2.475z"/><path fill="currentColor" d="m15.951 12.86-7.077 7.076-.262.03-1.009.11-.453.454a2.85 2.85 0 0 1-4.03-4.03l.42-.42v-1.41l7.11-7.11zM5.04 15.291v1.41l-.86.86a1.35 1.35 0 0 0 1.91 1.909l.826-.826.262-.03 1.007-.111 5.644-5.644-3.18-3.178zM15.36 2.84a2.754 2.754 0 0 1 3.89 0l1.41 1.41a2.754 2.754 0 0 1 0 3.89l-2.94 2.941-5.3-5.3zm2.83 1.06a1.254 1.254 0 0 0-1.77 0l-1.88 1.88 3.18 3.18 1.88-1.88a1.255 1.255 0 0 0 0-1.77z"/><path fill="currentColor" d="m12.743 14.25-.006 1.5-8.46-.03.006-1.5z"/>',gallery:'<path fill="currentColor" d="M7.5 11c.8 0 1.5-.7 1.5-1.5S8.3 8 7.5 8 6 8.7 6 9.5 6.7 11 7.5 11"/><path fill="currentColor" fill-rule="evenodd" d="m16.698 9.015 5.787 4.913-.97 1.144-4.813-4.087L5.487 20.57l-.974-1.14z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 4.75c-.69 0-1.25.56-1.25 1.25v12c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V6c0-.69-.56-1.25-1.25-1.25zM1.25 6A2.75 2.75 0 0 1 4 3.25h16A2.75 2.75 0 0 1 22.75 6v12A2.75 2.75 0 0 1 20 20.75H4A2.75 2.75 0 0 1 1.25 18z" clip-rule="evenodd"/>',hide:'<path fill="currentColor" fill-rule="evenodd" d="M8.343 11.2c.056-.27.147-.581.284-.842l1.328.696c-.047.09-.102.252-.145.454-.041.199-.06.381-.06.492A2.27 2.27 0 0 0 12 14.25c.284 0 .685-.056.983-.2l.65 1.352c-.57.274-1.217.348-1.633.348-2.056 0-3.75-1.694-3.75-3.75 0-.238.035-.527.093-.8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.477-.936 1.58-2.68 3.626-3.843l-.742-1.304c-2.695 1.534-3.975 3.906-4.4 4.835L1.176 12l.143.312c.685 1.5 3.5 6.438 10.682 6.438 1.62 0 3.026-.253 4.242-.667l-.484-1.42c-1.054.36-2.297.587-3.758.587-5.874 0-8.377-3.707-9.167-5.25M12 6.75c-.673 0-1.6.084-2.202.227l-.346-1.46c.746-.177 1.797-.267 2.548-.267 7.182 0 9.997 4.939 10.682 6.438l.143.312-.143.312a11.1 11.1 0 0 1-3.22 4.037l-.923-1.184A9.7 9.7 0 0 0 21.166 12c-.79-1.544-3.292-5.25-9.166-5.25" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m19.763 22.237-18-18 1.06-1.06 18 18z" clip-rule="evenodd"/>',"info-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5m-.75 5h1.5v1.5h-1.5zm0 3h1.5v6.5h-1.5z" clip-rule="evenodd"/>',lock:'<path fill="currentColor" fill-rule="evenodd" d="M5 11.75a.25.25 0 0 0-.25.25v8c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-8a.25.25 0 0 0-.25-.25zM3.25 12c0-.966.784-1.75 1.75-1.75h14c.966 0 1.75.784 1.75 1.75v8A1.75 1.75 0 0 1 19 21.75H5A1.75 1.75 0 0 1 3.25 20z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A3.26 3.26 0 0 0 8.75 7v4h-1.5V7A4.76 4.76 0 0 1 12 2.25 4.76 4.76 0 0 1 16.75 7v4h-1.5V7A3.26 3.26 0 0 0 12 3.75" clip-rule="evenodd"/>',mail:'<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',minus:'<path fill="currentColor" fill-rule="evenodd" d="M6 10.75h12v1.5H6z" clip-rule="evenodd"/>',"more-vertical":'<path fill="currentColor" d="M11.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',pause:'<path fill="currentColor" fill-rule="evenodd" d="M8 6.75h2.5v10.5H8zm5.5 0H16v10.5h-2.5z" clip-rule="evenodd"/>',play:'<path fill="currentColor" fill-rule="evenodd" d="M9.5 7.21v9.58l7.5-4.79z" clip-rule="evenodd"/>',plus:'<path fill="currentColor" fill-rule="evenodd" d="M11.25 11.25v-7h1.5v7h7v1.5h-7v7h-1.5v-7h-7v-1.5z" clip-rule="evenodd"/>',copy:'<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',code:'<path fill="currentColor" fill-rule="evenodd" d="m6.47 7.47 1.06 1.06L4.06 12l3.47 3.47-1.06 1.06L1.94 12zM19.94 12l-3.47-3.47 1.06-1.06L22.06 12l-4.53 4.53-1.06-1.06zM8.31 18.705l6-14 1.38.59-6 14z" clip-rule="evenodd"/>',write:'<path fill="currentColor" fill-rule="evenodd" d="M3.056 6.056A2.75 2.75 0 0 1 5 5.25h3v1.5H5A1.25 1.25 0 0 0 3.75 8v11A1.25 1.25 0 0 0 5 20.25h11A1.25 1.25 0 0 0 17.25 19v-3h1.5v3A2.75 2.75 0 0 1 16 21.75H5A2.75 2.75 0 0 1 2.25 19V8c0-.73.29-1.429.806-1.944" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16.885 3.084a2.85 2.85 0 0 1 4.03 4.03l-9.604 9.636H7.25v-4.061zm2.015.666a1.35 1.35 0 0 0-.955.395L8.75 13.311v1.939h1.939l9.166-9.195A1.35 1.35 0 0 0 18.9 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m18.47 8.53-3-3 1.06-1.06 3 3z" clip-rule="evenodd"/>',upload:'<path fill="currentColor" d="m12 2.94 5.53 5.53-1.06 1.06-3.72-3.72V17h-1.5V5.81L7.53 9.53 6.47 8.47z"/><path fill="currentColor" d="M2.25 15h1.5v4.25h16.5V15h1.5v5.75H2.25z"/>',video:'<path fill="currentColor" fill-rule="evenodd" d="M21.37 6.347a.75.75 0 0 1 .38.653v10a.75.75 0 0 1-1.136.643l-5-3a.75.75 0 1 1 .772-1.286l3.864 2.318v-7.35l-3.864 2.318a.75.75 0 1 1-.772-1.286l5-3a.75.75 0 0 1 .755-.01" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h13a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75zm1.5.75v10.5h11.5V6.75z" clip-rule="evenodd"/>',"volume-up":'<path fill="currentColor" fill-rule="evenodd" d="M12.325 4.324A.75.75 0 0 1 12.75 5v14a.75.75 0 0 1-1.219.586L6.738 15.75H3a.75.75 0 0 1-.75-.75V9A.75.75 0 0 1 3 8.25h3.737l4.794-3.836a.75.75 0 0 1 .794-.09M11.25 6.56 7.469 9.586A.75.75 0 0 1 7 9.75H3.75v4.5H7a.75.75 0 0 1 .469.164l3.781 3.025zM17.57 4.37a.75.75 0 0 1 1.06 0c2.046 2.046 3.12 4.739 3.12 7.63 0 2.908-1.185 5.589-3.105 7.616a.75.75 0 1 1-1.09-1.032c1.68-1.773 2.695-4.092 2.695-6.584 0-2.508-.926-4.815-2.68-6.57a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M14.97 7.97a.75.75 0 0 1 1.06 0c1.025 1.025 1.72 2.51 1.72 4.03 0 1.485-.571 2.998-1.748 4.058a.75.75 0 1 1-1.004-1.115c.823-.741 1.252-1.828 1.252-2.943 0-1.08-.505-2.195-1.28-2.97a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>',"mute-filled":'<path fill="currentColor" d="M12.3 4.1h.1c-.3-.2-.8 0-1.1.1L6.6 8H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3.6l4.7 3.8c.2.1.4.2.6.2h.4c.3-.2.6-.5.6-.9V5q0-.6-.6-.9M21.9 9.7l-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3z"/>',package:'<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 1.14 21.65 6.56v9.78L12 21.76 2.35 16.44V6.56zm-8.15 6.3v8.12L12 20.04l7.8-4.48V7.44L12 2.86z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21.27 7.75 12.37 12.75l-.74-1.31 8.9-5z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11.25 21v-8.9h1.5V21z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3.47 6.35 12.37 11.45l-.75 1.3-8.9-5.1z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M7.23 8.85 16.13 3.85l.74 1.3-8.9 5z"/>',"delivery-filled":'<path fill="currentColor" d="M22.68 11.13 21.45 8.66A2.25 2.25 0 0 0 18.76 7H18a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v9c0 .87.39 1.67 1.02 2.23.14 1.54 1.43 2.77 3 2.77 1.3 0 2.4-.84 2.82-2h6.37c.42 1.16 1.52 2 2.82 2 1.65 0 3-1.35 3-3h1c1.1 0 2-.9 2-2v-3.53c0-.46-.11-.92-.32-1.34M5 19c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m12 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m4-3h-1.78c-.33-.37-.75-.65-1.22-.82V9h.76c.38 0 .73.21.9.55l1.24 2.47c.07.14.1.3.1.47z"/>',repeat:'<path fill="currentColor" fill-rule="evenodd" d="m18.94 6-3.47-3.47 1.06-1.06L21.06 6l-4.53 4.53-1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.532 7.433c.587-.488 1.3-.783 1.968-.783h12.4v-1.5H7.5c-1.116 0-2.183.49-2.988 1.18l-.044.038-.037.044C3.757 7.197 3.25 8.164 3.25 9.3V11h1.5V9.3c0-.648.279-1.267.782-1.867M5.06 18l3.47-3.47-1.06-1.06L2.94 18l4.53 4.53 1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M19.25 14.7V13h1.5v1.7c0 1.136-.508 2.103-1.18 2.888l-.038.044-.044.037c-.805.69-1.872 1.181-2.988 1.181H4v-1.5h12.5c.668 0 1.381-.295 1.968-.783.503-.6.782-1.22.782-1.867" clip-rule="evenodd"/>',settings:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 9.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9.757 1.888a.75.75 0 0 1 .742-.639h3a.75.75 0 0 1 .742.639l.425 2.836q.303.11.594.244l2.304-1.703a.75.75 0 0 1 .976.073l2.121 2.12a.75.75 0 0 1 .073.977l-1.702 2.304q.134.291.244.594l2.835.425a.75.75 0 0 1 .639.742v3a.75.75 0 0 1-.639.742l-2.836.425q-.11.303-.243.594l1.702 2.304a.75.75 0 0 1-.073.976l-2.12 2.121a.75.75 0 0 1-.977.073l-2.304-1.702q-.291.134-.594.244l-.425 2.835a.75.75 0 0 1-.742.639h-3a.75.75 0 0 1-.742-.639l-.425-2.836a8 8 0 0 1-.594-.244l-2.304 1.703a.75.75 0 0 1-.976-.073l-2.121-2.12a.75.75 0 0 1-.073-.977l1.702-2.304a8 8 0 0 1-.244-.594l-2.835-.425a.75.75 0 0 1-.639-.742v-3a.75.75 0 0 1 .639-.742l2.836-.425q.11-.303.244-.594L3.264 6.435a.75.75 0 0 1 .073-.976l2.12-2.121a.75.75 0 0 1 .977-.073l2.304 1.702q.291-.134.594-.244zm1.388.861-.398 2.653a.75.75 0 0 1-.53.608 6 6 0 0 0-1.197.493.75.75 0 0 1-.804-.056L6.062 4.855 4.854 6.063l1.592 2.154a.75.75 0 0 1 .056.804 6.2 6.2 0 0 0-.493 1.2.75.75 0 0 1-.608.527l-2.653.398v1.708l2.653.398a.75.75 0 0 1 .608.53q.188.634.493 1.197a.75.75 0 0 1-.056.804l-1.592 2.154 1.208 1.208 2.154-1.592a.75.75 0 0 1 .804-.056q.562.304 1.2.493a.75.75 0 0 1 .527.608l.398 2.653h1.708l.398-2.653a.75.75 0 0 1 .53-.608q.634-.188 1.197-.493a.75.75 0 0 1 .804.056l2.154 1.592 1.208-1.208-1.592-2.154a.75.75 0 0 1-.056-.804q.304-.562.493-1.2a.75.75 0 0 1 .608-.527l2.653-.398v-1.708l-2.653-.398a.75.75 0 0 1-.608-.53 6 6 0 0 0-.493-1.197.75.75 0 0 1 .056-.804l1.592-2.154-1.208-1.208-2.154 1.592a.75.75 0 0 1-.804.056 6.2 6.2 0 0 0-1.2-.493.75.75 0 0 1-.527-.608l-.398-2.653z" clip-rule="evenodd"/>',refresh:'<path fill="currentColor" fill-rule="evenodd" d="M20.25 8.25V3h1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A8.25 8.25 0 0 0 3.75 12 8.25 8.25 0 0 0 12 20.25 8.25 8.25 0 0 0 20.25 12h1.5A9.75 9.75 0 0 1 12 21.75 9.75 9.75 0 0 1 2.25 12 9.75 9.75 0 0 1 12 2.25a9.75 9.75 0 0 1 8.628 5.205l.094.106.324.361.011.012.462.517a3 3 0 0 1 .098.123c.007.01.03.044.054.09l-1.342.671a.586.586 0 0 0 .068.11l.009.012-.021-.025q-.037-.043-.107-.12l-.335-.373-.013-.015-.494-.554-.05-.065a1 1 0 0 1-.05-.084l-.002-.004A8.25 8.25 0 0 0 12 3.75" clip-rule="evenodd"/>',expand:'<path fill="currentColor" fill-rule="evenodd" d="M17.25 6.75H12v-1.5h6.75V12h-1.5zM6.75 17.25V12h-1.5v6.75H12v-1.5z" clip-rule="evenodd"/>',shrink:'<path fill="currentColor" fill-rule="evenodd" d="M9.25 14.75H4v-1.5h6.75V20h-1.5zM13.75 10.25V5h-1.5v6.75H19v-1.5z" clip-rule="evenodd"/>',"grip-vertical":'<path fill="currentColor" d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',"grip-horizontal":'<path fill="currentColor" d="M8 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M8 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>',search:'<path fill="currentColor" fill-rule="evenodd" d="M2.25 11c0-4.814 3.936-8.75 8.75-8.75s8.75 3.936 8.75 8.75-3.936 8.75-8.75 8.75S2.25 15.814 2.25 11M11 3.75c-3.986 0-7.25 3.264-7.25 7.25s3.264 7.25 7.25 7.25 7.25-3.264 7.25-7.25S14.986 3.75 11 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m17.13 16.07 4.4 4.4-1.06 1.06-4.4-4.4z" clip-rule="evenodd"/>',"share-alt":'<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>',show:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12c0-2.055 1.695-3.75 3.75-3.75s3.75 1.694 3.75 3.75-1.694 3.75-3.75 3.75S8.25 14.056 8.25 12M12 9.75A2.27 2.27 0 0 0 9.75 12 2.27 2.27 0 0 0 12 14.25 2.27 2.27 0 0 0 14.25 12 2.27 2.27 0 0 0 12 9.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.791 1.543 3.297 5.25 9.167 5.25 5.872 0 8.374-3.704 9.167-5.25-.791-1.543-3.297-5.25-9.167-5.25-5.871 0-8.374 3.704-9.167 5.25m-1.515-.312C2.006 10.183 4.823 5.25 12 5.25s9.997 4.938 10.682 6.438l.143.312-.143.312C21.994 13.817 19.177 18.75 12 18.75s-9.997-4.938-10.682-6.438L1.175 12z" clip-rule="evenodd"/>',sparkle:'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25 14.08 8 19.75 10l-5.67 2L12 17.75 9.92 12 4.25 10l5.67-2zm0 4.4-.9 2.49-2.45.86 2.45.86.9 2.49.9-2.49 2.45-.86-2.45-.86zM18.5 15.25l.88 2.37 2.37.88-2.37.88-.88 2.37-.88-2.37-2.37-.88 2.37-.88z" clip-rule="evenodd"/>',trash:'<path fill="currentColor" fill-rule="evenodd" d="M6.75 6v13c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V6h1.5v13A2.75 2.75 0 0 1 16 21.75H8A2.75 2.75 0 0 1 5.25 19V6z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M21 6.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M7.25 4c0-.966.784-1.75 1.75-1.75h6c.966 0 1.75.784 1.75 1.75v2h-1.5V4a.25.25 0 0 0-.25-.25H9a.25.25 0 0 0-.25.25v2h-1.5zM9.25 16V9h1.5v7zM13.25 16V9h1.5v7z" clip-rule="evenodd"/>',user:'<path fill="currentColor" fill-rule="evenodd" d="M8.652 3.687C9.52 2.708 10.833 2.25 12 2.25c1.198 0 2.38.478 3.313 1.402.979.868 1.437 2.181 1.437 3.348 0 1.198-.477 2.38-1.402 3.313-.868.979-2.181 1.437-3.348 1.437-1.198 0-2.38-.477-3.313-1.402C7.715 9.488 7.25 8.277 7.25 7c0-1.198.478-2.38 1.402-3.313M12 3.75c-.826 0-1.703.336-2.236.944l-.016.019-.018.017c-.664.664-.98 1.475-.98 2.27 0 .915.329 1.697.944 2.236l.019.016.017.018c.664.664 1.475.98 2.27.98.826 0 1.703-.336 2.236-.944l.016-.019.018-.017c.664-.664.98-1.475.98-2.27 0-.826-.336-1.703-.944-2.236l-.019-.016-.017-.018c-.664-.664-1.475-.98-2.27-.98M8 15.75c-.795 0-1.606.317-2.27.98l-.017.018-.02.016c-.614.539-.943 1.321-.943 2.236v3h-1.5v-3c0-1.277.465-2.487 1.437-3.348.934-.925 2.115-1.402 3.313-1.402h8c1.277 0 2.487.465 3.348 1.437.925.934 1.402 2.115 1.402 3.313v3h-1.5v-3c0-.795-.317-1.606-.98-2.27l-.018-.017-.016-.02c-.539-.614-1.321-.943-2.236-.943z" clip-rule="evenodd"/>',"warning-filled":'<path fill="currentColor" fill-rule="evenodd" d="M10.34 3.78a1.9 1.9 0 0 1 3.32 0l8.06 14.5A1.9 1.9 0 0 1 20.06 21H3.94a1.9 1.9 0 0 1-1.66-2.72zm.91 5.47h1.5v5.5h-1.5zm0 7h1.5v1.5h-1.5z" clip-rule="evenodd"/>'};function isDbIconName(e){return Object.prototype.hasOwnProperty.call(l,e)}function getDbComponentIconSize(l){return"s"===l?12:"l"===l?20:16}function createDbIcon(e,r=16){const d=document.createElement("template");return d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true" focusable="false" data-designbase-icon="${e}">${l[e]}</svg>`,d.content.firstElementChild}export{createDbIcon,getDbComponentIconSize,isDbIconName};

package/dist/esm/components/db-image-list.d.ts

@@ -0,0 +1,35 @@
+interface DbImageListItem {
+    id?: string;
+    src: string;
+    alt?: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+    metadata?: {
+        width?: number;
+        height?: number;
+        size?: string;
+        date?: string;
+        tags?: string[];
+    };
+}
+declare class DbImageList extends HTMLElement {
+    private lightboxEl;
+    private selectedIndex;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseImages;
+    private mapRoundedAttr;
+    private createImageItem;
+    private openLightbox;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-image-list': DbImageList;
+    }
+}
+
+export { DbImageList };
+export type { DbImageListItem };

package/dist/esm/components/db-image-list.js

@@ -0,0 +1 @@
+const e=["grid","list","gallery","carousel"],t=["1","2","3","4","5","6"],i=["xs","s","m","l","xl"];class DbImageList extends HTMLElement{constructor(){super(...arguments),this.lightboxEl=null,this.selectedIndex=null}static get observedAttributes(){return["images","layout","columns","spacing","ratio","fit","rounded","shadow","hover","clickable","lightbox","loading","responsive"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}mapRoundedAttr(){const e=this.getAttribute("rounded");if(e&&"false"!==e)return"true"===e||""===e?"m":e}createImageItem(e,t){const i=document.createElement("div");i.className="designbase-wc-image-list__item";const s=document.createElement("db-image");s.className="designbase-wc-image-list__image",s.setAttribute("src",e.thumbnail||e.src),s.setAttribute("alt",e.alt||e.title||`이미지 ${t+1}`),s.setAttribute("ratio",this.getAttribute("ratio")||"16:9"),s.setAttribute("fit",this.getAttribute("fit")||"cover"),s.setAttribute("loading",this.getAttribute("loading")||"lazy"),s.setAttribute("full-width","");const a=this.mapRoundedAttr();a&&s.setAttribute("rounded",a);const n=this.getAttribute("shadow");if(n&&"false"!==n&&s.setAttribute("shadow","true"===n?"":n),"false"!==this.getAttribute("hover")&&s.setAttribute("hover",""),e.thumbnail&&e.thumbnail!==e.src&&s.setAttribute("fallback-src",e.src),s.addEventListener("db-load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{bubbles:!0,composed:!0,detail:{image:e,index:t}}))}),s.addEventListener("db-error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{bubbles:!0,composed:!0,detail:{image:e,index:t}}))}),i.append(s),e.title||e.description){const t=document.createElement("div");if(t.className="designbase-wc-image-list__overlay",e.title){const i=document.createElement("h3");i.className="designbase-wc-image-list__title",i.textContent=e.title,t.append(i)}if(e.description){const i=document.createElement("p");i.className="designbase-wc-image-list__description",i.textContent=e.description,t.append(i)}i.append(t)}if(e.metadata?.date||e.metadata?.size){const t=document.createElement("div");if(t.className="designbase-wc-image-list__metadata",e.metadata.date){const i=document.createElement("span");i.className="designbase-wc-image-list__date",i.textContent=e.metadata.date,t.append(i)}if(e.metadata.size){const i=document.createElement("span");i.className="designbase-wc-image-list__size",i.textContent=e.metadata.size,t.append(i)}i.append(t)}return"false"!==this.getAttribute("clickable")&&i.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{bubbles:!0,composed:!0,detail:{image:e,index:t}})),"false"!==this.getAttribute("lightbox")&&this.openLightbox(t)}),i}openLightbox(e){this.selectedIndex=e,this.lightboxEl||(this.lightboxEl=document.createElement("db-lightbox"),this.lightboxEl.addEventListener("db-close",()=>{this.selectedIndex=null,this.lightboxEl?.removeAttribute("open")}),this.lightboxEl.addEventListener("db-image-change",e=>{const t=e.detail;"number"==typeof t?.index&&(this.selectedIndex=t.index)}),this.append(this.lightboxEl));const t=this.parseImages();this.lightboxEl.setAttribute("images",JSON.stringify(t.map((e,t)=>({id:e.id||`image-${t}`,src:e.src,alt:e.alt||e.title||"",title:e.title,description:e.description,thumbnail:e.thumbnail})))),this.lightboxEl.setAttribute("current-index",String(e)),this.lightboxEl.setAttribute("open","")}render(){const s=this.parseImages(),a=this.getAttribute("layout")||"grid",n=this.getAttribute("columns")||"3",l=this.getAttribute("spacing")||"m",d="false"!==this.getAttribute("responsive");this.className=["designbase-wc-image-list",`designbase-wc-image-list--${e.includes(a)?a:"grid"}`,`designbase-wc-image-list--columns-${t.includes(n)?n:"3"}`,`designbase-wc-image-list--spacing-${i.includes(l)?l:"m"}`,d&&"designbase-wc-image-list--responsive","false"!==this.getAttribute("clickable")&&"designbase-wc-image-list--clickable","false"!==this.getAttribute("hover")&&"designbase-wc-image-list--hover"].filter(Boolean).join(" ");const r=this.lightboxEl;if(this.replaceChildren(),"carousel"===a){const e=document.createElement("div");e.className="designbase-wc-image-list__carousel",s.forEach((t,i)=>{const s=document.createElement("div");s.className="designbase-wc-image-list__carousel-item",s.append(this.createImageItem(t,i)),e.append(s)}),this.append(e)}else s.forEach((e,t)=>{this.append(this.createImageItem(e,t))});r&&(this.lightboxEl=r,this.append(r),null!==this.selectedIndex&&(r.setAttribute("current-index",String(this.selectedIndex)),r.setAttribute("open","")))}}customElements.get("db-image-list")||customElements.define("db-image-list",DbImageList);export{DbImageList};

package/dist/esm/components/db-image-placeholder.d.ts

@@ -0,0 +1,16 @@
+declare class DbImagePlaceholder extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-image-placeholder': DbImagePlaceholder;
+    }
+}
+
+export { DbImagePlaceholder };

package/dist/esm/components/db-image-placeholder.js

@@ -0,0 +1 @@
+class DbImagePlaceholder extends HTMLElement{constructor(){super(...arguments),this.handleClick=()=>{this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{this.hasAttribute("clickable")&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["label","show-label","pattern-size","pattern-color","background-color","width","height","aspect-ratio","hover-effect","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("label")||"",t=this.hasAttribute("show-label"),i=Number(this.getAttribute("pattern-size")||20),s=this.getAttribute("pattern-color")||"#f3f3f3",a=this.getAttribute("background-color")||"#e7e7e7",l=this.getAttribute("width")||"100%",r=this.getAttribute("height")||"",c=this.getAttribute("aspect-ratio")||"",h=this.hasAttribute("hover-effect"),n=this.hasAttribute("clickable");this.className=["designbase-wc-image-placeholder",h&&"designbase-wc-image-placeholder--hover",n&&"designbase-wc-image-placeholder--clickable"].filter(Boolean).join(" "),this.style.width=l,this.style.height=r,this.style.aspectRatio=c,n?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.replaceChildren();const o=document.createElement("div");if(o.className="designbase-wc-image-placeholder__pattern",o.style.setProperty("--db-placeholder-bg",a),o.style.setProperty("--db-placeholder-pattern",s),o.style.setProperty("--db-placeholder-size",`${i}px`),o.style.setProperty("--db-placeholder-half-size",i/2+"px"),this.append(o),t&&e){const t=document.createElement("div");t.className="designbase-wc-image-placeholder__label-wrap";const i=document.createElement("span");i.className="designbase-wc-image-placeholder__label",i.textContent=e,t.append(i),this.append(t)}}}customElements.get("db-image-placeholder")||customElements.define("db-image-placeholder",DbImagePlaceholder);export{DbImagePlaceholder};

package/dist/esm/components/db-image.d.ts

@@ -0,0 +1,34 @@
+declare class DbImage extends HTMLElement {
+    private imageState;
+    private currentSrc;
+    private showPlaceholder;
+    private imgEl;
+    private placeholderEl;
+    private errorEl;
+    private initialized;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private resetFromAttributes;
+    private getRoundedClass;
+    private getShadowClass;
+    private getRatioClass;
+    private applyContainerStyle;
+    private handleLoad;
+    private handleError;
+    private handleClick;
+    private handleKeyDown;
+    private ensureStructure;
+    private updateImageSource;
+    private updatePlaceholderContent;
+    private updateErrorContent;
+    private syncVisualState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-image': DbImage;
+    }
+}
+
+export { DbImage };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["1:1","16:9","4:3","3:2","3:4","2:1","auto"],i=["cover","contain","fill","none","scale-down"],s=["lazy","eager"],a=["skeleton","blur","none"],l=["s","m","l","full"],r=["s","m","l"];class DbImage extends HTMLElement{constructor(){super(...arguments),this.imageState="loading",this.currentSrc="",this.showPlaceholder=!1,this.imgEl=null,this.placeholderEl=null,this.errorEl=null,this.initialized=!1,this.handleLoad=()=>{"loaded"!==this.imageState&&(this.imageState="loaded",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-load",{bubbles:!0,composed:!0})))},this.handleError=()=>{const e=this.getAttribute("fallback-src")||"";if(e&&this.currentSrc!==e)return this.currentSrc=e,this.imageState="loading",this.updateImageSource(),void this.syncVisualState();this.imageState="error",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-error",{bubbles:!0,composed:!0}))},this.handleClick=()=>{this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{this.hasAttribute("clickable")&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","ratio","fit","loading","fallback-src","placeholder","rounded","width","height","max-width","max-height","full-width","full-height","shadow","hover","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.resetFromAttributes(),this.ensureStructure(),this.syncVisualState()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,i){if(t!==i||"src"===e){if("src"===e){const e=i||"";if(e!==this.currentSrc){this.currentSrc=e,this.imageState="loading";const t=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==t,this.updateImageSource()}}"placeholder"===e&&(this.showPlaceholder="none"!==(i||"none")&&"loading"===this.imageState),this.ensureStructure(),this.syncVisualState()}else this.syncVisualState()}resetFromAttributes(){this.currentSrc=this.getAttribute("src")||"";const e=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==e,this.imageState="loading"}getRoundedClass(){const e=this.getAttribute("rounded");return e?"true"===e||""===e?"designbase-wc-image--rounded":"s"===e?"designbase-wc-image--rounded-sm":"m"===e?"designbase-wc-image--rounded-md":"l"===e?"designbase-wc-image--rounded-lg":l.includes(e)?"full"===e?"designbase-wc-image--rounded-full":`designbase-wc-image--rounded-${e}`:"":""}getShadowClass(){const e=this.getAttribute("shadow");return e?"true"===e||""===e?"designbase-wc-image--shadow":r.includes(e)?`designbase-wc-image--shadow-${e}`:"":""}getRatioClass(){const e=this.getAttribute("ratio")||"auto";return"auto"===e?"designbase-wc-image--ratio-auto":t.includes(e)?`designbase-wc-image--ratio-${e.replace(":","-")}`:"designbase-wc-image--ratio-auto"}applyContainerStyle(){const e=this.style,t=this.hasAttribute("full-width"),i=this.hasAttribute("full-height"),s=this.getAttribute("width"),a=this.getAttribute("height"),l=this.getAttribute("max-width"),r=this.getAttribute("max-height");e.width=t?"100%":s||"",e.height=i?"100%":a||"",e.maxWidth=l||"",e.maxHeight=r||""}ensureStructure(){if(!this.initialized){this.placeholderEl=document.createElement("div"),this.placeholderEl.className="designbase-wc-image__placeholder",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-image__error",this.errorEl.append(e("gallery",20));const t=document.createElement("span");t.className="designbase-wc-image__error-text",this.errorEl.append(t),this.imgEl=document.createElement("img"),this.imgEl.className="designbase-wc-image__img",this.imgEl.draggable=!1,this.imgEl.addEventListener("load",this.handleLoad),this.imgEl.addEventListener("error",this.handleError),this.append(this.placeholderEl,this.errorEl,this.imgEl),this.initialized=!0}this.updateImageSource(),this.updatePlaceholderContent(),this.updateErrorContent()}updateImageSource(){if(!this.imgEl)return;const e=this.getAttribute("alt")||"",t=this.getAttribute("loading")||"lazy",i=s.includes(t)?t:"lazy";this.imgEl.alt=e,this.imgEl.loading=i;const a=this.currentSrc;if(!a)return void this.imgEl.removeAttribute("src");const l=new URL(a,window.location.href).href;this.imgEl.src!==l?this.imgEl.src=a:this.imgEl.complete&&this.imgEl.naturalWidth>0&&"loading"===this.imageState&&this.handleLoad()}updatePlaceholderContent(){if(!this.placeholderEl)return;const e=this.getAttribute("placeholder")||"none",t=a.includes(e)?e:"none";if(this.placeholderEl.className=["designbase-wc-image__placeholder",`designbase-wc-image__placeholder--${t}`].join(" "),this.placeholderEl.replaceChildren(),"skeleton"===t){const e=document.createElement("div");e.className="designbase-wc-image__skeleton",this.placeholderEl.append(e)}if("blur"===t){const e=document.createElement("div");e.className="designbase-wc-image__blur",this.placeholderEl.append(e)}}updateErrorContent(){if(!this.errorEl)return;const e=this.errorEl.querySelector(".designbase-wc-image__error-text");e&&(e.textContent=this.getAttribute("alt")||"이미지를 불러올 수 없습니다")}syncVisualState(){const e=this.getAttribute("fit")||"cover",t=i.includes(e)?e:"cover",s=this.hasAttribute("clickable"),a=this.hasAttribute("hover");if(this.className=["designbase-wc-image",this.getRatioClass(),`designbase-wc-image--fit-${t}`,this.getRoundedClass(),this.getShadowClass(),a&&"designbase-wc-image--hover",this.hasAttribute("full-width")&&"designbase-wc-image--full-width",this.hasAttribute("full-height")&&"designbase-wc-image--full-height",s&&"designbase-wc-image--clickable","loading"===this.imageState&&"designbase-wc-image--loading","error"===this.imageState&&"designbase-wc-image--error"].filter(Boolean).join(" "),this.applyContainerStyle(),s?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.placeholderEl){const e=this.showPlaceholder&&"loading"===this.imageState;this.placeholderEl.classList.toggle("designbase-wc-image__placeholder--visible",e),this.placeholderEl.hidden=!e}if(this.errorEl){const e="error"===this.imageState;this.errorEl.hidden=!e}if(this.imgEl){const e=Boolean(this.currentSrc)&&"error"!==this.imageState;this.imgEl.hidden=!e,this.imgEl.classList.toggle("designbase-wc-image__img--loaded","loaded"===this.imageState),this.imgEl.classList.toggle("designbase-wc-image__img--error","error"===this.imageState)}}}customElements.get("db-image")||customElements.define("db-image",DbImage);export{DbImage};

package/dist/esm/components/db-indicator.d.ts

@@ -0,0 +1,46 @@
+declare class DbIndicator extends HTMLElement {
+    static get observedAttributes(): string[];
+    private timerFrame;
+    private progress;
+    private pausedProgress;
+    private activeStep;
+    private isPlayingInternal;
+    get total(): number;
+    set total(value: number);
+    private normalizeStep;
+    private get isCurrentControlled();
+    private get isPlayingControlled();
+    private get resolvedCurrent();
+    private get resolvedPlaying();
+    get indicatorType(): string;
+    get size(): string;
+    set size(value: string);
+    get direction(): string;
+    set direction(value: string);
+    get clickable(): boolean;
+    set clickable(value: boolean);
+    get timer(): boolean;
+    set timer(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private resetProgress;
+    private emitChange;
+    private goToStep;
+    private startTimer;
+    private updateTimerVisuals;
+    private syncRootClasses;
+    private syncPlaybackButton;
+    private renderDotRing;
+    private renderStep;
+    private renderDots;
+    private renderPlaybackButton;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-indicator': DbIndicator;
+    }
+}
+
+export { DbIndicator };

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

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e=["dots","numbers","line","dot-line","slide","combined"],i=["s","m","l"],s=["horizontal","vertical"];class DbIndicator extends HTMLElement{constructor(){super(...arguments),this.timerFrame=0,this.progress=0,this.pausedProgress=0,this.activeStep=0,this.isPlayingInternal=!1}static get observedAttributes(){return["total","current","default-current","indicator-type","type","size","direction","clickable","timer","timer-duration","auto-roll","playing","default-playing","playback-disabled"]}get total(){return Math.max(1,Number(this.getAttribute("total")||1))}set total(t){this.setAttribute("total",String(t))}normalizeStep(t){const e=this.total;return(t%e+e)%e}get isCurrentControlled(){return this.hasAttribute("current")}get isPlayingControlled(){return this.hasAttribute("playing")}get resolvedCurrent(){return this.isCurrentControlled?this.normalizeStep(Number(this.getAttribute("current")||0)):this.activeStep}get resolvedPlaying(){return!!this.isPlayingControlled||this.isPlayingInternal}get indicatorType(){const t=this.getAttribute("indicator-type")||this.getAttribute("type")||"dots";return e.includes(t)?t:"dots"}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get direction(){const t=this.getAttribute("direction")||"horizontal";return s.includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t)}get clickable(){return this.hasAttribute("clickable")}set clickable(t){this.toggleAttribute("clickable",Boolean(t))}get timer(){return this.hasAttribute("timer")}set timer(t){this.toggleAttribute("timer",Boolean(t))}connectedCallback(){this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.isPlayingInternal=this.hasAttribute("default-playing"),this.render(),this.startTimer()}disconnectedCallback(){cancelAnimationFrame(this.timerFrame)}attributeChangedCallback(t){if(this.isConnected){if("current"===t&&this.isCurrentControlled)return this.resetProgress(),this.render(),void this.startTimer();if("playing"===t)return this.resolvedPlaying||(this.pausedProgress=this.progress),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("default-current"===t&&!this.isCurrentControlled)return this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.resetProgress(),this.render(),void this.startTimer();if("default-playing"===t&&!this.isPlayingControlled)return this.isPlayingInternal=this.hasAttribute("default-playing"),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("timer"===t||"timer-duration"===t||"auto-roll"===t)return this.resetProgress(),this.render(),void this.startTimer();this.render(),this.startTimer()}}resetProgress(){this.pausedProgress=0,this.progress=0}emitChange(t){const e={current:t,index:t};this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-current-change",{detail:e,bubbles:!0,composed:!0}))}goToStep(t){const e=this.normalizeStep(t);this.isCurrentControlled||(this.activeStep=e,this.resetProgress(),this.render(),this.startTimer()),this.emitChange(e)}startTimer(){if(cancelAnimationFrame(this.timerFrame),!this.timer||!this.resolvedPlaying||!this.isConnected)return;const t=Number(this.getAttribute("timer-duration")||3e3),e=Date.now()-this.pausedProgress*t,tick=()=>{const i=Date.now()-e,s=Math.min(i/t,1);this.progress=s,this.pausedProgress=s,this.updateTimerVisuals(),s<1?this.timerFrame=requestAnimationFrame(tick):(this.dispatchEvent(new CustomEvent("db-timer-complete",{detail:{step:this.resolvedCurrent},bubbles:!0,composed:!0})),this.resetProgress(),"false"===this.getAttribute("auto-roll")?this.render():this.goToStep(this.resolvedCurrent+1))};this.timerFrame=requestAnimationFrame(tick)}updateTimerVisuals(){this.querySelectorAll(".designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill").forEach(t=>{t.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`});const t=this.querySelector(".designbase-wc-indicator__dot-ring-progress");if(t){const e=15.9155,i=2*Math.PI*e;t.setAttribute("stroke-dashoffset",String(i*(1-this.progress)))}}syncRootClasses(){const t=this.indicatorType;this.className=["designbase-wc-indicator",`designbase-wc-indicator--${t}`,"combined"===t&&"designbase-wc-indicator--dots",`designbase-wc-indicator--${this.size}`,`designbase-wc-indicator--${this.direction}`,this.clickable&&"designbase-wc-indicator--clickable",this.timer&&!this.resolvedPlaying&&"designbase-wc-indicator--paused"].filter(Boolean).join(" ")}syncPlaybackButton(){const e=this.querySelector(".designbase-wc-indicator__playback-button");e&&(e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.replaceChildren(t(this.resolvedPlaying?"pause":"play")))}renderDotRing(){const t=15.9155,e=2*Math.PI*t,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("class","designbase-wc-indicator__dot-ring"),i.setAttribute("viewBox","0 0 36 36"),i.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","circle");s.setAttribute("class","designbase-wc-indicator__dot-ring-bg"),s.setAttribute("cx","18"),s.setAttribute("cy","18"),s.setAttribute("r",String(t)),s.setAttribute("fill","none");const r=document.createElementNS("http://www.w3.org/2000/svg","circle");return r.setAttribute("class","designbase-wc-indicator__dot-ring-progress"),r.setAttribute("cx","18"),r.setAttribute("cy","18"),r.setAttribute("r",String(t)),r.setAttribute("fill","none"),r.setAttribute("stroke-dasharray",String(e)),r.setAttribute("stroke-dashoffset",String(e*(1-this.progress))),r.setAttribute("stroke-linecap","round"),i.append(s,r),i}renderStep(t,e,i){const s=t===this.resolvedCurrent,r=this.clickable?document.createElement("button"):document.createElement("span");return r.className=e,this.clickable&&r instanceof HTMLButtonElement?(r.type="button",r.setAttribute("aria-label",`${t+1}단계`),s&&r.setAttribute("aria-current","step"),r.addEventListener("click",()=>{this.goToStep(t),this.dispatchEvent(new CustomEvent("db-step-click",{detail:{current:t,index:t},bubbles:!0,composed:!0}))})):s||r.setAttribute("aria-hidden","true"),i&&r.append(i),r}renderDots(){const t=document.createDocumentFragment(),e=this.indicatorType,i="combined"===e?"dots":e,s=this.timer,r=this.resolvedPlaying,n=this.resolvedCurrent;this.direction;const a=this.total;if("dots"!==i)return t;for(let e=0;e<a;e+=1){const i=e===n,a=s&&i&&r,o=a||s&&i&&!r&&this.progress>0,c=document.createElement("span");c.className="designbase-wc-indicator__dot-core";const d=document.createDocumentFragment();d.append(c),s&&i&&(a||this.progress>0)&&d.append(this.renderDotRing()),t.append(this.renderStep(e,["designbase-wc-indicator__dot",i&&"designbase-wc-indicator__dot--active",o&&"designbase-wc-indicator__dot--with-ring"].filter(Boolean).join(" "),d))}return t}renderPlaybackButton(){const e=document.createElement("button");return e.type="button",e.className="designbase-wc-indicator__playback-button",e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.append(t(this.resolvedPlaying?"pause":"play")),e.addEventListener("click",()=>{if(this.hasAttribute("playback-disabled"))return;const t=!this.resolvedPlaying;this.isPlayingControlled?t?this.setAttribute("playing",""):(this.removeAttribute("playing"),this.pausedProgress=this.progress):(this.isPlayingInternal=t,t||(this.pausedProgress=this.progress)),this.syncRootClasses(),this.syncPlaybackButton(),this.startTimer(),this.dispatchEvent(new CustomEvent("db-playing-change",{detail:{playing:t},bubbles:!0,composed:!0}))}),e}render(){const t=this.indicatorType,e="combined"===t?"dots":t,i=this.direction,s=this.resolvedCurrent,r=this.total,n=this.timer,a=this.resolvedPlaying;if(this.syncRootClasses(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","1"),this.setAttribute("aria-valuemax",String(r)),this.setAttribute("aria-valuenow",String(s+1)),this.replaceChildren(),"numbers"===e){const t=document.createElement("span");t.className="designbase-wc-indicator__current",t.textContent=String(s+1);const e=document.createElement("span");e.className="designbase-wc-indicator__separator",e.textContent="/";const i=document.createElement("span");return i.className="designbase-wc-indicator__total",i.textContent=String(r),void this.append(t,e,i)}if("slide"===e){const t=document.createElement("div");t.className="designbase-wc-indicator__track";const e=document.createElement("div");e.className="designbase-wc-indicator__track-thumb";const o=100/r;if("vertical"===i?(e.style.height=`${o}%`,e.style.transform=`translateY(${100*s}%)`):(e.style.width=`${o}%`,e.style.transform=`translateX(${100*s}%)`),n&&a){const t=document.createElement("div");t.className="designbase-wc-indicator__track-fill",t.style.transform="vertical"===i?`scaleY(${this.progress})`:`scaleX(${this.progress})`,e.append(t)}return t.append(e),void this.append(t)}if("line"===e){const t=document.createDocumentFragment();for(let e=0;e<r;e+=1){const r=e===s,o=n&&r&&a?(()=>{const t=document.createElement("span");return t.className="designbase-wc-indicator__line-fill",t.style.transform="vertical"===i?`scaleY(${this.progress})`:`scaleX(${this.progress})`,t})():void 0;t.append(this.renderStep(e,["designbase-wc-indicator__line-segment",r&&!n&&"designbase-wc-indicator__line-segment--active",r&&n&&"designbase-wc-indicator__line-segment--current"].filter(Boolean).join(" "),o))}return void this.append(t)}if("dot-line"===e){const t=document.createDocumentFragment();for(let e=0;e<r;e+=1){const i=e===s;t.append(this.renderStep(e,["designbase-wc-indicator__dot-line-item",i&&"designbase-wc-indicator__dot-line-item--active"].filter(Boolean).join(" ")))}return void this.append(t)}if("combined"===t){const t=document.createElement("div");return t.className="designbase-wc-indicator__steps",t.append(this.renderDots()),void this.append(t,this.renderPlaybackButton())}this.append(this.renderDots())}}customElements.get("db-indicator")||customElements.define("db-indicator",DbIndicator);export{DbIndicator};

package/dist/esm/components/db-input.d.ts

@@ -0,0 +1,51 @@
+declare class DbInput extends HTMLElement {
+    static get observedAttributes(): string[];
+    private input?;
+    private passwordVisible;
+    private isFocused;
+    private touched;
+    private isScrubbing;
+    private detachScrub?;
+    get value(): string;
+    set value(value: string);
+    get type(): string;
+    set type(value: string);
+    get size(): string;
+    set size(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    focus(): void;
+    private get passwordMinLength();
+    private get validationVisibility();
+    private get validateOnBlur();
+    private get isValidationEnabled();
+    private getIconSize;
+    private resolveIconName;
+    private resolveStartIcon;
+    private getCurrentValue;
+    private render;
+    private mountIcons;
+    private shouldShowPasswordValidation;
+    private renderValidationMarkup;
+    private updateDynamicUI;
+    private applyScrubValue;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handlePasswordToggle;
+    private handleSearchClear;
+    private escape;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-input': DbInput;
+    }
+}
+
+export { DbInput };

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

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

package/dist/esm/components/db-label.d.ts

@@ -0,0 +1,13 @@
+declare class DbLabel extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-label': DbLabel;
+    }
+}
+
+export { DbLabel };

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

@@ -0,0 +1 @@
+class DbLabel extends HTMLElement{static get observedAttributes(){return["label","html-for","id","size","required","disabled","error"]}connectedCallback(){this.sync()}attributeChangedCallback(){this.sync()}sync(){const e=this.getAttribute("size")||"s",t=this.hasAttribute("required"),s=this.hasAttribute("disabled"),l=this.hasAttribute("error"),a=this.getAttribute("html-for"),i=this.getAttribute("id"),r=this.getAttribute("label");this.className=["designbase-wc-label",`designbase-wc-label--${e}`,s&&"designbase-wc-label--disabled",l&&"designbase-wc-label--error"].filter(Boolean).join(" ");let b=this.querySelector(":scope > label.designbase-wc-label__text");if(null!==r&&""!==r)b||(this.replaceChildren(),b=document.createElement("label"),b.className="designbase-wc-label__text",this.append(b)),b.textContent=r;else if(!b&&this.childNodes.length>0){b=document.createElement("label"),b.className="designbase-wc-label__text";Array.from(this.childNodes).forEach(e=>b.append(e)),this.append(b)}if(b&&(a?b.htmlFor=a:b.removeAttribute("for"),i?b.id=i:b.removeAttribute("id"),b.querySelector(".designbase-wc-label__required")?.remove(),t)){const e=document.createElement("span");e.className="designbase-wc-label__required",e.textContent="*",b.append(e)}}}customElements.get("db-label")||customElements.define("db-label",DbLabel);export{DbLabel};