@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/calendar/src/models/public-api.ts

@@ -0,0 +1,2 @@
+export * from './calendar-user-event.model';
+export * from './date-range.model';

package/calendar/src/public-api.ts

@@ -0,0 +1,5 @@
+export * from './models/public-api';
+export * from './services/public-api';
+export * from './types/public-api';
+export * from './calendar.component';
+export * from './upd-calendar.module';

package/calendar/src/services/calendar-range-strategy.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CalendarRangeStrategyService } from './calendar-range-strategy.service';
+
+describe('CalendarRangeStrategyService', () => {
+  let service: CalendarRangeStrategyService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CalendarRangeStrategyService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/calendar/src/services/calendar-range-strategy.service.ts

@@ -0,0 +1,103 @@
+import { Injectable, inject } from '@angular/core';
+import { DateService } from '@updevs/sdk/core';
+import { OptionalType } from '@updevs/sdk/types';
+
+import { DateRangeModel } from '../models/date-range.model';
+
+/**
+ * Provides the default date range selection behavior.
+ */
+@Injectable()
+export class CalendarRangeStrategyService {
+    private readonly dateService = inject(DateService);
+
+    /**
+     * Called when the user has finished selecting a value.
+     * @param date Date that was selected. Will be null if the user cleared the selection.
+     * @param currentRange Range that is currently show in the calendar.
+     */
+    selectionFinished(date: OptionalType<Date>, currentRange: DateRangeModel): DateRangeModel {
+        let { start, end } = currentRange;
+
+        if (start === undefined) {
+            start = date;
+        } else if (end === undefined && date && this.dateService.compare(date, start) >= 0) {
+            end = date;
+        } else {
+            start = date;
+            end = undefined;
+        }
+
+        return new DateRangeModel(start, end);
+    }
+
+    /**
+     * Called when the user has activated a new date (e.g. by hovering over
+     * it or moving focus) and the calendar tries to display a date range.
+     *
+     * @param activeDate Date that the user has activated. Will be null if the user moved
+     *    focus to an element that's no a calendar cell.
+     * @param currentRange Range that is currently shown in the calendar.
+     */
+    createPreview(activeDate: OptionalType<Date>, currentRange: DateRangeModel): DateRangeModel {
+        let start: OptionalType<Date>;
+        let end: OptionalType<Date>;
+
+        if (!!currentRange.start && !currentRange.end && !!activeDate) {
+            start = currentRange.start;
+            end = activeDate;
+        }
+
+        return new DateRangeModel(start, end);
+    }
+
+    /**
+     * Called when the user has dragged a date in the currently selected range to another
+     * date. Returns the date updated range that should result from this interaction.
+     *
+     * @param dragOrigin The date the user started dragging from.
+     * @param originalRange The originally selected date range.
+     * @param newDate The currently targeted date in the drag operation.
+     */
+    createDrag(dragOrigin: Date, originalRange: DateRangeModel, newDate: Date): OptionalType<DateRangeModel> {
+        let start = originalRange.start;
+        let end = originalRange.end;
+
+        if (!start || !end) {
+            // Can't drag from an incomplete range.
+            return undefined;
+        }
+
+        const isRange = this.dateService.compare(start, end) !== 0;
+        const diffYears = newDate.getFullYear() - dragOrigin.getFullYear();
+        const diffMonths = newDate.getMonth() - dragOrigin.getMonth();
+        const diffDays = newDate.getDate() - dragOrigin.getDate();
+
+        if (isRange && this.dateService.areEqual(dragOrigin, originalRange.start)) {
+            start = newDate;
+
+            if (this.dateService.compare(newDate, end) > 0) {
+                end = this.dateService.addYears(end, diffYears);
+                end = this.dateService.addMonths(end, diffMonths);
+                end = this.dateService.addDays(end, diffDays);
+            }
+        } else if (isRange && this.dateService.areEqual(dragOrigin, originalRange.end)) {
+            end = newDate;
+
+            if (this.dateService.compare(newDate, start) < 0) {
+                start = this.dateService.addYears(start, diffYears);
+                start = this.dateService.addMonths(start, diffMonths);
+                start = this.dateService.addDays(start, diffDays);
+            }
+        } else {
+            start = this.dateService.addYears(start, diffYears);
+            start = this.dateService.addMonths(start, diffMonths);
+            start = this.dateService.addDays(start, diffDays);
+            end = this.dateService.addYears(end, diffYears);
+            end = this.dateService.addMonths(end, diffMonths);
+            end = this.dateService.addDays(end, diffDays);
+        }
+
+        return new DateRangeModel(start, end);
+    }
+}

package/calendar/src/services/calendar-signals.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CalendarSignalsService } from './calendar-signals.service';
+
+describe('CalendarService', () => {
+    let service: CalendarSignalsService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(CalendarSignalsService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

package/calendar/src/services/calendar-signals.service.ts

@@ -0,0 +1,45 @@
+import { Injectable, signal, Signal } from '@angular/core';
+import { OptionalType } from '@updevs/sdk/types';
+
+import { CalendarViewType } from '../types/calendar-view.type';
+import { DateRangeModel } from '../models/date-range.model';
+
+@Injectable()
+export class CalendarSignalsService {
+    get minDate(): Signal<OptionalType<Date>> {
+        return this.minDateSignal.asReadonly();
+    }
+    set minDate(value: OptionalType<Date>) {
+        this.minDateSignal.set(value);
+    }
+    get maxDate(): Signal<OptionalType<Date>> {
+        return this.maxDateSignal.asReadonly();
+    }
+    set maxDate(value: OptionalType<Date>) {
+        this.maxDateSignal.set(value);
+    }
+    get activeDate(): Signal<Date> {
+        return this.activeDateSignal.asReadonly();
+    }
+    set activeDate(value: Date) {
+        this.activeDateSignal.set(value);
+    }
+    get selectedDate(): Signal<DateRangeModel | OptionalType<Date>> {
+        return this.selectedDateSignal.asReadonly();
+    }
+    set selectedDate(value: OptionalType<DateRangeModel | OptionalType<Date>>) {
+        this.selectedDateSignal.set(value);
+    }
+    get currentView(): Signal<CalendarViewType> {
+        return this.currentViewSignal.asReadonly();
+    }
+    set currentView(value: CalendarViewType) {
+        this.currentViewSignal.set(value);
+    }
+
+    private readonly minDateSignal = signal<OptionalType<Date>>(undefined);
+    private readonly maxDateSignal = signal<OptionalType<Date>>(undefined);
+    private readonly activeDateSignal = signal<Date>(new Date());
+    private readonly selectedDateSignal = signal<DateRangeModel | OptionalType<Date>>(undefined);
+    private readonly currentViewSignal = signal<CalendarViewType>('month');
+}

package/calendar/src/services/calendar.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CalendarService } from './calendar.service';
+
+describe('CalendarService', () => {
+  let service: CalendarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CalendarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/calendar/src/services/calendar.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { OptionalType } from '@updevs/sdk/types';
+
+import { yearsPerPage } from '../components/calendar-multi-year-view/calendar-multi-year-view.component';
+
+@Injectable()
+export class CalendarService {
+    /**
+     * When the multi-year view is first opened, the active year will be in view.
+     * So we compute how many years are between the active year and the *slot* where our
+     * "startingYear" will render when paged into view.
+     */
+    getMultiYearActiveOffset(activeDate: Date, minDate: OptionalType<Date>, maxDate: OptionalType<Date>): number {
+        const activeYear = activeDate.getFullYear();
+        return this.euclideanModulo(activeYear - this.getStartingYear(minDate, maxDate), yearsPerPage);
+    }
+
+    isSameMultiYearView(date1: Date, date2: Date, minDate: OptionalType<Date>, maxDate: OptionalType<Date>): boolean {
+        const year1 = date1.getFullYear();
+        const year2 = date2.getFullYear();
+        const startingYear = this.getStartingYear(minDate, maxDate);
+
+        return Math.floor((year1 - startingYear) / yearsPerPage) === Math.floor((year2 - startingYear) / yearsPerPage);
+    }
+
+    getStartingYear(minDate: OptionalType<Date>, maxDate: OptionalType<Date>): number {
+        let startingYear = 0;
+
+        if (maxDate) {
+            const maxYear = maxDate.getFullYear();
+            startingYear = maxYear - yearsPerPage + 1;
+        } else if (minDate) {
+            startingYear = minDate.getFullYear();
+        }
+
+        return startingYear;
+    }
+
+    private euclideanModulo(a: number, b: number): number {
+        return ((a % b) + b) % b;
+    }
+}

package/calendar/src/services/public-api.ts

@@ -0,0 +1 @@
+export * from './calendar-range-strategy.service';

package/calendar/src/tools/events-options.ts

@@ -0,0 +1,16 @@
+import { PassiveListeners } from './passive-listeners';
+
+/**
+ * Event options that can be used to bind an active, capturing event.
+ */
+export const activeCapturingEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: false, capture: true });
+
+/**
+ * Event options that can be used to bind a passive, capturing event.
+ */
+export const passiveCapturingEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: true, capture: true });
+
+/**
+ * Event options that can be used to bind a passive, non-capturing event.
+ */
+export const passiveEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: true });

package/calendar/src/tools/keyboard-tools.ts

@@ -0,0 +1,16 @@
+import { ModifierKeyType } from '../types/modifier-key.type';
+
+export class KeyboardTools {
+    /**
+     * Checks whether a modifier key is pressed.
+     * @param event Event to be checked.
+     * @param modifiers
+     */
+    static hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKeyType[]): boolean {
+        if (modifiers.length) {
+            return modifiers.some(modifier => event[modifier]);
+        }
+
+        return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+    }
+}

package/calendar/src/tools/passive-listeners.ts

@@ -0,0 +1,36 @@
+export class PassiveListeners {
+    /** Cached result of whether the user's browser supports passive event listeners. */
+    private static supportsPassiveEvents?: boolean;
+
+    /**
+     * Checks whether the user's browser supports passive event listeners.
+     * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+     */
+    static supportsPassiveEventListeners(): boolean {
+        if (this.supportsPassiveEvents === undefined && typeof window !== 'undefined') {
+            try {
+                window.addEventListener(
+                    'test',
+                    undefined!,
+                    Object.defineProperty({}, 'passive', {
+                        get: () => (this.supportsPassiveEvents = true)
+                    })
+                );
+            } finally {
+                this.supportsPassiveEvents = this.supportsPassiveEvents || false;
+            }
+        }
+
+        return this.supportsPassiveEvents!;
+    }
+
+    /**
+     * Normalizes an `AddEventListener` object to something that can be passed
+     * to `addEventListener` on any browser, no matter whether it supports the
+     * `options` parameter.
+     * @param options Object to be normalized.
+     */
+    static normalizePassiveListenerOptions(options: AddEventListenerOptions): AddEventListenerOptions | boolean {
+        return this.supportsPassiveEventListeners() ? options : !!options.capture;
+    }
+}

package/calendar/src/types/calendar-cell-class-function.type.ts

@@ -0,0 +1,4 @@
+import { CalendarCellCssClassesType } from './calendar-cell-css-classes.type';
+import { CalendarViewType } from './calendar-view.type';
+
+export type CalendarCellClassFunctionType = (date: Date, view: CalendarViewType) => CalendarCellCssClassesType;

package/calendar/src/types/calendar-cell-css-classes.type.ts

@@ -0,0 +1 @@
+export type CalendarCellCssClassesType = string | string[] | Set<string> | { [key: string]: any };

package/calendar/src/types/calendar-view.type.ts

@@ -0,0 +1 @@
+export type CalendarViewType = 'month' | 'year' | 'multi-year';

package/calendar/src/types/modifier-key.type.ts

@@ -0,0 +1 @@
+export type ModifierKeyType = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';

package/calendar/src/types/public-api.ts

@@ -0,0 +1 @@
+export * from './calendar-view.type';

package/calendar/src/upd-calendar.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdIconsModule } from '@updevs/icons';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
+
+import * as en from './assets/i18n/en.json';
+import * as pt from './assets/i18n/pt.json';
+import { CalendarHeaderComponent } from './components/calendar-header/calendar-header.component';
+import { CalendarService } from './services/calendar.service';
+import { CalendarSignalsService } from './services/calendar-signals.service';
+import { CalendarMultiYearViewComponent } from './components/calendar-multi-year-view/calendar-multi-year-view.component';
+import { CalendarYearViewComponent } from './components/calendar-year-view/calendar-year-view.component';
+import { CalendarMonthViewComponent } from './components/calendar-month-view/calendar-month-view.component';
+import { CalendarBodyComponent } from './components/calendar-body/calendar-body.component';
+import { CalendarRangeStrategyService } from './services/calendar-range-strategy.service';
+import { CalendarComponent } from './calendar.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdButtonModule,
+        TranslocoDirective,
+        UpdIconsModule
+    ],
+    declarations: [
+        CalendarHeaderComponent,
+        CalendarMultiYearViewComponent,
+        CalendarYearViewComponent,
+        CalendarMonthViewComponent,
+        CalendarBodyComponent,
+        CalendarComponent
+    ],
+    exports: [
+        CalendarComponent
+    ],
+    providers: [
+        CalendarService,
+        CalendarSignalsService,
+        CalendarRangeStrategyService
+    ]
+})
+export class UpdCalendarModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/card/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/card/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/card/src/card.component.html

@@ -0,0 +1,105 @@
+<ng-template *ngIf="!hoverEffect; else linkTpl" [ngTemplateOutlet]="structureTpl"></ng-template>
+
+<!-- Template for cards that are links -->
+<ng-template #linkTpl>
+    <a href="#" class="card" [ngClass]="classes">
+        <ng-template [ngTemplateOutlet]="structureTpl"></ng-template>
+    </a>
+</ng-template>
+
+<ng-template #structureTpl>
+    <!-- Ribbon -->
+    <div *ngIf="!!ribbonBackground" class="ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}">
+        <span *ngIf="!!ribbonText; else ribbonIconTpl">{{ribbonText}}</span>
+        <ng-template #ribbonIconTpl>
+            <upd-icon [model]="ribbonIcon" wrapperClasses="icon" [removeDefaultClasses]="true"></upd-icon>
+        </ng-template>
+    </div>
+
+    <!-- Status -->
+    <div *ngIf="!!statusBackground" class="card-status-{{statusPosition}} bg-{{statusBackground}}"></div>
+
+    <!-- Stamp -->
+    <div *ngIf="!!stampIcon" class="card-stamp">
+        <div class="card-stamp-icon bg-{{stampBackground}}">
+            <upd-icon [model]="stampIcon" wrapperClasses="icon" [removeDefaultClasses]="true"></upd-icon>
+        </div>
+    </div>
+
+    <!-- Header section -->
+    <div *ngIf="showHeader && (!!title || !!headerTemplate?.templateRef)" class="card-header" [class.card-header-light]="useLightHeader">
+        <ng-container *ngIf="!headerTemplate?.templateRef; else customHeaderTpl">
+            <h3 class="card-title">{{title}} <span *ngIf="!!subtitle" class="card-subtitle">{{subtitle}}</span></h3>
+        </ng-container>
+        <ng-template #customHeaderTpl [ngTemplateOutlet]="headerTemplate?.templateRef || null"></ng-template>
+
+        <!-- Actions -->
+        <div *ngIf="!!actionsTemplate || actions.length > 0" class="card-actions">
+            <ng-container *ngIf="actions.length > 0; else customActionsTpl">
+                <upd-button *ngFor="let btn of actions" [model]="btn" customClasses="me-1"></upd-button>
+            </ng-container>
+            <ng-template #customActionsTpl [ngTemplateOutlet]="actionsTemplate?.templateRef || null"></ng-template>
+        </div>
+    </div>
+
+    <!-- Body -->
+    <ng-container *ngIf="!!imageTemplate; else bodyTpl">
+        <ng-template *ngIf="imagePosition === 'left' || imagePosition === 'right'; else bodyWithTopBottomImageTpl"
+            [ngTemplateOutlet]="bodyWithSideImageTpl"></ng-template>
+    </ng-container>
+
+    <!-- Footer -->
+    <div *ngIf="!!footerText || !!footerTemplate" class="card-footer" [class.card-footer-transparent]="isFooterTransparent">
+        <ng-container *ngIf="!footerTemplate?.templateRef; else customFooterTpl">
+            <span *ngIf="!!footerText">{{footerText}}</span>
+        </ng-container>
+        <ng-template #customFooterTpl [ngTemplateOutlet]="footerTemplate?.templateRef || null"></ng-template>
+    </div>
+
+    <!-- Progress bar -->
+    <div *ngIf="showProgressBar" class="progress progress-sm card-progress">
+        <div class="progress-bar" [style.width.%]="progress" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0"
+            aria-valuemax="100">
+        </div>
+    </div>
+</ng-template>
+
+<!-- Body with an image on either side -->
+<ng-template #bodyWithSideImageTpl>
+    <div class="row row-0">
+        <div class="col-3" [class.order-md-last]="imagePosition === 'right'">
+            <div class="card-image-{{imagePosition}}">
+                <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
+            </div>
+        </div>
+        <div class="col">
+            <ng-template [ngTemplateOutlet]="bodyTpl"></ng-template>
+        </div>
+    </div>
+</ng-template>
+
+<!-- Body with an image on top or bottom -->
+<ng-template #bodyWithTopBottomImageTpl>
+    <div *ngIf="imagePosition === 'top'" class="img-responsive-21x9 card-img-top">
+        <div class="card-image-{{imagePosition}}">
+            <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
+        </div>
+    </div>
+    <ng-template [ngTemplateOutlet]="bodyTpl"></ng-template>
+    <div *ngIf="imagePosition === 'bottom'" class="img-responsive-21x9 card-img-bottom">
+        <div class="card-image-{{imagePosition}}">
+            <ng-template [ngTemplateOutlet]="imageTemplate!.templateRef"></ng-template>
+        </div>
+    </div>
+</ng-template>
+
+<!-- Body -->
+<ng-template #bodyTpl>
+    <div class="card-body">
+        <!-- If title was set, but the header section is hidden, we add the title to the body -->
+        <ng-container *ngIf="!showHeader && !!title">
+            <h3 class="card-title">{{title}} <span *ngIf="!!subtitle" class="card-subtitle">{{subtitle}}</span></h3>
+        </ng-container>
+        <ng-content></ng-content>
+    </div>
+</ng-template>

package/card/src/card.component.scss

@@ -0,0 +1,47 @@
+.card-image-right {
+    @extend .w-100 !optional;
+    @extend .h-100 !optional;
+
+    > img {
+        @extend .w-100 !optional;
+        @extend .h-100 !optional;
+        @extend .object-cover !optional;
+        @extend .card-img-end !optional;
+    }
+}
+
+.card-image-left {
+    @extend .w-100 !optional;
+    @extend .h-100 !optional;
+
+    > img {
+        @extend .w-100 !optional;
+        @extend .h-100 !optional;
+        @extend .object-cover !optional;
+        @extend .card-img-start !optional;
+    }
+}
+
+.card-image-top {
+    @extend .w-100 !optional;
+    @extend .h-100 !optional;
+
+    > img {
+        @extend .w-100 !optional;
+        @extend .h-100 !optional;
+        @extend .object-cover !optional;
+        @extend .card-img-top !optional;
+    }
+}
+
+.card-image-bottom {
+    @extend .w-100 !optional;
+    @extend .h-100 !optional;
+
+    > img {
+        @extend .w-100 !optional;
+        @extend .h-100 !optional;
+        @extend .object-cover !optional;
+        @extend .card-img-bottom !optional;
+    }
+}

package/card/src/card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});