@tolle_/tolle-ui 18.2.16 → 18.2.18

package/fesm2022/tolle-ui.mjs

@@ -2886,13 +2886,19 @@ class MaskedInputComponent {
     size = 'default';
     returnRaw = false;
     hideHintOnFocus = true;
+    externalFocused;
+    mergedPosition = 'none';
     inputEl;
     hasPrefix = false;
     hasSuffix = false;
     displayValue = '';
     isFocused = false;
     tokens = {
-        '0': /\d/, '9': /\d/, 'a': /[a-z]/i, 'A': /[a-z]/i, '*': /[a-z0-9]/i
+        '0': /\d/,
+        '9': /\d/,
+        a: /[a-z]/i,
+        A: /[a-z]/i,
+        '*': /[a-z0-9]/i,
     };
     onChange = () => { };
     onTouched = () => { };
@@ -2910,58 +2916,52 @@ class MaskedInputComponent {
         }
     }
     get computedLabelClass() {
-        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+        return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
     }
     get computedContainerClass() {
+        const focused = this.externalFocused !== undefined ? this.externalFocused : this.isFocused;
         return cn(
         // Base styles
-        "group relative flex items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        'group relative flex items-center w-full border transition-all duration-200', 'bg-background', 
         // Border and shadow
-        "border-input shadow-sm", 
+        'border-input shadow-sm', 
         // Sizing
-        this.size === 'xs' && "h-8 px-2 gap-1.5 text-xs", this.size === 'sm' && "h-9 px-3 gap-2 text-sm", this.size === 'default' && "h-10 px-3 gap-2 text-sm", this.size === 'lg' && "h-11 px-4 gap-3 text-base", 
-        // Focus state - SIMPLE LIKE ZARDUI
-        !(this.readonly || this.disabled) && [
-            "focus-within:border-primary/80",
-            "focus-within:ring-4",
-            "focus-within:ring-ring/30",
-            "focus-within:ring-offset-0",
-            "focus-within:shadow-none",
+        this.size === 'xs' && 'h-8 px-2 gap-1.5 text-xs', this.size === 'sm' && 'h-9 px-3 gap-2 text-sm', this.size === 'default' && 'h-10 px-3 gap-2 text-sm', this.size === 'lg' && 'h-11 px-4 gap-3 text-base', 
+        // Merged position - handle border radius
+        this.mergedPosition === 'left' && 'rounded-l-md rounded-r-none border-r-0 pr-0', this.mergedPosition === 'right' && 'rounded-r-md rounded-l-none border-l-0 pl-0', this.mergedPosition === 'none' && 'rounded-md', 
+        // Focus state
+        !(this.readonly || this.disabled) &&
+            focused && [
+            'ring-4',
+            'ring-ring/30',
+            'ring-offset-0',
+            'shadow-none',
+            this.error ? 'border-destructive/80' : 'border-primary/80',
         ], 
         // Error state
         this.error && [
-            "border-destructive",
-            !(this.readonly || this.disabled) && [
-                "focus-within:border-destructive/80",
-                "focus-within:ring-destructive/30"
-            ]
+            'border-destructive',
+            !(this.readonly || this.disabled) && focused && 'ring-destructive/30',
         ], 
         // Disabled state
-        this.disabled && [
-            "cursor-not-allowed opacity-50",
-            "border-opacity-50"
-        ], 
+        this.disabled && ['cursor-not-allowed opacity-50', 'border-opacity-50'], 
         // Readonly state
-        this.readonly && [
-            "cursor-default",
-            "border-dashed",
-            !this.disabled && "focus-within:ring-0 focus-within:border-opacity-100"
-        ], this.containerClass);
+        this.readonly && ['cursor-default', 'border-dashed', !this.disabled && !focused && 'ring-0'], this.containerClass);
     }
     get computedInputClass() {
         return cn(
         // Base styles
-        "flex-1 bg-transparent border-none p-0", "placeholder:text-muted-foreground", 
+        'flex-1 bg-transparent border-none p-0', 'placeholder:text-muted-foreground', 
         // Remove all default focus styles
-        "focus:outline-none focus:ring-0 focus:shadow-none", 
+        'focus:outline-none focus:ring-0 focus:shadow-none', 
         // Text sizing
-        this.size === 'xs' && "text-xs", this.size === 'sm' && "text-sm", this.size === 'default' && "text-sm", this.size === 'lg' && "text-base", 
+        this.size === 'xs' && 'text-xs', this.size === 'sm' && 'text-sm', this.size === 'default' && 'text-sm', this.size === 'lg' && 'text-base', 
         // Cursor states
-        this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", 
+        this.disabled && 'cursor-not-allowed', this.readonly && 'cursor-default', 
         // Text color
-        "text-foreground", 
+        'text-foreground', 
         // Selection color
-        "selection:bg-primary/20 selection:text-foreground", this.class);
+        'selection:bg-primary/20 selection:text-foreground', this.class);
     }
     focusInput() {
         if (!this.disabled && this.inputEl) {
@@ -3031,28 +3031,22 @@ class MaskedInputComponent {
     }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", readonly: "readonly", class: "class", containerClass: "containerClass", error: "error", size: "size", returnRaw: "returnRaw", hideHintOnFocus: "hideHintOnFocus" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", readonly: "readonly", class: "class", containerClass: "containerClass", error: "error", size: "size", returnRaw: "returnRaw", hideHintOnFocus: "hideHintOnFocus", externalFocused: "externalFocused", mergedPosition: "mergedPosition" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaskedInputComponent),
-                multi: true
-            }
+                multi: true,
+            },
         ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }], ngImport: i0, template: `
-    <div class="flex flex-col gap-1.5 w-full">
-      <label
-        *ngIf="label"
-        [for]="id"
-        [class]="computedLabelClass"
-      >
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div
-        [class]="computedContainerClass"
-        (click)="focusInput()"
-      >
+      <div [class]="computedContainerClass" (click)="focusInput()">
         <!-- Prefix Icon -->
-        <div class="h-full flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+        <div
+          class="flex h-full items-center text-muted-foreground transition-colors duration-200 group-focus-within:text-primary">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
@@ -3069,28 +3063,23 @@ class MaskedInputComponent {
           (focus)="onFocus()"
           [class]="computedInputClass"
           [attr.aria-invalid]="error"
-          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
-        />
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null" />
 
         <!-- Suffix Icon -->
-        <div class="h-full flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+        <div
+          class="flex h-full items-center text-muted-foreground transition-colors duration-200 group-focus-within:text-primary">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
-      <ng-container *ngIf="!disabled">
+      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
         <p
           *ngIf="hint && !error"
-          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
-          [class.opacity-0]="isFocused && hideHintOnFocus"
-        >
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
           {{ hint }}
         </p>
-        <p
-          *ngIf="error && errorMessage"
-          [id]="id + '-error'"
-          class="text-xs text-destructive px-1"
-        >
+        <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -3107,25 +3096,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MaskedInputComponent),
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ],
                     template: `
-    <div class="flex flex-col gap-1.5 w-full">
-      <label
-        *ngIf="label"
-        [for]="id"
-        [class]="computedLabelClass"
-      >
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div
-        [class]="computedContainerClass"
-        (click)="focusInput()"
-      >
+      <div [class]="computedContainerClass" (click)="focusInput()">
         <!-- Prefix Icon -->
-        <div class="h-full flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+        <div
+          class="flex h-full items-center text-muted-foreground transition-colors duration-200 group-focus-within:text-primary">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
@@ -3142,33 +3125,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (focus)="onFocus()"
           [class]="computedInputClass"
           [attr.aria-invalid]="error"
-          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
-        />
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null" />
 
         <!-- Suffix Icon -->
-        <div class="h-full flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+        <div
+          class="flex h-full items-center text-muted-foreground transition-colors duration-200 group-focus-within:text-primary">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
-      <ng-container *ngIf="!disabled">
+      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
         <p
           *ngIf="hint && !error"
-          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
-          [class.opacity-0]="isFocused && hideHintOnFocus"
-        >
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
           {{ hint }}
         </p>
-        <p
-          *ngIf="error && errorMessage"
-          [id]="id + '-error'"
-          class="text-xs text-destructive px-1"
-        >
+        <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">
           {{ errorMessage }}
         </p>
       </ng-container>
     </div>
-  `
+  `,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
@@ -3200,6 +3178,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], hideHintOnFocus: [{
                 type: Input
+            }], externalFocused: [{
+                type: Input
+            }], mergedPosition: [{
+                type: Input
             }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl', { static: true }]
@@ -3430,7 +3412,7 @@ class DatePickerComponent {
         ></tolle-calendar>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw", "hideHintOnFocus"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "mode", "disablePastDates", "showQuickActions", "minDate", "maxDate", "formatMonthFn", "formatYearFn", "formatDateFn"], outputs: ["dateSelect"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw", "hideHintOnFocus", "externalFocused", "mergedPosition"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "mode", "disablePastDates", "showQuickActions", "minDate", "maxDate", "formatMonthFn", "formatYearFn", "formatDateFn"], outputs: ["dateSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -12930,7 +12912,10 @@ class CountrySelectorComponent {
     defaultCountryCode = 'GH';
     returnValue = 'isoAlpha2';
     showName = true;
+    mergedPosition = 'none';
     onSelect = new EventEmitter();
+    onFocusChange = new EventEmitter();
+    onBlurChange = new EventEmitter();
     popover;
     searchInput;
     countryCodesService = inject(CountryCodesService);
@@ -12954,19 +12939,20 @@ class CountrySelectorComponent {
         }
     }
     get computedTriggerClass() {
-        return cn('flex w-full items-center justify-between rounded-md border transition-all duration-200', 'bg-background text-foreground', 'border-input shadow-sm', this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', !(this.readonly || this.disabled) && [
-            'focus:outline-none',
-            'focus:ring-4',
-            'focus:ring-ring/30',
-            'focus:ring-offset-0',
-            'focus:border-primary/80',
-        ], !(this.readonly || this.disabled) && 'hover:border-accent', this.error && [
-            'border-destructive',
-            !(this.readonly || this.disabled) && [
-                'focus:border-destructive/80',
-                'focus:ring-destructive/30',
-            ],
-        ], this.disabled && 'cursor-not-allowed opacity-50 border-opacity-50', this.readonly && 'cursor-default border-dashed', this.class);
+        return cn('flex w-full items-center justify-between border transition-all duration-200', 'bg-background text-foreground', 'border-input shadow-sm', this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', 
+        // Merged position
+        this.mergedPosition === 'left' && 'rounded-l-md rounded-r-none border-r-0', this.mergedPosition === 'none' && 'rounded-md', 
+        // Focus state
+        !(this.readonly || this.disabled) &&
+            this.isFocused && [
+            'ring-4',
+            'ring-ring/30',
+            'ring-offset-0',
+            'shadow-none',
+            this.error ? 'border-destructive/80' : 'border-primary/80',
+        ], !(this.readonly || this.disabled) && 'hover:border-accent', 
+        // Error state
+        this.error && ['border-destructive', this.isFocused && 'ring-destructive/30'], this.disabled && 'cursor-not-allowed opacity-50 border-opacity-50', this.readonly && 'cursor-default border-dashed', this.class);
     }
     get computedLabelClass() {
         return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
@@ -13010,10 +12996,12 @@ class CountrySelectorComponent {
     }
     onFocus() {
         this.isFocused = true;
+        this.onFocusChange.emit();
     }
     onBlur() {
         this.isFocused = false;
         this.onTouched();
+        this.onBlurChange.emit();
     }
     onPopoverOpen() {
         setTimeout(() => {
@@ -13055,7 +13043,7 @@ class CountrySelectorComponent {
         this.disabled = isDisabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountrySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CountrySelectorComponent, isStandalone: true, selector: "tolle-country-selector", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", error: "error", hideHintOnFocus: "hideHintOnFocus", placeholder: "placeholder", class: "class", disabled: "disabled", readonly: "readonly", size: "size", defaultCountryCode: "defaultCountryCode", returnValue: "returnValue", showName: "showName" }, outputs: { onSelect: "onSelect" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CountrySelectorComponent, isStandalone: true, selector: "tolle-country-selector", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", error: "error", hideHintOnFocus: "hideHintOnFocus", placeholder: "placeholder", class: "class", disabled: "disabled", readonly: "readonly", size: "size", defaultCountryCode: "defaultCountryCode", returnValue: "returnValue", showName: "showName", mergedPosition: "mergedPosition" }, outputs: { onSelect: "onSelect", onFocusChange: "onFocusChange", onBlurChange: "onBlurChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CountrySelectorComponent),
@@ -13063,7 +13051,7 @@ class CountrySelectorComponent {
             },
         ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
     <div class="flex w-full flex-col gap-1.5">
-      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -13100,13 +13088,13 @@ class CountrySelectorComponent {
         </div>
 
         <div
-          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md">
+          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md"
+          (mousedown)="$event.stopPropagation()">
           <div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
             <tolle-input
               size="sm"
               placeholder="Search country..."
               [(ngModel)]="searchQuery"
-              (mousedown)="$event.stopPropagation()"
               (ngModelChange)="filterCountries($event)"
               class="w-full"
               #searchInput>
@@ -13140,7 +13128,7 @@ class CountrySelectorComponent {
         </div>
       </tolle-popover>
 
-      <ng-container *ngIf="!disabled">
+      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -13172,7 +13160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
     <div class="flex w-full flex-col gap-1.5">
-      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -13209,13 +13197,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
 
         <div
-          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md">
+          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md"
+          (mousedown)="$event.stopPropagation()">
           <div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
             <tolle-input
               size="sm"
               placeholder="Search country..."
               [(ngModel)]="searchQuery"
-              (mousedown)="$event.stopPropagation()"
               (ngModelChange)="filterCountries($event)"
               class="w-full"
               #searchInput>
@@ -13249,7 +13237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </tolle-popover>
 
-      <ng-container *ngIf="!disabled">
+      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -13294,8 +13282,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], showName: [{
                 type: Input
+            }], mergedPosition: [{
+                type: Input
             }], onSelect: [{
                 type: Output
+            }], onFocusChange: [{
+                type: Output
+            }], onBlurChange: [{
+                type: Output
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
@@ -13325,12 +13319,48 @@ class PhoneNumberInputComponent {
     displayValue = '';
     selectedIso = '';
     rawValue = '';
+    isFocused = false;
     cn = cn;
     onChange = () => { };
     onTouched = () => { };
     constructor() {
         this.selectedIso = this.defaultCountryCode;
     }
+    get computedLabelClass() {
+        return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
+    }
+    get computedMergedClass() {
+        return cn('flex rounded-md border transition-all duration-200', 'bg-background shadow-sm', this.size === 'xs' && 'h-8', this.size === 'sm' && 'h-9', this.size === 'default' && 'h-10', this.size === 'lg' && 'h-11', 
+        // Focus state
+        !this.disabled &&
+            !this.readonly &&
+            this.isFocused && [
+            'ring-4',
+            'ring-ring/30',
+            'ring-offset-0',
+            'shadow-none',
+            this.error ? 'border-destructive/80' : 'border-primary/80',
+        ], 
+        // Error state
+        this.error && ['border-destructive', this.isFocused && 'ring-destructive/30'], 
+        // Disabled state
+        this.disabled && ['cursor-not-allowed opacity-50', 'border-opacity-50'], 
+        // Readonly state
+        this.readonly && [
+            'cursor-default',
+            'border-dashed',
+            !this.disabled && !this.isFocused && 'ring-0',
+        ], this.class);
+    }
+    onFocusIn() {
+        this.isFocused = true;
+        this.cdr.markForCheck();
+    }
+    onFocusOut() {
+        this.isFocused = false;
+        this.onTouched();
+        this.cdr.markForCheck();
+    }
     writeValue(value) {
         if (value) {
             if (typeof value === 'object' && value.number) {
@@ -13404,75 +13434,103 @@ class PhoneNumberInputComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PhoneNumberInputComponent),
-                multi: true
-            }
+                multi: true,
+            },
         ], ngImport: i0, template: `
-    <tolle-masked-input
-      [id]="id"
-      [label]="label"
-      [hint]="hint"
-      [error]="error"
-      [errorMessage]="errorMessage"
-      [hideHintOnFocus]="hideHintOnFocus"
-      [mask]="mask"
-      [size]="size"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [placeholder]="placeholder"
-      [(ngModel)]="displayValue"
-      (ngModelChange)="onMaskInputChange($event)"
-      [containerClass]="cn('pl-0', class)"
-    >
-      <tolle-country-selector
-        prefix
-        class="country-selector-override"
-        [showName]="false"
-        [size]="size"
-        [disabled]="disabled || !enableCountrySelector"
-        [readonly]="readonly"
-        [(ngModel)]="selectedIso"
-        (ngModelChange)="onCountryChange($event)"
-      ></tolle-country-selector>
-    </tolle-masked-input>
-  `, isInline: true, styles: [":host{display:block;width:100%}::ng-deep .country-selector-override{display:flex;align-items:center;border-right:1px solid var(--border, #e5e7eb)}::ng-deep .country-selector-override button{border:none!important;border-radius:0!important;border-top-left-radius:calc(var(--radius, .5rem) - 1px)!important;border-bottom-left-radius:calc(var(--radius, .5rem) - 1px)!important;background:transparent!important;box-shadow:none!important;padding-left:.75rem!important;padding-right:.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:.25rem!important}::ng-deep .country-selector-override button .flex{gap:.25rem!important}::ng-deep .country-selector-override button i{margin-left:0!important;line-height:1!important;display:flex!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CountrySelectorComponent, selector: "tolle-country-selector", inputs: ["id", "label", "hint", "errorMessage", "error", "hideHintOnFocus", "placeholder", "class", "disabled", "readonly", "size", "defaultCountryCode", "returnValue", "showName"], outputs: ["onSelect"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw", "hideHintOnFocus"] }] });
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div [class]="computedMergedClass" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
+        <tolle-country-selector
+          [showName]="false"
+          [size]="size"
+          [disabled]="disabled || !enableCountrySelector"
+          [readonly]="readonly"
+          [mergedPosition]="'left'"
+          [(ngModel)]="selectedIso"
+          (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
+
+        <tolle-masked-input
+          [id]="id"
+          [mask]="mask"
+          [size]="size"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [placeholder]="placeholder"
+          [error]="error"
+          [externalFocused]="isFocused"
+          [mergedPosition]="'right'"
+          [(ngModel)]="displayValue"
+          (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CountrySelectorComponent, selector: "tolle-country-selector", inputs: ["id", "label", "hint", "errorMessage", "error", "hideHintOnFocus", "placeholder", "class", "disabled", "readonly", "size", "defaultCountryCode", "returnValue", "showName", "mergedPosition"], outputs: ["onSelect", "onFocusChange", "onBlurChange"] }, { kind: "component", type: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw", "hideHintOnFocus", "externalFocused", "mergedPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tolle-phone-number-input', standalone: true, imports: [CommonModule, FormsModule, CountrySelectorComponent, MaskedInputComponent], template: `
-    <tolle-masked-input
-      [id]="id"
-      [label]="label"
-      [hint]="hint"
-      [error]="error"
-      [errorMessage]="errorMessage"
-      [hideHintOnFocus]="hideHintOnFocus"
-      [mask]="mask"
-      [size]="size"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [placeholder]="placeholder"
-      [(ngModel)]="displayValue"
-      (ngModelChange)="onMaskInputChange($event)"
-      [containerClass]="cn('pl-0', class)"
-    >
-      <tolle-country-selector
-        prefix
-        class="country-selector-override"
-        [showName]="false"
-        [size]="size"
-        [disabled]="disabled || !enableCountrySelector"
-        [readonly]="readonly"
-        [(ngModel)]="selectedIso"
-        (ngModelChange)="onCountryChange($event)"
-      ></tolle-country-selector>
-    </tolle-masked-input>
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div [class]="computedMergedClass" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
+        <tolle-country-selector
+          [showName]="false"
+          [size]="size"
+          [disabled]="disabled || !enableCountrySelector"
+          [readonly]="readonly"
+          [mergedPosition]="'left'"
+          [(ngModel)]="selectedIso"
+          (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
+
+        <tolle-masked-input
+          [id]="id"
+          [mask]="mask"
+          [size]="size"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [placeholder]="placeholder"
+          [error]="error"
+          [externalFocused]="isFocused"
+          [mergedPosition]="'right'"
+          [(ngModel)]="displayValue"
+          (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
   `, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PhoneNumberInputComponent),
-                            multi: true
-                        }
-                    ], styles: [":host{display:block;width:100%}::ng-deep .country-selector-override{display:flex;align-items:center;border-right:1px solid var(--border, #e5e7eb)}::ng-deep .country-selector-override button{border:none!important;border-radius:0!important;border-top-left-radius:calc(var(--radius, .5rem) - 1px)!important;border-bottom-left-radius:calc(var(--radius, .5rem) - 1px)!important;background:transparent!important;box-shadow:none!important;padding-left:.75rem!important;padding-right:.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:.25rem!important}::ng-deep .country-selector-override button .flex{gap:.25rem!important}::ng-deep .country-selector-override button i{margin-left:0!important;line-height:1!important;display:flex!important;align-items:center!important}\n"] }]
+                            multi: true,
+                        },
+                    ], styles: [":host{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], label: [{