design-angular-kit 1.2.0 → 1.2.1

package/src/lib/pipes/date-ago.pipe.ts

@@ -0,0 +1,57 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+type DateAgoPipeInterval = 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second';
+
+/**
+ * Indicates in a textual way how much time has passed since the indicated date
+ * @example 2 hours ago
+ */
+@Pipe({
+  name: 'itDateAgo',
+  pure: false,
+  standalone: true,
+})
+export class ItDateAgoPipe extends TranslatePipe implements PipeTransform {
+  /**
+   * Indicates in a textual way how much time has passed since the indicated date
+   * @example 2 hours ago
+   * @param value the Date or date string
+   */
+  override transform(value: string | Date): string {
+    if (!value) {
+      return '';
+    }
+
+    const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+    if (isNaN(seconds)) {
+      return '';
+    }
+
+    // less than 30 seconds ago will show as 'Just now'
+    if (seconds < 29) {
+      return super.transform('it.date-ago-pipe.just-now');
+    }
+
+    const intervals = new Map<DateAgoPipeInterval, number>([
+      ['year', 31536000],
+      ['month', 2592000],
+      ['week', 604800],
+      ['day', 86400],
+      ['hour', 3600],
+      ['minute', 60],
+      ['second', 1],
+    ]);
+
+    for (const interval of intervals) {
+      const counter = Math.floor(seconds / interval[1]);
+      if (counter > 0) {
+        return super.transform(`it.date-ago-pipe.${counter === 1 ? 'singular-' : ''}${interval[0]}-ago`, {
+          count: counter,
+        });
+      }
+    }
+
+    return '';
+  }
+}

package/src/lib/pipes/duration.pipe.ts

@@ -0,0 +1,112 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+export type ItDurationPipeType = 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second';
+
+/**
+ * Transform a number into a duration.
+ * Is necessary indicate the value expressed by the number, for example 'day'.
+ * @example
+ *  - 1, 'day' -> 1 day
+ *  - 5, 'day' -> 5 days
+ *  - 7, 'day' -> 1 week
+ *  - 365, 'day' -> 1 year
+ *  - 2, 'week' -> 2 weeks
+ *  ...
+ */
+@Pipe({
+  name: 'itDuration',
+  standalone: true,
+})
+export class ItDurationPipe extends TranslatePipe implements PipeTransform {
+  /**
+   * Transform a number into a duration.
+   * Is necessary indicate the value expressed by the number, for example 'day'.
+   * @example
+   *  - 1, 'day' -> 1 day
+   *  - 5, 'day' -> 5 days
+   *  - 7, 'day' -> 1 week
+   *  - 8, 'day' -> 1 week
+   *  - 365, 'day' -> 1 year
+   *  - 2, 'week' -> 2 weeks
+   *  - 24, 'month' -> 1 year
+   *  ...
+   * @param value the number
+   * @param type the number expressed type
+   */
+  override transform(value: string | number | undefined, type: ItDurationPipeType): string {
+    let valueAdjust = Number(value);
+    if (isNaN(valueAdjust)) {
+      return '';
+    }
+
+    switch (type) {
+      // eslint-disable-next-line no-fallthrough,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      case 'second':
+        if (valueAdjust < 60) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 60);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-fallthrough
+      case 'minute':
+        if (valueAdjust < 60) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 60);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-fallthrough
+      case 'hour':
+        if (valueAdjust < 24) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 24);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-fallthrough
+      case 'day':
+        if (valueAdjust < 7) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 7);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-fallthrough
+      case 'week':
+        if (valueAdjust < 5) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 5);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line no-fallthrough
+      case 'month':
+        if (valueAdjust < 24) {
+          return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+            count: valueAdjust,
+          });
+        }
+        valueAdjust = Math.round(valueAdjust / 24);
+      // eslint-disable-next-line no-fallthrough
+      case 'year':
+        return super.transform(`it.duration.${type}${valueAdjust === 1 ? '' : 's'}`, {
+          count: valueAdjust,
+        });
+      default:
+        return '';
+    }
+  }
+}

package/src/lib/pipes/mark-matching-text.pipe.ts

@@ -0,0 +1,43 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Allows you to highlight text with the <mark> tag
+ */
+@Pipe({
+  standalone: true,
+  name: 'itMarkMatchingText',
+})
+export class ItMarkMatchingTextPipe implements PipeTransform {
+  constructor(private readonly domSanitizer: DomSanitizer) {}
+
+  /**
+   * Allows you to highlight text with the <mark> tag
+   * @param allString the full text to search from
+   * @param searchString the string to search
+   */
+  transform(allString: string | undefined, searchString: string | number | null | undefined): SafeHtml | string | undefined {
+    if (!searchString) {
+      return allString;
+    } else if (!allString) {
+      return '';
+    }
+
+    if (typeof searchString === 'number') {
+      searchString = searchString.toString();
+    }
+
+    // Check if search string is a substring of pivot string (no case-sensitive)
+    const idxOfMatchString = allString.toLowerCase().indexOf(searchString.toLowerCase());
+    if (idxOfMatchString !== -1) {
+      // retrieve the exactly substring
+      const matchingString = allString.substring(idxOfMatchString, idxOfMatchString + searchString.length);
+      // Replace original string marking as <strong> (bold) the matchinng substring
+      const regEx = new RegExp('(' + matchingString + ')', 'gi');
+      const res = allString.replace(regEx, '<mark>$1</mark>');
+      return this.domSanitizer.bypassSecurityTrustHtml(res);
+    }
+
+    return allString;
+  }
+}

package/src/lib/provide-design-angular-kit.ts

@@ -0,0 +1,73 @@
+import { HttpClient, provideHttpClient } from '@angular/common/http';
+import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, makeEnvironmentProviders, Provider } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { loadFonts } from 'bootstrap-italia';
+import { DesignAngularKitConfig, IT_ASSET_BASE_PATH } from './interfaces/design-angular-kit-config';
+
+/**
+ * Configures DesignAngularKit library
+ * @param config the DesignAngularKit config
+ */
+export function provideDesignAngularKit(config?: DesignAngularKitConfig): EnvironmentProviders {
+  let assetBasePath = './bootstrap-italia';
+  if (config?.assetBasePath) {
+    assetBasePath = config.assetBasePath.endsWith('/')
+      ? config.assetBasePath.substring(0, config.assetBasePath.lastIndexOf('/'))
+      : config.assetBasePath;
+  }
+
+  const providers: Array<EnvironmentProviders | Provider> = [
+    {
+      provide: IT_ASSET_BASE_PATH,
+      useValue: assetBasePath,
+    },
+    provideAnimationsAsync(),
+    provideHttpClient(),
+  ];
+
+  if (config?.loadFont !== false) {
+    // Add provider to initialize the bootstrap-italia font
+    providers.push({
+      provide: APP_INITIALIZER,
+      useFactory: () => {
+        return () => {
+          loadFonts(`${assetBasePath}/dist/fonts`);
+        };
+      },
+      multi: true,
+    });
+  }
+
+  // Add provider to initialize the TranslateModule
+  const langPrefix = `${assetBasePath}/i18n/`;
+  const langSuffix = `.json`; // TODO: add ?v${version} to prevent cache loading on version change
+  providers.push(
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
+          provide: TranslateLoader,
+          useFactory: (http: HttpClient) => new TranslateHttpLoader(http, langPrefix, langSuffix),
+          deps: [HttpClient],
+        },
+        defaultLanguage: 'it',
+        useDefaultLang: true,
+      })
+    )
+  );
+
+  // Add provider to initialize library default languages
+  providers.push({
+    provide: APP_INITIALIZER,
+    useFactory: (translateService: TranslateService) => {
+      return () => {
+        translateService.addLangs(['it', 'en']); // Adds 'it' and 'en' as available languages.
+      };
+    },
+    multi: true,
+    deps: [TranslateService],
+  });
+
+  return makeEnvironmentProviders(providers);
+}

package/src/lib/services/notification/notification.service.spec.ts

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

package/src/lib/services/notification/notification.service.ts

@@ -0,0 +1,119 @@
+import { Injectable } from '@angular/core';
+import { filter, Observable, Subject } from 'rxjs';
+import { Notification, NotificationPosition, NotificationType } from '../../interfaces/core';
+
+@Injectable({ providedIn: 'root' })
+export class ItNotificationService {
+  private subject = new Subject<Notification>();
+
+  /**
+   * Listen on notification arrived
+   * @param filterType filter type of notification
+   */
+  public onNotification(filterType?: NotificationType): Observable<Notification> {
+    return this.subject.asObservable().pipe(filter(n => n && (!filterType || n.type === filterType)));
+  }
+
+  /**
+   * Show new notification
+   * @param notification notification
+   */
+  public addNotification(notification: Notification): void {
+    this.subject.next(notification);
+  }
+
+  /**
+   * Create new Standard notification
+   * @param title notification title
+   * @param message notification message
+   * @param dismissible notification dismissible
+   * @param duration notification duration (milliseconds)
+   * @param position notification position
+   */
+  public standard(title: string, message?: string, dismissible?: boolean, duration?: number, position?: NotificationPosition): void {
+    this.addNotification({
+      type: NotificationType.Standard,
+      message,
+      title,
+      duration,
+      dismissible,
+      position,
+    });
+  }
+
+  /**
+   * Create new Success notification
+   * @param title notification title
+   * @param message notification message
+   * @param dismissible notification dismissible
+   * @param duration notification duration (milliseconds)
+   * @param position notification position
+   */
+  public success(title: string, message?: string, dismissible?: boolean, duration?: number, position?: NotificationPosition): void {
+    this.addNotification({
+      type: NotificationType.Success,
+      message,
+      title,
+      duration,
+      dismissible,
+      position,
+    });
+  }
+
+  /**
+   * Create new Error notification
+   * @param title notification title
+   * @param message notification message
+   * @param dismissible notification dismissible
+   * @param duration notification duration (milliseconds)
+   * @param position notification position
+   */
+  public error(title: string, message?: string, dismissible?: boolean, duration?: number, position?: NotificationPosition): void {
+    this.addNotification({
+      type: NotificationType.Error,
+      message,
+      title,
+      duration,
+      dismissible,
+      position,
+    });
+  }
+
+  /**
+   * Create new Warning notification
+   * @param title notification title
+   * @param message notification message
+   * @param dismissible notification dismissible
+   * @param duration notification duration (milliseconds)
+   * @param position notification position
+   */
+  public warning(title: string, message?: string, dismissible?: boolean, duration?: number, position?: NotificationPosition): void {
+    this.addNotification({
+      type: NotificationType.Warning,
+      message,
+      title,
+      duration,
+      dismissible,
+      position,
+    });
+  }
+
+  /**
+   * Create new Info notification
+   * @param title notification title
+   * @param message notification message
+   * @param dismissible notification dismissible
+   * @param duration notification duration (milliseconds)
+   * @param position notification position
+   */
+  public info(title: string, message?: string, dismissible?: boolean, duration?: number, position?: NotificationPosition): void {
+    this.addNotification({
+      type: NotificationType.Info,
+      message,
+      title,
+      duration,
+      dismissible,
+      position,
+    });
+  }
+}

package/{lib/utils/coercion.d.ts → src/lib/utils/coercion.ts}

@@ -1,4 +1,7 @@
+import { booleanAttribute } from '@angular/core';
+
 export type BooleanInput = 'false' | 'true' | boolean | undefined;
+
 /**
  * Transforms a value (typically a string) to a boolean.
  * Intended to be used as a transform function of an input.
@@ -11,4 +14,7 @@ export type BooleanInput = 'false' | 'true' | boolean | undefined;
  *
  * @publicApi
  */
-export declare function inputToBoolean(value: BooleanInput): boolean;
+export function inputToBoolean(value: BooleanInput): boolean {
+  // Wrap `@angular/core` function to force value type, for ide hits
+  return booleanAttribute(value);
+}

package/src/lib/utils/date-utils.ts

@@ -0,0 +1,184 @@
+import { Observable, shareReplay, takeWhile, timer } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export class ItDateUtils {
+  /**
+   * Add seconds to date
+   * @param date the date
+   * @param seconds seconds to add
+   */
+  public static addSeconds(date: Date, seconds: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setSeconds(date.getSeconds() + seconds);
+    return newDate;
+  }
+
+  /**
+   * Add minutes to date
+   * @param date the date
+   * @param minutes minutes to add
+   */
+  public static addMinutes(date: Date, minutes: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setMinutes(date.getMinutes() + minutes);
+    return newDate;
+  }
+
+  /**
+   * Add hours to date
+   * @param date the date
+   * @param hours hours to add
+   */
+  public static addHours(date: Date, hours: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setHours(date.getHours() + hours);
+    return newDate;
+  }
+
+  /**
+   * Add days to date
+   * @param date the date
+   * @param days days to add
+   */
+  public static addDays(date: Date, days: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setDate(date.getDate() + days);
+    return newDate;
+  }
+
+  /**
+   * Add years to date
+   * @param date the date
+   * @param months months to add
+   */
+  public static addMonths(date: Date, months: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setMonth(date.getMonth() + months);
+    return newDate;
+  }
+
+  /**
+   * Add years to date
+   * @param date the date
+   * @param years years to add
+   */
+  public static addYears(date: Date, years: number): Date {
+    const newDate = new Date(date.valueOf());
+    newDate.setFullYear(date.getFullYear() + years);
+    return newDate;
+  }
+
+  /**
+   * Calculate number of days between two date
+   * @param startDate
+   * @param endDate
+   * @param absolute return unsigned result
+   */
+  public static countDays(startDate: Date, endDate: Date, absolute: boolean = false): number {
+    const differenceInTime = endDate.getTime() - startDate.getTime();
+    const diff = absolute ? Math.abs(differenceInTime) : differenceInTime;
+    return Math.ceil(diff / (1000 * 3600 * 24));
+  }
+
+  /**
+   * Check if string is a date with iso format
+   * @param value the string
+   */
+  public static isIsoString(value: string | null): boolean {
+    if (!value || !/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(value)) {
+      return false;
+    }
+    const d = new Date(value);
+    return !!d && !isNaN(d.getTime()) && d.toISOString() === value;
+  }
+
+  /**
+   * Convert iso string to Date
+   * @param isoString the iso string
+   */
+  public static isoStringToDate(isoString: string | null): Date | null {
+    return isoString ? new Date(Date.parse(isoString)) : null;
+  }
+
+  /**
+   * Remove time from an iso date string
+   * @param isoString the iso string
+   */
+  public static isoStringRemoveTime(isoString: string): string {
+    let date = ItDateUtils.isoStringToDate(isoString);
+    if (!date) {
+      return isoString;
+    }
+    const offset = date.getTimezoneOffset();
+    date = new Date(date.getTime() - offset * 60 * 1000);
+    return date.toISOString().substring(0, isoString.indexOf('T'));
+  }
+
+  /**
+   * Set iso string hours to 0 and format correctly the date (consider timezone offset)
+   * @example '2024-03-04T23:00:00.000Z' -> '2024-03-05T00:00:00.000Z'
+   * @param isoString the iso string
+   */
+  public static isoStringSetZeroTime(isoString: string): string {
+    let date = ItDateUtils.isoStringToDate(isoString);
+    if (!date) {
+      return isoString;
+    }
+    const offset = date.getTimezoneOffset();
+    date = new Date(date.getTime() - offset * 60 * 1000);
+    date.setUTCHours(0, 0, 0, 0);
+    return date.toISOString();
+  }
+
+  /**
+   * Calculate the date time left and return the string format [d h m s]
+   * @param endDate
+   */
+  public static timeLeftString(endDate: Date): Observable<string> {
+    const endTime = endDate.getTime();
+    return timer(0, 1000).pipe(
+      map(() => Math.floor((endTime - new Date().getTime()) / 1000)),
+      takeWhile(delta => delta >= 0),
+      map(delta => {
+        const arrayResult: Array<string> = [];
+        const days = Math.floor(delta / 60 / 60 / 24);
+        if (days > 0) {
+          arrayResult.push(days + 'd');
+        }
+        delta -= days * 60 * 60 * 24;
+        const hours = Math.floor(delta / 60 / 60) % 24;
+        if (hours > 0) {
+          arrayResult.push(hours + 'h');
+        }
+
+        delta -= hours * 60 * 60;
+        const minutes = Math.floor(delta / 60) % 60;
+        arrayResult.push(minutes + 'm');
+
+        delta -= minutes * 60;
+        const seconds = delta % 60;
+        arrayResult.push(seconds + 's');
+
+        return arrayResult.join(' ');
+      }),
+      shareReplay(1)
+    );
+  }
+
+  /**
+   * Calculate the next day of week
+   * @param dayOfWeek Day of week 0=Sunday, 1=Monday...4=Thursday...
+   * @param hour the specif hour
+   * @param minute the specific minute
+   */
+  public static nextWeekDayAndTime(dayOfWeek: number, hour = 0, minute = 0): Date {
+    const now = new Date();
+    const result = new Date(now.getFullYear(), now.getMonth(), now.getDate() + ((7 + dayOfWeek - now.getDay()) % 7), hour, minute, 0, 0);
+
+    if (result < now) {
+      result.setDate(result.getDate() + 7);
+    }
+
+    return result;
+  }
+}