cerxos-ui 0.0.17 → 0.0.18

package/fesm2022/cerxos-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild, HostBinding, signal, Injectable, inject, Pipe } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, inject, ContentChild, HostBinding, signal, Injectable, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -2380,6 +2380,251 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+const DAY_MS = 86_400_000;
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+const ISO_DAYS = [1, 2, 3, 4, 5, 6, 7];
+const STATE_TEXT = {
+    done: 'done',
+    empty: 'not done',
+    off: 'not scheduled',
+    'out-of-range': 'unavailable',
+    padding: ''
+};
+const CELL_BASE_CLASSES = 'block h-[var(--cxs-habit-grid-cell-size,0.875rem)] w-[var(--cxs-habit-grid-cell-size,0.875rem)] shrink-0 rounded-[3px] ' +
+    'outline-none focus-visible:ring-2 focus-visible:ring-[var(--cxs-color-focus)] focus-visible:ring-offset-1';
+const CELL_STATE_CLASSES = {
+    done: 'bg-[var(--cxs-habit-grid-accent,var(--cxs-color-primary))]',
+    empty: 'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface-hover)]',
+    off: 'border border-dashed border-[var(--cxs-color-border)] bg-transparent opacity-50',
+    'out-of-range': 'bg-[var(--cxs-color-surface-hover)] opacity-30',
+    padding: 'invisible'
+};
+const INTERACTIVE_CLASSES = 'cursor-pointer hover:opacity-80';
+function parseIsoDate(value) {
+    if (!ISO_DATE.test(value)) {
+        return null;
+    }
+    const [year, month, day] = value.split('-').map(Number);
+    const time = Date.UTC(year, month - 1, day);
+    return formatIsoDate(time) === value ? time : null;
+}
+function formatIsoDate(time) {
+    return new Date(time).toISOString().slice(0, 10);
+}
+function isoDayOf(time) {
+    return (((new Date(time).getUTCDay() + 6) % 7) + 1);
+}
+/**
+ * GitHub-style grid of days for habit tracking. Columns are Monday–Sunday weeks; rows are days of the week.
+ * Presentational only: it renders the dates it is given and emits `dayToggle`; the parent owns the data.
+ */
+class CxsHabitGridComponent {
+    elementRef = inject(ElementRef);
+    /** First date shown, as `yyyy-MM-dd`. */
+    from = '';
+    /** Last date shown, as `yyyy-MM-dd`. */
+    to = '';
+    /** The user's local today; later dates are out of range. */
+    today = '';
+    /** The habit's start date; earlier dates are out of range. */
+    startDate = null;
+    /** Dates marked done, as `yyyy-MM-dd`. */
+    doneDates = [];
+    /** Scheduled ISO days of week; `null` means every day is scheduled. */
+    scheduledDays = null;
+    /** Weekly target; when set, each week shows `done/target`. */
+    weeklyTarget = null;
+    /** Optional colour for done cells; defaults to `--cxs-color-primary`. */
+    accentColor = null;
+    /** Whether done and empty cells can be toggled. */
+    interactive = false;
+    /** Accessible name of the grid. */
+    ariaLabel = 'Habit history';
+    /** Locale for accessible date labels. */
+    locale = 'en-GB';
+    /** Emitted when the user toggles a `done` or `empty` cell in interactive mode. */
+    dayToggle = new EventEmitter();
+    dayRows = ISO_DAYS;
+    weeks = [];
+    focusedDate = null;
+    rangeStart = null;
+    rangeEnd = null;
+    get hasWeeklyProgress() {
+        return this.weeklyTarget != null && this.weeklyTarget > 0;
+    }
+    ngOnChanges() {
+        this.weeks = this.buildWeeks();
+        if (!this.focusedDate || !this.isWithinRange(this.focusedDate)) {
+            this.focusedDate = this.initialFocusDate();
+        }
+    }
+    weekdayLabel(isoDay) {
+        // 2024-01-01 is a Monday.
+        return new Intl.DateTimeFormat(this.locale, { weekday: 'short', timeZone: 'UTC' }).format(new Date(Date.UTC(2024, 0, isoDay)));
+    }
+    dayAt(week, isoDay) {
+        return week.days[isoDay - 1];
+    }
+    cellClass(day) {
+        const classes = [CELL_BASE_CLASSES, CELL_STATE_CLASSES[day.state]];
+        if (this.isToggleable(day)) {
+            classes.push(INTERACTIVE_CLASSES);
+        }
+        return classes.join(' ');
+    }
+    tabIndexFor(day) {
+        if (day.state === 'padding') {
+            return null;
+        }
+        return day.date === this.focusedDate ? 0 : -1;
+    }
+    isToggleable(day) {
+        return this.interactive && (day.state === 'done' || day.state === 'empty');
+    }
+    onCellClick(day) {
+        if (day.state === 'padding') {
+            return;
+        }
+        this.focusedDate = day.date;
+        this.toggle(day);
+    }
+    onCellKeydown(event, day) {
+        const moves = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 };
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle(day);
+            return;
+        }
+        const delta = moves[event.key];
+        if (delta === undefined) {
+            return;
+        }
+        event.preventDefault();
+        const current = parseIsoDate(day.date);
+        if (current === null || this.rangeStart === null || this.rangeEnd === null) {
+            return;
+        }
+        const target = Math.min(Math.max(current + delta * DAY_MS, this.rangeStart), this.rangeEnd);
+        this.focusedDate = formatIsoDate(target);
+        queueMicrotask(() => this.focusCell(this.focusedDate));
+    }
+    toggle(day) {
+        if (!this.isToggleable(day)) {
+            return;
+        }
+        this.dayToggle.emit({ date: day.date, done: day.state === 'empty' });
+    }
+    focusCell(date) {
+        if (!date) {
+            return;
+        }
+        this.elementRef.nativeElement.querySelector(`[data-date="${date}"]`)?.focus();
+    }
+    isWithinRange(date) {
+        const time = parseIsoDate(date);
+        return time !== null && this.rangeStart !== null && this.rangeEnd !== null
+            && time >= this.rangeStart && time <= this.rangeEnd;
+    }
+    initialFocusDate() {
+        if (this.rangeStart === null || this.rangeEnd === null) {
+            return null;
+        }
+        const today = parseIsoDate(this.today);
+        const target = today === null ? this.rangeEnd : Math.min(Math.max(today, this.rangeStart), this.rangeEnd);
+        return formatIsoDate(target);
+    }
+    buildWeeks() {
+        this.rangeStart = parseIsoDate(this.from);
+        this.rangeEnd = parseIsoDate(this.to);
+        if (this.rangeStart === null || this.rangeEnd === null || this.rangeStart > this.rangeEnd) {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            return [];
+        }
+        const done = new Set(this.doneDates);
+        const scheduled = this.scheduledDays ? new Set(this.scheduledDays) : null;
+        const today = parseIsoDate(this.today);
+        const start = this.startDate ? parseIsoDate(this.startDate) : null;
+        const labelFormat = new Intl.DateTimeFormat(this.locale, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+            timeZone: 'UTC'
+        });
+        const weekFormat = new Intl.DateTimeFormat(this.locale, { day: 'numeric', month: 'short', timeZone: 'UTC' });
+        const firstMonday = this.rangeStart - (isoDayOf(this.rangeStart) - 1) * DAY_MS;
+        const weeks = [];
+        for (let weekStart = firstMonday; weekStart <= this.rangeEnd; weekStart += 7 * DAY_MS) {
+            const days = ISO_DAYS.map((isoDay) => {
+                const time = weekStart + (isoDay - 1) * DAY_MS;
+                const date = formatIsoDate(time);
+                const state = this.stateOf(time, date, isoDay, done, scheduled, start, today);
+                const label = state === 'padding' ? '' : `${labelFormat.format(time)}, ${STATE_TEXT[state]}`;
+                return { date, isoDay, state, label };
+            });
+            const doneCount = days.filter((d) => d.state === 'done').length;
+            const target = this.hasWeeklyProgress ? this.weeklyTarget : null;
+            weeks.push({
+                start: formatIsoDate(weekStart),
+                days,
+                doneCount,
+                progressLabel: target === null ? null : `${doneCount}/${target}`,
+                progressAriaLabel: target === null ? null : `Week of ${weekFormat.format(weekStart)}: ${doneCount} of ${target}`
+            });
+        }
+        return weeks;
+    }
+    stateOf(time, date, isoDay, done, scheduled, start, today) {
+        if (time < this.rangeStart || time > this.rangeEnd) {
+            return 'padding';
+        }
+        if ((start !== null && time < start) || (today !== null && time > today)) {
+            return 'out-of-range';
+        }
+        if (scheduled && !scheduled.has(isoDay)) {
+            return 'off';
+        }
+        return done.has(date) ? 'done' : 'empty';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHabitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsHabitGridComponent, isStandalone: true, selector: "cxs-habit-grid", inputs: { from: "from", to: "to", today: "today", startDate: "startDate", doneDates: "doneDates", scheduledDays: "scheduledDays", weeklyTarget: "weeklyTarget", accentColor: "accentColor", interactive: "interactive", ariaLabel: "ariaLabel", locale: "locale" }, outputs: { dayToggle: "dayToggle" }, host: { properties: { "style.--cxs-habit-grid-accent": "accentColor || null" }, classAttribute: "block" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"inline-flex max-w-full flex-col gap-1 overflow-x-auto\">\n  <div\n    role=\"grid\"\n    class=\"flex flex-col gap-[var(--cxs-habit-grid-gap,3px)]\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-readonly]=\"interactive ? null : 'true'\"\n  >\n    @for (isoDay of dayRows; track isoDay) {\n      <div role=\"row\" class=\"flex items-center gap-[var(--cxs-habit-grid-gap,3px)]\">\n        <span\n          role=\"rowheader\"\n          class=\"w-8 shrink-0 text-[10px] leading-none text-[var(--cxs-color-on-surface-muted)]\"\n        >\n          {{ weekdayLabel(isoDay) }}\n        </span>\n        @for (week of weeks; track week.start) {\n          @let day = dayAt(week, isoDay);\n          @if (day.state === 'padding') {\n            <span role=\"gridcell\" aria-hidden=\"true\" [class]=\"cellClass(day)\"></span>\n          } @else {\n            <span\n              role=\"gridcell\"\n              [class]=\"cellClass(day)\"\n              [attr.data-date]=\"day.date\"\n              [attr.data-state]=\"day.state\"\n              [attr.aria-label]=\"day.label\"\n              [attr.aria-selected]=\"day.state === 'done'\"\n              [attr.aria-disabled]=\"interactive && !isToggleable(day) ? 'true' : null\"\n              [attr.tabindex]=\"tabIndexFor(day)\"\n              (click)=\"onCellClick(day)\"\n              (keydown)=\"onCellKeydown($event, day)\"\n            ></span>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasWeeklyProgress) {\n    <div class=\"flex items-center gap-[var(--cxs-habit-grid-gap,3px)]\" data-testid=\"cxs-habit-grid-progress\">\n      <span class=\"w-8 shrink-0\" aria-hidden=\"true\"></span>\n      @for (week of weeks; track week.start) {\n        <span\n          class=\"w-[var(--cxs-habit-grid-cell-size,0.875rem)] shrink-0 overflow-visible whitespace-nowrap text-center text-[9px] leading-none text-[var(--cxs-color-on-surface-muted)]\"\n          [class.font-semibold]=\"week.doneCount >= (weeklyTarget ?? 0)\"\n          [attr.aria-label]=\"week.progressAriaLabel\"\n          [attr.title]=\"week.progressAriaLabel\"\n        >\n          {{ week.progressLabel }}\n        </span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHabitGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-habit-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block',
+                        '[style.--cxs-habit-grid-accent]': 'accentColor || null'
+                    }, template: "<div class=\"inline-flex max-w-full flex-col gap-1 overflow-x-auto\">\n  <div\n    role=\"grid\"\n    class=\"flex flex-col gap-[var(--cxs-habit-grid-gap,3px)]\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-readonly]=\"interactive ? null : 'true'\"\n  >\n    @for (isoDay of dayRows; track isoDay) {\n      <div role=\"row\" class=\"flex items-center gap-[var(--cxs-habit-grid-gap,3px)]\">\n        <span\n          role=\"rowheader\"\n          class=\"w-8 shrink-0 text-[10px] leading-none text-[var(--cxs-color-on-surface-muted)]\"\n        >\n          {{ weekdayLabel(isoDay) }}\n        </span>\n        @for (week of weeks; track week.start) {\n          @let day = dayAt(week, isoDay);\n          @if (day.state === 'padding') {\n            <span role=\"gridcell\" aria-hidden=\"true\" [class]=\"cellClass(day)\"></span>\n          } @else {\n            <span\n              role=\"gridcell\"\n              [class]=\"cellClass(day)\"\n              [attr.data-date]=\"day.date\"\n              [attr.data-state]=\"day.state\"\n              [attr.aria-label]=\"day.label\"\n              [attr.aria-selected]=\"day.state === 'done'\"\n              [attr.aria-disabled]=\"interactive && !isToggleable(day) ? 'true' : null\"\n              [attr.tabindex]=\"tabIndexFor(day)\"\n              (click)=\"onCellClick(day)\"\n              (keydown)=\"onCellKeydown($event, day)\"\n            ></span>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasWeeklyProgress) {\n    <div class=\"flex items-center gap-[var(--cxs-habit-grid-gap,3px)]\" data-testid=\"cxs-habit-grid-progress\">\n      <span class=\"w-8 shrink-0\" aria-hidden=\"true\"></span>\n      @for (week of weeks; track week.start) {\n        <span\n          class=\"w-[var(--cxs-habit-grid-cell-size,0.875rem)] shrink-0 overflow-visible whitespace-nowrap text-center text-[9px] leading-none text-[var(--cxs-color-on-surface-muted)]\"\n          [class.font-semibold]=\"week.doneCount >= (weeklyTarget ?? 0)\"\n          [attr.aria-label]=\"week.progressAriaLabel\"\n          [attr.title]=\"week.progressAriaLabel\"\n        >\n          {{ week.progressLabel }}\n        </span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { from: [{
+                type: Input,
+                args: [{ required: true }]
+            }], to: [{
+                type: Input,
+                args: [{ required: true }]
+            }], today: [{
+                type: Input,
+                args: [{ required: true }]
+            }], startDate: [{
+                type: Input
+            }], doneDates: [{
+                type: Input
+            }], scheduledDays: [{
+                type: Input
+            }], weeklyTarget: [{
+                type: Input
+            }], accentColor: [{
+                type: Input
+            }], interactive: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], dayToggle: [{
+                type: Output
+            }] } });
+
 const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
@@ -4620,5 +4865,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map