bromcom-ui-next 0.1.30 → 0.1.31

package/dist/collection/components/dropdown-item/dropdown-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IALzB;QAU2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAkB3C,sBAAiB,GAAG,EAAE,CAC5B;YACE,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAC9D;gBACD,KAAK,EAAE;oBACL,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACV;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAwBH;IA1DS,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IA8BD,MAAM;;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IACZ,IAAI,CAAc;IACrB,IAAI,CAAS;IACb,IAAI,CAAS;IACb,UAAU,CAAW;IACJ,QAAQ,GAAY,KAAK,CAAC;IAC1B,KAAK,GAAY,KAAK,CAAC;IACvB,QAAQ,GAAY,KAAK,CAAC;IAQnD,qBAAqB,CAAoB;IAEjC,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,GAAG,EAAE,CAC5B;QACE,IAAI,EAAE,6GAA6G;QACnH,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,IAAI,EAAE,uGAAuG;gBAC7G,KAAK,EAAE,sDAAsD;aAC9D;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,uHAAuH;gBAC7H,KAAK,EAAE,EAAE;aACV;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;gBAC3C,KAAK,EAAE,EAAE;aACV;SACF;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;SAChB;KACF,EACD;QACE,OAAO,EAAE,KAAK;KACf,CACF,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown-item/dropdown-item.css

@@ -1 +1 @@
-.flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}
+.flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}

package/dist/collection/components/input/input.component.js

@@ -5,154 +5,84 @@ import { generateId } from "../../utils/id/generate-id";
 import { checkSlotContent } from "../../utils/slot/check-slot-content";
 import { getValidationMessage, setValidationMessages, defaultValidationMessages } from "../../utils/validation-messages";
 export class BcmInput {
-    constructor() {
-        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];
-    }
+    el;
+    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;
@@ -161,31 +91,46 @@ export class BcmInput {
         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)
@@ -193,34 +138,47 @@ export class BcmInput {
         // 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) {
@@ -228,23 +186,149 @@ export class BcmInput {
             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({
@@ -254,14 +338,14 @@ export class BcmInput {
             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',
@@ -276,6 +360,7 @@ export class BcmInput {
     }
     static get is() { return "bcm-input"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["input.scss"]
@@ -1060,5 +1145,6 @@ export class BcmInput {
                 "methodName": "watchErrorMessage"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=input.component.js.map