@carefirst/library 1.3.10 → 1.3.11

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

@@ -1,27 +0,0 @@
-//--- Screen size breakpoint
-$desktop-breakpoint: 768px; //--- Same as ionic md breakpoint
-
-/*===============================================
-============== Mobile Only Spacer ===============
-===============================================*/
-@media not (min-width: $desktop-breakpoint) {
-  div.mobile-only {
-    display: block;
-  }
-  div.desktop-only {
-    display: none;
-  }
-}
-
-/*===============================================
-============== Desktop Only Spacer ==============
-===============================================*/
-
-@media (min-width: $desktop-breakpoint) {
-  div.mobile-only {
-    display: none;
-  }
-  div.desktop-only {
-    display: block;
-  }
-}

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

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

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

@@ -1,43 +0,0 @@
-/**
- * CareFirst Library - Spacer
- *
- * @file          spacer.component
- * @description   Contains all the logic for generating a CareFirst Div Spacer
- * @author        Jacques Coetzee
- * @since         2023 - 11 - 07
- * @usage         <cf-spacer %default=""% %mobile=""% %desktop=""%>CONTENT</cf-spacer>
- */
-
-import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
-import { validateNumberValue } from '../../utils/attribute.util';
-import type { SpacerNumberT, SpacerStringT } from '../../interfaces/spacer.interface';
-
-@Component({
-  selector: 'cf-spacer',
-  templateUrl: './spacer.component.html',
-  styleUrls: ['./spacer.component.scss'],
-})
-export class SpacerComponent implements OnChanges {
-  @Input() default?: SpacerStringT | SpacerNumberT | undefined;
-  @Input() mobile?: SpacerStringT | SpacerNumberT | undefined;
-  @Input() desktop?: SpacerStringT | SpacerNumberT | undefined;
-
-  //--- Local variables
-  inputDefault: number | undefined = undefined;
-  inputMobile: number | undefined = undefined;
-  inputDesktop: number | undefined = undefined;
-
-  /**----------------------------------------------------------------
-   * @name          ngOnChanges
-   * @description   Update various values on input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    //--- Default
-    this.inputDefault = validateNumberValue(changes, 'default', this.inputDefault);
-    //--- Mobile
-    this.inputMobile = validateNumberValue(changes, 'mobile', this.inputMobile);
-    //--- Desktop
-    this.inputDesktop = validateNumberValue(changes, 'desktop', this.inputDesktop);
-  }
-}

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

@@ -1 +0,0 @@
-<div id="spinner" [style]="'font-size: ' + inputSize + 'px'"></div>

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

@@ -1,14 +0,0 @@
-#spinner {
-  width: 1em;
-  height: 1em;
-  border: 0.15em solid var(--cf-app-system-color-outline);
-  border-radius: 50%;
-  border-top-color: var(--cf-app-color-accent);
-  animation: spin 1s linear infinite;
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}

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

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

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

@@ -1,33 +0,0 @@
-/**
- * CareFirst Library - Spinner
- *
- * @file          spinner.component
- * @description   Contains all the logic for generating a CareFirst Spinner
- * @author        Jacques Coetzee
- * @since         2024 - 02 - 23
- */
-
-import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
-import { validateNumberValue } from '../../utils/attribute.util';
-
-@Component({
-  selector: 'cf-spinner',
-  templateUrl: './spinner.component.html',
-  styleUrl: './spinner.component.scss',
-})
-export class SpinnerComponent implements OnChanges {
-  @Input() size: number | string = 20;
-
-  //--- Local variables
-  inputSize: number = 20;
-
-  /**----------------------------------------------------------------
-   * @name          ngOnChanges
-   * @description   Update various values on input changes
-   * @returns       {void}
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    //--- Size
-    this.inputSize = validateNumberValue(changes, 'size', this.inputSize) || this.inputSize;
-  }
-}

package/src/lib/directives/button-loader.directive.spec.ts

@@ -1,8 +0,0 @@
-import { ButtonLoaderDirective } from './button-loader.directive';
-
-describe('ButtonLoaderDirective', () => {
-  it('should create an instance', () => {
-    const directive = new ButtonLoaderDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/lib/directives/button-loader.directive.ts

@@ -1,77 +0,0 @@
-/**
- * Button Loader Directive
- *
- * @file          button-loader.directive
- * @description   HTML directive used to disable a button while loading
- * @author        Jacques Coetzee
- * @since         2022 - 07 - 22
- * @usage         Add to any HTML tag: *cfButtonLoader="true"
- */
-
-import { Component, Directive, Input, Renderer2, TemplateRef, ViewContainerRef, ElementRef } from '@angular/core';
-
-@Directive({
-  selector: '[cfButtonLoader]',
-})
-export class ButtonLoaderDirective {
-  /**----------------------------------------------------------------
-   * @name  Constructor
-   */
-  constructor(
-    private templateRef: TemplateRef<HTMLElement>,
-    private renderer: Renderer2,
-    private viewContainer: ViewContainerRef,
-    private elementRef: ElementRef<HTMLElement>
-  ) {}
-
-  /**----------------------------------------------------------------
-   * @name          cfButtonLoader
-   * @description   Displays a loading overlay and disables a button
-   * @param         {boolean} loading
-   */
-  @Input() set cfButtonLoader(loading: boolean) {
-    //--- Clear HTML container
-    this.viewContainer.clear();
-    //--- Reattach element as child
-    this.viewContainer.createEmbeddedView(this.templateRef);
-    if (loading) {
-      //--- Add loading spinner
-      this.viewContainer.createComponent(SpinnerComponent);
-      //--- Set parent container position to relative
-      this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
-    }
-  }
-}
-
-/**==================================================================
- * @class         SpinnerComponent
- * @description   The spinner component used to render an ion-spinner on the button
- * @author        Jacques Coetzee
- * @since         2022 - 07 - 22
- * ===== */
-
-@Component({
-  template: '<div class="loading-spinner"></div>',
-  styles: [
-    `
-      @keyframes spinner {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      .loading-spinner {
-        position: absolute;
-        top: calc(50% - 1em);
-        left: calc(50% - 1em);
-        width: 2em;
-        height: 2em;
-        border-radius: 50%;
-        border: 3px solid var(--cf-app-system-color-outline);
-        border-top-color: var(--cf-app-color-accent);
-        animation: spinner 1s linear infinite;
-      }
-    `,
-  ],
-})
-class SpinnerComponent {}

package/src/lib/interfaces/alert.interface.ts

@@ -1,20 +0,0 @@
-/**==============================================
- * @interface     AlertDataI
- * @description   Defines the properties needed to show a care first alert
- */
-export interface AlertDataI {
-  heading: string;
-  message: string;
-  alertIdentifier: string | number;
-  buttonTrue?: string; //--- Default to 'OK'
-  buttonFalse?: string; //--- Default to 'Cancel'
-}
-
-/**==============================================
- * @interface     AlertEventI
- * @description   Defines the structure of the returned event from the alert when a button is clicked
- */
-export interface AlertEventI {
-  identifier: string | number;
-  status: boolean;
-}

package/src/lib/interfaces/icon.interface.ts

@@ -1,62 +0,0 @@
-/**==============================================
- * @interface     IconsT
- * @description   Short description
- */
-export const iconsC = [
-  'home',
-  'cog',
-  'profile',
-  'scan',
-  'person',
-  'appointment',
-  'clock',
-  'calendar',
-  'email',
-  'phone',
-  'sign-out',
-  'sign-in',
-  'close',
-  'check-mark',
-  'rating-star-blank',
-  'rating-star-filled',
-  'back-arrow',
-  'lock',
-  'show-password',
-  'hide-password',
-  'circle-check',
-  'circle-alert',
-  'direction-switch',
-  'chat-bubbles',
-  'phone-down',
-  'mic',
-  'no-mic',
-  'button-forward-arrow',
-  'button-check-box',
-  'social-media-whatsapp',
-  'social-media-facebook',
-  'social-media-linkedin',
-  'social-media-instagram',
-  'social-media-google-mail',
-  'instant-video-service',
-  'instant-telephonic-service',
-  'scheduled-video-service',
-  'scheduled-telephonic-service',
-  'vital-scan-service',
-  'open-back-arrow',
-  'open-forward-arrow',
-  'open-up-arrow',
-  'open-down-arrow',
-  'single-document',
-  'lightning',
-  'microsoft-365',
-  'user-dependent',
-  'plus',
-] as const;
-export type IconsT = (typeof iconsC)[number];
-
-/**==============================================
- * @interface     IconColorT
- * @description   All available colors in CSS classes
- */
-export const iconColorC = ['primary', 'secondary', 'success', 'warning', 'error', 'white', 'accent'] as const;
-export type IconColorT = (typeof iconColorC)[number];

package/src/lib/interfaces/input.interface.ts

@@ -1,8 +0,0 @@
-/**==============================================
- * @interface     FormInputSelectOptionsI
- * @description   Structure for the input select options
- */
-export interface FormInputSelectOptionsI<T> {
-  displayName: string | number;
-  value: T;
-}

package/src/lib/interfaces/notification.interface.ts

@@ -1,15 +0,0 @@
-/**==============================================
- * @interface     NotificationPayloadI
- * @description   Setup needed to show a notification
- */
-export interface NotificationPayloadI {
-  heading: string;
-  status: 'success' | 'warning' | 'error'; //--- success=green, warning=yellow, error=red
-  message?: string;
-  canClose?: true; //--- Adds a clickable x to hide notification
-  button?: {
-    buttonText: string;
-    buttonClickIdentifier: string | number; //--- user set identifier used to know witch notifications button has been clicked
-    buttonHeading?: string;
-  };
-}

package/src/lib/interfaces/spacer.interface.ts

@@ -1,6 +0,0 @@
-/**==============================================
- * @description   Available Spacer Values
- */
-export const spacerNumberArray = [4, 8, 12, 16, 24, 32, 38, 48, 72] as const;
-export type SpacerNumberT = (typeof spacerNumberArray)[number];
-export type SpacerStringT = `${SpacerNumberT}`;

package/src/lib/library.module.ts

@@ -1,66 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-//--- Modules
-import { IonicModule } from '@ionic/angular';
-import { ReactiveFormsModule } from '@angular/forms';
-//--- Directives
-import { ButtonLoaderDirective } from './directives/button-loader.directive';
-//--- Components
-import { PageComponent } from './components/page/page.component';
-import { ButtonComponent } from './components/button/button.component';
-import { SpacerComponent } from './components/spacer/spacer.component';
-import { IconComponent } from './components/icon/icon.component';
-import { NotificationComponent } from './components/notification/notification.component';
-import { AlertComponent } from './components/alert/alert.component';
-import { LogoComponent } from './components/logo/logo.component';
-import { CalendarComponent } from './components/calendar/calendar.component';
-import { FormValidationComponent } from './components/form-validation/form-validation.component';
-import { FormInputComponent } from './components/form-input/form-input.component';
-import { FormInputSelectComponent } from './components/form-input-select/form-input-select.component';
-import { FormInputTextAreaComponent } from './components/form-input-text-area/form-input-text-area.component';
-import { ChatBubbleComponent } from './components/chat-bubble/chat-bubble.component';
-import { BadgeComponent } from './components/badge/badge.component';
-import { SpinnerComponent } from './components/spinner/spinner.component';
-
-@NgModule({
-  declarations: [
-    PageComponent,
-    ButtonComponent,
-    SpacerComponent,
-    IconComponent,
-    ButtonLoaderDirective,
-    NotificationComponent,
-    AlertComponent,
-    LogoComponent,
-    CalendarComponent,
-    FormValidationComponent,
-    FormInputComponent,
-    FormInputSelectComponent,
-    FormInputTextAreaComponent,
-    ChatBubbleComponent,
-    BadgeComponent,
-    SpinnerComponent,
-  ],
-
-  imports: [IonicModule, CommonModule, ReactiveFormsModule],
-  exports: [
-    PageComponent,
-    ButtonComponent,
-    SpacerComponent,
-    IconComponent,
-    ButtonLoaderDirective,
-    NotificationComponent,
-    AlertComponent,
-    LogoComponent,
-    CalendarComponent,
-    FormValidationComponent,
-    FormInputComponent,
-    FormInputSelectComponent,
-    FormInputTextAreaComponent,
-    ChatBubbleComponent,
-    BadgeComponent,
-    SpinnerComponent,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class CareFirstLibraryModule {}

package/src/lib/utils/attribute.util.ts

@@ -1,66 +0,0 @@
-/**
- * Attribute Utility
- *
- * @file          attribute.util
- * @description   Contains various utility functions pertaining to attribute handling
- * @author        Jacques Coetzee
- * @since         2023 - 11 - 08
- */
-
-import type { SimpleChanges } from '@angular/core';
-
-/**----------------------------------------------------------------
- * @name          checkTruthAttribute
- * @description   Check whether an attribute is either just available or specifically set to boolean value
- * @param         {SimpleChanges} changes
- * @param         {string} attribute
- * @param         {boolean} curVal
- * @returns       {boolean}
- */
-export function checkTruthAttribute(changes: SimpleChanges, attribute: string, curVal: boolean): boolean {
-  if (!(attribute in changes)) return curVal;
-  const valueChanged = changes[attribute]?.currentValue;
-  if (typeof valueChanged === 'boolean') {
-    return valueChanged;
-  } else if (typeof valueChanged === 'string' && ['true', ''].includes(valueChanged)) {
-    return true;
-  }
-  return false;
-}
-
-/**----------------------------------------------------------------
- * @name          validateStringValue
- * @description   Validate whether an attribute is set and contains a specific string option
- * @param         {SimpleChanges} changes
- * @param         {string} attribute
- * @param         {string[]} options
- * @param         {T | undefined} curVal
- * @returns       {string | undefined} Returns correct string value or undefined if either not available or not in list
- */
-export function validateStringValue<T>(changes: SimpleChanges, attribute: string, options: T[], curVal: T | undefined): T | undefined {
-  if (!(attribute in changes)) return curVal;
-  const valueChanged = changes[attribute]?.currentValue;
-  if (valueChanged && options.includes(valueChanged)) {
-    return valueChanged as T;
-  }
-  return undefined;
-}
-
-/**----------------------------------------------------------------
- * @name          validateNumberValue
- * @description   Validate whether an attribute is set and contains a specific number value
- * @param         {SimpleChanges} changes
- * @param         {string} attribute
- * @param         {number | undefined} curVal
- * @returns       {number | undefined} Returns correct number value or undefined if either not available or not a number
- */
-export function validateNumberValue(changes: SimpleChanges, attribute: string, curVal: number | undefined): number | undefined {
-  if (!(attribute in changes)) return curVal;
-  const valueChanged = changes[attribute]?.currentValue;
-  if (typeof valueChanged === 'number' && valueChanged >= 0) {
-    return valueChanged;
-  } else if (typeof valueChanged === 'string' && +valueChanged >= 0) {
-    return +valueChanged;
-  }
-  return undefined;
-}