@tolle_/tolle-ui 18.2.20 → 18.2.22

package/fesm2022/tolle-ui.mjs

@@ -676,6 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class SelectComponent {
     selectService;
+    cdr;
     placeholder = 'Select an option';
     class = '';
     disabled = false;
@@ -687,6 +688,8 @@ class SelectComponent {
     container;
     items;
     sub = new Subscription();
+    itemsChangeSub;
+    pendingValue = undefined;
     searchQuery = '';
     noResults = false;
     isOpen = false;
@@ -696,8 +699,9 @@ class SelectComponent {
     onChange = () => { };
     onTouched = () => { };
     cn = cn;
-    constructor(selectService) {
+    constructor(selectService, cdr) {
         this.selectService = selectService;
+        this.cdr = cdr;
         this.sub.add(this.selectService.selectedValue$.subscribe(val => {
             this.value = val;
             this.onChange(val);
@@ -729,8 +733,24 @@ class SelectComponent {
         return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
     }
     ngAfterContentInit() {
+        // Subscribe to items changes to handle dynamic content
+        this.itemsChangeSub = this.items.changes.subscribe(() => {
+            this.updateItemSelection();
+            this.applyPendingValue();
+        });
+        // Apply initial selection if items are already available
         this.updateItemSelection();
-        this.items.changes.subscribe(() => this.updateItemSelection());
+        this.applyPendingValue();
+    }
+    applyPendingValue() {
+        if (this.pendingValue !== undefined && this.items && this.items.length > 0) {
+            const found = this.items.find(i => i.value === this.pendingValue);
+            if (found) {
+                this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+            this.pendingValue = undefined;
+        }
     }
     updateItemSelection() {
         if (this.items) {
@@ -739,6 +759,15 @@ class SelectComponent {
             });
         }
     }
+    syncSelectedLabel() {
+        if (this.items) {
+            const found = this.items.find(i => i.value === this.value);
+            if (found) {
+                this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+        }
+    }
     _outsideClickHandler = (event) => {
         if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
             this.close();
@@ -752,7 +781,7 @@ class SelectComponent {
     open() {
         this.isOpen = true;
         this.trigger.nativeElement.focus();
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             this.updatePosition();
             document.addEventListener('mousedown', this._outsideClickHandler);
         });
@@ -811,10 +840,16 @@ class SelectComponent {
     writeValue(value) {
         this.value = value;
         this.updateItemSelection();
-        if (this.items) {
+        if (this.items && this.items.length > 0) {
             const found = this.items.find(i => i.value === value);
-            if (found)
+            if (found) {
                 this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+        }
+        else {
+            // Queue the value for when items become available
+            this.pendingValue = value;
         }
     }
     registerOnChange(fn) { this.onChange = fn; }
@@ -822,11 +857,12 @@ class SelectComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     ngOnDestroy() {
         this.sub.unsubscribe();
+        this.itemsChangeSub?.unsubscribe();
         if (this.cleanupAutoUpdate)
             this.cleanupAutoUpdate();
         document.removeEventListener('mousedown', this._outsideClickHandler);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, providers: [
             SelectService,
             {
@@ -851,7 +887,7 @@ class SelectComponent {
 
       <div
         #popover
-        *ngIf="isOpen"
+        [class.hidden-dropdown]="!isOpen"
         class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
@@ -873,23 +909,18 @@ class SelectComponent {
         </div>
       </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: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
+  `, isInline: true, styles: [".hidden-dropdown{display:none!important}\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: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'tolle-select',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, InputComponent],
-                    providers: [
+            args: [{ selector: 'tolle-select', standalone: true, imports: [CommonModule, FormsModule, InputComponent], providers: [
                         SelectService,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }
-                    ],
-                    template: `
+                    ], template: `
     <div [class]="cn('relative w-full', 'size-' + size)" #container>
       <button
         type="button"
@@ -906,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <div
         #popover
-        *ngIf="isOpen"
+        [class.hidden-dropdown]="!isOpen"
         class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
@@ -928,9 +959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [{ type: SelectService }], propDecorators: { placeholder: [{
+  `, styles: [".hidden-dropdown{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: SelectService }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], class: [{
                 type: Input
@@ -1323,6 +1353,335 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+class TagInputComponent {
+    cdr;
+    tagInputElement;
+    id = `tag-input-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    hint = '';
+    errorMessage = '';
+    placeholder = 'Type and press Enter...';
+    size = 'default';
+    class = '';
+    // State inputs
+    disabled = false;
+    readonly = false;
+    error = false;
+    // Tag-specific inputs
+    delimiter = ',';
+    maxTags = null;
+    allowDuplicates = false;
+    tagPrefix = '';
+    tagSuffix = '';
+    tags = [];
+    inputValue = '';
+    isFocused = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    writeValue(values) {
+        this.tags = Array.isArray(values) ? [...values] : [];
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onKeydown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const key = event.key;
+        // Enter creates a tag
+        if (key === 'Enter') {
+            event.preventDefault();
+            this.commitInput();
+            return;
+        }
+        // Delimiter creates a tag (strip the delimiter)
+        if (key === this.delimiter) {
+            event.preventDefault();
+            this.commitInput();
+            return;
+        }
+        // Backspace on empty input removes the last tag
+        if (key === 'Backspace' && this.inputValue === '') {
+            if (this.tags.length > 0) {
+                this.removeTag(this.tags.length - 1);
+            }
+            return;
+        }
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+        this.commitInput();
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    removeTag(index, event) {
+        if (this.disabled || this.readonly)
+            return;
+        if (event) {
+            event.stopPropagation();
+        }
+        this.tags.splice(index, 1);
+        this.emitChange();
+        this.focusInput();
+    }
+    focusInput() {
+        if (!this.disabled && this.tagInputElement) {
+            this.tagInputElement.nativeElement.focus();
+        }
+    }
+    commitInput() {
+        const value = this.inputValue.trim();
+        if (value === '') {
+            return;
+        }
+        // Check max tags
+        if (this.maxTags != null && this.tags.length >= this.maxTags) {
+            this.inputValue = '';
+            return;
+        }
+        // Check duplicates (case-insensitive)
+        if (!this.allowDuplicates) {
+            const exists = this.tags.some(t => t.toLowerCase() === value.toLowerCase());
+            if (exists) {
+                this.inputValue = '';
+                return;
+            }
+        }
+        this.tags.push(value);
+        this.inputValue = '';
+        this.emitChange();
+    }
+    emitChange() {
+        this.onChange([...this.tags]);
+        this.cdr.markForCheck();
+    }
+    cn = cn;
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
+    get computedContainerClass() {
+        return cn(
+        // Base styles — flex-wrap so tags flow onto multiple lines
+        "group relative flex flex-wrap items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
+        // Sizing — min-h instead of fixed h so tags can wrap
+        this.size === 'xs' && "min-h-8 px-2 py-1 gap-1 text-xs", this.size === 'sm' && "min-h-9 px-3 py-1 gap-1.5 text-sm", this.size === 'default' && "min-h-10 px-3 py-1.5 gap-2 text-sm", this.size === 'lg' && "min-h-11 px-4 py-2 gap-3 text-base", 
+        // Focus state
+        !(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",
+        ], 
+        // Error state
+        this.error && [
+            "border-destructive",
+            !(this.readonly || this.disabled) && [
+                "focus-within:border-destructive/80",
+                "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 && "focus-within:ring-0 focus-within:border-opacity-100"
+        ], this.class);
+    }
+    get computedInputClass() {
+        return cn(
+        // Base styles — inline within the flex-wrap container
+        "flex-1 bg-transparent border-none p-0 min-w-[80px]", "placeholder:text-muted-foreground", 
+        // Remove all default focus styles
+        "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", 
+        // Cursor states
+        this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", 
+        // Text color
+        "text-foreground", 
+        // Selection color
+        "selection:bg-primary/20 selection:text-foreground", this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TagInputComponent, isStandalone: true, selector: "tolle-tag-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", placeholder: "placeholder", size: "size", class: "class", disabled: "disabled", readonly: "readonly", error: "error", delimiter: "delimiter", maxTags: "maxTags", allowDuplicates: "allowDuplicates", tagPrefix: "tagPrefix", tagSuffix: "tagSuffix" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TagInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "tagInputElement", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <tolle-badge
+          *ngFor="let tag of tags; let i = index"
+          size="xs"
+          variant="secondary"
+          [removable]="!disabled && !readonly"
+          (onRemove)="removeTag(i, $event)">
+          {{ tagPrefix }}{{ tag }}{{ tagSuffix }}
+        </tolle-badge>
+
+        <input
+          #tagInput
+          [id]="id"
+          type="text"
+          [placeholder]="tags.length === 0 ? placeholder : ''"
+          [disabled]="disabled"
+          [readOnly]="readonly || (maxTags != null && tags.length >= maxTags)"
+          [(ngModel)]="inputValue"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+        />
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          class="text-xs text-destructive px-1"
+        >
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-tag-input',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, BadgeComponent],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TagInputComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <tolle-badge
+          *ngFor="let tag of tags; let i = index"
+          size="xs"
+          variant="secondary"
+          [removable]="!disabled && !readonly"
+          (onRemove)="removeTag(i, $event)">
+          {{ tagPrefix }}{{ tag }}{{ tagSuffix }}
+        </tolle-badge>
+
+        <input
+          #tagInput
+          [id]="id"
+          type="text"
+          [placeholder]="tags.length === 0 ? placeholder : ''"
+          [disabled]="disabled"
+          [readOnly]="readonly || (maxTags != null && tags.length >= maxTags)"
+          [(ngModel)]="inputValue"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+        />
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          class="text-xs text-destructive px-1"
+        >
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tagInputElement: [{
+                type: ViewChild,
+                args: ['tagInput']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], delimiter: [{
+                type: Input
+            }], maxTags: [{
+                type: Input
+            }], allowDuplicates: [{
+                type: Input
+            }], tagPrefix: [{
+                type: Input
+            }], tagSuffix: [{
+                type: Input
+            }] } });
+
 class TooltipDirective {
     el;
     content = '';
@@ -1459,9 +1818,9 @@ class ToastContainerComponent {
     getVariantClasses(variant = 'default') {
         switch (variant) {
             case 'destructive':
-                return 'border-destructive/50 bg-destructive/5 dark:bg-destructive/10 text-destructive dark:text-red-400';
+                return 'border-destructive/50 bg-destructive/5 dark:bg-red-950 text-destructive dark:text-red-400';
             case 'success':
-                return 'border-emerald-500/50 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400';
+                return 'border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-400';
             default:
                 return 'bg-background text-foreground border-border';
         }
@@ -2886,7 +3245,7 @@ class MaskedInputComponent {
     size = 'default';
     returnRaw = false;
     hideHintOnFocus = true;
-    mergedPosition = 'none';
+    externalFocused;
     inputEl;
     hasPrefix = false;
     hasSuffix = false;
@@ -2918,13 +3277,14 @@ 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-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 flex-1', this.mergedPosition === 'none' && 'rounded-md', 
+        // Rounded corners
+        'rounded-md', 
         // Focus state
         !(this.readonly || this.disabled) && [
             'focus-within:ring-4',
@@ -3026,7 +3386,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", 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", externalFocused: "externalFocused" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaskedInputComponent),
@@ -3034,7 +3394,7 @@ class MaskedInputComponent {
             },
         ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }], ngImport: i0, template: `
     <div class="flex w-full flex-col gap-1.5">
-      <label *ngIf="label && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -3067,7 +3427,7 @@ class MaskedInputComponent {
         </div>
       </div>
 
-      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
+      <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -3096,7 +3456,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 && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -3129,7 +3489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </div>
 
-      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
+      <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -3173,7 +3533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], hideHintOnFocus: [{
                 type: Input
-            }], mergedPosition: [{
+            }], externalFocused: [{
                 type: Input
             }], inputEl: [{
                 type: ViewChild,
@@ -3405,7 +3765,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", "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", "externalFocused"] }, { 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,
@@ -4651,7 +5011,7 @@ class ModalComponent {
         // Base classes: Added 'w-full' and 'mx-auto'
         'bg-background border border-border shadow-lg relative flex flex-col w-full mx-auto ', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'rounded-md', 
         // Sizing scale with explicit max-widths
-        size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[544px]', size === 'lg' && 'max-w-[1024px]');
+        size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[544px]', size === 'lg' && 'max-w-[1024px]', size === 'xl' && 'max-w-[1280px]');
     }
     determineContentType() {
         if (typeof this.content === 'string')
@@ -4815,6 +5175,7 @@ class Modal {
      * - sm: 425px (Standard dialogs)
      * - default: 544px (Forms)
      * - lg: 90% / 1024px (Data tables)
+     * - xl: 1280px (Large forms, dashboards)
      * - fullscreen: 100vw/100vh (Complex workflows)
      */
     size = 'default';
@@ -12905,7 +13266,7 @@ class CountrySelectorComponent {
     defaultCountryCode = 'GH';
     returnValue = 'isoAlpha2';
     showName = true;
-    mergedPosition = 'none';
+    externalFocused;
     onSelect = new EventEmitter();
     onFocusChange = new EventEmitter();
     onBlurChange = new EventEmitter();
@@ -12932,12 +13293,22 @@ class CountrySelectorComponent {
         }
     }
     get computedTriggerClass() {
+        const focused = this.externalFocused !== undefined ? this.externalFocused : this.isFocused;
         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', 
+        // Rounded corners
+        'rounded-md', 
         // Focus state
+        !(this.readonly || this.disabled) && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'shadow-none',
+            this.error ? 'focus:border-destructive/80' : 'focus:border-primary/80',
+        ], 
+        // External focus state (when controlled by parent)
         !(this.readonly || this.disabled) &&
-            this.isFocused && [
+            focused && [
             'ring-4',
             'ring-ring/30',
             'ring-offset-0',
@@ -12945,7 +13316,10 @@ class CountrySelectorComponent {
             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);
+        this.error && [
+            'border-destructive',
+            !(this.readonly || this.disabled) && focused && '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');
@@ -13036,7 +13410,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", mergedPosition: "mergedPosition" }, outputs: { onSelect: "onSelect", onFocusChange: "onFocusChange", onBlurChange: "onBlurChange" }, 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", externalFocused: "externalFocused" }, outputs: { onSelect: "onSelect", onFocusChange: "onFocusChange", onBlurChange: "onBlurChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CountrySelectorComponent),
@@ -13044,7 +13418,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 && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -13121,7 +13495,7 @@ class CountrySelectorComponent {
         </div>
       </tolle-popover>
 
-      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
+      <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -13153,7 +13527,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 && mergedPosition === 'none'" [for]="id" [class]="computedLabelClass">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
@@ -13230,7 +13604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </tolle-popover>
 
-      <ng-container *ngIf="!disabled && mergedPosition === 'none'">
+      <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
           class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
@@ -13275,7 +13649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], showName: [{
                 type: Input
-            }], mergedPosition: [{
+            }], externalFocused: [{
                 type: Input
             }], onSelect: [{
                 type: Output
@@ -13312,6 +13686,7 @@ class PhoneNumberInputComponent {
     displayValue = '';
     selectedIso = '';
     rawValue = '';
+    isFocused = false;
     cn = cn;
     onChange = () => { };
     onTouched = () => { };
@@ -13321,23 +13696,14 @@ class PhoneNumberInputComponent {
     get computedLabelClass() {
         return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
     }
-    get computedMergedClass() {
-        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.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.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.class);
+    onFocusIn() {
+        this.isFocused = true;
+        this.cdr.markForCheck();
+    }
+    onFocusOut() {
+        this.isFocused = false;
+        this.onTouched();
+        this.cdr.markForCheck();
     }
     writeValue(value) {
         if (value) {
@@ -13420,16 +13786,18 @@ class PhoneNumberInputComponent {
         {{ label }}
       </label>
 
-      <div [class]="computedMergedClass">
+      <div class="flex gap-2" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
         <tolle-country-selector
           class="flex-shrink-0"
           [showName]="false"
           [size]="size"
           [disabled]="disabled || !enableCountrySelector"
           [readonly]="readonly"
-          [mergedPosition]="'left'"
+          [externalFocused]="isFocused"
           [(ngModel)]="selectedIso"
-          (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
+          (ngModelChange)="onCountryChange($event)"
+          (onFocusChange)="onFocusIn()"
+          (onBlurChange)="onFocusOut()"></tolle-country-selector>
 
         <tolle-masked-input
           class="min-w-0 flex-1"
@@ -13440,7 +13808,7 @@ class PhoneNumberInputComponent {
           [readonly]="readonly"
           [placeholder]="placeholder"
           [error]="error"
-          [mergedPosition]="'right'"
+          [externalFocused]="isFocused"
           [(ngModel)]="displayValue"
           (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
       </div>
@@ -13448,7 +13816,8 @@ class PhoneNumberInputComponent {
       <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
-          class="px-1 text-xs text-muted-foreground transition-opacity duration-200">
+          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">
@@ -13456,7 +13825,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", "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", "externalFocused"], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
@@ -13466,16 +13835,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         {{ label }}
       </label>
 
-      <div [class]="computedMergedClass">
+      <div class="flex gap-2" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
         <tolle-country-selector
           class="flex-shrink-0"
           [showName]="false"
           [size]="size"
           [disabled]="disabled || !enableCountrySelector"
           [readonly]="readonly"
-          [mergedPosition]="'left'"
+          [externalFocused]="isFocused"
           [(ngModel)]="selectedIso"
-          (ngModelChange)="onCountryChange($event)"></tolle-country-selector>
+          (ngModelChange)="onCountryChange($event)"
+          (onFocusChange)="onFocusIn()"
+          (onBlurChange)="onFocusOut()"></tolle-country-selector>
 
         <tolle-masked-input
           class="min-w-0 flex-1"
@@ -13486,7 +13857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [readonly]="readonly"
           [placeholder]="placeholder"
           [error]="error"
-          [mergedPosition]="'right'"
+          [externalFocused]="isFocused"
           [(ngModel)]="displayValue"
           (ngModelChange)="onMaskInputChange($event)"></tolle-masked-input>
       </div>
@@ -13494,7 +13865,8 @@ 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="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">
@@ -13629,5 +14001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InputComponent, LabelComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PopoverComponent, PopoverContentComponent, ProgressComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, ScrollAreaComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, SidebarComponent, SkeletonComponent, SliderComponent, SwitchComponent, TOLLE_CONFIG, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InputComponent, LabelComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PopoverComponent, PopoverContentComponent, ProgressComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, ScrollAreaComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, SidebarComponent, SkeletonComponent, SliderComponent, SwitchComponent, TOLLE_CONFIG, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle-ui.mjs.map