@sarasanalytics-com/design-system 0.0.43 → 0.0.44

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

@@ -1,91 +0,0 @@
-/* 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

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

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

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

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

@@ -1,79 +0,0 @@
-.checkbox-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--medium-20px);
-}
-
-.mat-mdc-radio-button~.mat-mdc-radio-button {
-    margin-left: var(--small-16px);
-}
-
-::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected::after {
-    content: none;
-    /* Remove the tick mark */
-}
-
-::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic {
-    display: none;
-}
-
-::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child) {
-    padding-left: var(--small-12px);
-}
-
-::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) {
-    border-radius: var(--large-64px, 64px);
-    border: 1.3px solid var(--primary-500);
-    background-color: var(--structural-white, #FFF);
-    padding: 0.125rem 0.625rem;
-}
-
-::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
-    border-radius: var(--large-64px, 64px);
-    border: 1.3px solid var(--grey-100, #EAECF0);
-    background-color: var(--structural-white, #FFF);
-    padding: 0.125rem 0.625rem;
-}
-
-::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary::before {
-    border: none;
-}
-
-::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
-    color: var(--primary-500);
-    font-family: var(--font);
-    font-size: var(--small-14px);
-    font-style: normal;
-    font-weight: 500;
-    line-height: var(--medium-20px);
-    letter-spacing: 0.2px;
-}
-
-::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay {
-    background-color: var(--structural-white, #FFF);
-}
-
-::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,
-::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before {
-    background-color: var(--structural-white, #FFF);
-}
-
-::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay {
-    opacity: 0;
-    background: var(--structural-white, #FFF);
-}
-
-/* to remove ripple effect */
-/* ::ng-deep .checkbox-container .mat-mdc-chip .mat-ripple.mat-mdc-chip-ripple {
-    background-color: white;
-} */
-
-::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover {
-    background-color: var(--structural-neutral1);
-}
-
-.checkbox-container .form-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--small-8px);
-}

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

@@ -1,27 +0,0 @@
-<div class="checkbox-container">
-    <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-chip-listbox selectable multiple [disabled]="props.disabled" aria-label="Select options">
-            <mat-chip-option *ngFor="let option of options$ | async" class="custom-chip" [value]="option.value"
-                (click)="toggleSelection(option)" [selected]="isSelected(option)">
-                {{ option.label }}
-            </mat-chip-option>
-        </mat-chip-listbox>
-    </div>
-    @if(props['helpText']){
-    <div class="form-field-helpText">
-        <span>{{ props['helpText'] }}</span>
-    </div>
-    }
-</div>

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

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

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

@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { MatChipsModule } from '@angular/material/chips';
-import { CommonModule } from '@angular/common';
-import { FormControl, FormsModule } from '@angular/forms';
-import { FieldType } from '@ngx-formly/core';
-import { isObservable, of } from 'rxjs';
-import { includes as _includes } from 'lodash'
-
-@Component({
-  selector: 'sa-checkbox',
-  standalone: true,
-  imports: [MatChipsModule, CommonModule, FormsModule],
-  templateUrl: './checkbox.component.html',
-  styleUrl: './checkbox.component.css'
-})
-export class CheckboxComponent extends FieldType {
-  toggleSelection(option: any): void {
-    const selected = this.formControl.value || [];
-    const index = selected.indexOf(option.value);
-    if (index === -1) {
-      selected.push(option.value);
-    } else {
-      selected.splice(index, 1);
-    }
-    this.formControl.setValue([...selected]);
-  }
-
-  // Checks if an option is selected
-  isSelected(option: any): boolean {
-    return _includes((this.formControl.value || []), option.value);
-  }
-
-  get options$() {
-    const options = this.props?.options;
-    return isObservable(options) ? options : of(options || []);
-  }
-
-}

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

@@ -1,129 +0,0 @@
-.regular {
-  --chip-height: var(--medium-24px);
-  --chip-padding: var(--small-4px) var(--small-8px);
-  --chip-gap: var(--small-4px);
-  --border-radius: var(--small-16px);
-  --font-weight: 500;
-  --line-height: 16px;
-  --font-size: 12px
-}
-
-.small {
-  --chip-height: var(--small-18px);
-  --chip-padding: var(--small-4px) var(--small-8px);
-  --chip-gap: var(--small-4px);
-  --border-radius: var(--small-4px);
-  --font-weight: 500;
-  --line-height: 16px;
-  --font-size: 11px
-}
-
-.large {
-  --chip-height: 40px;
-  --chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);
-  --chip-gap: var(--small-8px);
-  --border-radius: var(--small-16px) 0px;
-  --font-weight: 600;
-  --line-height: 20px;
-  --font-size: 14px;
-  background-color: var(--light-color) !important;
-  color: var(--dark-color) !important;
-  border: 1px solid transparent !important;
-}
-
-.primary {
-  --light-color: var(--primary-50);
-  --dark-color: var(--primary-500);
-}
-
-.secondary {
-  --light-color: var(--secondary-50);
-  --dark-color: var(--secondary-500);
-}
-
-.neutral {
-  --light-color: var(--grey-50);
-  --dark-color: var(--text-mediumemphasis);
-}
-
-.success {
-  --light-color: var(--semantic-success-50);
-  --dark-color: var(--semantic-success-500);
-}
-
-.error {
-  --light-color: var(--semantic-error-50);
-  --dark-color: var(--semantic-error-500);
-}
-
-.warning {
-  --light-color: var(--semantic-yellow-50);
-  --dark-color: var(--semantic-yellow-500);
-}
-
-.filled {
-  --background-color: var(--light-color);
-  --color: var(--dark-color);
-  --border: 1px solid transparent;
-}
-
-.outline {
-  --background-color: none;
-  --color: var(--dark-color);
-  --border: 1px solid var(--dark-color);
-}
-
-.chip {
-  display: flex;
-  width: max-content;
-  height: var(--chip-height);
-  padding: var(--chip-padding);
-
-  justify-content: center;
-  align-items: center;
-
-  gap: var(--chip-gap);
-  flex-shrink: 0;
-  letter-spacing: 0.5px;
-  box-sizing: border-box;
-
-  font-family: var(--font);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-
-  background-color: var(--background-color);
-  color: var(--color);
-  border-radius: var(--border-radius);
-  border: var(--border);
-
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-
-.svg-icon {
-  width: 16px;
-  height: 16px;
-  mask-size: contain;
-  background-color: var(--dark-color);
-  mask-repeat: no-repeat;
-}
-
-.svg-icon:hover {
-  cursor: pointer;
-}
-
-.second-svg-icon {
-  width: 18px;
-  height: 18px;
-  mask-size: contain;
-  background-color: var(--dark-color);
-  mask-repeat: no-repeat;
-}
-
-.btn_hide {
-  display: none;
-}

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

@@ -1,17 +0,0 @@
-<div class="chip {{type}} {{state}} {{filling}}">
-  <button type="button" (click)="buttonClicked($event)" id="icon-button_{{uuid}}" class="btn_hide"></button>
-  <!-- (click)="buttonClicked()" on button instead of label breaks whole thing -->
-  <label for="icon-button_{{uuid}}" class="svg-icon" [style]="svgStyle"
-    [style.display]="((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'">
-  </label>
-
-  {{text}}
-
-  <div class="second-svg-icon" [style]="secondSvgStyle" [style.display]="(type == 'large') ? 'block' : 'none'"></div>
-
-  {{type == 'large' ? largeStateText : ""}}
-
-  <label for="icon-button_{{uuid}}" class="svg-icon" [style]="svgStyle"
-    [style.display]="((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'">
-  </label>
-</div>

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

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

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

@@ -1,54 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { Input } from '@angular/core';
-import { Output } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-
-let nextId = 0;          // used to give unique ids to inputs used in html
-
-@Component({
-  selector: 'sa-chip',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './chips.component.html',
-  styleUrl: './chips.component.css'
-})
-export class ChipsComponent {
-  @Input() id: string | number;
-  @Input() iconPath: string;
-  @Input() text: string | number;
-  @Input() type: string;
-  @Input() state: string;
-  @Input() filling: string;
-  @Input() iconPosition: string;
-  @Input() largeStateIcon: string;
-  @Input() largeStateText: string;
-
-  @Output() onClickEvent = new EventEmitter();
-
-  svgStyle = {}
-  secondSvgStyle = {}
-  eventEmitObject = {}
-  uuid: number = nextId++;
-
-  ngOnChanges(): void {
-    this.svgStyle = {
-      '-webkit-mask-image': `url(${this.iconPath})`,
-      'mask-image': `url(${this.iconPath})`,
-    }
-    this.secondSvgStyle = {
-      '-webkit-mask-image': `url(${this.largeStateIcon})`,
-      'mask-image': `url(${this.largeStateIcon})`,
-    }
-    this.eventEmitObject = {
-      id: this.id
-    }
-  }
-
-  buttonClicked(evt: Event) {
-    this.onClickEvent.emit({
-      ...this.eventEmitObject,
-      evt
-    });
-  }
-}

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

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

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

@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-component-library',
-  standalone: true,
-  imports: [],
-  template: `
-    <p>
-      component-library works!
-    </p>
-  `,
-  styles: ``
-})
-export class TestLibraryComponent {
-
-}