@carefirst/library 1.3.9 → 1.3.10

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

@@ -0,0 +1,27 @@
+//--- 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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,43 @@
+/**
+ * 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

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

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

@@ -0,0 +1,14 @@
+#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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,33 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,77 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+/**==============================================
+ * @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

@@ -0,0 +1,62 @@
+/**==============================================
+ * @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

@@ -0,0 +1,8 @@
+/**==============================================
+ * @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

@@ -0,0 +1,15 @@
+/**==============================================
+ * @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

@@ -0,0 +1,6 @@
+/**==============================================
+ * @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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,66 @@
+/**
+ * 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;
+}