@sarasanalytics-com/design-system 0.0.9 → 0.0.11

package/src/lib/card/card-title-actions/card-title-actions.component.css

@@ -1,3 +0,0 @@
-.sa-card-title-actions {
-    margin-bottom: 8px;
-}

package/src/lib/card/card-title-actions/card-title-actions.component.html

@@ -1 +0,0 @@
-<div class="sa-card-title-actions"><ng-content></ng-content></div>

package/src/lib/card/card-title-actions/card-title-actions.component.spec.ts

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

package/src/lib/card/card-title-actions/card-title-actions.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-title-actions',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-title-actions.component.html',
-  styleUrl: './card-title-actions.component.css'
-})
-export class CardTitleActionsComponent {
-
-}

package/src/lib/card/card.component.css

@@ -1,84 +0,0 @@
-* {
-    font-family: var(--font);
-}
-
-.sa-card-wrapper {
-    display: flex;
-    border: 1px solid var(--grey-50);
-    border-radius: 6px;
-    /* width: inherit; */
-    padding: 12px;
-    background: var(--structural-white);
-}
-
-.sa-card-wrapper.column {
-    flex-direction: column;
-}
-
-.sa-card-img,
-.sa-card-icon {
-    margin-right: 12px;
-}
-
-.sa-card-img.column,
-.sa-card-icon.column {}
-
-.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;
-}
-
-.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;
-}

package/src/lib/card/card.component.html

@@ -1,34 +0,0 @@
-<div class="sa-card" [ngStyle]="cardStyles">
-    <div class="sa-card-wrapper" [ngClass]="column ? 'column' : ''">
-        <div class="" [ngClass]="avatar ? 'sa-card-img' : 'sa-card-icon'">
-            @if(avatar){
-            <img [src]="avatar" />
-            }@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">
-            @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"></sa-chip>
-                }
-                <ng-content select="sa-card-title-actions"></ng-content>
-
-            </div>
-            }
-            @if(body){
-            <div class="sa-card-body">
-                {{body}}
-            </div>
-            }
-            <ng-content select="sa-card-footer-actions"></ng-content>
-        </div>
-    </div>
-</div>

package/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/src/lib/card/card.component.ts

@@ -1,33 +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';
-
-@Component({
-  selector: 'sa-card',
-  standalone: true,
-  imports: [CommonModule, ChipsComponent, IconComponent],
-  templateUrl: './card.component.html',
-  styleUrl: './card.component.css'
-})
-export class CardComponent {
-  @Input('title') title: string = '';
-  @Input('chip') chip: ChipInterface | null = null;
-  @Input('body') body: string = '';
-  @Input('avatar') avatar: string = '';
-
-  @Input('icon') icon: string = '';
-  @Input('iconSize') iconSize: string;
-
-  @Input('width') width: string | number;
-  @Input('column') column: boolean = false;
-
-  cardStyles: any = {};
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['width']?.currentValue) {
-      this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
-    }
-  }
-}

package/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/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/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/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/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/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 {
-
-}

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

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TestLibraryService } from './component-library.service';
-
-describe('TestLibraryService', () => {
-  let service: TestLibraryService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TestLibraryService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

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

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TestLibraryService {
-
-  constructor() { }
-}

package/src/lib/datepicker/datepicker.component.css

@@ -1,33 +0,0 @@
-::ng-deep .cdk-overlay-container {
-  --mat-datepicker-calendar-container-elevation-shadow: none;
-  --mat-datepicker-calendar-container-shape: 0px;
-  --mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);
-  --mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);
-  --mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);
-  --mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50);
-}
-
-::ng-deep .cdk-overlay-container .mat-datepicker-popup {
-  border-top: 1px solid var(--grey-50);
-  border-right: 1px solid var(--grey-50);
-  border-bottom: 1px solid var(--grey-50);
-  border-radius: var(--small-8px, 8px);
-  height: 356px;
-  padding: 12px;
-  margin-top: 0px;
-  margin-left: 180px;
-  background-color: white;
-}
-
-::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar {
-  box-shadow: none;
-  height: 300px;
-}
-
-::ng-deep .mat-calendar-content .mat-calendar-table-header-divider {
-  display: none;
-}
-
-.date-picker {
-  margin: 30px
-}

package/src/lib/datepicker/datepicker.component.html

@@ -1,11 +0,0 @@
-<mat-form-field class="date-picker">
-  <mat-label>Choose a date</mat-label>
-  <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
-    <input formControlName="start" matStartDate placeholder="Start date">
-    <input formControlName="end" matEndDate placeholder="End date">
-  </mat-date-range-input>
-  <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-  <mat-date-range-picker [calendarHeaderComponent]="CalendarHeaderComponent" #picker>
-  </mat-date-range-picker>
-</mat-form-field>

package/src/lib/datepicker/datepicker.component.spec.ts

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

package/src/lib/datepicker/datepicker.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatNativeDateModule } from '@angular/material/core';
-import { NgFor } from '@angular/common';
-import { NgIf } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
-import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'sa-datepicker',
-  standalone: true,
-  providers: [],
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatDatepickerModule,
-    NgFor,
-    NgIf,
-    ReactiveFormsModule,
-    CalendarHeaderComponent,
-    CommonModule,
-    MatNativeDateModule
-  ],
-  templateUrl: './datepicker.component.html',
-  styleUrl: './datepicker.component.css'
-})
-export class DatepickerComponent extends FieldType<FieldTypeConfig> {
-  @Input() range: any;
-
-  readonly CalendarHeaderComponent = CalendarHeaderComponent;
-
-}