@tolle_/tolle-ui 18.2.18 → 18.2.20

package/fesm2022/tolle-ui.mjs

@@ -2886,7 +2886,6 @@ class MaskedInputComponent {
     size = 'default';
     returnRaw = false;
     hideHintOnFocus = true;
-    externalFocused;
     mergedPosition = 'none';
     inputEl;
     hasPrefix = false;
@@ -2919,34 +2918,30 @@ class MaskedInputComponent {
         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 border transition-all duration-200', 'bg-background', 
-        // Border and shadow
-        'border-input shadow-sm', 
+        'group relative flex items-center w-full border transition-all duration-200', 'bg-background 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', 
         // 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', 
+        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 flex-1', 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',
+        !(this.readonly || this.disabled) && [
+            'focus-within:ring-4',
+            'focus-within:ring-ring/30',
+            'focus-within:ring-offset-0',
+            'focus-within:shadow-none',
+            this.error ? 'focus-within:border-destructive/80' : 'focus-within:border-primary/80',
         ], 
         // Error state
         this.error && [
             'border-destructive',
-            !(this.readonly || this.disabled) && focused && 'ring-destructive/30',
+            !(this.readonly || this.disabled) && 'focus-within: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 && !focused && 'ring-0'], this.containerClass);
+        this.readonly && ['cursor-default', 'border-dashed'], this.containerClass);
     }
     get computedInputClass() {
         return cn(
@@ -3031,7 +3026,7 @@ 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", externalFocused: "externalFocused", mergedPosition: "mergedPosition" }, 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", mergedPosition: "mergedPosition" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaskedInputComponent),
@@ -3178,8 +3173,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], hideHintOnFocus: [{
                 type: Input
-            }], externalFocused: [{
-                type: Input
             }], mergedPosition: [{
                 type: Input
             }], inputEl: [{
@@ -3412,7 +3405,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", "externalFocused", "mergedPosition"] }, { 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", "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,
@@ -13319,7 +13312,6 @@ class PhoneNumberInputComponent {
     displayValue = '';
     selectedIso = '';
     rawValue = '';
-    isFocused = false;
     cn = cn;
     onChange = () => { };
     onTouched = () => { };
@@ -13330,36 +13322,22 @@ class PhoneNumberInputComponent {
         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', 
+        return cn('group relative flex items-center w-full rounded-md border transition-all duration-200', 'bg-background border-input 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',
+        !this.readonly &&
+            !this.disabled && [
+            'focus-within:ring-4',
+            'focus-within:ring-ring/30',
+            'focus-within:ring-offset-0',
+            'focus-within:shadow-none',
+            this.error ? 'focus-within:border-destructive/80' : 'focus-within:border-primary/80',
         ], 
         // Error state
-        this.error && ['border-destructive', this.isFocused && 'ring-destructive/30'], 
+        this.error && 'border-destructive', this.error && !this.readonly && !this.disabled && 'focus-within: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();
+        this.readonly && 'cursor-default border-dashed', this.class);
     }
     writeValue(value) {
         if (value) {
@@ -13442,8 +13420,9 @@ class PhoneNumberInputComponent {
         {{ label }}
       </label>
 
-      <div [class]="computedMergedClass" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
+      <div [class]="computedMergedClass">
         <tolle-country-selector
+          class="flex-shrink-0"
           [showName]="false"
           [size]="size"
           [disabled]="disabled || !enableCountrySelector"
@@ -13453,6 +13432,7 @@ class PhoneNumberInputComponent {
           (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
 
         <tolle-masked-input
+          class="min-w-0 flex-1"
           [id]="id"
           [mask]="mask"
           [size]="size"
@@ -13460,7 +13440,6 @@ class PhoneNumberInputComponent {
           [readonly]="readonly"
           [placeholder]="placeholder"
           [error]="error"
-          [externalFocused]="isFocused"
           [mergedPosition]="'right'"
           [(ngModel)]="displayValue"
           (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
@@ -13469,8 +13448,7 @@ class PhoneNumberInputComponent {
       <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">
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200">
           {{ hint }}
         </p>
         <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">
@@ -13478,7 +13456,7 @@ class PhoneNumberInputComponent {
         </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"] }] });
+  `, 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", "mergedPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
@@ -13488,8 +13466,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         {{ label }}
       </label>
 
-      <div [class]="computedMergedClass" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
+      <div [class]="computedMergedClass">
         <tolle-country-selector
+          class="flex-shrink-0"
           [showName]="false"
           [size]="size"
           [disabled]="disabled || !enableCountrySelector"
@@ -13499,6 +13478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
 
         <tolle-masked-input
+          class="min-w-0 flex-1"
           [id]="id"
           [mask]="mask"
           [size]="size"
@@ -13506,7 +13486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [readonly]="readonly"
           [placeholder]="placeholder"
           [error]="error"
-          [externalFocused]="isFocused"
           [mergedPosition]="'right'"
           [(ngModel)]="displayValue"
           (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
@@ -13515,8 +13494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <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">
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200">
           {{ hint }}
         </p>
         <p *ngIf="error && errorMessage" [id]="id + '-error'" class="px-1 text-xs text-destructive">