@tolle_/tolle-ui 18.2.23 → 18.2.24

package/fesm2022/tolle-ui.mjs

@@ -3555,14 +3555,14 @@ class DatePickerComponent {
     formatYearFn;
     // Format functions for display
     displayFormat;
-    triggerContainer;
+    trigger;
     popover;
     value = null;
     inputValue = '';
     isOpen = false;
     cleanupAutoUpdate;
     _outsideClickHandler = (event) => {
-        if (!this.triggerContainer.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+        if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
             this.close();
         }
     };
@@ -3645,8 +3645,11 @@ class DatePickerComponent {
         this.isOpen ? this.close() : this.open();
     }
     open() {
+        if (this.disabled)
+            return;
         this.isOpen = true;
-        setTimeout(() => {
+        this.trigger.nativeElement.focus();
+        requestAnimationFrame(() => {
             this.updatePosition();
             document.addEventListener('mousedown', this._outsideClickHandler);
         });
@@ -3665,12 +3668,12 @@ class DatePickerComponent {
         this.cdr.markForCheck();
     }
     updatePosition() {
-        if (!this.triggerContainer || !this.popover)
+        if (!this.trigger || !this.popover)
             return;
-        this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
-            computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
-                strategy: 'fixed', // ADDED: Fixed strategy
-                placement: 'bottom-start', // Changed to bottom-start to align with input left edge
+        this.cleanupAutoUpdate = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
+                strategy: 'fixed',
+                placement: 'bottom-start',
                 middleware: [
                     offset(4),
                     flip(),
@@ -3719,7 +3722,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "triggerContainer", first: true, predicate: ["triggerContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
     <div class="relative w-full" #triggerContainer>
       <tolle-masked-input
         #maskInput
@@ -3729,20 +3732,26 @@ class DatePickerComponent {
         [(ngModel)]="inputValue"
         (ngModelChange)="onInputChange($event)"
         [class]="cn(class)">
-        <div suffix class="flex items-center gap-1.5 cursor-pointer">
-          <i
+        <div suffix class="flex items-center gap-1.5">
+          <button
             *ngIf="value && !disabled && showClear"
+            type="button"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
-          ></i>
+            tabindex="-1"
+          ></button>
 
-          <i
+          <button
+            type="button"
+            #trigger
             (click)="togglePopover($event)"
+            [disabled]="disabled"
             [class]="cn(
               'cursor-pointer text-muted-foreground transition-colors',
               'ri-calendar-line'
             )"
-          ></i>
+            tabindex="-1"
+          ></button>
         </div>
       </tolle-masked-input>
 
@@ -3790,20 +3799,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [(ngModel)]="inputValue"
         (ngModelChange)="onInputChange($event)"
         [class]="cn(class)">
-        <div suffix class="flex items-center gap-1.5 cursor-pointer">
-          <i
+        <div suffix class="flex items-center gap-1.5">
+          <button
             *ngIf="value && !disabled && showClear"
+            type="button"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
-          ></i>
+            tabindex="-1"
+          ></button>
 
-          <i
+          <button
+            type="button"
+            #trigger
             (click)="togglePopover($event)"
+            [disabled]="disabled"
             [class]="cn(
               'cursor-pointer text-muted-foreground transition-colors',
               'ri-calendar-line'
             )"
-          ></i>
+            tabindex="-1"
+          ></button>
         </div>
       </tolle-masked-input>
 
@@ -3852,9 +3867,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], displayFormat: [{
                 type: Input
-            }], triggerContainer: [{
+            }], trigger: [{
                 type: ViewChild,
-                args: ['triggerContainer']
+                args: ['trigger']
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
@@ -5500,13 +5515,13 @@ class DateRangePickerComponent {
     class = '';
     disablePastDates = false;
     size = 'default';
-    triggerContainer;
+    trigger;
     popover;
     value = { start: null, end: null };
     isOpen = false;
     cleanupAutoUpdate;
     _outsideClickHandler = (event) => {
-        if (!this.triggerContainer.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+        if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
             this.close();
         }
     };
@@ -5538,7 +5553,11 @@ class DateRangePickerComponent {
     }
     open() {
         this.isOpen = true;
-        setTimeout(() => {
+        if (this.trigger?.nativeElement) {
+            this.trigger.nativeElement.focus();
+        }
+        const schedule = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+        schedule(() => {
             this.updatePosition();
             document.addEventListener('mousedown', this._outsideClickHandler);
         });
@@ -5559,10 +5578,10 @@ class DateRangePickerComponent {
     }
     // --- Floating UI Positioning with Fixed Strategy ---
     updatePosition() {
-        if (!this.triggerContainer || !this.popover)
+        if (!this.trigger || !this.popover)
             return;
-        this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
-            computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
+        this.cleanupAutoUpdate = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
                 placement: 'bottom-end',
                 strategy: 'fixed', // Use fixed to escape column layout
                 middleware: [
@@ -5635,22 +5654,25 @@ class DateRangePickerComponent {
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "triggerContainer", first: true, predicate: ["triggerContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
-    <div class="relative w-full" #triggerContainer>
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+    <div class="relative w-full">
       <tolle-input
         [placeholder]="placeholder"
         [disabled]="disabled"
         [ngModel]="displayValue"
         [class]="class"
       >
-        <div suffix class="flex items-center gap-1.5 cursor-pointer">
-          <i
+        <div suffix class="flex items-center gap-1.5">
+          <button
+            type="button"
+            tabindex="-1"
             *ngIf="(value.start || value.end) && !disabled"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
-          ></i>
+          ></button>
 
           <i
+            #trigger
             (click)="togglePopover($event)"
             class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
           ></i>
@@ -5686,21 +5708,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div class="relative w-full" #triggerContainer>
+    <div class="relative w-full">
       <tolle-input
         [placeholder]="placeholder"
         [disabled]="disabled"
         [ngModel]="displayValue"
         [class]="class"
       >
-        <div suffix class="flex items-center gap-1.5 cursor-pointer">
-          <i
+        <div suffix class="flex items-center gap-1.5">
+          <button
+            type="button"
+            tabindex="-1"
             *ngIf="(value.start || value.end) && !disabled"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
-          ></i>
+          ></button>
 
           <i
+            #trigger
             (click)="togglePopover($event)"
             class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
           ></i>
@@ -5732,9 +5757,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], triggerContainer: [{
+            }], trigger: [{
                 type: ViewChild,
-                args: ['triggerContainer']
+                args: ['trigger']
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']