@carefirst/library 7.1.2 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carefirst/library",
-  "version": "7.1.2",
+  "version": "7.2.1",
   "author": "FCS Dev Team",
   "private": false,
   "peerDependencies": {

package/public/styles/app.scss

@@ -95,23 +95,6 @@ ion-col {
   font-size: 1.4rem;
 }
 
-/*===============================================
-================ Ion Input Labels ===============
-===============================================*/
-ion-input,
-ion-select,
-ion-textarea {
-  --placeholder-color: var(--cf-app-text-color-grey) !important;
-
-  .label-text {
-    color: var(--cf-app-text-color-grey) !important;
-  }
-}
-
-ion-select::part(label) {
-  color: var(--cf-app-text-color-grey) !important;
-}
-
 /*===============================================
 ================== CF Buttons  ==================
 ===============================================*/

package/public/styles/font.scss

@@ -99,10 +99,7 @@
 ================== Headers ======================
 ===============================================*/
 
-h1,
-h2,
-h3,
-h4 {
+@mixin test-base-header {
   line-height: auto;
   font-family: 'Mulish', sans-serif;
   font-style: normal;
@@ -110,6 +107,14 @@ h4 {
   margin: 0;
   display: inline-block;
   color: var(--cf-app-text-color-default);
+}
+
+h1,
+h2,
+h3,
+h4,
+[class^='text-base-header-'] {
+  @include test-base-header;
 
   &.light {
     color: var(--cf-app-text-color-light);
@@ -133,38 +138,46 @@ h4 {
 }
 
 /*================== Mobile ==================*/
-h1 {
+h1,
+.text-header-1 {
   font-size: 4.2rem;
 }
 
-h2 {
+h2,
+.text-header-2 {
   font-size: 3.6rem;
 }
 
-h3 {
+h3,
+.text-header-3 {
   font-size: 2.8rem;
 }
 
-h4 {
+h4,
+.text-header-4 {
   font-size: 1.8rem;
 }
 
 /*================== Desktop ==================*/
 
 @media (min-width: breakpoint.$cf-screen-breakpoint) {
-  h1 {
+  h1,
+  .text-header-1 {
     font-size: 6.4rem;
   }
 
-  h2 {
+  h2,
+  .text-header-2 {
     font-size: 4.8rem;
   }
 
-  h3 {
+  h3,
+  .text-header-3 {
     font-size: 3.6rem;
   }
 
-  h4 {
+  h4,
+  .text-header-4 {
     font-size: 2.8rem;
   }
 }
@@ -319,3 +332,62 @@ ion-button[class^='cf-button-'].text-large,
     @include button-text-base;
   }
 }
+
+/*===============================================
+===================== Forms =====================
+===============================================*/
+
+@mixin form-text-base {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 1.6rem !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  color: var(--cf-app-text-color-default);
+}
+
+.cf-form-text-small {
+  @include form-text-base;
+  font-size: 1.2rem !important;
+  line-height: 16px;
+}
+
+.cf-form-text-standard {
+  @include form-text-base;
+  font-size: 1.6rem !important;
+}
+
+ion-input,
+ion-textarea,
+ion-select {
+  @extend .cf-form-text-standard;
+
+  text-align: start;
+  --border-radius: 8px !important; //--- important overrides the fill option
+  --highlight-color-focused: var(--cf-app-color-primary);
+  --highlight-color-invalid: var(--cf-app-system-color-error-100) !important;
+  --highlight-color-valid: var(--cf-app-color-primary);
+  --placeholder-color: var(--cf-app-text-color-grey);
+
+  .label-text {
+    color: var(--cf-app-text-color-grey);
+  }
+
+  &.error,
+  &.ion-invalid.ion-touched {
+    --border-color: var(--cf-app-system-color-error-100) !important;
+    --highlight-color-focused: var(--cf-app-system-color-error-100) !important;
+    --highlight-color-valid: var(--cf-app-system-color-error-100) !important;
+    color: var(--cf-app-system-color-error-100) !important;
+
+    .label-text {
+      color: var(--cf-app-system-color-error-100) !important;
+    }
+  }
+}
+
+ion-select {
+  color: var(--cf-app-text-color-grey);
+  &.error::part(label) {
+    color: var(--cf-app-system-color-error-100);
+  }
+}

package/types/carefirst-library.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnChanges, EventEmitter, SimpleChanges, TemplateRef, Renderer2, ViewContainerRef, ElementRef, OnInit } from '@angular/core';
 import { IonContentCustomEvent, ScrollDetail } from '@ionic/core';
 import * as i23 from '@ionic/angular';
-import { IonPopover, IonInput, InputCustomEvent } from '@ionic/angular';
+import { IonPopover, IonInput, ViewDidEnter, ViewWillLeave, InputCustomEvent } from '@ionic/angular';
 import * as i25 from '@angular/forms';
 import { ValidatorFn, FormGroup, FormControl } from '@angular/forms';
 import { BehaviorSubject, Subscription } from 'rxjs';
@@ -93,7 +93,6 @@ declare class ButtonComponent implements OnChanges {
     emojiEnd?: EmojisT | undefined;
     loading?: boolean | string | undefined;
     loadingText?: string;
-    primaryColorSpinner?: boolean | string | undefined;
     customColor?: string | undefined;
     get parentEvents(): string;
     inputType: typeof this.type;
@@ -109,7 +108,6 @@ declare class ButtonComponent implements OnChanges {
     inputEmojiStart: typeof this.emojiStart | undefined;
     inputEmojiEnd: typeof this.emojiEnd | undefined;
     inputLoading: boolean;
-    inputPrimaryColorSpinner: boolean;
     inputCustomColor: string;
     /**----------------------------------------------------------------
      * @name          ngOnChanges
@@ -125,7 +123,7 @@ declare class ButtonComponent implements OnChanges {
      */
     checkCustomColor(color: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "cf-btn", never, { "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "alert": { "alias": "alert"; "required": false; }; "action": { "alias": "action"; "required": false; }; "white": { "alias": "white"; "required": false; }; "snug": { "alias": "snug"; "required": false; }; "accent": { "alias": "accent"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "iconStart": { "alias": "iconStart"; "required": false; }; "iconEnd": { "alias": "iconEnd"; "required": false; }; "emojiStart": { "alias": "emojiStart"; "required": false; }; "emojiEnd": { "alias": "emojiEnd"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "primaryColorSpinner": { "alias": "primaryColorSpinner"; "required": false; }; "customColor": { "alias": "customColor"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "cf-btn", never, { "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "alert": { "alias": "alert"; "required": false; }; "action": { "alias": "action"; "required": false; }; "white": { "alias": "white"; "required": false; }; "snug": { "alias": "snug"; "required": false; }; "accent": { "alias": "accent"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "iconStart": { "alias": "iconStart"; "required": false; }; "iconEnd": { "alias": "iconEnd"; "required": false; }; "emojiStart": { "alias": "emojiStart"; "required": false; }; "emojiEnd": { "alias": "emojiEnd"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "customColor": { "alias": "customColor"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
 /**==============================================
@@ -853,40 +851,13 @@ declare class SpinnerComponent implements OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<SpinnerComponent, "cf-spinner", never, { "size": { "alias": "size"; "required": false; }; "primaryColor": { "alias": "primaryColor"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-/**==============================================
- * @interface     CfCodeInputVerificationStatusesT
- * @description   All available statuses for the verification code component
- */
-declare const cfCodeInputVerificationStatusesC: readonly ["initial", "invalid", "disabled", "processing"];
-type CfCodeInputVerificationStatusesT = (typeof cfCodeInputVerificationStatusesC)[number];
-/**==============================================
- * @interface     CfCodeInputUserFeedbackMessagesI
- * @description   Messages displayed to user when certain events occur
- */
-interface CfCodeInputUserFeedbackMessagesI {
-    initial?: string[];
-    standardResend?: string[];
-    limitReached?: string[];
-    error?: {
-        errorMessage?: string[];
-        resend?: string[];
-    };
-}
-
-type verificationCode_interface_d_CfCodeInputUserFeedbackMessagesI = CfCodeInputUserFeedbackMessagesI;
-type verificationCode_interface_d_CfCodeInputVerificationStatusesT = CfCodeInputVerificationStatusesT;
-declare namespace verificationCode_interface_d {
-  export type { verificationCode_interface_d_CfCodeInputUserFeedbackMessagesI as CfCodeInputUserFeedbackMessagesI, verificationCode_interface_d_CfCodeInputVerificationStatusesT as CfCodeInputVerificationStatusesT };
-}
-
-declare class VerificationCodeComponent implements OnChanges {
-    valueToVerify: string;
-    status: BehaviorSubject<CfCodeInputVerificationStatusesT>;
-    userFeedbackMessages?: CfCodeInputUserFeedbackMessagesI;
-    removeResendText?: boolean;
+declare class VerificationCodeComponent implements OnInit, OnChanges, ViewDidEnter, ViewWillLeave {
+    valueToVerify: i0.InputSignal<string>;
+    status: i0.InputSignal<BehaviorSubject<"disabled" | "initial" | "invalid" | "resend" | "processing">>;
+    supportContact: i0.InputSignal<string>;
     commsSentCount: i0.ModelSignal<number>;
-    readonly outcome: EventEmitter<string>;
-    readonly resendClickEvent: EventEmitter<true>;
+    readonly outcome: i0.OutputEmitterRef<string>;
+    readonly resendClickEvent: i0.OutputEmitterRef<true>;
     myInput1?: IonInput;
     myInput2?: IonInput;
     myInput3?: IonInput;
@@ -894,13 +865,15 @@ declare class VerificationCodeComponent implements OnChanges {
     myInput5?: IonInput;
     validationCodeError: boolean;
     verificationCodeInputArr: (number | null)[];
-    loading: boolean;
-    commsInputCount: number;
-    commsInputCountExceeded: boolean;
+    codeInputCount: number;
+    codeInputCountExceeded: boolean;
     validationCode: string | undefined;
+    platform: 'mobile' | 'desktop';
     statusSub$?: Subscription;
+    get codeInputDisabled(): boolean;
+    private readonly devicePlatformService;
     /**----------------------------------------------------------------
-     * @name          ionViewWillEnter
+     * @name          ionViewDidEnter
      * @description   Update various values on component initialization
      * @returns       {void}
      */
@@ -911,6 +884,12 @@ declare class VerificationCodeComponent implements OnChanges {
      * @returns       {void}
      */
     ngOnChanges(changes: SimpleChanges): void;
+    /**----------------------------------------------------------------
+     * @name          ngOnInit
+     * @description   Initialize the component
+     * @returns       {void}
+     */
+    ngOnInit(): void;
     /**----------------------------------------------------------------
      * @name          resendVerificationCode
      * @description   Resend a verification code
@@ -952,7 +931,7 @@ declare class VerificationCodeComponent implements OnChanges {
      */
     ionViewWillLeave(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VerificationCodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VerificationCodeComponent, "cf-verification-code", never, { "valueToVerify": { "alias": "valueToVerify"; "required": false; }; "status": { "alias": "status"; "required": false; }; "userFeedbackMessages": { "alias": "userFeedbackMessages"; "required": false; }; "removeResendText": { "alias": "removeResendText"; "required": false; }; "commsSentCount": { "alias": "commsSentCount"; "required": false; "isSignal": true; }; }, { "commsSentCount": "commsSentCountChange"; "outcome": "outcome"; "resendClickEvent": "resendClickEvent"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VerificationCodeComponent, "cf-verification-code", never, { "valueToVerify": { "alias": "valueToVerify"; "required": true; "isSignal": true; }; "status": { "alias": "status"; "required": true; "isSignal": true; }; "supportContact": { "alias": "supportContact"; "required": true; "isSignal": true; }; "commsSentCount": { "alias": "commsSentCount"; "required": false; "isSignal": true; }; }, { "commsSentCount": "commsSentCountChange"; "outcome": "outcome"; "resendClickEvent": "resendClickEvent"; }, never, never, false, never>;
 }
 
 /**
@@ -1075,4 +1054,30 @@ declare class CFPFormValidators {
     static isValidCellNumber(dialCodes?: string[]): ValidatorFn;
 }
 
+/**==============================================
+ * @interface     CfCodeInputVerificationStatusesT
+ * @description   All available statuses for the verification code component
+ */
+declare const cfCodeInputVerificationStatusesC: readonly ["initial", "invalid", "resend", "processing", "disabled"];
+type CfCodeInputVerificationStatusesT = (typeof cfCodeInputVerificationStatusesC)[number];
+/**==============================================
+ * @interface     CfCodeInputUserFeedbackMessagesI
+ * @description   Messages displayed to user when certain events occur
+ */
+interface CfCodeInputUserFeedbackMessagesI {
+    initial?: string[];
+    standardResend?: string[];
+    limitReached?: string[];
+    error?: {
+        errorMessage?: string[];
+        resend?: string[];
+    };
+}
+
+type verificationCode_interface_d_CfCodeInputUserFeedbackMessagesI = CfCodeInputUserFeedbackMessagesI;
+type verificationCode_interface_d_CfCodeInputVerificationStatusesT = CfCodeInputVerificationStatusesT;
+declare namespace verificationCode_interface_d {
+  export type { verificationCode_interface_d_CfCodeInputUserFeedbackMessagesI as CfCodeInputUserFeedbackMessagesI, verificationCode_interface_d_CfCodeInputVerificationStatusesT as CfCodeInputVerificationStatusesT };
+}
+
 export { AlertComponent, BadgeComponent, ButtonComponent, ButtonLoaderDirective, alert_interface_d as CFAlertI, badge_interface_d as CFBadgeI, verificationCode_interface_d as CFCodeInputI, emoji_interface_d as CFEmojiI, icon_interface_d as CFIconI, input_interface_d as CFInputI, notification_interface_d as CFNotificationI, CFPFormValidators, spacer_interface_d as CFSpacerI, CalendarComponent, CareFirstLibraryModule, ChatBubbleComponent, EmojiComponent, FormInputComponent, FormInputCurrencyComponent, FormInputSearchComponent, FormInputSelectComponent, FormInputStringDateComponent, FormInputTextAreaComponent, FormValidationComponent, IconComponent, LogoComponent, MixPComponent, NotificationComponent, PageComponent, SpacerComponent, SpinnerComponent, VerificationCodeComponent };