@sarasanalytics-com/design-system 0.0.42 → 0.0.43

package/projects/component-library/src/lib/page-layout/page-layout.component.spec.ts

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

package/projects/component-library/src/lib/page-layout/page-layout.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'sa-page-layout',
+  standalone: true,
+  imports: [],
+  templateUrl: './page-layout.component.html',
+  styleUrl: './page-layout.component.css'
+})
+export class PageLayoutComponent {
+  @Input() showRightContent: boolean = false;
+  @Input() showFooterContent: boolean = false;
+  @Input() showProgressBarContent;
+}

package/projects/component-library/src/lib/progress-bar/progress-bar.component.css

@@ -0,0 +1,30 @@
+.progress-bar {
+    height: var(--dynamic-height, 8px);
+    border-radius: var(--dynamic-border-radius, 20px);
+    overflow: hidden;
+    background-color: transparent;
+    --mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);
+    --mdc-linear-progress-track-color: white;
+}
+
+::ng-deep .progress-bar .mdc-linear-progress__primary-bar {
+    background-color: var(--mdc-linear-progress-active-indicator-color);
+}
+
+::ng-deep .progress-bar .mdc-linear-progress__bar {
+    height: var(--dynamic-height, 8px);
+    border-radius: var(--dynamic-border-radius, 20px);
+}
+
+::ng-deep .progress-bar .mdc-linear-progress__bar-inner {
+    border-top-style: none;
+    border-radius: var(--dynamic-border-radius, 20px);
+}
+
+::ng-deep .progress-bar .mdc-linear-progress__secondary-bar {
+    background-color: var(--mdc-linear-progress-track-color);
+}
+
+::ng-deep .progress-bar .mdc-linear-progress__buffer-bar {
+    background-color: transparent;
+}

package/projects/component-library/src/lib/progress-bar/progress-bar.component.html

@@ -0,0 +1,4 @@
+<mat-progress-bar mode="determinate" [value]="progressValue" class="progress-bar" [ngStyle]="{
+    '--dynamic-height': height ,
+    '--dynamic-border-radius': borderRadius 
+  }"></mat-progress-bar>

package/projects/component-library/src/lib/progress-bar/progress-bar.component.spec.ts

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

package/projects/component-library/src/lib/progress-bar/progress-bar.component.ts

@@ -0,0 +1,24 @@
+import { Component, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { NgStyle } from '@angular/common';
+
+
+@Component({
+  selector: 'sa-progress-bar',
+  standalone: true,
+  templateUrl: './progress-bar.component.html',
+  styleUrl: './progress-bar.component.css',
+  imports: [MatProgressBarModule, NgStyle],
+})
+
+export class ProgressBarComponent implements OnInit {
+  @Input() progressValue: number = 10;
+  @Input() borderRadius: string = '10px';
+  @Input() height: string = '8px';
+
+  constructor(private el: ElementRef, private renderer: Renderer2) { }
+
+  ngOnInit(): void {
+  }
+
+}

package/projects/component-library/src/lib/radio-button/radio-button.component.css

@@ -0,0 +1,128 @@
+.radio-group-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.radio-group-container .mat-mdc-radio-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--small-8px, 8px);
+}
+
+.radio-group-container.column .mat-mdc-radio-group {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+::ng-deep.radio-group-container .mdc-form-field,
+::ng-deep.radio-group-container .mdc-form-field.mat-internal-form-field {
+    border-radius: var(--large-64px, 64px);
+    border: 1px solid var(--grey-100, #EAECF0);
+    padding: 0 1.75rem 0 0.75rem;
+    justify-content: center;
+    display: flex;
+}
+
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,
+::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,
+::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field {
+    border-color: var(--primary-500);
+}
+
+/* for radio button size */
+::ng-deep .radio-group-container .mdc-radio__background {
+    height: 1rem;
+    width: 1rem;
+    top: 0.125rem;
+}
+
+::ng-deep .radio-group-container .mat-radio-outer-circle {
+    height: 0.625rem;
+    width: 0.625rem;
+
+}
+
+::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle {
+    transform: scale(0.4);
+    top: -2px;
+    left: -2px;
+}
+
+/* end */
+
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background::before {
+    background-color: #FFF;
+}
+
+::ng-deep .radio-group-container .radio-box:hover {
+    border-radius: var(--large-64px);
+    background: var(--structural-neutral1);
+}
+
+::ng-deep .radio-group-container .mdc-label {
+    padding-left: 0;
+    cursor: pointer;
+    color: var(--text-highemphasis, #1C1B20);
+    font-family: var(--font);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0.25px;
+}
+
+::ng-deep .radio-group-container .radio-box {
+    cursor: pointer;
+}
+
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
+    border-color: var(--icon-grey1, #757575);
+}
+
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio {
+    padding: var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px);
+}
+
+::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
+    border-width: 1.5px;
+}
+
+::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label {
+    color: var(--primary-500);
+    font-family: var(--font);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: 0.15px;
+}
+
+::ng-deep .radio-group-container .mdc-label {
+    color: var(--Text-High-Emphasis, #1C1B20);
+    font-family: var(--font);
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0.25px;
+}
+
+.title-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--small-8px);
+}
+
+
+.radio-group-container .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--small-8px);
+}

package/projects/component-library/src/lib/radio-button/radio-button.component.html

@@ -0,0 +1,28 @@
+<div class="radio-group-container" [ngClass]="[props['column'] ? 'column' : '']">
+    <div class="title-container">
+        @if(props['label']){
+        <div class="form-field-title">
+            <span>{{ props['label'] }}</span>
+        </div>
+        }
+        @if(props['description']){
+        <div class="form-field-description">
+            <span>{{ props['description'] }}</span>
+        </div>
+        }
+    </div>
+    <div class="form-field">
+        <mat-radio-group [formControl]="formControl" name="radioButtons">
+            <div *ngFor="let option of options$ | async" class="radio-box" (click)="selectRadio(option.value, radio)">
+                <mat-radio-button [disableRipple]="true" #radio [value]="option.value">
+                    {{ option.label }}
+                </mat-radio-button>
+            </div>
+        </mat-radio-group>
+    </div>
+    @if(props['helpText']){
+    <div class="form-field-helpText">
+        <span>{{ props['helpText'] }}</span>
+    </div>
+    }
+</div>

package/projects/component-library/src/lib/radio-button/radio-button.component.spec.ts

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

package/projects/component-library/src/lib/radio-button/radio-button.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { isObservable, of } from 'rxjs';
+
+@Component({
+  selector: 'sa-radio-button',
+  standalone: true,
+  imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './radio-button.component.html',
+  styleUrl: './radio-button.component.css'
+})
+
+export class RadioButtonComponent extends FieldType {
+
+  ngOnInit() {
+    // console.log(this)
+  }
+
+  get options$() {
+    const options = this.props?.options;
+    return isObservable(options) ? options : of(options || []);
+  }
+
+  override get formControl(): FormControl {
+    return super.formControl as FormControl;
+  }
+
+  selectRadio(value: any, radio: MatRadioButton): void {
+    this.formControl.setValue(value);
+    radio.checked = true;
+  }
+}

package/projects/component-library/src/lib/scrolling-cards/scrolling-cards.component.css

@@ -0,0 +1,118 @@
+.scrolling-cards-container {
+  overflow: hidden;
+  width: fit-content;
+}
+
+
+
+.scrolling-cards-container.vertical {
+  height: 100%;
+  position: relative;
+}
+
+.scrolling-cards-container.vertical::before,
+.scrolling-cards-container.vertical::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: var(--medium-36px);
+  z-index: 1;
+}
+
+.scrolling-cards-container.vertical::before {
+  background: rgb(251, 250, 255);
+  background: -moz-linear-gradient(180deg, var(--structural-primarytint) 10%, rgba(255, 255, 255, 0.12) 100%);
+  background: -webkit-linear-gradient(180deg, var(--structural-primarytint) 10%, rgba(255, 255, 255, 0.12) 100%);
+  background: linear-gradient(180deg, var(--structural-primarytint) 10%, rgba(255, 255, 255, 0.12) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--structural-primarytint)", endColorstr="#ffffff", GradientType=1);
+}
+
+.scrolling-cards-container.vertical::after {
+  bottom: 0;
+  background: rgb(251,250,255);
+  background: -moz-linear-gradient(360deg, var(--structural-primarytint) 10%, rgba(255,255,255,0.12) 100%);
+  background: -webkit-linear-gradient(360deg, var(--structural-primarytint) 10%, rgba(255,255,255,0.12) 100%);
+  background: linear-gradient(360deg, var(--structural-primarytint) 10%, rgba(255,255,255,0.12) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--structural-primarytint)",endColorstr="#ffffff",GradientType=1);
+}
+
+.card-container {
+  display: flex;
+  gap: var(--small-16px);
+  animation-duration: var(--scroll-duration, 30s);
+  /* animation-timing-function: linear(-0.25 54.94%, 1.2 63.4%); */
+  animation-timing-function: linear;
+
+  animation-iteration-count: infinite;
+  animation-direction: var(--scroll-direction, normal);
+  width: fit-content;
+}
+
+.card-container.vertical {
+  flex-direction: column;
+  animation-name: scroll-vertical;
+}
+
+.card-container.horizontal {
+  flex-direction: row;
+  animation-name: scroll-horizontal;
+}
+
+/* @keyframes scroll-vertical {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+} */
+
+@keyframes scroll-vertical {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(calc(-50% - var(--small-16px)));
+  }
+}
+
+/* @keyframes scroll-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+} */
+
+@keyframes scroll-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(calc(-50% - var(--small-16px)));
+  }
+}
+
+sa-card {
+  flex-shrink: 0;
+}
+
+.card-container.vertical {
+  flex-direction: column;
+  animation-name: scroll-vertical;
+}
+
+@keyframes scroll-continuous {
+  0% {
+    transform: translateX(100%);
+    /* Start from the right edge */
+  }
+
+  100% {
+    transform: translateX(-100%);
+    /* Move completely to the left */
+  }
+}

package/projects/component-library/src/lib/scrolling-cards/scrolling-cards.component.html

@@ -0,0 +1,11 @@
+<div class="scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}" (mouseenter)="pauseScroll()"
+    (mouseleave)="resumeScroll()">
+    <div #cardContainer class="card-container">
+        @for (card of displayCards; track card.title) {
+        <sa-card [title]="card.title" [body]="card.body" [icon]="card.icon" [iconSize]="'54'"
+            [customWrapperClass]="'sa-card-secondary-wrapper'" [width]="'24.063rem'" [column]="false"
+            [showCardBody]="true">
+        </sa-card>
+        }
+    </div>
+</div>

package/projects/component-library/src/lib/scrolling-cards/scrolling-cards.component.spec.ts

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

package/projects/component-library/src/lib/scrolling-cards/scrolling-cards.component.ts

@@ -0,0 +1,74 @@
+import { Component, Input, OnInit, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { CardComponent } from '../card/card.component';
+import { IconService } from '../icon/icon.service';
+import { HttpClientModule } from '@angular/common/http';
+
+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;
+}
+
+@Component({
+  selector: 'sa-scrolling-cards',
+  standalone: true,
+  imports: [HttpClientModule, CardComponent],
+  providers: [IconService],
+  templateUrl: './scrolling-cards.component.html',
+  styleUrl: './scrolling-cards.component.css'
+})
+export class ScrollingCardsComponent implements OnInit, AfterViewInit {
+  @Input({ required: true }) cards: CardData[] = [];
+  @Input() duration: number = 10;
+  @Input() direction: 'up' | 'down' | 'left' | 'right' = 'up';
+  @ViewChild('cardContainer') cardContainer!: ElementRef;
+
+  displayCards: CardData[] = [];
+  animationPaused = false;
+  isVertical: boolean;
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnInit() {
+    this.displayCards = [...this.cards, ...this.cards];
+  }
+
+  ngAfterViewInit() {
+    this.setAnimationProperties();
+    this.cdr.detectChanges();
+  }
+
+  setAnimationProperties() {
+    if (!this.cardContainer) return;
+
+    const container = this.cardContainer.nativeElement;
+    this.isVertical = this.direction === 'up' || this.direction === 'down';
+    const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
+    const duration = containerSize / this.duration;
+
+    container.style.setProperty('--scroll-duration', `${duration}s`);
+    container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
+    container.classList.toggle('vertical', this.isVertical);
+    container.classList.toggle('horizontal', !this.isVertical);
+  }
+
+  pauseScroll() {
+    this.animationPaused = true;
+    this.cardContainer.nativeElement.style.animationPlayState = 'paused';
+  }
+
+  resumeScroll() {
+    this.animationPaused = false;
+    this.cardContainer.nativeElement.style.animationPlayState = 'running';
+  }
+}

package/projects/component-library/src/lib/spinner/spinner.component.css

@@ -0,0 +1,41 @@
+.sa-spinner {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 2px solid var(--primary-500);
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+.sa-spinner::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    left: 0.1em;
+    top: 0.1em;
+    border: 2px solid var(--primary-500);
+    width: 0.25em;
+    height: 0.25em;
+    border-radius: 50%;
+}
+
+.sa-spinner.default,
+.sa-spinner.default::after {
+    border-color: #fff
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+:host {
+    display: inherit;
+}

package/projects/component-library/src/lib/spinner/spinner.component.html

@@ -0,0 +1 @@
+<span class="sa-spinner" [ngClass]="default ? 'default' : ''" [ngStyle]="{'fontSize': size+'px'}"></span>

package/projects/component-library/src/lib/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/projects/component-library/src/lib/spinner/spinner.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'sa-spinner',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './spinner.component.html',
+  styleUrl: './spinner.component.css'
+})
+export class SpinnerComponent {
+  @Input('default') default: boolean = false;
+  @Input('size') size: any;
+
+}