@carefirst/library 1.3.10 → 1.3.11

package/src/lib/components/alert/alert.component.ts

@@ -1,73 +0,0 @@
-/**
- * CareFirst Library Alert
- *
- * @file          alert.component
- * @description   Contains all the logic for generating a CareFirst Alert
- * @author        Arno Jansen van Vuuren
- * @since         2023 - 11 - 30
- * @usage         <cf-alert data="{heading, message, buttonTrue, buttonFalse}" (alertEvent)></cf-alert>
- */
-
-import { Component, Input, Output, type OnChanges, type SimpleChanges, EventEmitter } from '@angular/core';
-import { AlertController } from '@ionic/angular';
-import type { AlertDataI, AlertEventI } from '../../interfaces/alert.interface';
-
-@Component({
-  selector: 'cf-alert',
-  templateUrl: './alert.component.html',
-  styleUrl: './alert.component.scss',
-})
-export class AlertComponent implements OnChanges {
-  @Input() data: AlertDataI | undefined = undefined;
-  @Output() alertEvent = new EventEmitter<AlertEventI>();
-
-  /**----------------------------------------------------------------
-   * @name  constructor
-   */
-  constructor(private readonly alertController: AlertController) {}
-
-  /**----------------------------------------------------------------
-   * @name          ngOnchange
-   * @description   Update various values on component input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    const val = changes['data']?.currentValue as typeof this.data;
-    if (val) this.showAlert(val);
-  }
-
-  /**----------------------------------------------------------------
-   * @name          showAlert
-   * @description   Show
-   * @param         {AlertDataI} data
-   * @returns       {Promise<void>}
-   */
-  async showAlert(data: AlertDataI): Promise<void> {
-    const alert = await this.alertController.create({
-      header: data.heading,
-      message: data.message,
-      cssClass: 'care-first-alert',
-      mode: 'md',
-      backdropDismiss: false,
-      buttons: [
-        {
-          text: data.buttonFalse || 'Cancel',
-          handler: () => {
-            this.alertEvent.emit({ identifier: data.alertIdentifier, status: false });
-            alert.dismiss();
-          },
-          cssClass: 'alert-button-cancel',
-        },
-        {
-          text: data.buttonTrue || 'OK',
-          handler: () => {
-            this.alertEvent.emit({ identifier: data.alertIdentifier, status: true });
-            alert.dismiss();
-          },
-          cssClass: 'alert-button-confirm',
-        },
-      ],
-    });
-    alert.present();
-  }
-}

package/src/lib/components/badge/badge.component.html

@@ -1,5 +0,0 @@
-<div [className]="'cf-badge-' + inputType">
-  <cf-icon *ngIf="inputIcon && inputType !== 'feedback-busy'" [icon]="inputIcon" [height]="12"></cf-icon>
-  <ion-spinner *ngIf="inputType === 'feedback-busy'"></ion-spinner>
-  <p><ng-content></ng-content></p>
-</div>

package/src/lib/components/badge/badge.component.scss

@@ -1,96 +0,0 @@
-/*===============================================
-===================== Tags ======================
-===============================================*/
-
-div[class^='cf-badge-'] {
-  //--- Default Colours
-  --cf-badge-background: var(--cf-app-color-primary);
-  --cf-badge-text-color: var(--cf-app-text-color-light);
-  --cf-badge-border-color: var(--cf-badge-background);
-
-  --cf-svg-overwrite-stroke-color: var(--cf-badge-text-color); //--- Comes from Icon Library
-
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-  border-radius: 6px;
-  width: fit-content;
-
-  background: var(--cf-badge-background);
-  border: 0.2rem solid var(--cf-badge-border-color);
-  > p {
-    width: fit-content;
-    font-size: 1.2rem;
-    font-weight: 500;
-    font-style: normal;
-    line-height: auto;
-    color: var(--cf-badge-text-color);
-  }
-}
-
-/*===============================================
-================== Variations ===================
-===============================================*/
-
-div.cf-badge-feedback-primary {
-  --cf-badge-background: var(--cf-app-color-primary);
-  --cf-badge-text-color: var(--cf-app-text-color-light);
-  --cf-badge-border-color: var(--cf-badge-background);
-}
-
-div.cf-badge-alert {
-  --cf-badge-background: var(--cf-app-system-color-error);
-  --cf-badge-text-color: var(--cf-app-text-color-light);
-  --cf-badge-border-color: var(--cf-app-system-color-error);
-}
-
-div.cf-badge-accent {
-  --cf-badge-background: var(--cf-app-color-accent);
-  --cf-badge-text-color: var(--cf-app-text-color-light);
-  --cf-badge-border-color: var(--cf-app-color-accent);
-}
-
-div.cf-badge-warning {
-  --cf-badge-background: var(--cf-app-system-color-warning);
-  --cf-badge-text-color: var(--cf-app-text-color-grey);
-  --cf-badge-border-color: var(--cf-app-system-color-warning);
-}
-
-div.cf-badge-disabled {
-  --cf-badge-background: var(--cf-app-system-color-disabled);
-  --cf-badge-text-color: var(--cf-app-text-color-grey);
-  --cf-badge-border-color: var(--cf-app-system-color-disabled);
-}
-
-div.cf-badge-feedback-success {
-  --cf-badge-background: var(--cf-app-system-color-light-success);
-  --cf-badge-text-color: var(--cf-app-system-color-success);
-  --cf-badge-border-color: var(--cf-app-system-color-success);
-}
-
-div.cf-badge-feedback-error {
-  --cf-badge-background: var(--cf-app-system-color-light-error);
-  --cf-badge-text-color: var(--cf-app-system-color-error);
-  --cf-badge-border-color: var(--cf-app-system-color-error);
-}
-
-div.cf-badge-feedback-warning {
-  --cf-badge-background: var(--cf-app-system-color-light-warning);
-  --cf-badge-text-color: var(--cf-app-system-color-warning);
-  --cf-badge-border-color: var(--cf-app-system-color-warning);
-}
-
-div.cf-badge-feedback-busy {
-  --cf-badge-background: var(--cf-app-system-color-light-warning);
-  --cf-badge-text-color: var(--cf-app-system-color-warning);
-  --cf-badge-border-color: var(--cf-app-system-color-warning);
-
-  ion-spinner {
-    color: var(--cf-app-system-color-warning);
-    height: 1.2rem;
-    width: 1.2rem;
-  }
-}

package/src/lib/components/badge/badge.component.spec.ts

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

package/src/lib/components/badge/badge.component.ts

@@ -1,61 +0,0 @@
-/**
- * CareFirst Chat Badge
- *
- * @file          badge.component
- * @description   Contains all the logic for generating a CareFirst Chat Badge
- * @author        Jacques Coetzee
- * @since         2024 - 02 - 22
- * @usage         <cf-badge type="BadgeTypeT" %icon%="IconsT"></cf-badge>
- */
-
-import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
-//--- Utils
-import { validateStringValue } from '../../utils/attribute.util';
-//--- Interfaces
-import { iconsC, type IconsT } from '../../interfaces/icon.interface';
-
-/**==============================================
- * @interface     BadgeTypeT
- * @description   Types of badges available
- */
-const badgeTypeC = [
-  'primary',
-  'alert',
-  'accent',
-  'warning',
-  'disabled',
-  'feedback-success',
-  'feedback-error',
-  'feedback-warning',
-  'feedback-busy',
-] as const;
-type BadgeTypeT = (typeof badgeTypeC)[number];
-
-/**==============================================
- * @name     BadgeComponent
- * */
-@Component({
-  selector: 'cf-badge',
-  templateUrl: './badge.component.html',
-  styleUrl: './badge.component.scss',
-})
-export class BadgeComponent implements OnChanges {
-  @Input() type: BadgeTypeT = 'primary';
-  @Input() icon?: IconsT | undefined;
-
-  //--- Local variables
-  inputType: typeof this.type = 'primary';
-  inputIcon: typeof this.icon | undefined = undefined;
-
-  /**----------------------------------------------------------------
-   * @name          ngOnChanges
-   * @description   Update various values on input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    //--- Type
-    this.inputType = validateStringValue<BadgeTypeT>(changes, 'type', badgeTypeC.slice(), this.inputType) || 'primary';
-    //--- Icon Start
-    this.inputIcon = validateStringValue<IconsT>(changes, 'icon', iconsC.slice(), this.inputIcon);
-  }
-}

package/src/lib/components/button/button.component.html

@@ -1,20 +0,0 @@
-<ion-button
-  [style]="'--custom-color: ' + inputCustomColor"
-  [ngClass]="{
-    'cf-button-primary': inputType === 'primary',
-    'cf-button-secondary': inputType === 'secondary',
-    'cf-button-tertiary': inputType === 'tertiary',
-    'text-large': inputFontSize === 'large',
-    'text-small': inputFontSize === 'small',
-    alert: inputAlert,
-    action: inputAction,
-    snug: inputSnug
-  }"
-  mode="md"
-  [disabled]="inputDisabled">
-  <cf-icon *ngIf="inputIconStart" [icon]="inputIconStart" style="--cf-svg-overwrite-stroke-color: var(--button-text-color)"></cf-icon>
-  <p *cfButtonLoader="inputLoading">
-    <ng-content></ng-content>
-  </p>
-  <cf-icon *ngIf="inputIconEnd" [icon]="inputIconEnd" style="--cf-svg-overwrite-stroke-color: var(--button-text-color)"></cf-icon>
-</ion-button>

package/src/lib/components/button/button.component.scss

@@ -1,153 +0,0 @@
-/*===============================================
-==================== Buttons ====================
-===============================================*/
-
-ion-button[class^='cf-button-'] {
-  --custom-color: var(--cf-app-color-primary);
-  --core: var(--custom-color, var(--cf-app-color-primary));
-  width: 100%;
-  min-height: 5.6rem;
-  border-radius: 1rem 0.4rem 1rem 1rem;
-  text-transform: capitalize;
-  overflow: hidden;
-  margin: 0;
-  --padding-top: 1.6rem;
-  --padding-bottom: 1.6rem;
-  --padding-start: 2.4rem;
-  --padding-end: 2.4rem;
-  font-size: 1.2rem;
-
-  > p {
-    width: fit-content;
-    font-weight: 500;
-    font-style: normal;
-    line-height: auto;
-  }
-
-  > :not(:first-child) {
-    margin-left: 2rem;
-  }
-}
-ion-button[class^='cf-button-']::part(native) {
-  border-radius: 1rem 0.4rem 1rem 1rem;
-  box-shadow: none;
-}
-
-//------------- Action button class -------------
-//--- *Add to any 'cf-button-' class: %action% %snug%
-ion-button[class^='cf-button-'].action {
-  border-radius: 0.6rem;
-  min-height: 3.6rem;
-  --padding-top: 0.6rem;
-  --padding-bottom: 0.6rem;
-  --padding-start: 2rem;
-  --padding-end: 2rem;
-}
-ion-button[class^='cf-button-'].action::part(native) {
-  border-radius: 0.6rem;
-}
-
-ion-button[class^='cf-button-'].snug {
-  width: fit-content;
-  min-height: fit-content;
-}
-
-//--------------------- Font --------------------
-ion-button[class^='cf-button-'].text-large {
-  font-size: 1.6rem;
-}
-ion-button[class^='cf-button-'].text-small {
-  font-size: 1rem;
-}
-
-/*===============================================
-==================== Primary ====================
-===============================================*/
-
-.cf-button-primary {
-  --background: var(--core);
-  --button-text-color: var(--cf-app-text-color-light);
-  p {
-    color: var(--button-text-color);
-  }
-}
-
-.cf-button-primary[class*='disabled'] {
-  opacity: 100%;
-  --background: var(--cf-app-system-color-disabled);
-  --button-text-color: #9d9d9d;
-  p {
-    color: var(--button-text-color);
-  }
-}
-
-.cf-button-primary.alert:not([class*='disabled']) {
-  --background: var(--cf-app-system-color-error);
-  --button-text-color: var(--cf-app-text-color-light);
-  p {
-    color: var(--button-text-color);
-  }
-}
-
-/*===============================================
-=================== Secondary ===================
-===============================================*/
-
-.cf-button-secondary {
-  --background: transparent;
-  --button-text-color: var(--core);
-  p {
-    color: var(--button-text-color);
-  }
-}
-.cf-button-secondary::part(native) {
-  border: 0.2rem solid var(--core);
-}
-
-.cf-button-secondary[class*='disabled'] {
-  opacity: 100%;
-  --button-text-color: var(--cf-app-system-color-disabled);
-  p {
-    color: var(--button-text-color);
-  }
-}
-.cf-button-secondary[class*='disabled']::part(native) {
-  border: 0.2rem solid var(--cf-app-system-color-disabled);
-}
-
-.cf-button-secondary.alert:not([class*='disabled']) {
-  --button-text-color: var(--cf-app-system-color-error);
-  p {
-    color: var(--button-text-color);
-  }
-}
-.cf-button-secondary.alert:not([class*='disabled'])::part(native) {
-  border: 0.2rem solid var(--cf-app-system-color-error);
-}
-
-/*===============================================
-=================== Tertiary ====================
-===============================================*/
-
-.cf-button-tertiary {
-  --background: transparent;
-  --button-text-color: var(--core);
-  p {
-    color: var(--button-text-color);
-  }
-}
-
-.cf-button-tertiary[class*='disabled'] {
-  opacity: 100%;
-  --button-text-color: var(--cf-app-system-color-disabled);
-  p {
-    color: var(--button-text-color);
-  }
-}
-
-.cf-button-tertiary.alert:not([class*='disabled']) {
-  --button-text-color: var(--cf-app-system-color-error);
-  p {
-    color: var(--button-text-color);
-  }
-}

package/src/lib/components/button/button.component.spec.ts

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

package/src/lib/components/button/button.component.ts

@@ -1,94 +0,0 @@
-/**
- * CareFirst Library - Button
- *
- * @file          button.component
- * @description   Contains all the logic for generating a CareFirst Button
- * @author        Jacques Coetzee
- * @since         2023 - 11 - 07
- * @usage         <cf-btn type="'primary' | 'secondary' | 'tertiary'" fontSize="'small' | 'large'"  %customColor="var() | hex"% %disabled% %alert% %action% %snug%>TEXT</cf-btn>
- */
-
-import { Component, Input, type SimpleChanges, type OnChanges, HostBinding } from '@angular/core';
-import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
-import { iconsC, type IconsT } from '../../interfaces/icon.interface';
-
-@Component({
-  selector: 'cf-btn',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss'],
-})
-export class ButtonComponent implements OnChanges {
-  @Input() type: 'primary' | 'secondary' | 'tertiary' = 'primary';
-  @Input() disabled?: boolean | string | undefined;
-  @Input() alert?: boolean | string | undefined;
-  @Input() action?: boolean | string | undefined;
-  @Input() snug?: boolean | string | undefined;
-  @Input() fontSize?: 'small' | 'large';
-  @Input() iconStart?: IconsT | undefined;
-  @Input() iconEnd?: IconsT | undefined;
-  @Input() loading?: boolean | string | undefined;
-  @Input() customColor?: string | undefined;
-
-  @HostBinding('style.pointer-events') get parentEvents(): string {
-    if (this.disabled) {
-      return 'none';
-    }
-    return 'auto';
-  }
-
-  //--- Local variables
-  inputType: typeof this.type = 'primary';
-  inputFontSize: typeof this.fontSize | undefined = undefined;
-  inputDisabled = false;
-  inputAlert = false;
-  inputAction = false;
-  inputSnug = false;
-  inputIconStart: typeof this.iconStart | undefined = undefined;
-  inputIconEnd: typeof this.iconEnd | undefined = undefined;
-  inputLoading = false;
-  inputCustomColor = '';
-
-  /**----------------------------------------------------------------
-   * @name          ngOnChanges
-   * @description   Update various values on input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    //--- Type
-    this.inputType =
-      validateStringValue<'primary' | 'secondary' | 'tertiary'>(changes, 'type', ['primary', 'secondary', 'tertiary'], this.inputType) || 'primary';
-    //--- Font Size
-    this.inputFontSize = validateStringValue<'small' | 'large'>(changes, 'fontSize', ['small', 'large'], this.inputFontSize);
-    //--- Disabled
-    this.inputDisabled = checkTruthAttribute(changes, 'disabled', this.inputDisabled);
-    //--- Alert
-    this.inputAlert = checkTruthAttribute(changes, 'alert', this.inputAlert);
-    //--- Action
-    this.inputAction = checkTruthAttribute(changes, 'action', this.inputAction);
-    //--- Snug
-    this.inputSnug = checkTruthAttribute(changes, 'snug', this.inputSnug);
-    //--- Icon Start
-    this.inputIconStart = validateStringValue<IconsT>(changes, 'iconStart', iconsC.slice(), this.inputIconStart);
-    //--- Icon Start
-    this.inputIconEnd = validateStringValue<IconsT>(changes, 'iconEnd', iconsC.slice(), this.inputIconEnd);
-    //--- Loading
-    this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
-    //--- Custom color
-    if (changes['customColor']?.currentValue) this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
-  }
-
-  /**----------------------------------------------------------------
-   * @name          checkCustomColor
-   * @description   Check if the custom color is valid
-   * @param         {string} color
-   * @returns       {string}
-   */
-  checkCustomColor(color: string): string {
-    //--- Check for a css variable
-    if (color.startsWith('var')) return color;
-    //--- Check hex
-    if (color.startsWith('#') && (color.length === 4 || color.length === 7) && color.split('').every((char) => char.match(/[#0-9a-fA-F]+/)))
-      return color;
-    return '';
-  }
-}

package/src/lib/components/calendar/calendar.component.html

@@ -1,9 +0,0 @@
-<ion-datetime
-  [class]="inputColor"
-  mode="ios"
-  firstDayOfWeek="1"
-  [min]="min"
-  [max]="max"
-  [presentation]="inputTime ? 'date-time' : 'date'"
-  (ionChange)="setValue($event.detail.value)">
-</ion-datetime>

package/src/lib/components/calendar/calendar.component.scss

@@ -1,34 +0,0 @@
-ion-datetime {
-  --background: var(--cf-app-background-light);
-  color: var(--cf-app-text-color-default);
-}
-
-ion-datetime::part(calendar-day) {
-  font-size: 1.6rem;
-}
-
-ion-datetime::part(month-year-button) {
-  font-size: 1.8rem;
-  font-weight: 900;
-  color: var(--cf-app-text-color-default);
-}
-
-ion-datetime.accent::part(today) {
-  border: 1px solid var(--cf-app-color-accent);
-  color: var(--cf-app-color-accent);
-}
-
-ion-datetime.accent::part(active) {
-  background-color: var(--cf-app-color-accent);
-  color: var(--cf-app-text-color-light);
-}
-
-ion-datetime.success::part(today) {
-  border: 1px solid var(--cf-app-color-primary);
-  color: var(--cf-app-text-color-default);
-}
-
-ion-datetime.success::part(active) {
-  background-color: var(--cf-app-system-color-success);
-  color: var(--cf-app-text-color-light);
-}

package/src/lib/components/calendar/calendar.component.spec.ts

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

package/src/lib/components/calendar/calendar.component.ts

@@ -1,53 +0,0 @@
-/**
- * CareFirst Library Calendar
- *
- * @file          calendar.component
- * @description   Contains all the logic for generating a CareFirst Calendar
- * @author        Arno Jansen van Vuuren
- * @since         2023 - 12 - 01
- * @usage         <cf-calendar %displayTime% %color%="success | accent" %min% %max%></cf-calendar>
- */
-
-import { Component, EventEmitter, Input, Output, type OnChanges, type SimpleChanges } from '@angular/core';
-import dayjs from 'dayjs';
-//--- Utils
-import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
-
-@Component({
-  selector: 'cf-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrl: './calendar.component.scss',
-})
-export class CalendarComponent implements OnChanges {
-  @Input() displayTime?: boolean | string | undefined;
-  @Input() color?: 'success' | 'accent';
-  @Input() min?: string | undefined = undefined;
-  @Input() max?: string | undefined = undefined;
-  @Output() value = new EventEmitter<string>();
-
-  //--- Local variables
-  inputTime = false;
-  inputColor: typeof this.color = 'accent';
-
-  /**----------------------------------------------------------------
-   * @name          ngOnChanges
-   * @description   Update various values on component input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    //--- Display Time
-    this.inputTime = checkTruthAttribute(changes, 'displayTime', this.inputTime);
-    //--- Color
-    this.inputColor = validateStringValue<'success' | 'accent'>(changes, 'color', ['success', 'accent'], this.inputColor) || 'accent';
-  }
-
-  /**----------------------------------------------------------------
-   * @name          setValue
-   * @description   Emit the selected date value
-   * @param         {string | string[] | null | undefined} value
-   * @returns       {void}
-   */
-  setValue(value: string | string[] | null | undefined): void {
-    if (typeof value === 'string') this.value.emit(dayjs(value).format('YYYY-MM-DD' + (this.inputTime ? ' HH:mm' : '')));
-  }
-}

package/src/lib/components/chat-bubble/chat-bubble.component.html

@@ -1,9 +0,0 @@
-<div id="container" [ngClass]="inputType">
-  <div id="message">
-    <p class="body-extra-small">{{ inputDate }}</p>
-    <cf-spacer default="4"></cf-spacer>
-    <div id="bubble">
-      <p class="body-extra-small">{{ inputMessage }}</p>
-    </div>
-  </div>
-</div>