@sarasanalytics-com/design-system 0.0.41 → 0.0.43

package/projects/component-library/src/lib/card/card.component.spec.ts

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

package/projects/component-library/src/lib/card/card.component.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { ChipsComponent } from '../chips/chips.component';
+import { ChipInterface } from '../../interfaces/chip-interface';
+import { IconComponent } from '../icon/icon.component';
+import { AvatarComponent } from "../avatar/avatar.component";
+
+@Component({
+  selector: 'sa-card',
+  standalone: true,
+  imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css'
+})
+export class CardComponent {
+  @Input('title') title: string = '';
+  @Input('showCardHeader') showCardHeader: boolean = false;
+  @Input('showCardBody') showCardBody: boolean = false;
+  @Input('showHeaderBodyDivider') showHeaderBodyDivider: boolean = false;
+  @Input('showCustomCardBody') showCustomCardBody: boolean = false;
+  @Input('customWrapperClass') customWrapperClass: string = '';
+  @Input('chip') chip: ChipInterface | null = null;
+  @Input('body') body: string = '';
+  @Input('avatar') avatar: string = '';
+  @Input('image') image: string = '';
+  @Input('imageWidth') imageWidth: string = '';
+  @Input('avatarSize') avatarSize: string;
+
+  @Input('icon') icon: string = '';
+  @Input('iconSize') iconSize: string;
+
+  @Input('subtitle') subtitle: string = '';
+  @Input('logoIcon') logoIcon: string = '';
+
+  @Input('width') width: string | number;
+  @Input('height') height: string | number;
+  @Input('column') column: boolean = false;
+
+  cardStyles: any = {};
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['width']?.currentValue || changes['height']?.currentValue) {
+      this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
+      this.cardStyles['height'] = typeof changes['height']?.currentValue === 'string' ? changes['height']?.currentValue : changes['height']?.currentValue + '%';
+    }
+  }
+}

package/projects/component-library/src/lib/card/checkbox-card/checkbox-card.component.css

@@ -0,0 +1,79 @@
+.sa-card-title-logo-container {
+    display: flex;
+    gap: var(--small-8px);
+    align-items: center;
+}
+
+.sa-card-title-logo sa-icon {
+    display: flex;
+}
+
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,
+::ng-deep.checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,
+::ng-deep.checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,
+::ng-deep.checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
+    border-color: var(--primary-500);
+    background-color: var(--primary-500);
+}
+
+.checkbox-card {
+    display: block;
+    height: 100%;
+}
+
+.buttons-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+/* Button Wrapper */
+.button-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.button-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--medium-20px, 20px);
+}
+
+.description-container {
+    display: flex;
+    align-items: center;
+    gap: var(--small-12px);
+}
+
+.description-style {
+    color: var(--text-mediumemphasis, #6D6979);
+    font-family: var(--font);
+    font-size: var(--small-14px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--medium-20px);
+    letter-spacing: 0.1px;
+}
+
+.description-icon {
+    display: flex;
+}
+
+::ng-deep .sa-card {
+    height: 100%;
+}

package/projects/component-library/src/lib/card/checkbox-card/checkbox-card.component.html

@@ -0,0 +1,55 @@
+<sa-card [width]="props['width']" [customWrapperClass]="props['customWrapperClass']"
+    (click)="!props['disabled'] && onCardClick($event)" [showCardBody]="false" [showCardHeader]="true"
+    [showCustomCardBody]="true" class="checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}"
+    [style.width]="props['width']">
+    <sa-card-title-header>
+        <div class="sa-card-custom-header-container">
+            <div class="sa-card-title-logo-container">
+                <div class="sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}"><sa-icon
+                        [icon]="props['featureIcon']" customClass="auto-dimensions colored-icon"></sa-icon>
+                </div>
+                <div class="sa-card-custom-title">{{props['title']}}</div>
+            </div>
+            <div class="sa-card-titleIcon">
+                <sa-card-title-actions>
+                    <div class="sa-document-action">
+                        @if(props['disabled']){
+                        <sa-icon icon="disabledCheckboxFilled"
+                            customClass="auto-dimensions disabled-checkbox-icon"></sa-icon>
+                        }@else{
+                        <mat-checkbox class="checkbox-style" [formControl]="formControl"
+                            (click)="onCheckboxClick($event)" [disabled]="props['disabled']"></mat-checkbox>
+                        }
+                    </div>
+                </sa-card-title-actions>
+            </div>
+        </div>
+    </sa-card-title-header>
+    <sa-card-custom-body>
+        @if(props['listItems']){
+        <lib-list [listData]="props['listItems']" [featuresIcon]="props['listIcon']"></lib-list>
+        }@else if(props['showButtons']){
+        <div class="buttons-container">
+            <ng-container *ngFor="let button of props['showButtons']">
+                <ng-container *ngIf="button.type === 'submit'">
+                    <div class="button-content">
+                        @if(props['description']){
+                        @if(props['descriptionIcon']){
+                        <div class="description-container">
+                            <sa-icon [icon]="props['descriptionIcon']" customClass="auto-dimensions disabled-icon"
+                                class="description-icon"></sa-icon>
+                            <span class="description-style">{{props['description']}}</span>
+                        </div>
+                        }
+                        }
+                        <sa-button (click)="actionHandler(button)" [text]="button.label" [type]="button.buttonType"
+                            [size]="button.size" [state]="button.state" [icon]="button.icon"
+                            [iconPosition]='button.iconPosition' class="checkbox-card-action-button"
+                            [buttonIconSize]="button.iconSize"></sa-button>
+                    </div>
+                </ng-container>
+            </ng-container>
+        </div>
+        }
+    </sa-card-custom-body>
+</sa-card>

package/projects/component-library/src/lib/card/checkbox-card/checkbox-card.component.spec.ts

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

package/projects/component-library/src/lib/card/checkbox-card/checkbox-card.component.ts

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CardComponent } from '../card.component';
+import { IconComponent } from '../../icon/icon.component';
+import { ListComponent } from '../../list/list.component';
+import { CardBodyComponent } from '../card-body/card-body.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CommonModule } from '@angular/common';
+import { CardTitleActionsComponent } from '../card-title-actions/card-title-actions.component';
+import { CardCustomHeaderComponent } from '../card-custom-header/card-custom-header.component';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { ButtonComponent } from '../../button/button.component';
+
+@Component({
+  selector: 'sa-checkbox-card',
+  standalone: true,
+  imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent],
+  templateUrl: './checkbox-card.component.html',
+  styleUrl: './checkbox-card.component.css'
+})
+export class CheckboxCardComponent extends FieldType {
+
+  ngOnInit() {
+    // console.log(this)
+  }
+
+  onCardClick(event: MouseEvent): void {
+    this.props['isCardSelected'] = !this.props['isCardSelected'];
+    this.formControl.setValue(!this.formControl.value);
+  }
+
+  onCheckboxClick(event: Event): void {
+    event.stopPropagation();
+  }
+
+
+  override get formControl(): FormControl {
+    return super.formControl as FormControl;
+  }
+
+  actionHandler(button: any) {
+    this.field.props['onButtonClick'](this.field);
+  }
+}

package/projects/component-library/src/lib/card/guide-card/guide-card.component.css

@@ -0,0 +1,80 @@
+.guide-container {
+  background-color: var(--structural-white);
+  border: 0.0625rem solid var(--grey-100, #eaecf0);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  padding: 1.75rem 1.875rem 1.75rem 1.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+}
+
+.guide-header {
+  border-bottom: 0.0625rem solid var(--grey-100, #eaecf0);
+  position: relative;
+}
+
+.guide-header h1 {
+  font-size: 1.5rem;
+  color:  var(--text-highemphasis, #1C1B20);
+  margin: 0;
+}
+
+.guide-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--large-42px);
+}
+
+.step {
+  display: flex;
+}
+
+.guide-header .guide-header-title,
+.step-content .step-title {
+  color: var(--text-highemphasis, #1C1B20);
+  font-family: var(--font-roboto, 'Roboto');
+  font-size: var(--small-16px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0.03125rem;
+}
+
+
+.step-content .step-description {
+  color: var(--text-lowemphasis, #98A2A3)
+}
+
+.step-indicator {
+  margin-right: 1.1575rem;
+  margin-top: 0.125rem;
+}
+
+.step-circle {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 0.25rem solid var(--primary-500);
+  margin: 0.125rem auto 0;
+}
+
+.step-line {
+  width: 0.125rem;
+  height: calc(100% + 1.75rem);
+  background-color: var(--primary-500);
+  margin: 0 auto 0;
+}
+
+.step-content h2 {
+  font-size: 1.125rem;
+  color:  var(--text-highemphasis, #1C1B20);
+  margin: 0 0 0.625rem 0;
+}
+
+.step-content p {
+  font-size: 0.875rem;
+  color:  var(--text-highemphasis, #1C1B20);
+  margin: 0;
+  line-height: 1.5;
+}

package/projects/component-library/src/lib/card/guide-card/guide-card.component.html

@@ -0,0 +1,24 @@
+<div class="guide-container">
+    <div class="guide-header">
+        <p class="guide-header-title">{{ title }}</p>
+    </div>
+    <div class="guide-content">
+        @for (step of steps; track step; let last = $last) {
+        <div class="step">
+            <div class="step-indicator">
+                <div class="step-circle"></div>
+
+                @if (!last) {
+                <div class="step-line"></div>
+                }
+            </div>
+            <div class="step-content">
+                <p class="step-title">{{ step.title }}</p>
+                @if (step?.description) {
+                <p class="step-description">{{ step.description }}</p>
+                }
+            </div>
+        </div>
+        }
+    </div>
+</div>

package/projects/component-library/src/lib/card/guide-card/guide-card.component.spec.ts

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

package/projects/component-library/src/lib/card/guide-card/guide-card.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { GuideStep } from '../../../interfaces/guide-card-interface';
+
+
+
+@Component({
+  selector: 'sa-guide-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './guide-card.component.html',
+  styleUrl: './guide-card.component.css',
+  encapsulation: ViewEncapsulation.None
+})
+export class GuideCardComponent {
+  @Input() title: string = '';
+  @Input() steps: GuideStep[] = []
+
+
+}

package/projects/component-library/src/lib/card-carousel/card-carousel.component.css

@@ -0,0 +1,91 @@
+/* card-carousel.component.css */
+.carousel-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  margin: 0 0 var(--medium-20px) 0;
+  width: 100%;
+  min-height: var(--medium-32px);
+}
+
+.dots {
+  display: inline-flex;
+  gap: var(--small-4px);
+  align-items: center;
+  width: 17rem;
+  overflow: hidden;
+}
+
+.arrow-controls {
+  display: flex;
+  align-items: center;
+  margin-top: var(--small-4px);
+  gap: var(--small-12px);
+  margin-left: auto;
+}
+
+.arrow-controls sa-icon {
+  cursor: pointer;
+}
+
+.dot {
+  width: var(--small-6px);
+  height: var(--small-6px);
+  min-width: var(--small-6px);
+  min-height: var(--small-6px);
+  border-radius: 50%;
+  background-color: var(--grey-200);
+  margin: 0 var(--small-6px);
+  cursor: pointer;
+  display: block;
+}
+
+.dot.active {
+  background-color: var(--primary-500);
+  width: var(--small-8px);
+  height: var(--small-8px);
+  min-width: var(--small-8px);
+  min-height: var(--small-8px);
+}
+
+.brand-logos-container {
+  width: 100%; /* Adjust as needed */
+  margin-top: var(--medium-32px);
+  overflow: hidden;
+  max-width: 28.9375rem;
+}
+
+.brand-logos {
+  display: flex;
+  gap: var(--medium-24px);
+  transition: transform 0.3s ease;
+  justify-content: center;
+  align-items: center;
+}
+
+.brand-logos sa-icon {
+  flex: 0 0 60px;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--medium-32px);
+  max-height: var(--medium-32px);
+  min-height: var(--medium-32px);
+}
+
+.brand-logos sa-icon.active {
+  opacity: 1;
+}
+
+.sa-icon.logo-style > svg {
+  width: fit-content;
+  height: fit-content;
+}

package/projects/component-library/src/lib/card-carousel/card-carousel.component.html

@@ -0,0 +1,54 @@
+<!-- card-carousel.component.html -->
+<div class="carousel-container">
+    <div class="carousel-top-wrapper">
+        <div class="controls">
+            @if (showIndicators) {
+            <div class="dots">
+                @for (card of cards; track card.id; let i = $index) {
+                <span class="dot" [class.active]="i === currentIndex" (click)="selectCard(i)"></span>
+                }
+            </div>
+            }
+            @if (showNavigationArrows) {
+            <div class="arrow-controls">
+                <sa-icon [icon]="'leftChevronCircle'" size="24" (click)="prev()"></sa-icon>
+                <sa-icon [icon]="'rightChevronCircle'" size="24" (click)="next()"></sa-icon>
+            </div>
+            }
+        </div>
+
+        <div class="card-container">
+            <sa-card [customWrapperClass]="'sa-card-custom-wrapper'" [width]="'24.063rem'" [column]="false"
+                [showCardHeader]="true" [showCardBody]="true" [body]="cards[currentIndex].body"
+                [showHeaderBodyDivider]="true">
+                <sa-card-title-header>
+                    <div class="sa-card-custom-header-container">
+                        <sa-icon [icon]="cards[currentIndex].avatarIcon" size="50"></sa-icon>
+                        <div class="sa-card-title-subtitle-container">
+                            <div class="sa-card-custom-title">{{ cards[currentIndex].title }}</div>
+                            <div class="sa-card-subtitle">{{ cards[currentIndex].subtitle }}</div>
+                        </div>
+                        <div class="sa-card-titleIcon">
+                            <sa-icon [icon]="cards[currentIndex].logoIcon" customClass="logo-style"></sa-icon>
+                        </div>
+                    </div>
+                </sa-card-title-header>
+            </sa-card>
+        </div>
+    </div>
+
+    @if (showBrandFooter) {
+    <div class="brand-logos-container">
+        <div class="brand-logos">
+            @for (logo of visibleLogos; track $index) {
+            <sa-icon [icon]="logo.logoIcon" [class.active]="$index === 1" (click)="selectCard(logo.index)"
+                [customClass]="'logo-style'">
+            </sa-icon>
+            }
+        </div>
+    </div>
+    }
+
+
+
+</div>

package/projects/component-library/src/lib/card-carousel/card-carousel.component.spec.ts

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

package/projects/component-library/src/lib/card-carousel/card-carousel.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { CardComponent } from '../card/card.component';
+import { IconComponent } from '../icon/icon.component';
+import { CardCustomHeaderComponent } from '../card/card-custom-header/card-custom-header.component';
+import { CardCarousel } from '../../interfaces/card-carousel-interface';
+
+
+@Component({
+  selector: 'sa-card-carousel',
+  standalone: true,
+  imports: [CardComponent, IconComponent, CardCustomHeaderComponent],
+  templateUrl: './card-carousel.component.html',
+  styleUrl: './card-carousel.component.css',
+  encapsulation: ViewEncapsulation.None
+})
+export class CardCarouselComponent implements OnInit, OnDestroy {
+  @Input() cards: CardCarousel[] = [];
+  @Input() interval: number = 5000;
+  @Input() autoPlay: boolean = true;
+  @Input() showNavigationArrows: boolean = true;
+  @Input() showIndicators: boolean = true;
+  @Input() showBrandFooter: boolean = true;
+
+  visibleLogos: (CardCarousel & { index: number })[] = [];
+
+  currentIndex: number = 0;
+  private timer: any;
+
+  ngOnInit() {
+    this.updateVisibleLogos();
+    if (this.autoPlay) {
+      this.startTimer();
+    }
+  }
+
+  ngOnDestroy() {
+    this.stopTimer();
+  }
+
+
+  startTimer() {
+    this.stopTimer();
+    this.timer = setInterval(() => {
+      this.next();
+    }, this.interval);
+  }
+
+  stopTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+
+  resetTimer() {
+    clearInterval(this.timer);
+    if (this.autoPlay) {
+      this.startTimer();
+    }
+  }
+
+  selectCard(index: number) {
+    this.currentIndex = index;
+    this.resetTimer();
+    this.updateVisibleLogos();
+  }
+
+  next() {
+    this.currentIndex = (this.currentIndex + 1) % this.cards.length;
+    this.resetTimer();
+    this.updateVisibleLogos();
+  }
+
+  prev() {
+    this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
+    this.resetTimer();
+    this.updateVisibleLogos();
+  }
+
+  updateVisibleLogos() {
+    this.visibleLogos = [];
+    for (let i = -1; i <= 4; i++) {
+      const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
+      this.visibleLogos.push({
+        ...this.cards[index],
+        index: index
+      });
+    }
+  }
+}