@unipin/angular-applet 18.9.7 → 21.0.1

package/fesm2022/unipin-angular-applet-calendar.mjs

@@ -0,0 +1,492 @@
+import * as i0 from '@angular/core';
+import { Pipe, input, output, model, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { matArrowForwardIosRound, matArrowBackIosRound } from '@ng-icons/material-icons/round';
+import { startOfDay, endOfDay, getDay, getYear, getMonth, startOfMonth, startOfWeek, endOfWeek, endOfMonth, eachDayOfInterval, format, subMonths, addMonths } from 'date-fns';
+import { UpButtonDirective } from '@unipin/angular-applet/buttons';
+
+class UpDateIsInRangePipe {
+    transform(date, from, to) {
+        if (!date || !from || !to) {
+            return false;
+        }
+        return date >= startOfDay(from) && date <= endOfDay(to);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsInRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsInRangePipe, isStandalone: true, name: "upDateIsInRange" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsInRangePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    pure: true,
+                    standalone: true,
+                    name: 'upDateIsInRange',
+                }]
+        }] });
+
+class UpDateIsWeekEdgePipe {
+    transform(date) {
+        if (!date) {
+            return null;
+        }
+        const day = getDay(date);
+        if (day === 1)
+            return 'left';
+        if (day === 0)
+            return 'right';
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsWeekEdgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsWeekEdgePipe, isStandalone: true, name: "upDateIsWeekEdge" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsWeekEdgePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    pure: true,
+                    standalone: true,
+                    name: 'upDateIsWeekEdge',
+                }]
+        }] });
+
+class UpDateIsSelectablePipe {
+    transform(date, minDate, maxDate) {
+        if (!date)
+            return false;
+        if (minDate && date < startOfDay(minDate))
+            return false;
+        if (maxDate && date > endOfDay(maxDate))
+            return false;
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsSelectablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsSelectablePipe, isStandalone: true, name: "upDateIsSelectable" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateIsSelectablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    pure: true,
+                    standalone: true,
+                    name: 'upDateIsSelectable',
+                }]
+        }] });
+
+class UpCalendarComponent {
+    constructor() {
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.variant = input('single', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.selected = output();
+        this.rangeSelected = output();
+        this.today = new Date();
+        this.activeDay = model(this.today, ...(ngDevMode ? [{ debugName: "activeDay" }] : []));
+        this.activeRangeDay = model({ from: null, to: null }, ...(ngDevMode ? [{ debugName: "activeRangeDay" }] : []));
+        this.rangeTo = signal(null, ...(ngDevMode ? [{ debugName: "rangeTo" }] : []));
+        this.rangeFrom = signal(null, ...(ngDevMode ? [{ debugName: "rangeFrom" }] : []));
+        this.selectedYear = signal(getYear(this.today), ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
+        this.selectedMonth = signal(getMonth(this.today), ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
+        this.firstDayOfActiveMonth = computed(() => {
+            return startOfMonth(new Date(this.selectedYear(), this.selectedMonth(), 1));
+        }, ...(ngDevMode ? [{ debugName: "firstDayOfActiveMonth" }] : []));
+        this.daysOfMonth = computed(() => {
+            const start = startOfWeek(this.firstDayOfActiveMonth(), { weekStartsOn: 1 });
+            const end = endOfWeek(endOfMonth(this.firstDayOfActiveMonth()), { weekStartsOn: 1 });
+            return eachDayOfInterval({ start, end });
+        }, ...(ngDevMode ? [{ debugName: "daysOfMonth" }] : []));
+        this.weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        this.months = Array.from({ length: 12 }, (_, i) => format(new Date(2000, i), 'MMM'));
+        this.years = Array.from({
+            length: (new Date().getFullYear() + 2) - 1970 + 1
+        }, (_, i) => 1970 + i);
+        effect(() => {
+            if (this.variant() !== 'range') {
+                return;
+            }
+            const range = this.activeRangeDay();
+            if (!range.from && !range.to) {
+                this.rangeTo.set(null);
+                this.rangeFrom.set(null);
+                return;
+            }
+            if (range.from && range.to) {
+                this.rangeTo.set(range.to);
+                this.rangeFrom.set(range.from);
+                return;
+            }
+            const singleDate = range.from || range.to;
+            this.rangeTo.set(singleDate);
+            this.rangeFrom.set(singleDate);
+        });
+    }
+    changeMonth(event) {
+        this.selectedMonth.set(+event.target.value);
+    }
+    changeYear(event) {
+        this.selectedYear.set(+event.target.value);
+    }
+    previousMonth() {
+        const prev = subMonths(this.firstDayOfActiveMonth(), 1);
+        this.selectedYear.set(getYear(prev));
+        this.selectedMonth.set(getMonth(prev));
+    }
+    nextMonth() {
+        const next = addMonths(this.firstDayOfActiveMonth(), 1);
+        this.selectedYear.set(getYear(next));
+        this.selectedMonth.set(getMonth(next));
+    }
+    selectDate(day) {
+        if (this.variant() === 'single') {
+            const active = this.activeDay();
+            const value = active && active.toDateString() === day.toDateString() ? null : day;
+            this.activeDay.set(value);
+            this.selected.emit(value);
+            return;
+        }
+        this.handleRangeSelection(day);
+    }
+    handleRangeSelection(day) {
+        const from = this.rangeFrom();
+        const to = this.rangeTo();
+        const time = day.getTime();
+        if (!from && !to) {
+            return this.setRange(day, day);
+        }
+        if (from?.getTime() === to?.getTime() &&
+            from?.getTime() === time) {
+            return this.setRange(null, null);
+        }
+        if (from && to) {
+            const fromTime = from.getTime();
+            const toTime = to.getTime();
+            if (time === fromTime)
+                return this.setRange(from, day);
+            if (time === toTime)
+                return this.setRange(day, to);
+            if (time < fromTime)
+                return this.setRange(day, to);
+            return this.setRange(from, day);
+        }
+    }
+    setRange(from, to) {
+        this.rangeTo.set(to);
+        this.rangeFrom.set(from);
+        this.rangeSelected.emit({ from, to });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UpCalendarComponent, isStandalone: true, selector: "up-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, activeDay: { classPropertyName: "activeDay", publicName: "activeDay", isSignal: true, isRequired: false, transformFunction: null }, activeRangeDay: { classPropertyName: "activeRangeDay", publicName: "activeRangeDay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", rangeSelected: "rangeSelected", activeDay: "activeDayChange", activeRangeDay: "activeRangeDayChange" }, providers: [
+            provideIcons({
+                matArrowBackIosRound,
+                matArrowForwardIosRound
+            })
+        ], ngImport: i0, template: `
+    <div class="w-fit rounded-xl border border-border bg-card p-3 shadow-lg [--cell-size:2rem]">
+      <div class="flex items-center justify-between mb-4 gap-1">
+        <button
+          upButton
+          type="icon"
+          variant="ghost"
+          (click)="previousMonth()"
+          class="h-[--cell-size] w-[--cell-size]"
+        >
+          <ng-icon name="matArrowBackIosRound" size="14" />
+        </button>
+
+        <div class="flex items-center justify-center h-[--cell-size] gap-1.5">
+          <div
+            class="
+              relative border border-input rounded-md shadow-xs 
+              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]
+            "
+          >
+            <select
+              class="
+                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground 
+                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0
+              "
+              (change)="changeMonth($event)"
+            >
+              @for (month of months; track $index) {
+                <option 
+                  [value]="$index" 
+                  [selected]="$index === selectedMonth()"
+                >
+                  {{ month }}
+                </option>
+              }
+            </select>
+            
+            <div class="absolute inset-0 flex items-center px-2">
+              <span class="text-sm font-medium flex-1 truncate">
+                {{ months[selectedMonth()] }}
+              </span>
+              
+              <ng-icon
+                size="10"
+                name="matArrowForwardIosRound"
+                class="text-muted-foreground rotate-90 absolute right-2 pointer-events-none"
+              />
+            </div>
+          </div>
+
+          <div
+            class="
+              relative border border-input rounded-md shadow-xs 
+              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]
+            "
+          >
+            <select
+              class="
+                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground 
+                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0
+              "
+              (change)="changeYear($event)"
+            >
+              @for (year of years; track $index) {
+                <option 
+                  [value]="year" 
+                  [selected]="year === selectedYear()"
+                >
+                  {{ year }}
+                </option>
+              }
+            </select>
+            
+            <div class="absolute inset-0 flex items-center px-2">
+              <span class="text-sm font-medium flex-1 truncate">
+                {{ selectedYear() }}
+              </span>
+              
+              <ng-icon
+                size="10"
+                name="matArrowForwardIosRound"
+                class="text-muted-foreground rotate-90 absolute right-2 pointer-events-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        <button
+          upButton
+          type="icon"
+          variant="ghost"
+          (click)="nextMonth()"
+          class="h-[--cell-size] w-[--cell-size]"
+        >
+          <ng-icon name="matArrowForwardIosRound" size="14" />
+        </button>
+      </div>
+
+      <div class="grid grid-cols-7 text-center text-[0.8rem] font-normal text-muted-foreground">
+        @for (day of weekDays; track $index) {
+          <div class="select-none py-1">
+            {{ day }}
+          </div>
+        }
+      </div>
+
+      <div class="grid grid-cols-7 text-sm mt-2">
+        @for (day of daysOfMonth(); track $index) {
+          <div 
+            class="relative aspect-square select-none mt-2 outline-none"
+            [ngClass]="{
+              'bg-primary/20': variant() === 'range' && (day | upDateIsInRange:rangeFrom():rangeTo()),
+              'rounded-l-md': day.toDateString() === rangeFrom()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) &&  (day | upDateIsWeekEdge) === 'left'),
+              'rounded-r-md': day.toDateString() === rangeTo()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) && (day | upDateIsWeekEdge) === 'right')
+            }"
+          >
+            <button
+              class="flex aspect-square w-full min-w-[--cell-size] items-center justify-center rounded-md font-normal leading-none transition-colors duration-150 not-disabled:cursor-pointer outline-none"
+              [disabled]="!(day | upDateIsSelectable:minDate():maxDate())"
+              [ngClass]="{
+                'bg-accent text-accent-foreground': day.toDateString() === today.toDateString(),
+                'opacity-40 pointer-events-none': !(day | upDateIsSelectable:minDate():maxDate()),
+                'text-foreground hover:bg-accent hover:text-accent-foreground': day.getMonth() === firstDayOfActiveMonth().getMonth(),
+                'text-muted-foreground/40 hover:text-muted-foreground/60 hover:bg-accent/30': day.getMonth() !== firstDayOfActiveMonth().getMonth(),
+                
+                'bg-primary text-primary-foreground':
+                  (variant() === 'single' && activeDay()?.toDateString() === day.toDateString()) ||
+                  (variant() === 'range' && (
+                    day.toDateString() === rangeFrom()?.toDateString() ||
+                    day.toDateString() === rangeTo()?.toDateString()
+                  )),
+              }"
+              (click)="selectDate(day)"
+            >
+              {{ day.getDate() }}
+            </button>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "pipe", type: UpDateIsInRangePipe, name: "upDateIsInRange" }, { kind: "pipe", type: UpDateIsWeekEdgePipe, name: "upDateIsWeekEdge" }, { kind: "pipe", type: UpDateIsSelectablePipe, name: "upDateIsSelectable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-calendar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        provideIcons({
+                            matArrowBackIosRound,
+                            matArrowForwardIosRound
+                        })
+                    ],
+                    imports: [
+                        NgClass,
+                        NgIcon,
+                        UpButtonDirective,
+                        UpDateIsInRangePipe,
+                        UpDateIsWeekEdgePipe,
+                        UpDateIsSelectablePipe,
+                    ],
+                    template: `
+    <div class="w-fit rounded-xl border border-border bg-card p-3 shadow-lg [--cell-size:2rem]">
+      <div class="flex items-center justify-between mb-4 gap-1">
+        <button
+          upButton
+          type="icon"
+          variant="ghost"
+          (click)="previousMonth()"
+          class="h-[--cell-size] w-[--cell-size]"
+        >
+          <ng-icon name="matArrowBackIosRound" size="14" />
+        </button>
+
+        <div class="flex items-center justify-center h-[--cell-size] gap-1.5">
+          <div
+            class="
+              relative border border-input rounded-md shadow-xs 
+              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]
+            "
+          >
+            <select
+              class="
+                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground 
+                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0
+              "
+              (change)="changeMonth($event)"
+            >
+              @for (month of months; track $index) {
+                <option 
+                  [value]="$index" 
+                  [selected]="$index === selectedMonth()"
+                >
+                  {{ month }}
+                </option>
+              }
+            </select>
+            
+            <div class="absolute inset-0 flex items-center px-2">
+              <span class="text-sm font-medium flex-1 truncate">
+                {{ months[selectedMonth()] }}
+              </span>
+              
+              <ng-icon
+                size="10"
+                name="matArrowForwardIosRound"
+                class="text-muted-foreground rotate-90 absolute right-2 pointer-events-none"
+              />
+            </div>
+          </div>
+
+          <div
+            class="
+              relative border border-input rounded-md shadow-xs 
+              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]
+            "
+          >
+            <select
+              class="
+                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground 
+                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0
+              "
+              (change)="changeYear($event)"
+            >
+              @for (year of years; track $index) {
+                <option 
+                  [value]="year" 
+                  [selected]="year === selectedYear()"
+                >
+                  {{ year }}
+                </option>
+              }
+            </select>
+            
+            <div class="absolute inset-0 flex items-center px-2">
+              <span class="text-sm font-medium flex-1 truncate">
+                {{ selectedYear() }}
+              </span>
+              
+              <ng-icon
+                size="10"
+                name="matArrowForwardIosRound"
+                class="text-muted-foreground rotate-90 absolute right-2 pointer-events-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        <button
+          upButton
+          type="icon"
+          variant="ghost"
+          (click)="nextMonth()"
+          class="h-[--cell-size] w-[--cell-size]"
+        >
+          <ng-icon name="matArrowForwardIosRound" size="14" />
+        </button>
+      </div>
+
+      <div class="grid grid-cols-7 text-center text-[0.8rem] font-normal text-muted-foreground">
+        @for (day of weekDays; track $index) {
+          <div class="select-none py-1">
+            {{ day }}
+          </div>
+        }
+      </div>
+
+      <div class="grid grid-cols-7 text-sm mt-2">
+        @for (day of daysOfMonth(); track $index) {
+          <div 
+            class="relative aspect-square select-none mt-2 outline-none"
+            [ngClass]="{
+              'bg-primary/20': variant() === 'range' && (day | upDateIsInRange:rangeFrom():rangeTo()),
+              'rounded-l-md': day.toDateString() === rangeFrom()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) &&  (day | upDateIsWeekEdge) === 'left'),
+              'rounded-r-md': day.toDateString() === rangeTo()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) && (day | upDateIsWeekEdge) === 'right')
+            }"
+          >
+            <button
+              class="flex aspect-square w-full min-w-[--cell-size] items-center justify-center rounded-md font-normal leading-none transition-colors duration-150 not-disabled:cursor-pointer outline-none"
+              [disabled]="!(day | upDateIsSelectable:minDate():maxDate())"
+              [ngClass]="{
+                'bg-accent text-accent-foreground': day.toDateString() === today.toDateString(),
+                'opacity-40 pointer-events-none': !(day | upDateIsSelectable:minDate():maxDate()),
+                'text-foreground hover:bg-accent hover:text-accent-foreground': day.getMonth() === firstDayOfActiveMonth().getMonth(),
+                'text-muted-foreground/40 hover:text-muted-foreground/60 hover:bg-accent/30': day.getMonth() !== firstDayOfActiveMonth().getMonth(),
+                
+                'bg-primary text-primary-foreground':
+                  (variant() === 'single' && activeDay()?.toDateString() === day.toDateString()) ||
+                  (variant() === 'range' && (
+                    day.toDateString() === rangeFrom()?.toDateString() ||
+                    day.toDateString() === rangeTo()?.toDateString()
+                  )),
+              }"
+              (click)="selectDate(day)"
+            >
+              {{ day.getDate() }}
+            </button>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }], activeDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDay", required: false }] }, { type: i0.Output, args: ["activeDayChange"] }], activeRangeDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRangeDay", required: false }] }, { type: i0.Output, args: ["activeRangeDayChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpCalendarComponent };
+//# sourceMappingURL=unipin-angular-applet-calendar.mjs.map

package/fesm2022/unipin-angular-applet-calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-calendar.mjs","sources":["../../../projects/unipin-angular/calendar/pipes/date-is-in-range.pipe.ts","../../../projects/unipin-angular/calendar/pipes/date-is-week-edge.pipe.ts","../../../projects/unipin-angular/calendar/pipes/date-is-selectable.pipe.ts","../../../projects/unipin-angular/calendar/components/calendar.component.ts","../../../projects/unipin-angular/calendar/unipin-angular-applet-calendar.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { startOfDay, endOfDay } from 'date-fns';\n\n@Pipe({\n  pure: true,\n  standalone: true,\n  name: 'upDateIsInRange',\n})\nexport class UpDateIsInRangePipe implements PipeTransform {\n  \n  public transform(date: Date, from?: Date | null, to?: Date | null): boolean{\n    if (!date || !from || !to) {\n      return false;\n    }\n    return date >= startOfDay(from) && date <= endOfDay(to);\n  }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { getDay } from 'date-fns';\n\n@Pipe({\n  pure: true,\n  standalone: true,\n  name: 'upDateIsWeekEdge',\n})\nexport class UpDateIsWeekEdgePipe implements PipeTransform {\n\n  public transform(date: Date | null): 'left' | 'right' | null{\n    if (!date) {\n      return null;\n    }\n    const day = getDay(date);\n\n    if (day === 1) return 'left';\n    if (day === 0) return 'right';\n    return null;\n  }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { startOfDay, endOfDay } from 'date-fns';\n\n@Pipe({\n  pure: true,\n  standalone: true,\n  name: 'upDateIsSelectable',\n})\nexport class UpDateIsSelectablePipe implements PipeTransform {\n  \n  public transform(date: Date, minDate?: Date | null, maxDate?: Date | null): boolean{\n    if (!date) return false;\n    \n    if (minDate && date < startOfDay(minDate)) return false;\n    if (maxDate && date > endOfDay(maxDate)) return false;\n    return true;\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, signal } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matArrowBackIosRound, matArrowForwardIosRound } from '@ng-icons/material-icons/round';\nimport { addMonths, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, startOfMonth, startOfWeek, subMonths } from 'date-fns';\nimport { UpButtonDirective } from '@unipin/angular-applet/buttons';\nimport { SingleDate, RangeDate } from '../types/calendar-date.type';\nimport { UpDateIsInRangePipe } from '../pipes/date-is-in-range.pipe';\nimport { UpDateIsWeekEdgePipe } from '../pipes/date-is-week-edge.pipe';\nimport { UpDateIsSelectablePipe } from '../pipes/date-is-selectable.pipe';\n\n\n@Component({\n  standalone: true,\n  selector: 'up-calendar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    provideIcons(\n      { \n        matArrowBackIosRound, \n        matArrowForwardIosRound \n      }\n    )\n  ],\n  imports: [\n    NgClass,\n    NgIcon,\n    UpButtonDirective,\n    UpDateIsInRangePipe,\n    UpDateIsWeekEdgePipe,\n    UpDateIsSelectablePipe,\n  ],\n  template: `\n    <div class=\"w-fit rounded-xl border border-border bg-card p-3 shadow-lg [--cell-size:2rem]\">\n      <div class=\"flex items-center justify-between mb-4 gap-1\">\n        <button\n          upButton\n          type=\"icon\"\n          variant=\"ghost\"\n          (click)=\"previousMonth()\"\n          class=\"h-[--cell-size] w-[--cell-size]\"\n        >\n          <ng-icon name=\"matArrowBackIosRound\" size=\"14\" />\n        </button>\n\n        <div class=\"flex items-center justify-center h-[--cell-size] gap-1.5\">\n          <div\n            class=\"\n              relative border border-input rounded-md shadow-xs \n              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]\n            \"\n          >\n            <select\n              class=\"\n                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground \n                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0\n              \"\n              (change)=\"changeMonth($event)\"\n            >\n              @for (month of months; track $index) {\n                <option \n                  [value]=\"$index\" \n                  [selected]=\"$index === selectedMonth()\"\n                >\n                  {{ month }}\n                </option>\n              }\n            </select>\n            \n            <div class=\"absolute inset-0 flex items-center px-2\">\n              <span class=\"text-sm font-medium flex-1 truncate\">\n                {{ months[selectedMonth()] }}\n              </span>\n              \n              <ng-icon\n                size=\"10\"\n                name=\"matArrowForwardIosRound\"\n                class=\"text-muted-foreground rotate-90 absolute right-2 pointer-events-none\"\n              />\n            </div>\n          </div>\n\n          <div\n            class=\"\n              relative border border-input rounded-md shadow-xs \n              has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]\n            \"\n          >\n            <select\n              class=\"\n                h-8 bg-background px-2 pr-6 text-sm font-medium text-foreground \n                appearance-none cursor-pointer focus:outline-none relative z-10 opacity-0\n              \"\n              (change)=\"changeYear($event)\"\n            >\n              @for (year of years; track $index) {\n                <option \n                  [value]=\"year\" \n                  [selected]=\"year === selectedYear()\"\n                >\n                  {{ year }}\n                </option>\n              }\n            </select>\n            \n            <div class=\"absolute inset-0 flex items-center px-2\">\n              <span class=\"text-sm font-medium flex-1 truncate\">\n                {{ selectedYear() }}\n              </span>\n              \n              <ng-icon\n                size=\"10\"\n                name=\"matArrowForwardIosRound\"\n                class=\"text-muted-foreground rotate-90 absolute right-2 pointer-events-none\"\n              />\n            </div>\n          </div>\n        </div>\n\n        <button\n          upButton\n          type=\"icon\"\n          variant=\"ghost\"\n          (click)=\"nextMonth()\"\n          class=\"h-[--cell-size] w-[--cell-size]\"\n        >\n          <ng-icon name=\"matArrowForwardIosRound\" size=\"14\" />\n        </button>\n      </div>\n\n      <div class=\"grid grid-cols-7 text-center text-[0.8rem] font-normal text-muted-foreground\">\n        @for (day of weekDays; track $index) {\n          <div class=\"select-none py-1\">\n            {{ day }}\n          </div>\n        }\n      </div>\n\n      <div class=\"grid grid-cols-7 text-sm mt-2\">\n        @for (day of daysOfMonth(); track $index) {\n          <div \n            class=\"relative aspect-square select-none mt-2 outline-none\"\n            [ngClass]=\"{\n              'bg-primary/20': variant() === 'range' && (day | upDateIsInRange:rangeFrom():rangeTo()),\n              'rounded-l-md': day.toDateString() === rangeFrom()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) &&  (day | upDateIsWeekEdge) === 'left'),\n              'rounded-r-md': day.toDateString() === rangeTo()?.toDateString() || ((day | upDateIsInRange:rangeFrom():rangeTo()) && (day | upDateIsWeekEdge) === 'right')\n            }\"\n          >\n            <button\n              class=\"flex aspect-square w-full min-w-[--cell-size] items-center justify-center rounded-md font-normal leading-none transition-colors duration-150 not-disabled:cursor-pointer outline-none\"\n              [disabled]=\"!(day | upDateIsSelectable:minDate():maxDate())\"\n              [ngClass]=\"{\n                'bg-accent text-accent-foreground': day.toDateString() === today.toDateString(),\n                'opacity-40 pointer-events-none': !(day | upDateIsSelectable:minDate():maxDate()),\n                'text-foreground hover:bg-accent hover:text-accent-foreground': day.getMonth() === firstDayOfActiveMonth().getMonth(),\n                'text-muted-foreground/40 hover:text-muted-foreground/60 hover:bg-accent/30': day.getMonth() !== firstDayOfActiveMonth().getMonth(),\n                \n                'bg-primary text-primary-foreground':\n                  (variant() === 'single' && activeDay()?.toDateString() === day.toDateString()) ||\n                  (variant() === 'range' && (\n                    day.toDateString() === rangeFrom()?.toDateString() ||\n                    day.toDateString() === rangeTo()?.toDateString()\n                  )),\n              }\"\n              (click)=\"selectDate(day)\"\n            >\n              {{ day.getDate() }}\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class UpCalendarComponent {\n  \n  public readonly minDate = input<SingleDate>(null);\n  public readonly maxDate = input<SingleDate>(null);\n  public readonly variant = input<'single' | 'range'>('single');\n  \n  public readonly selected = output<SingleDate>();\n  public readonly rangeSelected = output<RangeDate>();\n\n  public readonly today = new Date();\n  public readonly activeDay = model<SingleDate>(this.today);\n  public readonly activeRangeDay = model<RangeDate>({from: null, to: null});\n\n  public readonly rangeTo = signal<SingleDate>(null);\n  public readonly rangeFrom = signal<SingleDate>(null);\n\n  public readonly selectedYear = signal(getYear(this.today));\n  public readonly selectedMonth = signal(getMonth(this.today));\n\n  public readonly firstDayOfActiveMonth = computed(\n    () => {\n      return startOfMonth(new Date(this.selectedYear(), this.selectedMonth(), 1));\n    }\n  );\n  \n  public readonly daysOfMonth = computed(\n    () => {\n      const start = startOfWeek(this.firstDayOfActiveMonth(), { weekStartsOn: 1 });\n      const end = endOfWeek(endOfMonth(this.firstDayOfActiveMonth()), { weekStartsOn: 1 });\n      \n      return eachDayOfInterval({ start, end });\n    }\n  );\n\n  public readonly weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n  public readonly months = Array.from(\n    { length: 12 }, \n    (_, i) => format(new Date(2000, i), 'MMM')\n  );\n  public readonly years = Array.from(\n    { \n      length: (new Date().getFullYear() + 2) - 1970 + 1\n    },\n    (_, i) => 1970 + i\n  );\n\n  constructor() {\n    effect(\n      () => {\n        if (this.variant() !== 'range') {\n          return;\n        }\n        const range = this.activeRangeDay();\n\n        if (!range.from && !range.to) {\n          this.rangeTo.set(null);\n          this.rangeFrom.set(null);\n          \n          return;\n        }\n        \n        if (range.from && range.to) {\n          this.rangeTo.set(range.to);\n          this.rangeFrom.set(range.from);\n          \n          return;\n        }\n        const singleDate = range.from || range.to;\n        \n        this.rangeTo.set(singleDate);\n        this.rangeFrom.set(singleDate);\n      }\n    );\n  }\n\n  public changeMonth(event: Event): void{\n    this.selectedMonth.set(\n      +(event.target as HTMLSelectElement).value\n    );\n  }\n  \n  public changeYear(event: Event): void{\n    this.selectedYear.set(\n      +(event.target as HTMLSelectElement).value\n    );\n  }\n\n  public previousMonth(): void{\n    const prev = subMonths(this.firstDayOfActiveMonth(), 1);\n    \n    this.selectedYear.set(getYear(prev));\n    this.selectedMonth.set(getMonth(prev));\n  }\n  \n  public nextMonth(): void{\n    const next = addMonths(this.firstDayOfActiveMonth(), 1);\n    \n    this.selectedYear.set(getYear(next));\n    this.selectedMonth.set(getMonth(next));\n  }\n\n  public selectDate(day: Date): void{\n    if (this.variant() === 'single') {\n      const active = this.activeDay();\n      const value = active && active.toDateString() === day.toDateString() ? null : day;\n      \n      this.activeDay.set(value);\n      this.selected.emit(value);\n      \n      return;\n    }\n    this.handleRangeSelection(day);\n  }\n\n  protected handleRangeSelection(day: Date): void{\n    const from = this.rangeFrom();\n    const to = this.rangeTo();\n    \n    const time = day.getTime();\n    if (!from && !to) {\n      return this.setRange(day, day);\n    }\n  \n    if (\n      from?.getTime() === to?.getTime() && \n      from?.getTime() === time\n    ) {\n      return this.setRange(null, null);\n    }\n  \n    if (from && to) {\n      const fromTime = from.getTime();\n      const toTime = to.getTime();\n      \n      if (time === fromTime) return this.setRange(from, day);\n      if (time === toTime) return this.setRange(day, to);\n      if (time < fromTime) return this.setRange(day, to);\n      \n      return this.setRange(from, day);\n    }\n  }\n  \n  protected setRange(from: SingleDate, to: SingleDate): void{\n    this.rangeTo.set(to);\n    this.rangeFrom.set(from);\n    \n    this.rangeSelected.emit({ from, to });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/unipin-angular-applet-collapsible.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { model, input, Directive, computed } from '@angular/core';
+import { up } from '@unipin/angular-applet/common';
+
+class UpCollapsibleDirective {
+    constructor() {
+        this.isOpened = model(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+    }
+    setOpen(value) {
+        if (!this.disabled()) {
+            this.isOpened.set(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpCollapsibleDirective, isStandalone: true, selector: "[upCollapsible]", inputs: { isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, host: { properties: { "class": "inlineClass()", "attr.data-state": "isOpened()? 'open' : 'closed'" } }, exportAs: ["upCollapsible"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upCollapsible',
+                    selector: '[upCollapsible]',
+                    host: {
+                        '[class]': 'inlineClass()',
+                        '[attr.data-state]': `isOpened()? 'open' : 'closed'`,
+                    }
+                }]
+        }], propDecorators: { isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpCollapsibleTriggerDirective {
+    constructor(parent) {
+        this.parent = parent;
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._computedClass = computed(() => {
+            return up('cursor-pointer', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    toggleState() {
+        this.parent.setOpen(!this.parent.isOpened());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleTriggerDirective, deps: [{ token: UpCollapsibleDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpCollapsibleTriggerDirective, isStandalone: true, selector: "[upCollapsibleTrigger]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleState()" }, properties: { "class": "_computedClass()", "attr.disabled": "parent.disabled() || null", "attr.data-state": "parent.isOpened()? 'open' : 'closed'" } }, exportAs: ["upCollapsibleTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upCollapsibleTrigger',
+                    selector: '[upCollapsibleTrigger]',
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.disabled]': 'parent.disabled() || null',
+                        '[attr.data-state]': `parent.isOpened()? 'open' : 'closed'`,
+                        '(click)': 'toggleState()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: UpCollapsibleDirective }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpCollapsibleContentDirective {
+    constructor(elementRef, parent) {
+        this.elementRef = elementRef;
+        this.parent = parent;
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._contentHeight = computed(() => {
+            const element = this.elementRef.nativeElement;
+            return element ? `${element.scrollHeight}px` : '0px';
+        }, ...(ngDevMode ? [{ debugName: "_contentHeight" }] : []));
+        this._computedClass = computed(() => {
+            return up('overflow-hidden transition-all duration-300 ease-in-out', 'h-0 data-[state="open"]:h-[var(--up-collapsible-content-height)]', 'invisible data-[state="open"]:visible', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleContentDirective, deps: [{ token: i0.ElementRef }, { token: UpCollapsibleDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpCollapsibleContentDirective, isStandalone: true, selector: "[upCollapsibleContent]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-disabled": "parent.disabled() || null", "attr.data-state": "parent.isOpened()? 'open' : 'closed'", "style.--up-collapsible-content-height": "_contentHeight()" } }, exportAs: ["upCollapsibleContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCollapsibleContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upCollapsibleContent',
+                    selector: '[upCollapsibleContent]',
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.data-disabled]': 'parent.disabled() || null',
+                        '[attr.data-state]': `parent.isOpened()? 'open' : 'closed'`,
+                        '[style.--up-collapsible-content-height]': '_contentHeight()',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UpCollapsibleDirective }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpCollapsibleContentDirective, UpCollapsibleDirective, UpCollapsibleTriggerDirective };
+//# sourceMappingURL=unipin-angular-applet-collapsible.mjs.map