ngx-com 0.0.4 → 0.0.6

package/fesm2022/ngx-com-components-calendar.mjs

@@ -8,6 +8,7 @@ import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { ComIcon } from 'ngx-com/components/icon';
 
 /**
  * Calendar shared types and interfaces
@@ -390,7 +391,7 @@ const calendarCellVariants = cva(
         {
             state: 'disabled',
             outside: true,
-            class: ['text-disabled-foreground', 'opacity-50'],
+            class: ['text-disabled-foreground'],
         },
         {
             state: 'selected',
@@ -3226,16 +3227,16 @@ const datepickerIconVariants = cva([
 /**
  * CVA variants for the clear button.
  *
- * @tokens `--color-ring`, `--color-muted-foreground`, `--radius-interactive-sm`
+ * @tokens `--color-ring`, `--color-muted-foreground`, `--color-foreground`, `--radius-interactive-sm`
  */
 const datepickerClearVariants = cva([
     'inline-flex',
     'items-center',
     'justify-center',
     'rounded-interactive-sm',
-    'opacity-50',
-    'transition-opacity',
-    'hover:opacity-100',
+    'text-muted-foreground',
+    'transition-colors',
+    'hover:text-foreground',
     'focus:outline-none',
     'focus:ring-1',
     'focus:ring-ring',
@@ -3494,6 +3495,15 @@ class ComDatepicker {
     panelId = computed(() => `${this.datepickerId}-panel`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
     /** Whether the datepicker has a value. */
     hasValue = computed(() => this.internalValue() !== null, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Icon size based on datepicker size. */
+    iconSize = computed(() => {
+        const sizeMap = {
+            sm: 'sm',
+            default: 'md',
+            lg: 'lg',
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     /** Formatted display value. */
     displayValue = computed(() => {
         const value = this.internalValue();
@@ -3865,18 +3875,7 @@ class ComDatepicker {
           [attr.aria-label]="'Clear date'"
           (click)="clear($event)"
         >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-full w-full"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
+          <com-icon name="x" [size]="iconSize()" />
         </button>
       }
 
@@ -3888,20 +3887,7 @@ class ComDatepicker {
         [disabled]="disabled()"
         tabindex="-1"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-full w-full"
-        >
-          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-          <line x1="16" y1="2" x2="16" y2="6" />
-          <line x1="8" y1="2" x2="8" y2="6" />
-          <line x1="3" y1="10" x2="21" y2="10" />
-        </svg>
+        <com-icon name="calendar" [size]="iconSize()" />
       </button>
     </div>
 
@@ -3959,7 +3945,7 @@ class ComDatepicker {
     <div class="sr-only" aria-live="polite" aria-atomic="true">
       {{ liveAnnouncement() }}
     </div>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, decorators: [{
             type: Component,
@@ -4002,18 +3988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           [attr.aria-label]="'Clear date'"
           (click)="clear($event)"
         >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-full w-full"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
+          <com-icon name="x" [size]="iconSize()" />
         </button>
       }
 
@@ -4025,20 +4000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [disabled]="disabled()"
         tabindex="-1"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-full w-full"
-        >
-          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-          <line x1="16" y1="2" x2="16" y2="6" />
-          <line x1="8" y1="2" x2="8" y2="6" />
-          <line x1="3" y1="10" x2="21" y2="10" />
-        </svg>
+        <com-icon name="calendar" [size]="iconSize()" />
       </button>
     </div>
 
@@ -4100,6 +4062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         OverlayModule,
                         A11yModule,
                         ComCalendar,
+                        ComIcon,
                     ], providers: [
                         SingleSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
@@ -4246,6 +4209,15 @@ class ComDateRangePicker {
         const value = this.internalValue();
         return value !== null && (value.start !== null || value.end !== null);
     }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Icon size based on datepicker size. */
+    iconSize = computed(() => {
+        const sizeMap = {
+            sm: 'sm',
+            default: 'md',
+            lg: 'lg',
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     /** Calendar selection (converts DateRangeValue to DateRange for calendar). */
     calendarSelection = computed(() => {
         const value = this.internalValue();
@@ -4708,18 +4680,7 @@ class ComDateRangePicker {
 
       <!-- Range separator -->
       <span [class]="separatorClasses()">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-4 w-4"
-        >
-          <line x1="5" y1="12" x2="19" y2="12" />
-          <polyline points="12 5 19 12 12 19" />
-        </svg>
+        <com-icon name="arrow-right" [size]="iconSize()" />
       </span>
 
       <!-- End date input -->
@@ -4748,18 +4709,7 @@ class ComDateRangePicker {
           [attr.aria-label]="'Clear date range'"
           (click)="clear($event)"
         >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-full w-full"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
+          <com-icon name="x" [size]="iconSize()" />
         </button>
       }
 
@@ -4771,20 +4721,7 @@ class ComDateRangePicker {
         [disabled]="disabled()"
         tabindex="-1"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-full w-full"
-        >
-          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-          <line x1="16" y1="2" x2="16" y2="6" />
-          <line x1="8" y1="2" x2="8" y2="6" />
-          <line x1="3" y1="10" x2="21" y2="10" />
-        </svg>
+        <com-icon name="calendar" [size]="iconSize()" />
       </button>
     </div>
 
@@ -4843,7 +4780,7 @@ class ComDateRangePicker {
     <div class="sr-only" aria-live="polite" aria-atomic="true">
       {{ liveAnnouncement() }}
     </div>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, decorators: [{
             type: Component,
@@ -4880,18 +4817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
       <!-- Range separator -->
       <span [class]="separatorClasses()">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-4 w-4"
-        >
-          <line x1="5" y1="12" x2="19" y2="12" />
-          <polyline points="12 5 19 12 12 19" />
-        </svg>
+        <com-icon name="arrow-right" [size]="iconSize()" />
       </span>
 
       <!-- End date input -->
@@ -4920,18 +4846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           [attr.aria-label]="'Clear date range'"
           (click)="clear($event)"
         >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="h-full w-full"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
+          <com-icon name="x" [size]="iconSize()" />
         </button>
       }
 
@@ -4943,20 +4858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [disabled]="disabled()"
         tabindex="-1"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-full w-full"
-        >
-          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-          <line x1="16" y1="2" x2="16" y2="6" />
-          <line x1="8" y1="2" x2="8" y2="6" />
-          <line x1="3" y1="10" x2="21" y2="10" />
-        </svg>
+        <com-icon name="calendar" [size]="iconSize()" />
       </button>
     </div>
 
@@ -5019,6 +4921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         OverlayModule,
                         A11yModule,
                         ComCalendar,
+                        ComIcon,
                     ], providers: [
                         RangeSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },