bromcom-ui-next 0.1.30 → 0.1.31

package/dist/esm/bcm-input.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CRwAh9Np.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-B6Ppbs5O.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 import { g as generateId } from './generate-id-IBjzkjef.js';
-import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './validation-messages-CUvT12BL.js';
+import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './validation-messages-nf_HKsGq.js';
 
 /**
  * Checks if a named slot has any content
@@ -11,8 +11,7 @@ import { s as setValidationMessages, g as getValidationMessage, d as defaultVali
  * @returns boolean indicating if the slot has any assigned nodes
  */
 const checkSlotContent = (element, slotName) => {
-    var _a;
-    const slot = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
+    const slot = element.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
     if (!slot)
         return false;
     const assignedNodes = slot.assignedNodes();
@@ -30,153 +29,92 @@ const BcmInput = class {
         this.bcmBlur = createEvent(this, "bcmBlur", 1);
         this.bcmKeyDown = createEvent(this, "bcmKeyDown", 1);
         this.bcmKeyUp = createEvent(this, "bcmKeyUp", 1);
-        this.isFocused = false;
-        this.isValid = true;
-        this.internalStatus = 'default';
-        this.isPasswordVisible = false;
-        /** Input value */
-        this.value = '';
-        /** Input id */
-        this._id = generateId('input');
-        /** Controls the input size */
-        this.size = 'medium';
-        /** Defines the input's status/state */
-        this.status = 'default';
-        /** Full width input */
-        this.fullWidth = false;
-        /** HTML input type */
-        this.type = 'text';
-        /** Whether the input is disabled */
-        this.disabled = false;
-        /** Whether the input is readonly */
-        this.readonly = false;
-        /** Whether the input is required */
-        this.required = false;
-        /** Whether to use native form validation
-         * If false, component will handle validation internally
-         */
-        this.useNativeValidation = true;
-        this.onInput = (event) => {
-            const input = event.target;
-            this.value = input.value;
-            this.bcmInput.emit(event);
-            this.validateInput();
-        };
-        this.onChange = (event) => {
-            this.bcmChange.emit(event);
-        };
-        this.onFocus = (event) => {
-            this.isFocused = true;
-            this.bcmFocus.emit(event);
-        };
-        this.onBlur = (event) => {
-            this.isFocused = false;
-            this.bcmBlur.emit(event);
-            this.validateInput();
-        };
-        this.onKeyDown = (event) => {
-            this.bcmKeyDown.emit(event);
-        };
-        this.onKeyUp = (event) => {
-            this.bcmKeyUp.emit(event);
-        };
-        this.styleClass = tv({
-            slots: {
-                base: [
-                    'bcm-input bcm-input__container',
-                    'bg-[--bcm-ui-color-background-base-default]',
-                    'text-[--bcm-ui-color-text-default]',
-                    'border border-solid rounded',
-                    'flex items-center justify-between',
-                    'transition-colors duration-200',
-                    'px-2',
-                ],
-                inputClass: [
-                    'input',
-                    'w-full flex-1',
-                    'border-0 outline-0 bg-transparent',
-                    'appearance-none text-ellipsis',
-                    'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
-                    'font-sans antialiased font-medium',
-                    'px-1',
-                    '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                ],
-            },
-            variants: {
-                size: {
-                    small: {
-                        base: '',
-                        inputClass: 'text-size-4 py-px',
-                    },
-                    medium: {
-                        base: '',
-                        inputClass: 'text-size-5 leading-6 py-1',
-                    },
-                    large: {
-                        base: '',
-                        inputClass: 'text-size-6 py-2',
-                    },
-                },
-                status: {
-                    default: {
-                        base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
-                    },
-                    error: {
-                        base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
-                    },
-                    success: {
-                        base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
-                    },
-                    warning: {
-                        base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
-                    },
-                    info: {
-                        base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
-                    },
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed',
-                    false: '',
-                },
-                focused: {
-                    true: {
-                        base: '',
-                    },
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                status: 'default',
-                fullWidth: false,
-                disabled: false,
-                focused: false,
-            },
-        }, {
-            twMerge: false,
-        });
-        this.togglePasswordVisibility = () => {
-            this.isPasswordVisible = !this.isPasswordVisible;
-            this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
-        };
-        this.PasswordToggleButton = () => {
-            var _a;
-            if (this.type !== 'password' || this.disabled || this.readonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0)
-                return null;
-            return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
-        };
-        this.iconSize = {
-            small: 14,
-            medium: 16,
-            large: 18,
-        }[this.size];
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    get el() { return getElement(this); }
+    inputRef;
+    isFocused = false;
+    validationMessage;
+    isValid = true;
+    internalStatus = 'default';
+    internalErrorMessage;
+    isPasswordVisible = false;
+    /** Input value */
+    value = '';
+    /** Input placeholder text */
+    placeholder;
+    /** Input name */
+    name;
+    /** Input id */
+    _id = generateId('input');
+    /** Controls the input size */
+    size = 'medium';
+    /** Defines the input's status/state */
+    status = 'default';
+    /** Full width input */
+    fullWidth = false;
+    /** HTML input type */
+    type = 'text';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Whether the input is readonly */
+    readonly = false;
+    /** Whether the input is required */
+    required = false;
+    /** Input autocomplete attribute */
+    autocomplete;
+    /** Min length for text input */
+    minLength;
+    /** Max length for text input */
+    maxLength;
+    /** Min value for number input */
+    min;
+    /** Max value for number input */
+    max;
+    /** Step value for number input */
+    step;
+    /** Pattern for validation */
+    pattern;
+    /** Input label for accessibility */
+    label;
+    /** Error message to display */
+    errorMessage;
+    /** Caption text to display below input */
+    captionText;
+    /** ID of associated label element */
+    labelledby;
+    /** ID of associated caption/error text element */
+    describedby;
+    /** Prefix icon class name */
+    prefixIcon;
+    /** Suffix icon class name */
+    suffixIcon;
+    /** Whether to use native form validation
+     * If false, component will handle validation internally
+     */
+    useNativeValidation = true;
+    /** Custom validation function */
+    validator;
+    internals;
+    bcmInput;
+    bcmChange;
+    bcmFocus;
+    bcmBlur;
+    bcmKeyDown;
+    bcmKeyUp;
     handleValueChange(newValue) {
         if (this.inputRef) {
             this.inputRef.value = newValue;
         }
+        if (this.internals) {
+            this.internals.setFormValue(newValue ?? '');
+        }
     }
     watchStatus(newValue) {
         this.internalStatus = newValue;
@@ -185,31 +123,46 @@ const BcmInput = class {
         this.internalErrorMessage = newValue;
     }
     async setFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        this.inputRef?.focus();
     }
     async setBlur() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
+        this.inputRef?.blur();
     }
     async select() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+        this.inputRef?.select();
+    }
+    /**
+     * When the parent <form> is reset, reset input state as well.
+     */
+    formResetCallback() {
+        this.value = '';
+        this.isValid = true;
+        this.validationMessage = '';
+        this.internalStatus = 'default';
+        this.internalErrorMessage = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
+        if (this.internals) {
+            this.internals.setFormValue('');
+            this.internals.setValidity({});
+        }
     }
     /** Sets locale and messages for all inputs */
     async setLocale(locale, messages) {
         // Set messages and update validation immediately
         setValidationMessages(locale, messages);
-        // Mevcut validasyon mesajını güncelle
         if (!this.isValid) {
             this.validateInput();
         }
     }
     componentWillLoad() {
-        // I18n için default mesajları set et
         setValidationMessages('en', defaultValidationMessages);
         this.internalStatus = this.status;
         this.internalErrorMessage = this.errorMessage;
+        if (this.internals) {
+            this.internals.setFormValue(this.value ?? '');
+        }
     }
     validateInput() {
         if (!this.inputRef)
@@ -217,34 +170,47 @@ const BcmInput = class {
         // Reset validation state
         this.isValid = true;
         this.validationMessage = '';
+        let validityFlags = {};
         const value = this.inputRef.value;
+        if (this.validator) {
+            const customError = this.validator(value);
+            if (customError) {
+                this.isValid = false;
+                this.validationMessage = customError;
+                validityFlags = { customError: true };
+            }
+        }
         // Required check
         if (this.required && !value) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('required');
             this.internalStatus = 'error';
             this.internalErrorMessage = this.validationMessage;
-            return;
+            validityFlags = { valueMissing: true };
         }
         // Minimum length check
         else if (this.minLength && value.length < this.minLength) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('minlength', { min: this.minLength });
+            validityFlags = { tooShort: true };
         }
         // Maximum length check
         else if (this.maxLength && value.length > this.maxLength) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });
+            validityFlags = { tooLong: true };
         }
         // Pattern check
         else if (this.pattern && !new RegExp(this.pattern).test(value)) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('pattern');
+            validityFlags = { patternMismatch: true };
         }
         // Email check
         else if (this.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('email');
+            validityFlags = { typeMismatch: true };
         }
         // Number range check
         else if (this.type === 'number' && value) {
@@ -252,23 +218,149 @@ const BcmInput = class {
             if (this.min !== undefined && numValue < this.min) {
                 this.isValid = false;
                 this.validationMessage = getValidationMessage('min', { min: this.min });
+                validityFlags = { rangeUnderflow: true };
             }
             else if (this.max !== undefined && numValue > this.max) {
                 this.isValid = false;
                 this.validationMessage = getValidationMessage('max', { max: this.max });
+                validityFlags = { rangeOverflow: true };
             }
         }
         // Update component state
         this.internalStatus = this.isValid ? 'default' : 'error';
         this.internalErrorMessage = this.validationMessage;
+        if (this.internals) {
+            if (this.isValid) {
+                this.internals.setValidity({});
+            }
+            else {
+                this.internals.setValidity(validityFlags, this.validationMessage || '', this.el);
+            }
+        }
     }
+    onInput = (event) => {
+        const input = event.target;
+        this.value = input.value;
+        this.internals.setFormValue(this.value);
+        this.bcmInput.emit(event);
+        this.validateInput();
+    };
+    onChange = (event) => {
+        this.bcmChange.emit(event);
+    };
+    onFocus = (event) => {
+        this.isFocused = true;
+        this.bcmFocus.emit(event);
+    };
+    onBlur = (event) => {
+        this.isFocused = false;
+        this.bcmBlur.emit(event);
+        this.validateInput();
+    };
+    onKeyDown = (event) => {
+        this.bcmKeyDown.emit(event);
+    };
+    onKeyUp = (event) => {
+        this.bcmKeyUp.emit(event);
+    };
     hasSlotContent(slotName) {
         return checkSlotContent(this.el, slotName);
     }
+    styleClass = tv({
+        slots: {
+            base: [
+                'bcm-input bcm-input__container',
+                'bg-[--bcm-ui-color-background-base-default]',
+                'text-[--bcm-ui-color-text-default]',
+                'border border-solid rounded',
+                'flex items-center justify-between',
+                'transition-colors duration-200',
+                'px-2',
+            ],
+            inputClass: [
+                'input',
+                'w-full flex-1',
+                'border-0 outline-0 bg-transparent',
+                'appearance-none text-ellipsis',
+                'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
+                'font-sans antialiased font-medium',
+                'px-1',
+                '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+            ],
+        },
+        variants: {
+            size: {
+                small: {
+                    base: '',
+                    inputClass: 'text-size-4 py-px',
+                },
+                medium: {
+                    base: '',
+                    inputClass: 'text-size-5 leading-6 py-1',
+                },
+                large: {
+                    base: '',
+                    inputClass: 'text-size-6 py-2',
+                },
+            },
+            status: {
+                default: {
+                    base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
+                },
+                error: {
+                    base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
+                },
+                success: {
+                    base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
+                },
+                warning: {
+                    base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
+                },
+                info: {
+                    base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
+                },
+            },
+            fullWidth: {
+                true: 'full-width w-full',
+            },
+            disabled: {
+                true: 'disabled cursor-not-allowed',
+                false: '',
+            },
+            focused: {
+                true: {
+                    base: '',
+                },
+            },
+        },
+        defaultVariants: {
+            size: 'medium',
+            status: 'default',
+            fullWidth: false,
+            disabled: false,
+            focused: false,
+        },
+    }, {
+        twMerge: false,
+    });
     getDefaultIconForType() {
         return; // TODO: Will be implemented later
         // return defaultIcons[this.type as keyof typeof defaultIcons];
     }
+    togglePasswordVisibility = () => {
+        this.isPasswordVisible = !this.isPasswordVisible;
+        this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
+    };
+    PasswordToggleButton = () => {
+        if (this.type !== 'password' || this.disabled || this.readonly || this.value?.length === 0)
+            return null;
+        return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
+    };
+    iconSize = {
+        small: 14,
+        medium: 16,
+        large: 18,
+    }[this.size];
     render() {
         const inputId = this._id + '-input' || this.name;
         const { base, inputClass } = this.styleClass({
@@ -278,14 +370,14 @@ const BcmInput = class {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: 'd9583210d0fcb43a427848548f36cd934305f71b', class: "bcm-ui-element" }, this.label && (h("label", { key: 'b2fd6dc8e3332e88da628c29e8ac50fa88aa2aca', class: classNames('input-label font-medium', {
+        return (h("div", { key: '9805223519fc955cebe844bea4f2de29401abfb4', class: "bcm-ui-element" }, this.label && (h("label", { key: '6158cc9fc3b9ba147e82c3b43d91f72d0a16514c', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: 'df349ffff7ed26c8669d152427b6ba1b05a4dd98', name: "label" }, this.label), this.required && h("span", { key: '9ad010def980323243cfd4b0c6ff6aed6069a2e2' }, "*"))), h("div", { key: 'a3a8880a27d214e16d8ff544a250c077f8285bb5', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'edb13d29c10a6701ff44e2263fc950bbc2dcaa3d', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'cbc97b594e4419d3f46d55f2437695a961cf8baf', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: 'b4b5d8af0e8719ffdfa9002c3b1022b84a7d21f4', name: "prefix" }))), h("input", { key: '9d3b6fabc8b636c800bd866f60a2952d723ba7d0', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '0992b793192e8d40efbdb2b092d2df4bcfb9d9ef', class: "flex items-center gap-2 px-2" }, h("slot", { key: 'cdd5ea6250f0545ea5f7cd2788f03ca389bd81d4', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '01dd7e4f94de6c75639c75e7d2a0a07e4c337137', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: 'af3aa66da7fd8553c458899080a3576ba2c2c8f7', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '1e1d07f60a73951f3f2b7ad2f832f40239e61aa0', name: "label" }, this.label), this.required && h("span", { key: '8762cc81df533949a71dd5d2e4f9e3c1bd2e7506' }, "*"))), h("div", { key: '3e3c3c64c71a0c5012bfb9f0e1648c6c78dddc73', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '96ee9768f43488f5bc2e69ad640e1fc61f7b942e', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'de7957d76081c5e3e55c61200262eb57435d082a', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: 'f0cd103119e0643d9dd8273ada85ba60b2b79977', name: "prefix" }))), h("input", { key: '386bbfe4619e2066a1958c8ca025ba9d46a81a8a', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '3bcf84cf63a3bd9c3edfcad0bb09e8110013e921', class: "flex items-center gap-2 px-2" }, h("slot", { key: '98a08cb02f2bcc8b4aabd80f42482bf1f610718b', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'c16b246514812f26b2abc34325c0f7ad8e9db429', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '85bd9fcd1f8319b5e95ce32663e61ef7b40cfa27', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
@@ -298,7 +390,7 @@ const BcmInput = class {
                 'text-size-5': this.size === 'large',
             }) }, !this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText))));
     }
-    get el() { return getElement(this); }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "status": ["watchStatus"],