@sarasanalytics-com/design-system 0.0.43 → 0.0.45

package/projects/component-library/src/lib/message-banner/message-banner.component.spec.ts

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

package/projects/component-library/src/lib/message-banner/message-banner.component.ts

@@ -1,31 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { MessageType } from '../../interfaces/message-banner';
-import { IconComponent } from "../icon/icon.component";
-import { HttpClientModule } from '@angular/common/http';
-import { IconService } from '../icon/icon.service';
-import { ButtonComponent } from '../button/button.component';
-import { IconName } from '../../interfaces/icon-interface';
-import { ButtonIconPosition, ButtonSize, ButtonType } from '../../interfaces/button-interface';
-
-@Component({
-  selector: 'sa-message-banner',
-  standalone: true,
-  imports: [HttpClientModule, IconComponent, ButtonComponent],
-  providers: [IconService],
-  templateUrl: './message-banner.component.html',
-  styleUrl: './message-banner.component.css',
-  encapsulation: ViewEncapsulation.None
-})
-export class MessageBannerComponent {
-  @Input() type: MessageType = 'info';
-  @Input() actionText?: string;
-  @Input() content?: string = '';
-  @Input() bannerIcon?: IconName;
-  @Input() bannerIconSize?: string = '';
-  @Input() buttonIcon?: IconName;
-  @Input() buttonType?: ButtonType;
-  @Input() buttonIconPosition?: ButtonIconPosition;
-  @Input() buttonSize?: ButtonSize;
-  @Input() buttonIconSize?: string;
-  @Input() onAction: () => void = () => { };
-}

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

@@ -1,76 +0,0 @@
-.layout-container {
-  height: 100%;
-}
-
-.layout-container.padding {
-  padding: var(--medium-20px);
-}
-
-.layout-inner-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-}
-
-.layout-inner-container.border-radius {
-  border: 1px solid var(--grey-100, #EAECF0);
-  background: var(--structural-white);
-  box-shadow: 3px 4px 16px 4px rgba(0, 0, 0, 0.08);
-  border-radius: var(--small-16px, 16px);
-}
-
-.progress-bar-container {
-  border-radius: var(--small-16px, 16px);
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.content-container {
-  display: flex;
-  flex: 1;
-  height: 100%;
-  -ms-overflow-style: none;
-  /* Internet Explorer 10+ */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
-.content-container::-webkit-scrollbar,
-.left-section::-webkit-scrollbar {
-  display: none;
-  /* Safari and Chrome */
-}
-
-.left-section {
-  flex: 1;
-  padding: var(--medium-20px) var(--medium-20px) 0 var(--large-44px);
-  display: flex;
-  flex-direction: column;
-}
-
-.right-section {
-  background: var(--structural-primarytint, #FBFAFF);
-  display: flex;
-  align-items: center;
-  width: 28.9375rem;
-  max-width: 28.9375rem;
-}
-
-.left-wrapper {
-  height: calc(100% - 11.5rem);
-  overflow-y: auto;
-  -ms-overflow-style: none;
-  /* Internet Explorer 10+ */
-  scrollbar-width: none;
-  /* Firefox */
-  padding: 1rem 0 1rem 0;
-}
-
-.footer-section {
-  display: flex;
-  margin-top: auto;
-  margin-bottom: var(--large-40px);
-}

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

@@ -1,30 +0,0 @@
-<div class="layout-container" [class]="showProgressBarContent === false ? 'no-padding': 'padding'">
-    <div class="layout-inner-container"
-        [class]="showProgressBarContent === false ? 'no-border-radius': 'border-radius'">
-        @if (showProgressBarContent) {
-        <div class="progress-bar-container">
-            <ng-content select="[progress-bar-content]"></ng-content>
-        </div>
-        }
-        <div class="content-container">
-            <div class="left-section">
-                <div class="top-section">
-                    <ng-content select="[top-content]"></ng-content>
-                </div>
-                <div class="left-wrapper">
-                    <ng-content select="[left-content]"></ng-content>
-                </div>
-                @if (showFooterContent) {
-                <div class="footer-section">
-                    <ng-content select="[footer-content]"></ng-content>
-                </div>
-                }
-            </div>
-            @if (showRightContent) {
-            <div class="right-section">
-                <ng-content select="[right-content]"></ng-content>
-            </div>
-            }
-        </div>
-    </div>
-</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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