@carefirst/library 1.3.8 → 1.3.10

package/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../.eslintrc.json",
+  "ignorePatterns": ["!**/*", "node_modules/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "cf",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "cf",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/@carefirst/library",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["public/**/*"]
+}

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@carefirst/library",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "author": "Jacques Francois Coetzee",
   "private": false,
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint"
+  },
   "peerDependencies": {
     "@angular/common": "^17.x",
     "@angular/core": "^17.x",
@@ -14,17 +21,7 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/carefirst-library.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/carefirst-library.mjs",
-      "esm": "./esm2022/carefirst-library.mjs",
-      "default": "./fesm2022/carefirst-library.mjs"
-    }
+  "devDependencies": {
+    "@ionic/angular": "^7.6.4"
   }
-}
+}

package/public/styles/colors.scss

@@ -14,7 +14,7 @@
   --cf-app-system-color-grey: #e1e1e1;
   --cf-app-system-color-outline: #bdbdbd;
   --cf-app-system-color-disabled: #d9d9d9de;
-  --cf-app-system-color-light-green: #e1eee4;
-  --cf-app-system-color-light-red: #f6d0d9;
+  --cf-app-system-color-light-success: #e1eee4;
+  --cf-app-system-color-light-error: #f6d0d9;
   --cf-app-system-color-light-warning: #fae0ab;
 }

package/public/styles/font.scss

@@ -198,7 +198,7 @@ p.body-standard {
 
 p.body-medium {
   font-size: 1.4rem;
-  line-height: 1.6rem;
+  line-height: 2rem;
 }
 
 p.body-small {
@@ -226,7 +226,7 @@ p.body-extra-extra-small {
 
   p.body-standard {
     font-size: 1.8rem;
-    line-height: 2.4rem;
+    line-height: 2.6rem;
   }
 
   p.body-medium {

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

@@ -0,0 +1,63 @@
+//--- Screen size breakpoint
+$desktop-breakpoint: 768px; //--- Same as ionic md breakpoint
+
+::ng-deep .care-first-alert {
+  .alert-wrapper {
+    padding: 1.6rem;
+    border-radius: 1.6rem;
+    background-color: var(--cf-app-background-light);
+
+    > * {
+      text-align: center;
+      padding: 0;
+    }
+    .alert-title {
+      font-weight: 900;
+      font-size: 1.8rem;
+      color: var(--cf-app-text-color-default);
+    }
+
+    .alert-message {
+      font-size: 1.4rem;
+      margin-top: 1.2rem;
+      color: var(--cf-app-text-color-default);
+    }
+
+    @media (min-width: $desktop-breakpoint) {
+      .alert-title {
+        font-size: 2.8rem;
+      }
+
+      .alert-message {
+        font-size: 1.8rem;
+      }
+    }
+
+    .alert-button-group {
+      margin-top: 1.6rem;
+      display: flex;
+      justify-content: center;
+      gap: 4rem;
+
+      @media (min-width: $desktop-breakpoint) {
+        gap: 2rem;
+      }
+    }
+
+    button.alert-button {
+      font-size: 1.6rem;
+      padding: 0.6rem 2rem;
+      margin: 0px;
+    }
+
+    button.alert-button.alert-button-cancel {
+      color: var(--cf-app-system-color-error);
+    }
+
+    button.alert-button.alert-button-confirm {
+      border-radius: 0.6rem;
+      background-color: var(--cf-app-color-primary);
+      color: var(--cf-app-text-color-light);
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+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();
+  });
+});