@sarasanalytics-com/design-system 0.0.49 → 0.0.51

package/interfaces/scrolling-card-interface.d.ts

@@ -0,0 +1,15 @@
+export interface IScrollingCardData {
+    title: string;
+    body: string;
+    icon?: string;
+    iconSize?: string;
+    customWrapperClass?: string;
+    width?: string;
+    column?: string;
+    showCardBody?: boolean;
+    showCardHeader?: boolean;
+    subtitle?: string;
+    logoIcon?: string;
+    avatar?: string;
+    avatarIcon?: string;
+}

package/lib/scrolling-cards/scrolling-cards.component.d.ts

@@ -1,27 +1,13 @@
 import { OnInit, AfterViewInit, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { IScrollingCardData } from '../../interfaces/scrolling-card-interface';
 import * as i0 from "@angular/core";
-interface CardData {
-    title: string;
-    body: string;
-    icon?: string;
-    iconSize?: string;
-    customWrapperClass?: string;
-    width?: string;
-    column?: string;
-    showCardBody?: boolean;
-    showCardHeader?: boolean;
-    subtitle?: string;
-    logoIcon?: string;
-    avatar?: string;
-    avatarIcon?: string;
-}
 export declare class ScrollingCardsComponent implements OnInit, AfterViewInit {
     private cdr;
-    cards: CardData[];
+    cards: IScrollingCardData[];
     duration: number;
     direction: 'up' | 'down' | 'left' | 'right';
     cardContainer: ElementRef;
-    displayCards: CardData[];
+    displayCards: IScrollingCardData[];
     animationPaused: boolean;
     isVertical: boolean;
     constructor(cdr: ChangeDetectorRef);
@@ -33,4 +19,3 @@ export declare class ScrollingCardsComponent implements OnInit, AfterViewInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollingCardsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ScrollingCardsComponent, "sa-scrolling-cards", never, { "cards": { "alias": "cards"; "required": true; }; "duration": { "alias": "duration"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; }, {}, never, never, true, never>;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarasanalytics-com/design-system",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "peerDependencies": {
     "@angular/common": "^17.2.0",
     "@angular/core": "^17.2.0"
@@ -22,4 +22,4 @@
       "default": "./fesm2022/sarasanalytics-com-design-system.mjs"
     }
   }
-}
+}

package/public-api.d.ts

@@ -23,6 +23,7 @@ export * from './lib/icon/icon.component';
 export * from './lib/left-nav/left-nav.component';
 export * from './lib/list/list.component';
 export * from './lib/message-banner/message-banner.component';
+export * from './lib/message-banner-v2/message-banner-v2.component';
 export * from './lib/page-layout/page-layout.component';
 export * from './lib/progress-bar/progress-bar.component';
 export * from './lib/radio-button/radio-button.component';
@@ -32,7 +33,6 @@ export * from './lib/stepper/stepper.component';
 export * from './lib/tabs/tabs.component';
 export * from './lib/toast/toast.component';
 export * from './lib/tool-tip/tool-tip.component';
-export * from './lib/message-banner-v2/message-banner-v2.component';
 export * from './lib/component-library.service';
 export * from './lib/icon/icon.service';
 export * from './interfaces/avatar-interface';
@@ -44,6 +44,7 @@ export * from './interfaces/guide-card-interface';
 export * from './interfaces/icon-interface';
 export * from './interfaces/message-banner';
 export * from './interfaces/option-interface';
+export * from './interfaces/scrolling-card-interface';
 export * from './interfaces/select-interface';
 export * from './interfaces/tab-interface';
 export * from './interfaces/toast-interface';

package/styles/styles.css

@@ -0,0 +1,532 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+:root {
+  --font: 'Roboto';
+  --font-roboto: 'Roboto';
+  --font-inter: 'Inter';
+  --font-poppins: "Poppins";
+  --font-helvetica: "Helvetica";
+  --small-2px: 2px;
+  --small-4px: 4px;
+  --small-6px: 6px;
+  --small-8px: 8px;
+  --small-12px: 12px;
+  --small-14px: 14px;
+  --small-16px: 16px;
+  --small-18px: 18px;
+  --medium-20px: 20px;
+  --medium-22px: 22px;
+  --medium-24px: 24px;
+  --medium-28px: 28px;
+  --medium-32px: 32px;
+  --medium-36px: 36px;
+  --large-40px: 40px;
+  --large-42px: 42px;
+  --large-44px: 44px;
+  --large-48px: 48px;
+  --large-56px: 56px;
+  --large-64px: 64px;
+  --form-email-icon-color: #33961F;
+}
+
+.insights-theme {
+  --primary-50: #EAFFFD;
+  --primary-100: #CAFFFB;
+  --primary-200: #9CFFFA;
+  --primary-300: #00DDEA;
+  --primary-400: #00AFC4;
+  --primary-500: #008597;
+  --primary-600: #0B6E7F;
+  --primary-700: #0E5B6B;
+  --primary-800: #023D4A;
+  --primary-900: #01303A;
+  --secondary-50: #FFF3EB;
+  --secondary-100: #FFD8C0;
+  --secondary-200: #FFC6A2;
+  --secondary-300: #FEAB78;
+  --secondary-400: #FE9B5D;
+  --secondary-500: #FE8235;
+  --secondary-600: #E77630;
+  --secondary-700: #B45C26;
+  --secondary-800: #8C481D;
+  --secondary-900: #6B3716;
+  --grey-50: #E9EAEB;
+  --grey-100: #BAC0C1;
+  --grey-200: #98A1A3;
+  --grey-300: #697779;
+  --grey-400: #4C5C5F;
+  --grey-500: #1F3437;
+  --grey-600: #1C2F32;
+  --grey-700: #162527;
+  --grey-800: #111C1E;
+  --grey-900: #0D1517;
+  --semantic-success-50: #EBF5E9;
+  --semantic-success-100: #C0DEBA;
+  --semantic-success-200: #A1CF98;
+  --semantic-success-300: #76B969;
+  --semantic-success-400: #5CAB4C;
+  --semantic-success-500: #33961F;
+  --semantic-success-600: #2E891C;
+  --semantic-success-700: #246B16;
+  --semantic-success-800: #1C5311;
+  --semantic-success-900: #153F0D;
+  --semantic-error-50: #F8E9E9;
+  --semantic-error-100: #EBBCB9;
+  --semantic-error-200: #E19C98;
+  --semantic-error-300: #D36E68;
+  --semantic-error-400: #CA524B;
+  --semantic-error-500: #BD271E;
+  --semantic-error-600: #AC231B;
+  --semantic-error-700: #861C15;
+  --semantic-error-800: #681511;
+  --semantic-error-900: #4F100D;
+  --semantic-purple-50: #F3EFFD;
+  --semantic-purple-100: #D8CCFA;
+  --semantic-purple-200: #C6B4F7;
+  --semantic-purple-300: #AB92F4;
+  --semantic-purple-400: #9B7DF1;
+  --semantic-purple-500: #815BED;
+  --semantic-purple-600: #7654D9;
+  --semantic-purple-700: #5C41A9;
+  --semantic-purple-800: #483383;
+  --semantic-purple-900: #372764;
+  --semantic-yellow-50: #FEF6E6;
+  --semantic-yellow-100: #FBE2B3;
+  --semantic-yellow-200: #F9D58E;
+  --semantic-yellow-300: #F6C15A;
+  --semantic-yellow-400: #F5B53A;
+  --text-highemphasis: #1B1F20;
+  --text-mediumemphasis: #697779;
+  --text-lowemphasis: #98A2A3;
+  --text-white: #FFFFFF;
+  --text-primary: #008597;
+  --text-success: #33961F;
+  --text-error: #BD271E;
+  --icon-white: #FFFFFF;
+  --semantic-yellow-500: #F2A209;
+  --semantic-yellow-600: #DC9408;
+  --semantic-yellow-700: #AC7406;
+  --semantic-yellow-800: #855A05;
+  --semantic-yellow-900: #664404;
+  --structural-white: #FFFFFF;
+  --icon-grey1: #757575;
+  --structural-primarytint: #F5F9FA;
+  --structural-neutral1: #F9F9F9;
+  --structural-neutral2: #FFFAFA;
+  --structural-neutral3: #FAFAFA;
+  --logo-color-primary: #008597;
+  --logo-color-secondary: #9CFFFA;
+}
+
+.saras-theme {
+  --primary-50: #E8F1FC;
+  --primary-100: #B8D4F7;
+  --primary-200: #96C0F3;
+  --primary-300: #66A2ED;
+  --primary-400: #4992E9;
+  --primary-500: #1B77E4;
+  --primary-600: #196CCF;
+  --primary-700: #1354A2;
+  --primary-800: #0F417D;
+  --primary-900: #0B3160;
+  --secondary-50: #FFF3EB;
+  --secondary-100: #FFD8C0;
+  --secondary-200: #FFC6A2;
+  --secondary-300: #FEAB78;
+  --secondary-400: #FE9B5D;
+  --secondary-500: #FE8235;
+  --secondary-600: #E77630;
+  --secondary-700: #B45C26;
+  --secondary-800: #8C481D;
+  --secondary-900: #6B3716;
+  --grey-50: #E9E9EB;
+  --grey-100: #BABDC1;
+  --grey-200: #989CA3;
+  --grey-300: #697079;
+  --grey-400: #4C545F;
+  --grey-500: #1F2937;
+  --grey-600: #1C2532;
+  --grey-700: #161D27;
+  --grey-800: #11161E;
+  --grey-900: #0D1117;
+  --semantic-success-50: #EBF5E9;
+  --semantic-success-100: #C0DEBA;
+  --semantic-success-200: #A1CF98;
+  --semantic-success-300: #76B969;
+  --semantic-success-400: #5CAB4C;
+  --semantic-success-500: #33961F;
+  --semantic-success-600: #2E891C;
+  --semantic-success-700: #246B16;
+  --semantic-success-800: #1C5311;
+  --semantic-success-900: #153F0D;
+  --semantic-error-50: #F8E9E9;
+  --semantic-error-100: #EBBCB9;
+  --semantic-error-200: #E19C98;
+  --semantic-error-300: #D36E68;
+  --semantic-error-400: #CA524B;
+  --semantic-error-500: #BD271E;
+  --semantic-error-600: #AC231B;
+  --semantic-error-700: #861C15;
+  --semantic-error-800: #681511;
+  --semantic-error-900: #4F100D;
+  --semantic-purple-50: #F3EFFD;
+  --semantic-purple-100: #D8CCFA;
+  --semantic-purple-200: #C6B4F7;
+  --semantic-purple-300: #AB92F4;
+  --semantic-purple-400: #9B7DF1;
+  --semantic-purple-500: #815BED;
+  --semantic-purple-600: #7654D9;
+  --semantic-purple-700: #5C41A9;
+  --semantic-purple-800: #483383;
+  --semantic-purple-900: #372764;
+  --semantic-yellow-50: #FEF6E6;
+  --semantic-yellow-100: #FBE2B3;
+  --semantic-yellow-200: #F9D58E;
+  --semantic-yellow-300: #F6C15A;
+  --semantic-yellow-400: #F5B53A;
+  --text-highemphasis: #1B1D20;
+  --text-mediumemphasis: #697079;
+  --text-lowemphasis: #989CA3;
+  --text-white: #FFFFFF;
+  --text-primary: #1B77E4;
+  --text-success: #33961F;
+  --text-error: #BD271E;
+  --icon-white: #FFFFFF;
+  --semantic-yellow-500: #F2A209;
+  --semantic-yellow-600: #DC9408;
+  --semantic-yellow-700: #AC7406;
+  --semantic-yellow-800: #855A05;
+  --semantic-yellow-900: #664404;
+  --structural-white: #FFFFFF;
+  --icon-grey1: #757575;
+  --structural-primarytint: #FAFCFF;
+  --structural-neutral1: #F9F9F9;
+  --structural-neutral2: #FFFAFA;
+  --structural-neutral3: #FAFAFA;
+  --logo-color-primary: #1B77E4;
+  --logo-color-secondary: #96C0F3;
+}
+
+.purple-theme {
+  --primary-50: #F4EBFF;
+  --primary-100: #E9D7FE;
+  --primary-200: #D6BBFB;
+  --primary-300: #B692F6;
+  --primary-400: #9E77ED;
+  --primary-500: #7F56D9;
+  --primary-600: #53389E;
+  --primary-700: #53389E;
+  --primary-800: #42307D;
+  --primary-900: #2C1C5F;
+  --secondary-50: #FFF3EB;
+  --secondary-100: #FFD8C0;
+  --secondary-200: #FFC6A2;
+  --secondary-300: #FEAB78;
+  --secondary-400: #FE9B5D;
+  --secondary-500: #FE8235;
+  --secondary-600: #E77630;
+  --secondary-700: #B45C26;
+  --secondary-800: #8C481D;
+  --secondary-900: #6B3716;
+  --grey-50: #F2F4F7;
+  --grey-100: #EAECF0;
+  --grey-200: #D0D5DD;
+  --grey-300: #98A2B3;
+  --grey-400: #475467;
+  --grey-500: #344054;
+  --grey-600: #1D2939;
+  --grey-700: #1D2939;
+  --grey-800: #101828;
+  --grey-900: #0C111D;
+  --semantic-success-50: #EBF5E9;
+  --semantic-success-100: #C0DEBA;
+  --semantic-success-200: #A1CF98;
+  --semantic-success-300: #76B969;
+  --semantic-success-400: #5CAB4C;
+  --semantic-success-500: #33961F;
+  --semantic-success-600: #2E891C;
+  --semantic-success-700: #246B16;
+  --semantic-success-800: #1C5311;
+  --semantic-success-900: #153F0D;
+  --semantic-error-50: #F8E9E9;
+  --semantic-error-100: #EBBCB9;
+  --semantic-error-200: #E19C98;
+  --semantic-error-300: #D36E68;
+  --semantic-error-400: #CA524B;
+  --semantic-error-500: #BD271E;
+  --semantic-error-600: #AC231B;
+  --semantic-error-700: #861C15;
+  --semantic-error-800: #681511;
+  --semantic-error-900: #4F100D;
+  --semantic-purple-50: #F3EFFD;
+  --semantic-purple-100: #D8CCFA;
+  --semantic-purple-200: #C6B4F7;
+  --semantic-purple-300: #AB92F4;
+  --semantic-purple-400: #9B7DF1;
+  --semantic-purple-500: #815BED;
+  --semantic-purple-600: #7654D9;
+  --semantic-purple-700: #5C41A9;
+  --semantic-purple-800: #483383;
+  --semantic-purple-900: #372764;
+  --semantic-yellow-50: #FEF6E6;
+  --semantic-yellow-100: #FBE2B3;
+  --semantic-yellow-200: #F9D58E;
+  --semantic-yellow-300: #F6C15A;
+  --semantic-yellow-400: #F5B53A;
+  --text-highemphasis: #1C1B20;
+  --text-mediumemphasis: #6D6979;
+  --text-lowemphasis: #9A98A3;
+  --text-white: #FFFFFF;
+  --text-primary: #815BED;
+  --text-success: #33961F;
+  --text-error: #BD271E;
+  --icon-white: #FFFFFF;
+  --semantic-yellow-500: #F2A209;
+  --semantic-yellow-600: #DC9408;
+  --semantic-yellow-700: #AC7406;
+  --semantic-yellow-800: #855A05;
+  --semantic-yellow-900: #664404;
+  --structural-white: #FFFFFF;
+  --icon-grey1: #757575;
+  --structural-primarytint: #FBFAFF;
+  --structural-neutral1: #F9F9F9;
+  --structural-neutral2: #FFFAFA;
+  --structural-neutral3: #FAFAFA;
+  --logo-color-primary: #7F56D9;
+  --logo-color-secondary: #D6BBFB;
+}
+
+.holiday-theme {
+  /* Primary (Christmas Green) */
+  --primary-50: #E8F5ED;
+  --primary-100: #C2E3CF;
+  --primary-200: #9AD2B1;
+  --primary-300: #72C093;
+  --primary-400: #4AAE75;
+  --primary-500: #165B33;  /* Traditional Christmas Green */
+  --primary-600: #14532E;
+  --primary-700: #104026;
+  --primary-800: #0C2D1C;
+  --primary-900: #081912;
+
+  /* Secondary (Christmas Red) */
+  --secondary-50: #FEE7E7;
+  --secondary-100: #FCC8C8;
+  --secondary-200: #FAA9A9;
+  --secondary-300: #F78A8A;
+  --secondary-400: #F56B6B;
+  --secondary-500: #CC0000;  /* Traditional Christmas Red */
+  --secondary-600: #B80000;
+  --secondary-700: #8F0000;
+  --secondary-800: #660000;
+  --secondary-900: #3D0000;
+
+  /* Grey Scale */
+  --grey-50: #F8FAFC;
+  --grey-100: #E8EDF3;
+  --grey-200: #D1DBE8;
+  --grey-300: #B3C2D4;
+  --grey-400: #8496AF;
+  --grey-500: #556B8C;
+  --grey-600: #405169;
+  --grey-700: #2C3A4F;
+  --grey-800: #1A2435;
+  --grey-900: #0B1219;
+
+  /* Semantic Colors */
+  --semantic-success-50: #E6F4E6;
+  --semantic-success-500: #2D5A27;  /* Holly Green */
+  --semantic-success-900: #1C3619;
+
+  --semantic-error-50: #FFEAEA;
+  --semantic-error-500: #CC0000;  /* Bright Red */
+  --semantic-error-900: #660000;
+
+  /* Accent Colors */
+  --semantic-gold-50: #FFF8E6;
+  --semantic-gold-500: #FFD700;  /* Christmas Gold */
+  --semantic-gold-900: #665600;
+
+  /* Text Colors */
+  --text-highemphasis: #0B1219;
+  --text-mediumemphasis: #556B8C;
+  --text-lowemphasis: #8496AF;
+  --text-white: #FFFFFF;
+  --text-primary: #165B33;
+  --text-success: #2D5A27;
+  --text-error: #CC0000;
+
+  /* Structural Colors */
+  --structural-white: #FFFFFF;
+  --structural-primarytint: #F5FAF7;
+  --structural-neutral1: #F8FAFC;
+  --structural-neutral2: #FFFAFA;
+  --structural-neutral3: #FAFAFA;
+
+  /* Logo Colors */
+  --logo-color-primary: #165B33;
+  --logo-color-secondary: #CC0000;
+}
+
+.new-year-theme {
+  /* Primary (Midnight Blue) */
+  --primary-50: #E6E9F4;
+  --primary-100: #BCC5E4;
+  --primary-200: #929FD3;
+  --primary-300: #6779C2;
+  --primary-400: #3D53B1;
+  --primary-500: #132D70;  /* Midnight Blue */
+  --primary-600: #112966;
+  --primary-700: #0D2052;
+  --primary-800: #09173D;
+  --primary-900: #050E29;
+
+  /* Secondary (Champagne Gold) */
+  --secondary-50: #FFF9E6;
+  --secondary-100: #FFEFC0;
+  --secondary-200: #FFE599;
+  --secondary-300: #FFDB73;
+  --secondary-400: #FFD14C;
+  --secondary-500: #F9C846;  /* Champagne Gold */
+  --secondary-600: #E5B840;
+  --secondary-700: #B38F32;
+  --secondary-800: #806624;
+  --secondary-900: #4C3C16;
+
+  /* Grey Scale */
+  --grey-50: #F8FAFC;
+  --grey-100: #E2E8F0;
+  --grey-200: #CBD5E1;
+  --grey-300: #94A3B8;
+  --grey-400: #64748B;
+  --grey-500: #475569;
+  --grey-600: #334155;
+  --grey-700: #1E293B;
+  --grey-800: #0F172A;
+  --grey-900: #020617;
+
+  /* Semantic Colors */
+  --semantic-success-50: #E6F4E6;
+  --semantic-success-500: #2D5A27;
+  --semantic-success-900: #1C3619;
+
+  --semantic-error-50: #FFEAEA;
+  --semantic-error-500: #DC2626;
+  --semantic-error-900: #7F1D1D;
+
+  /* Accent Colors (Silver) */
+  --semantic-silver-50: #F8FAFC;
+  --semantic-silver-500: #C0C0C0;  /* Silver */
+  --semantic-silver-900: #1E293B;
+
+  /* Text Colors */
+  --text-highemphasis: #0F172A;
+  --text-mediumemphasis: #475569;
+  --text-lowemphasis: #94A3B8;
+  --text-white: #FFFFFF;
+  --text-primary: #132D70;
+  --text-success: #2D5A27;
+  --text-error: #DC2626;
+
+  /* Structural Colors */
+  --structural-white: #FFFFFF;
+  --structural-primarytint: #F8FAFF;
+  --structural-neutral1: #F8FAFC;
+  --structural-neutral2: #FFFAFA;
+  --structural-neutral3: #FAFAFA;
+
+  /* Logo Colors */
+  --logo-color-primary: #132D70;
+  --logo-color-secondary: #F9C846;
+}
+
+.ag-header {
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 400;
+  height: 20px;
+  line-height: 20px;
+}
+
+.ag-header-cell lib-grid-cell {
+  width: 100%;
+}
+
+.ag-header-cell-label {
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-left: 10px;
+}
+
+.checkbox-card-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 38.875rem);
+  gap: 1.75rem 2rem;
+  max-width: -webkit-fill-available;
+  margin-bottom: 1.5rem;
+}
+
+.form-field-helpText,
+.form-field-description {
+  color: var(--text-mediumemphasis, #6D6979);
+  font-family: var(--font);
+  font-size: var(--small-14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--medium-20px);
+  letter-spacing: 0.25px;
+}
+
+.form-field-title {
+  color: var(--text-highemphasis, #1C1B20);
+  font-family: var(--font);
+  font-size: var(--medium-20px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--medium-28px);
+}
+
+.title-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--small-8px);
+}
+
+.formly-field-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medium-24px);
+}
+
+.accordion-group-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--small-16px);
+}
+
+.accordions-group-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--small-16px);
+}