@sarasanalytics-com/design-system 0.0.43 → 0.0.45

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

@@ -1,149 +0,0 @@
-* {
-    font-family: var(--font);
-}
-
-.sa-card-wrapper {
-    display: flex;
-    border: 1px solid var(--grey-50);
-    border-radius: 6px;
-    /* width: inherit; */
-    height: inherit;
-    min-height: max-content;
-    padding: 12px;
-    background: var(--structural-white);
-    gap: var(--small-12px);
-}
-
-.sa-card-wrapper.column {
-    flex-direction: column;
-}
-
-.sa-card-wrapper.sa-card-secondary-wrapper {
-    gap: var(--medium-20px, 20px);
-}
-
-.sa-card-wrapper.sa-card-custom-wrapper {
-    gap: 0;
-}
-
-.column .sa-card-img,
-.column .sa-card-icon {
-    /* margin: 0 0 12px 0; */
-    display: flex;
-    justify-content: space-between;
-}
-
-.sa-card-img img {
-    height: auto;
-    /* width: 200px; */
-}
-
-.sa-card-icon span {
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    display: block;
-    height: 24px;
-    width: 24px;
-}
-
-.sa-card-container {
-    /* margin-left: 12px; */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: -webkit-fill-available;
-    gap: 0.188rem;
-}
-
-.sa-card-title-container {
-    display: flex;
-    justify-content: space-between;
-}
-
-.column .sa-card-title-container {
-    flex-direction: column;
-    margin-bottom: 8px;
-}
-
-.sa-card-title {
-    /* font-family: var(--font-family); */
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 24px;
-    margin-bottom: 4px;
-    /* letter-spacing: 0.15000000596046448px;
-    text-align: left; */
-}
-
-.sa-card-body {
-    /* font-family: var(--font-family); */
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0.25px;
-    text-align: left;
-    color: var(--grey-300);
-    flex: 1;
-}
-
-.sa-card-container .custom-divider {
-    width: 100%;
-    height: 0.063rem;
-    background-color: #ccc;
-}
-
-.sa-card-custom-container {
-    gap: var(--medium-20px, 20px);
-}
-
-.sa-card-custom-wrapper {
-    padding: 1.25rem;
-    border-radius: var(--small-8px, 8px);
-    border: 1px solid var(--grey-100, #EAECF0);
-    background: #FFF;
-}
-
-.sa-card-secondary-wrapper .sa-card-icon {
-    margin: 0;
-}
-
-.sa-card-secondary-wrapper {
-    gap: var(--medium-20px, 20px);
-    padding: var(--medium-20px, 20px);
-    border-radius: var(--small-8px, 8px);
-    border: 1px solid var(--grey-100, #EAECF0);
-    background: #FFF;
-}
-
-.sa-card-checkbox-wrapper {
-    cursor: pointer;
-    border-radius: var(--small-8px, 8px);
-    border: 1px solid var(--grey-100, #EAECF0);
-    display: flex;
-    padding: var(--medium-20px);
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
-}
-
-.sa-card-accordion-wrapper {
-    display: flex;
-    padding: var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);
-    height: 3.25rem;
-    align-items: center;
-    gap: var(--small-12px);
-    cursor: pointer;
-}
-
-::ng-deep.card-selected .sa-card-checkbox-wrapper {
-    border: 1px solid var(--primary-500);
-}
-
-::ng-deep.card-selected .sa-card-checkbox-wrapper {
-    border: 1px solid var(--primary-500);
-}
-
-::ng-deep.sa-document-action {
-    color: var(--text-lowemphasis, #989DA3);
-}

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

@@ -1,46 +0,0 @@
-<div class="sa-card" [ngStyle]="cardStyles">
-    <div class="sa-card-wrapper" [ngClass]="[column ? 'column' : '', customWrapperClass]">
-        <div class="" [ngClass]="avatar || image ? 'sa-card-img' : 'sa-card-icon'">
-            @if(avatar){
-            <sa-avatar [imagePath]="avatar" [size]="avatarSize"></sa-avatar>
-            <!-- <img [src]="avatar" /> -->
-            }@else if(image){
-            <img [src]="image" [width]="imageWidth" />
-            }@else if(icon){
-            <sa-icon [icon]="icon" [size]="iconSize"></sa-icon>
-            }@else{
-            <ng-content select="sa-card-icon"></ng-content>
-            }
-            @if(column){
-            <ng-content select="sa-card-title-actions"></ng-content>
-            }
-        </div>
-        <div class="sa-card-container" [ngClass]="showCardHeader ? 'sa-card-custom-container' : ''">
-            @if(showCardHeader){
-            <ng-content select="sa-card-title-header"></ng-content>
-            @if (showHeaderBodyDivider && body) {
-            <div class="custom-divider"></div>
-            }
-            }
-            @else if(title){
-            <div class="sa-card-title-container">
-                <div class="sa-card-title">{{title}}</div>
-                @if(chip){
-                <sa-chip [text]="chip.text" [type]="chip.type" [state]="chip.state" [filling]="chip.filling"></sa-chip>
-                }
-                <ng-content select="sa-card-title-actions"></ng-content>
-
-            </div>
-            }
-            @if (showCustomCardBody) {
-            <ng-content select="sa-card-custom-body"></ng-content>
-            }
-            @if(showCardBody && body){
-            <div class="sa-card-body">
-                {{body}}
-            </div>
-            }
-            <ng-content select="sa-card-footer-actions"></ng-content>
-        </div>
-    </div>
-</div>

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

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

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

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

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-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[] = []
-
-
-}