ca-components 2.1.152 → 2.1.161

package/lib/components/ca-progress-bar-v2/ca-progress-bar-v2.component.ts

@@ -1,49 +0,0 @@
-// modules
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { NgbModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-
-// components
-import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
-
-// enums
-import { eColor, ePosition } from '../../enums';
-
-// interfaces
-import { IProgressBarColorConfig } from './interfaces';
-
-// pipes
-import { ProgressBarLinePipe } from '../../pipes';
-
-@Component({
-    selector: 'app-ca-progress-bar-v2',
-    imports: [
-        // modules
-        CommonModule,
-        NgbModule,
-        NgbTooltip,
-        // components
-        CaAppTooltipV2Component,
-        // pipes
-        ProgressBarLinePipe,
-    ],
-    templateUrl: './ca-progress-bar-v2.component.html',
-    styleUrls: ['./ca-progress-bar-v2.component.scss'],
-})
-export class CaProgressBarV2Component {
-    @Input() progressPercentage: number = 0;
-    @Input() text: string | undefined;
-    @Input() tooltipText: string | undefined;
-    @Input() customText: string | undefined;
-    @Input() customTextPrice: string | undefined;
-    @Input() isTableColumn: boolean = false;
-    @Input() isSmallProgressBar: boolean = false;
-    @Input() colorConfig: IProgressBarColorConfig | undefined;
-    @Input() isFocused: boolean = false;
-    @Input() isBoldText: boolean = false;
-
-    public eColor = eColor;
-    public ePosition = ePosition;
-
-    constructor() {}
-}

package/lib/components/ca-progress-bar-v2/interfaces/index.ts

@@ -1 +0,0 @@
-export * from './progress-bar-color-config.interface';

package/lib/components/ca-progress-bar-v2/interfaces/progress-bar-color-config.interface.ts

@@ -1,4 +0,0 @@
-export interface IProgressBarColorConfig {
-    backColor: string;
-    frontColor: string;
-}

package/lib/components/ca-progress-expiration/ca-progress-expiration.component.html

@@ -1,103 +0,0 @@
-<div class="progress-expiration d-flex flex-column">
-    @for (item of _configArray; let indx = $index; track indx) {
-        <ng-container
-            *ngTemplateOutlet="
-                getTemplate(item.template);
-                context: { $implicit: item }
-            "
-        >
-        </ng-container>
-    }
-</div>
-
-<!--ToDo template-->
-<ng-template templateContainer id="todo-list" let-config>
-    <ng-container
-        *ngTemplateOutlet="
-            progressExpirationTemplate;
-            context: { $implicit: config }
-        "
-    >
-    </ng-container>
-</ng-template>
-
-<!--Details template-->
-<ng-template templateContainer id="details" let-config>
-    <ng-container
-        *ngTemplateOutlet="
-            progressExpirationTemplate;
-            context: { $implicit: config }
-        "
-    >
-    </ng-container>
-</ng-template>
-
-<!--Location template-->
-<ng-template templateContainer id="location" let-config>
-    <div
-        class="progress-expiration-header d-flex align-items-center justify-content-between"
-    >
-        <div class="header-left-side d-flex flex-row align-items-center">
-            <p class="title" [ngClass]="{ dark: _config?.theme === 'dark' }">
-                {{ title.before }} -
-                <span class="days">{{
-                    _config.rent ?? 0 | currencyFormat
-                }}</span>
-            </p>
-        </div>
-
-        <p class="expires-time-date location">
-            {{ _config.expireDate | timeFormat }}
-        </p>
-    </div>
-    <div
-        class="progress-expiration-container"
-        [ngClass]="{ big: _config?.type === 'big' }"
-        [ngStyle]="{ 'background-color': progressBackgroundColor.primary }"
-    >
-        <div
-            class="line"
-            [ngStyle]="{
-                'background-color': progressBackgroundColor.secondary,
-                width: progressWidth,
-            }"
-        ></div>
-    </div>
-</ng-template>
-
-<!--------------COMMON-TEMPLATE-------------->
-<!--ToDo, Details -->
-<ng-template #progressExpirationTemplate let-config>
-    <div
-        class="progress-expiration-header d-flex align-items-center justify-content-between"
-    >
-        <div class="header-left-side d-flex flex-row align-items-center">
-            <p class="title" [ngClass]="{ dark: _config?.theme === 'dark' }">
-                {{ title.before }} <span class="days">{{ title.days }}</span>
-                {{ title.after }}
-            </p>
-        </div>
-        @let isInTemplatedIncluded =
-            _config?.template &&
-            !['settings-parking'].includes(_config.template);
-        @if (isInTemplatedIncluded) {
-            <p class="expires-time-date">
-                {{ _config?.expireDate | date: 'HH:mm a' }}
-                {{ _config?.expireDate | date: 'MM/dd/yyyy' }}
-            </p>
-        }
-    </div>
-    <div
-        class="progress-expiration-container"
-        [ngClass]="{ big: _config?.type === 'big' }"
-        [ngStyle]="{ 'background-color': progressBackgroundColor.primary }"
-    >
-        <div
-            class="line"
-            [ngStyle]="{
-                'background-color': progressBackgroundColor.secondary,
-                width: progressWidth,
-            }"
-        ></div>
-    </div>
-</ng-template>

package/lib/components/ca-progress-expiration/ca-progress-expiration.component.scss

@@ -1,65 +0,0 @@
-@import 'scss/font-family.scss';
-@import 'theme/variables.scss';
-
-
-.progress-expiration {
-  gap: 6px;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-
-  &-header {
-    .header-left-side {
-      gap: 4px;
-
-      .title {
-        font-weight: 400 !important;
-        font-family: $font-family;
-        color: $ta-black-2;
-        font-size: 14px;
-        line-height: 18px;
-
-        &.dark {
-          color: $ta-black-3;
-        }
-      }
-
-      .days {
-        font-weight: 600 !important;
-        color: $ta-black;
-        font-size: 14px;
-        line-height: 18px;
-      }
-    }
-
-    .expires-time-date {
-      font-family: $font-family;
-      color: $muted;
-      font-size: 14px;
-      line-height: 18px;
-      text-align: right;
-
-      &.location{
-        color: $ta-black-2;
-      }
-    }
-  }
-
-  &-container {
-    width: 100%;
-    height: 8px;
-    border-radius: 2px;
-    position: relative;
-    overflow: hidden;
-
-    &.big {
-      height: 24px;
-    }
-
-    .line {
-      height: 100%;
-    }
-  }
-}

package/lib/components/ca-progress-expiration/ca-progress-expiration.component.stories.ts

@@ -1,157 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-
-//Components
-import { CaProgressExpirationComponent } from './ca-progress-expiration.component';
-
-//Pipes
-import {
-  CurrencyFormatPipe,
-  ProgressExpirationAbsPipe,
-  ProgressExpirationWidthPipe,
-  TimeFormatPipe,
-} from './pipes';
-
-const meta: Meta<CaProgressExpirationComponent> = {
-  title: 'Example/ProgressExpiration',
-  component: CaProgressExpirationComponent,
-  tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, FormsModule, ReactiveFormsModule, TimeFormatPipe],
-      providers: [
-        ProgressExpirationWidthPipe,
-        ProgressExpirationAbsPipe,
-        CurrencyFormatPipe,
-        TimeFormatPipe,
-      ],
-    }),
-  ],
-  argTypes: {
-    config: {
-      control: 'object',
-      defaultValue: {
-        template: 'todo-list',
-        expireDate: new Date(),
-        startDate: new Date(),
-        type: 'small',
-        theme: 'light',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<CaProgressExpirationComponent>;
-
-export const TodoProgressExpirationCompleted: Story = {
-  args: {
-    config: [
-      {
-        template: 'todo-list',
-        expireDate: new Date('2024-08-09'),
-        completedDate: new Date('2024-08-07'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const TodoProgressExpirationExpired: Story = {
-  args: {
-    config: [
-      {
-        template: 'todo-list',
-        expireDate: new Date('2024-08-09'),
-        completedDate: new Date('2024-08-12'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const TodoProgressExpirationDeadlineIn: Story = {
-  args: {
-    config: [
-      {
-        template: 'todo-list',
-        expireDate: new Date('2024-08-09'),
-        startDate: new Date('2024-08-05'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const TodoProgressExpirationDeadlineWas: Story = {
-  args: {
-    config: [
-      {
-        template: 'todo-list',
-        expireDate: new Date('2024-08-05'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const DetailsProgressExpiration: Story = {
-  args: {
-    config: [
-      {
-        template: 'details',
-        expireDate: new Date('2024-08-25'),
-        startDate: new Date('2024-08-04'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const DetailsProgressExpirationHours: Story = {
-  args: {
-    config: [
-      {
-        template: 'details',
-        expireDate: new Date('2024-08-07T02:00:00'),
-        type: 'small',
-        theme: 'light',
-      },
-    ],
-  },
-};
-
-export const LocationProgressExpirationWeekly: Story = {
-  args: {
-    config: [
-      {
-        template: 'location',
-        expireDate: new Date('2024-10-10T13:00:00'),
-        type: 'small',
-        theme: 'light',
-        rent: 380,
-      },
-    ],
-  },
-};
-
-export const LocationProgressExpirationMontlhy: Story = {
-  args: {
-    config: [
-      {
-        template: 'location',
-        expireDate: new Date('2024-10-24T02:00:00'),
-        type: 'small',
-        theme: 'light',
-        rent: 380,
-      },
-    ],
-  },
-};

package/lib/components/ca-progress-expiration/ca-progress-expiration.component.ts

@@ -1,259 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  QueryList,
-  TemplateRef,
-  ViewChildren,
-} from '@angular/core';
-import moment from 'moment';
-
-//Pipes
-import {
-  CurrencyFormatPipe,
-  ProgressExpirationAbsPipe,
-  ProgressExpirationWidthPipe,
-  TimeFormatPipe,
-} from './pipes';
-
-//Utils
-import { ProgressExpirationConstants } from './utils';
-
-//Models
-import {
-  ProgressExpiration,
-  ProgressExpirationColor,
-  ProgressExpirationTitle,
-} from './models';
-
-//Enum
-import { TimeUnits } from './enums';
-
-//Directives
-import { TemplateContainerDirective } from '../ca-upload-files/components/ca-upload-dropzone/directives';
-
-//Helpers
-import { ProgressExpirationHelper } from './helpers';
-
-@Component({
-    imports: [
-        //Modules
-        CommonModule,
-        //Pipes
-        CurrencyFormatPipe,
-        TimeFormatPipe,
-        //Directive
-        TemplateContainerDirective
-    ],
-    providers: [ProgressExpirationWidthPipe, ProgressExpirationAbsPipe],
-    selector: 'lib-ca-progress-expiration',
-    templateUrl: './ca-progress-expiration.component.html',
-    styleUrls: ['./ca-progress-expiration.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CaProgressExpirationComponent {
-  @ViewChildren(TemplateContainerDirective)
-  templateRef!: QueryList<TemplateContainerDirective>;
-
-  @Input() set config(data: ProgressExpiration[]) {
-    setTimeout(() => {
-      this._configArray = data;
-      if (this._configArray.length > 0) {
-        this._config = this._configArray[0];
-      }
-
-      // Default title
-      this.setTitleBasedOnConfig();
-
-      // Calculate the total days
-      this.calculateDays();
-
-      this.setProgressWidth();
-
-      // set backgroundColor
-      this.setBackgroundColor();
-
-      // set title
-      this.setTitle(this._config);
-
-      this.cdr.markForCheck();
-    }, 0);
-  }
-
-  public _config!: ProgressExpiration;
-  public title!: ProgressExpirationTitle;
-  public _configArray: ProgressExpiration[] = [];
-  public totalDays: number = 0;
-  public leftDays: number = 0;
-  public progressWidth: string = '0%';
-  public progressBackgroundColor!: ProgressExpirationColor;
-
-  constructor(
-    private progressExpirationWidthPipe: ProgressExpirationWidthPipe,
-    private progressExpirationAbsPipe: ProgressExpirationAbsPipe,
-    private cdr: ChangeDetectorRef
-  ) {}
-
-  private calculateDays(): void {
-    this.totalDays = ProgressExpirationHelper.calculateTotalDays(
-      this._config.startDate ?? new Date(),
-      this._config.expireDate,
-      this._config?.completedDate
-    );
-
-    this.leftDays = ProgressExpirationHelper.calculateLeftDays(
-      this._config.expireDate,
-      this._config?.completedDate
-    );
-  }
-
-  private setProgressWidth(): void {
-    this.progressWidth = this.progressExpirationWidthPipe.transform(
-      this._config.startDate ?? new Date(),
-      this._config.expireDate,
-      this._config?.completedDate
-    );
-  }
-
-  private setTitleBasedOnConfig(): void {
-    if (this._config?.customTitle) {
-      this.title = {
-        ...this.title,
-        before: this._config.customTitle,
-      };
-    } else {
-      this.setTitle(this._config);
-    }
-  }
-
-  private generateTitle(
-    data: ProgressExpiration,
-    leftDays: number
-  ): ProgressExpirationTitle {
-    let before: string = '';
-    let after: string = '';
-    let days: string = '';
-
-    if (data.template === 'location') {
-      const now = moment().utc();
-      const expireDate = moment(data.expireDate).utc();
-
-      const daysUntilExpiration = expireDate.diff(now, 'days');
-
-      before = daysUntilExpiration <= 7 ? 'Weekly Rent' : 'Monthly Rent';
-    } else if (data.completedDate) {
-      if (moment(data.completedDate).utc().isBefore(data.expireDate)) {
-        before = 'Completed';
-        after = `before deadline`;
-        this.progressBackgroundColor =
-          ProgressExpirationConstants.ProgressExpirationColors[
-            'IN_TIME_DURATION'
-          ];
-      } else if (moment(data.completedDate).utc().isSame(data.expireDate)) {
-        before = 'Completed';
-        this.progressBackgroundColor =
-          ProgressExpirationConstants.ProgressExpirationColors[
-            'IN_TIME_DURATION'
-          ];
-      } else {
-        before = 'Completed';
-        after = `past deadline`;
-        this.progressBackgroundColor =
-          ProgressExpirationConstants.ProgressExpirationColors[
-            'EXPIRED_DURATION'
-          ];
-      }
-    } else {
-      if (data.template === 'todo-list') {
-        before = moment(data.expireDate).utc().isAfter(moment().utc())
-          ? 'Deadline in'
-          : 'Deadline was';
-        after = before === 'Deadline in' ? '' : 'ago';
-      } else {
-        before = moment(data.expireDate).utc().isAfter(moment().utc())
-          ? 'Exp. in'
-          : 'Exp. was';
-        after = before === 'Exp. in' ? '' : 'ago';
-      }
-    }
-
-    if (leftDays) {
-      days = `${leftDays} ${leftDays > 1 ? TimeUnits.DAYS : TimeUnits.DAY}`;
-    } else {
-      const hours = ProgressExpirationHelper.calculateHours(
-        data.expireDate,
-        data.startDate!
-      );
-      days = `${hours} ${hours > 1 ? TimeUnits.HOURS : TimeUnits.HOUR}`;
-    }
-
-    return {
-      before,
-      days,
-      after,
-    };
-  }
-
-  private setTitle(data: ProgressExpiration): void {
-    const leftDaysFormatted = this.progressExpirationAbsPipe.transform(
-      this.leftDays
-    );
-    this.title = this.generateTitle(data, leftDaysFormatted);
-  }
-
-  private setBackgroundColor(): void {
-    // Checking if the time has expired
-    if (this.leftDays <= 0) {
-      this.progressBackgroundColor =
-        ProgressExpirationConstants.ProgressExpirationColors[
-          'EXPIRED_DURATION'
-        ];
-      this.progressWidth = '0%';
-      return;
-    }
-
-    let percentageLeft: number = 0;
-
-    if (this._config.template === 'location') {
-      const daysInMonth =
-        ProgressExpirationHelper.calculateDaysInCurrentMonth();
-      percentageLeft =
-        this.leftDays < 7
-          ? (this.leftDays / 7) * 100 // Weekly
-          : (this.leftDays / daysInMonth) * 100; // Monthly
-    } else {
-      percentageLeft = (this.leftDays / this.totalDays) * 100; // For other templates
-    }
-
-    if (percentageLeft > 50) {
-      this.progressBackgroundColor =
-        ProgressExpirationConstants.ProgressExpirationColors['LONG_DURATION'];
-    } else if (percentageLeft > 20) {
-      this.progressBackgroundColor =
-        ProgressExpirationConstants.ProgressExpirationColors['MEDIUM_DURATION'];
-    } else {
-      this.progressBackgroundColor =
-        ProgressExpirationConstants.ProgressExpirationColors['SHORT_DURATION'];
-    }
-
-    this.progressWidth = `${percentageLeft}%`;
-  }
-
-  //Template
-  public getTemplate<T>(template: string): TemplateRef<T> {
-    const templateRef: TemplateContainerDirective | undefined =
-      this.templateRef?.find((temp) => temp.id === template);
-
-    if (!templateRef) {
-      throw new Error('Unavailable template!');
-    }
-
-    return templateRef?.template as TemplateRef<T>;
-  }
-
-  public identify(index: number): number {
-    return index;
-  }
-}

package/lib/components/ca-progress-expiration/enums/index.ts

@@ -1 +0,0 @@
-export * from './time-units.enum';

package/lib/components/ca-progress-expiration/enums/time-units.enum.ts

@@ -1,6 +0,0 @@
-export enum TimeUnits {
-    DAYS = 'days',
-    DAY = 'day',
-    HOURS = 'hours',
-    HOUR = 'hour',
-}

package/lib/components/ca-progress-expiration/helpers/hex-to-rgba.helper.ts

@@ -1,18 +0,0 @@
-export const HexToRgbaHelper = (hex: string, opacity: number): string => {
-    let r = 0,
-        g = 0,
-        b = 0;
-    // 3 digits
-    if (hex.length === 4) {
-        r = parseInt(hex[1] + hex[1], 16);
-        g = parseInt(hex[2] + hex[2], 16);
-        b = parseInt(hex[3] + hex[3], 16);
-    }
-    // 6 digits
-    else if (hex.length === 7) {
-        r = parseInt(hex[1] + hex[2], 16);
-        g = parseInt(hex[3] + hex[4], 16);
-        b = parseInt(hex[5] + hex[6], 16);
-    }
-    return `rgba(${r},${g},${b},${opacity})`;
-};

package/lib/components/ca-progress-expiration/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from './hex-to-rgba.helper';
-export * from './progress-expiration.helper'