@sarasanalytics-com/design-system 0.0.7 → 0.0.9

package/src/lib/calendar-header/calendar-header.component.ts

@@ -0,0 +1,191 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+} from '@angular/core';
+import {
+  DateAdapter,
+  MatDateFormats,
+  MAT_DATE_FORMATS,
+} from '@angular/material/core';
+import { MatCalendar } from '@angular/material/datepicker';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import { NgFor } from '@angular/common';
+import { MatDateRangePicker } from '@angular/material/datepicker';
+
+
+let nextId = 0;          // used to give unique ids to inputs used in html
+
+@Component({
+  templateUrl: './calendar-header.component.html',
+  styleUrls: ['./calendar-header.component.css'],
+  standalone: true,
+  imports: [
+    NgFor,
+    MatIconModule,
+    MatButton
+  ],
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CalendarHeaderComponent<D> implements OnDestroy {
+  uuid: number = nextId++;
+
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(
+    private calendar: MatCalendar<D>, // calendar instance of picker
+    private dateAdapter: DateAdapter<D>, // native or moment date adapter
+    private picker: MatDateRangePicker<D>,
+    @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats, // for formatting
+    cdr: ChangeDetectorRef
+  ) {
+    // make sure your header stays in sync with the calendar:
+    calendar.stateChanges
+      .pipe(takeUntil(this.destroy$)) // unsubscribe when destroyed
+      .subscribe(() => cdr.markForCheck());
+
+  }
+
+  selectedPreset = "Custom"
+  presets = [
+    "This Quarter",
+    "Last Quarter",
+    "Last 6 Months",
+    "This Year",
+    "Last Year",
+    "Custom"
+  ]
+  // active date label rendered between the arrow buttons
+
+  ngOnInit() {
+    const currentRange: any = this.calendar.selected;
+
+    currentRange?.start.setHours(0, 0, 0, 0);
+    currentRange?.end.setHours(0, 0, 0, 0);
+
+    // To pre-select a preset when the calendar opens.
+    // Match the already selected date range with the date-ranges of all presets.
+    // If already selected date range matches with a preset, pre-select it.
+
+    for (let i = 0; i < this.presets.length; i++) {
+      const tempRange = this.findDate(this.presets[i]);
+      if (tempRange.newStart.getTime() == currentRange.start.getTime() && tempRange.newEnd.getTime() == currentRange.end.getTime()) {
+        this.selectedPreset = this.presets[i];
+        break;
+      }
+    }
+  }
+
+  get periodLabel(): string {
+    // use date adapter to format the label, e.g. "SEP 2020"
+    return this.dateAdapter
+      .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
+      .toLocaleUpperCase();
+  }
+
+  previousClicked(mode: 'month' | 'year'): void {
+    this.changeDate(mode, -1);
+  }
+
+  nextClicked(mode: 'month' | 'year'): void {
+    this.changeDate(mode, 1);
+  }
+
+  changeView() {
+    this.calendar.currentView =
+      this.calendar.currentView == "month"
+        ? "year"
+        : this.calendar.currentView == "year"
+          ? "multi-year"
+          : "month";
+  }
+
+  today = new Date();
+
+  presetChanged(evt: any) {
+    const newRange: any = this.findDate(evt.target.value);
+    this.calendar.activeDate = newRange.newStart;
+    this.picker.select(newRange.newStart);
+    this.picker.select(newRange.newEnd);
+  }
+
+  findDate(selected: string) {
+    const date = this.today.getDate();
+    const month = this.today.getMonth();
+    const year = this.today.getFullYear();
+    let newRange: any;
+    this.selectedPreset = selected;
+    switch (selected) {
+      case "This Quarter": {
+        const thisQuarterMonth = Math.floor(month / 3) * 3;
+        const start = this.dateAdapter.createDate(year, thisQuarterMonth, 1);
+        const end = this.dateAdapter.createDate(year, thisQuarterMonth + 3, 1);
+        newRange = {
+          newStart: start,
+          newEnd: end,
+        }
+        break;
+      }
+      case "Last Quarter": {
+        const lastQuarterMonth = (Math.floor(month / 3) * 3) - 3;
+        const start = this.dateAdapter.createDate(year, lastQuarterMonth, 1);
+        const end = this.dateAdapter.createDate(year, lastQuarterMonth + 3, 1);
+        newRange = {
+          newStart: start,
+          newEnd: end,
+        }
+        break;
+      }
+      case "Last 6 Months": {
+        const end = this.dateAdapter.createDate(year, month, date);
+        const start = this.dateAdapter.addCalendarMonths(end, -6);
+        newRange = {
+          newStart: start,
+          newEnd: end,
+        }
+        break;
+      }
+      case "This Year": {
+        const start = this.dateAdapter.createDate(year, 0, 1);
+        const end = this.dateAdapter.createDate(year, 11, 31);
+        newRange = {
+          newStart: start,
+          newEnd: end,
+        }
+        break;
+      }
+      case "Last Year": {
+        const start = this.dateAdapter.createDate(year - 1, 0, 1);
+        const end = this.dateAdapter.createDate(year - 1, 11, 31);
+        newRange = {
+          newStart: start,
+          newEnd: end,
+        }
+        break;
+      }
+      default: {
+        newRange = {
+          newStart: new Date(),
+          newEnd: new Date(),
+        }
+      }
+    }
+    return newRange;
+  }
+
+  private changeDate(mode: 'month' | 'year', amount: -1 | 1): void {
+    // increment or decrement month or year
+    this.calendar.activeDate =
+      mode === 'month'
+        ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, amount)
+        : this.dateAdapter.addCalendarYears(this.calendar.activeDate, amount);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(); // will trigger unsubscription in takeUntil
+  }
+}

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

@@ -0,0 +1 @@
+<p>card-body works!</p>

package/src/lib/card/card-body/card-body.component.spec.ts

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

package/src/lib/card/card-body/card-body.component.ts

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

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

@@ -0,0 +1,4 @@
+.sa-card-footer-actions {
+    display: flex;
+    justify-content: end;
+}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/card/card-icon/card-icon.component.spec.ts

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

package/src/lib/card/card-icon/card-icon.component.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,84 @@
+* {
+    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

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

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

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

@@ -0,0 +1,129 @@
+.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;
+}