@sellmate/design-system 1.0.14 → 1.0.16

package/hydrate/index.mjs

@@ -4436,6 +4436,7 @@ const FORM_PARENT_TAGS = [
     'sd-select-multiple-group',
     'sd-input',
     'sd-textarea',
+    'sd-number-input',
 ];
 class SdField {
     constructor(hostRef) {
@@ -4547,15 +4548,15 @@ class SdField {
         }
     }
     render() {
-        return (hAsync("div", { key: 'd37aff590a1721b0dfe06698566721534b81b9cb', class: {
+        return (hAsync("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, hAsync("div", { key: 'e10b6410261ed2589c7c6a691debcdb7fda696af', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '398930ec704a709af85a30b9fe5c03acaf014959', class: {
+            } }, hAsync("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, hAsync("slot", { key: 'b4fc8cf7d8fefc437e6201ad1926c1583a96bdf1' }))), this.errorMsg && hAsync("div", { key: '0fde078aeaa157f0d9e4760324cd4b89b12d5656', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, hAsync("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && hAsync("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -7290,13 +7291,7 @@ class SdModalCard {
     useCloseButton = true;
     modalTitle = 'normal';
     buttonFlexDirection = 'row';
-    buttonProps = [
-        {
-            label: '확인',
-            color: 'grey_80',
-            size: 'md',
-        },
-    ];
+    buttonProps;
     message = [];
     modalClass = '';
     close;
@@ -7320,7 +7315,7 @@ class SdModalCard {
         return modalClass;
     }
     render() {
-        return (hAsync("div", { key: '763beaa5cb19d7717ddf0a713ab5db30dee806f8', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (hAsync("sd-icon", { key: '6b8f9326515d246f4552eceb73186022bc6ed7d7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: '170e999a39f8552d35714689adb75ae1aa3c1c39', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '3be3ed2fe087983cf0fa10f1b1e757110ac4983d', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: 'f6d282734446c3a61362b1a50631595b5522f6df' }, hAsync("div", { key: '3dd7a418947511dcd19e4c0d2dcb5cd65db6aad2', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '400478d5e06528b5c08fac83519a993d37a6204e', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
+        return (hAsync("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (hAsync("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, hAsync("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
     }
     static get style() { return sdModalCardCss(); }
     static get cmpMeta() { return {
@@ -7342,7 +7337,7 @@ class SdModalCard {
     }; }
 }
 
-const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input-container{display:inline-flex}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}sd-number-input .sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-number-input .sd-number-input.sd-number-input--error{border-color:#fb4444}sd-number-input .sd-number-input.sd-number-input--pass{border-color:#2bce6c}sd-number-input .sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}sd-number-input .sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important;cursor:not-allowed !important}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
+const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
 
 class SdNumberInput {
     constructor(hostRef) {
@@ -7359,20 +7354,24 @@ class SdNumberInput {
     useDecimal = false;
     value = null;
     label;
+    insideLabel = false;
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
-    rules;
+    rules = [];
     autoFocus = false;
     status;
     inputClass = '';
     readonly = false;
     inputStyle = {};
+    error = false;
+    focused = false;
+    hovered = false;
     internalValue = null;
     displayValue = '';
-    hovered = false;
-    error = false;
     nativeEl = undefined;
+    formField;
+    name = nanoid();
     update;
     focus;
     blur;
@@ -7443,16 +7442,18 @@ class SdNumberInput {
             this.value = newValue;
             this.update?.emit(newValue);
         }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
-        }
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
     }
     componentWillLoad() {
         if (this.value !== null && this.value !== undefined) {
@@ -7515,11 +7516,15 @@ class SdNumberInput {
     handleFocus = (event) => {
         this.focus?.emit(event);
     };
-    handleBlur = (event) => {
+    handleBlur = async (event) => {
         this.updateDisplay();
         if (this.nativeEl) {
             this.nativeEl.value = this.displayValue;
         }
+        if (this.rules && this.rules.length > 0) {
+            await this.formField?.sdValidate();
+        }
+        this.focused = false;
         this.blur?.emit(event);
     };
     handleKeyDown = (event) => {
@@ -7579,17 +7584,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync("div", { key: 'b46cd55c205c9d0f0b7e4af181cbef7cc558f464', class: "sd-number-input-container", style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.label && hAsync("div", { key: 'f2e0ef64df2132b0efca4bd5d50441f191fcc307', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '98920eb7ee7e07ad4719069201beffdeb3c8510a', class: {
+        return (hAsync("sd-field", { key: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'b8ffd42e1a1d3936f6f8b5bf2351b46d31a193ad', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: 'b94de21e7b6b1020daac92cfefe9215444704a43', class: "sd-number-input__buttons" }, hAsync("button", { key: '0a96725cc1c469db6c7520d21df06f757d20ffc6', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, hAsync("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '598f637e2ad3cb46f4c881552dc2812c86964c68', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '03532b7f895aaa6b616739c1a2272c0a517a2140', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'bd9d565d790305f4153e52a4323dce18559df970', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -7607,6 +7612,7 @@ class SdNumberInput {
             "useDecimal": [4, "use-decimal"],
             "value": [1032],
             "label": [1],
+            "insideLabel": [4, "inside-label"],
             "placeholder": [1],
             "disabled": [4],
             "width": [8],
@@ -7616,10 +7622,15 @@ class SdNumberInput {
             "inputClass": [1, "input-class"],
             "readonly": [4],
             "inputStyle": [16],
+            "error": [1028],
+            "focused": [1028],
+            "hovered": [1028],
             "internalValue": [32],
             "displayValue": [32],
-            "hovered": [32],
-            "error": [32],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64],
             "sdGetNativeElement": [64]
         },
         "$listeners$": undefined,
@@ -7703,12 +7714,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, hAsync("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, hAsync("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -7762,11 +7773,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '2a61062e200ac3ca2704756d7d1f6f16977c48f7' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '2d624846b0c7cef09f303437989653c7320a832c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'f71d28238094e82c43d00e1ab4933b6945f5df4d', class: {
+        return (hAsync(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: '748b76d151dce05cffdd97d9803a96f14554ad3b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '36bd2a265c89589b13e67107d57e8045a87d6b40', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '9173ac0cadb39409fee25809542420423e4a327c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '137ffab11643f153b52bd4a068b597fd98fd7698' })), hAsync("div", { key: '283f18867bd48ca58ca9621f46637f78aea108b7', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '58c8799e22cd93294d44f9320a07b4d9b51df001', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'b8ef358d0e952024e361e93cc56f315fd7fa37e5', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '53abc6fde61026b2e42cdd9aa3914b86047ac1c8', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'a39ea568a1cb13be87c350f646b0a519fc3f94d7', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'a00c0ffe7b173471e4ecdb9b98116f4993745bba', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, hAsync("i", { key: 'cd9b298e666ce898c83576c869e60e1e5e0bb38f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '79012e2c547a71e2084958925445ac26a8bbf7fe' })), hAsync("div", { key: '0664419fe24318ced7cbca2da1b9e0741c48f333', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'a3f9238db85a7ca245cb5f794e1a9249742c3b42', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '56696f99a5400276c099a8ca69f904b4a932802c', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'cbdf8231857ccb20156d25758dbe2d1809e28656', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'a2f249d05c6cd40d24005307d78aea95a841b0b8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '13ba057c4acf7ae65cfe8d722fe8bdb69ce506ac', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -7917,7 +7928,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '5469d915f8a11d490a1839167b3ae771624d257b' });
+        return hAsync("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -7974,10 +7985,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync("div", { key: '22105314465e3bc788e018884a68b4fe9050535b', style: {
+        return (hAsync("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '2434c60a8412993b3637e48d2c34c8c1010f6358', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -8640,10 +8651,10 @@ class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (hAsync("div", { key: '91c0ce599b9f479404c9353bc976949d2e71f161', class: {
+        return (hAsync("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '6ede4c281647a0282caf04db174d5b522969e897', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": ["filteredOptionsChanged"],
@@ -8823,7 +8834,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: '34ce2172ced7175b985b636bd5a65c98ed7b2765', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'f1ecb7cab58c82ddba3fde97e2a139d966927891', class: {
+        return (hAsync("sd-field", { key: 'a70e7fefb98428e616d2f124923dfa7ee7a7c2e2', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -9406,7 +9417,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync("div", { key: '59df3cd1bfc1195025ae829999ff882f369f40f4', class: {
+        return (hAsync("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -9492,7 +9503,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (hAsync("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -9501,10 +9512,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -9553,17 +9564,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (hAsync("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, hAsync("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -10513,10 +10524,10 @@ class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync("div", { key: 'a5c69ab99ae634450f45211158ecc7aaf4ae7ed5', class: {
+        return (hAsync("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '805bcdc30afbc6d91ae1ece93935ef3b95458c4d', class: "sd-textarea__content" }, hAsync("textarea", { key: '9bacae67219729f46c8e05e2d3c5a8b3dda05447', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: '394681f2a6b62747b29fd2d4561ffca93fc482d7', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: '2740dc673980d558d460e0caa100365ec0c10587', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'f7100c74718da4aa705d3213dbcbaf200bb0d6d5', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -10653,7 +10664,7 @@ class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, hAsync("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, hAsync("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -10709,7 +10720,7 @@ class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.14",
+ "version": "1.0.16",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",