@sarasanalytics-com/design-system 0.0.3

package/projects/component-library/src/interfaces/button-interface.ts

@@ -0,0 +1,12 @@
+export interface ButtonInterface {
+    id: string | number,
+    text: string,
+    type: string,
+    size: string,
+    state: string,
+    imagePath?: string,
+    iconPosition?: string,
+    href?: string,
+    hrefTarget?: string,
+    isSubmit?: boolean,
+}

package/projects/component-library/src/interfaces/chip-interface.ts

@@ -0,0 +1,11 @@
+export interface ChipInterface {
+    id: string | number,
+    text: string,
+    type: string,
+    state: string,
+    filling: string,
+    iconPosition?: string,
+    iconPath?: string,
+    largeStateIcon?: string,
+    largeStateText?: string
+}

package/projects/component-library/src/interfaces/grid-interface.ts

@@ -0,0 +1,24 @@
+import { ButtonInterface } from "./button-interface";
+import { ChipInterface } from "./chip-interface";
+import { AvatarInterface } from "./avatar-interface";
+export interface GridInterface {
+  cellType: string,
+  viewText: boolean,
+  viewLeadingIcon: boolean,
+  viewTrailingIcon: boolean,
+  viewButton: boolean,
+  viewChip: boolean,
+  viewAvatar: boolean,
+  iconPath?: string,
+  chipConfig?: ChipInterface[],
+  buttonConfig?: ButtonInterface,
+  avatarConfig?: AvatarInterface,
+  text?: string | number,
+  subText?: string | number,
+  interactiveLink?: string,
+  interactiveLinkTarget?: string,
+  chipClicked?(evt: any): any,
+  linkClicked?(evt: any): any,
+  buttonClicked?(evt: any): any,
+  avatarClicked?(evt: any): any
+}

package/projects/component-library/src/interfaces/select-interface.ts

@@ -0,0 +1,19 @@
+import { FormlyFieldProps } from "@ngx-formly/core"
+interface SelectSubInterface {
+    label: string,
+    supportText: string,
+    dropIcon: string,
+    dropIconPosition: string,
+    multiple: boolean,
+    iconPath: string,
+    type: string,
+    state: string,
+    filling: string,
+    iconPosition: string,
+}
+
+export interface SelectInterface extends FormlyFieldProps {
+    options: any,
+    disabled: boolean,
+    params: SelectSubInterface
+}

package/projects/component-library/src/interfaces/tab-interface.ts

@@ -0,0 +1,6 @@
+export interface TabInterface {
+    tabName: string,
+    tabIcon?: string,
+    iconPosition?: string,
+    badgeContent?: string,
+}

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

@@ -0,0 +1,48 @@
+.extra-small {
+  --width: var(--medium-24px);
+  --height: var(--medium-24px);
+}
+
+.small {
+  --width: 28px;
+  --height: 28px;
+}
+
+.medium {
+  --width: 32px;
+  --height: 32px;
+}
+
+.large {
+  --width: 36px;
+  --height: 36px;
+}
+
+.extra-large {
+  --width: 40px;
+  --height: 40px;
+}
+
+.avatar {
+  display: flex;
+}
+
+.avatar-img {
+  background-color: var(--primary-50);
+  height: var(--height);
+  width: var(--width);
+  border-radius: var(--height);
+  object-fit: cover;
+
+  font-family: var(--font);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: var(--height);
+  letter-spacing: 0.5px;
+  text-align: center;
+  overflow: none;
+}
+
+.avatar:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,5 @@
+<div class="avatar {{size}}" (click)="avatarClicked($event)" (mouseenter)="mouseEnter($event)"
+  (mouseleave)="mouseLeave($event)">
+  <img *ngIf="imagePath" class="avatar-img" alt="{{altText}}" src="{{imagePath}}">
+  <p *ngIf="!imagePath" class="avatar-img">{{altText}}</p>
+</div>

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

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

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

@@ -0,0 +1,50 @@
+import { Component, EventEmitter } from '@angular/core';
+import { Input, Output } from '@angular/core';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'sa-avatar',
+  standalone: true,
+  imports: [NgIf],
+  templateUrl: './avatar.component.html',
+  styleUrl: './avatar.component.css'
+})
+export class AvatarComponent {
+  @Input() id: string | number;
+  @Input() imagePath: string;
+  @Input() altText: string;
+  @Input() size: string;
+
+  @Output() onClickEvent = new EventEmitter
+  @Output() onMouseInEvent = new EventEmitter
+  @Output() onMouseOutEvent = new EventEmitter
+
+  eventEmitObject = {}
+
+  ngOnChanges(): void {
+    this.eventEmitObject = {
+      id: this.id
+    }
+  }
+
+  avatarClicked(evt: Event) {
+    this.onClickEvent.emit({
+      ...this.eventEmitObject,
+      evt
+    })
+  }
+
+  mouseEnter(evt: Event) {
+    this.onMouseInEvent.emit({
+      ...this.eventEmitObject,
+      evt
+    })
+  }
+
+  mouseLeave(evt: Event) {
+    this.onMouseOutEvent.emit({
+      ...this.eventEmitObject,
+      evt
+    })
+  }
+}

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

@@ -0,0 +1,145 @@
+.primary {
+  --default-bg: var(--primary-500);
+  --default-color: var(--text-white);
+  --default-border: transparent;
+  --hover-bg: var(--primary-700);
+  --hover-color: var(--text-white);
+  --hover-border: transparent;
+  --disabled-bg: var(--grey-100);
+  --disabled-color: var(--text-white);
+  --disabled-border: transparent;
+  --error-default-bg: var(--semantic-error-500);
+  --error-hover-bg: var(--semantic-error-600);
+  --error-default-color: var(--text-white);
+  --error-hover-color: var(--text-white);
+  --error-default-border: var(--semantic-error-500);
+  --error-hover-border: var(--semantic-error-500);
+  --svg-icon-color: var(--default-color);
+}
+
+.outline {
+  --default-bg: none;
+  --default-color: var(--primary-500);
+  --default-border: var(--primary-500);
+  --hover-bg: var(--primary-50);
+  --hover-color: var(--primary-700);
+  --hover-border: var(--primary-700);
+  --disabled-bg: none;
+  --disabled-color: var(--grey-100);
+  --disabled-border: var(--grey-100);
+  --error-default-bg: none;
+  --error-hover-bg: var(--semantic-error-50);
+  --error-default-color: var(--semantic-error-500);
+  --error-hover-color: var(--semantic-error-600);
+  --error-default-border: var(--semantic-error-500);
+  --error-hover-border: var(--semantic-error-600);
+  --svg-icon-color: var(--default-color);
+}
+
+.transparent {
+  --default-bg: none;
+  --default-color: var(--primary-500);
+  --default-border: transparent;
+  --hover-bg: var(--primary-50);
+  --hover-color: var(--primary-700);
+  --hover-border: transparent;
+  --disabled-bg: none;
+  --disabled-color: var(--grey-100);
+  --disabled-border: transparent;
+  --error-default-bg: none;
+  --error-hover-bg: var(--semantic-error-50);
+  --error-default-color: var(--semantic-error-500);
+  --error-hover-color: var(--semantic-error-600);
+  --error-default-border: transparent;
+  --error-hover-border: transparent;
+  --svg-icon-color: var(--default-color);
+}
+
+.large {
+  --sizing-1: var(--small-8px);
+  --sizing-2: var(--small-16px);
+  --sizing-3: var(--small-8px);
+  --height: var(--medium-36px);
+  --font-size: var(--small-14px);
+}
+
+.medium {
+  --sizing-1: var(--small-6px);
+  --sizing-2: var(--small-12px);
+  --sizing-3: var(--small-8px);
+  --height: var(--medium-32px);
+  --font-size: var(--small-14px);
+}
+
+.small {
+  --sizing-1: var(--small-4px);
+  --sizing-2: var(--small-8px);
+  --sizing-3: var(--small-8px);
+  --height: var(--medium-24px);
+  --font-size: var(--small-12px);
+}
+
+.disabled {
+  background-color: var(--disabled-bg) !important;
+  color: var(--disabled-color) !important;
+  border: 1px solid var(--disabled-border) !important;
+  cursor: default !important;
+  --svg-icon-color: var(--disabled-color) !important;
+}
+
+.error {
+  background-color: var(--error-default-bg) !important;
+  color: var(--error-default-color) !important;
+  border: 1px solid var(--error-default-border) !important;
+  --svg-icon-color: var(--error-default-color) !important;
+}
+
+.error:hover {
+  background-color: var(--error-hover-bg) !important;
+  color: var(--error-hover-color) !important;
+  --svg-icon-color: var(--error-hover-color) !important;
+}
+
+.sa-button {
+  display: flex;
+  width: max-content;
+  padding: var(--sizing-1) var(--sizing-2);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sizing-3);
+  box-sizing: border-box;
+  height: var(--height);
+
+  border-radius: 4px;
+  font-family: var(--font);
+  font-size: var(--font-size);
+  cursor: pointer;
+
+  background-color: var(--default-bg);
+  border: 1px solid var(--default-border);
+  color: var(--default-color);
+
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.sa-button:hover {
+  background-color: var(--hover-bg);
+  border: 1px solid var(--hover-border);
+  color: var(--hover-color);
+  --svg-icon-color: var(--hover-color);
+}
+
+.svg-icon {
+  mask-size: contain;
+  width: 16px;
+  height: 16px;
+  background-color: var(--svg-icon-color);
+}
+
+.btn-hide {
+  display: none;
+}

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

@@ -0,0 +1,11 @@
+<button (click)="buttonClicked($event)" id="sa-button-{{uuid}}" class="btn-hide"
+  [type]="isSubmit ? 'submit' : 'button'"></button>
+<!-- (click)="buttonClicked()" on button instead of label breaks whole thing -->
+<label for="sa-button-{{uuid}}" role="button" tabindex="0" (mouseenter)="mouseIn()" (mouseleave)="mouseOut()"
+  (keydown.enter)="buttonClicked($event)" for="sa-button" class="sa-button {{state}} {{type}} {{size}}">
+  <div class="svg-icon" [style]="svgStyle"
+    [style.display]="(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'"></div>
+  {{text}}
+  <div class="svg-icon" [style]="svgStyle"
+    [style.display]="(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'"></div>
+</label>

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

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

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

@@ -0,0 +1,68 @@
+import { Component, Output } from '@angular/core';
+import { Input } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { NgStyle } from '@angular/common';
+
+let nextId = 0;    // used to give unique ids to inputs used in html
+
+@Component({
+  selector: 'sa-button',
+  standalone: true,
+  imports: [NgIf, NgStyle],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+
+export class ButtonComponent {
+  @Input() id: string | number;
+  @Input() type: string;
+  @Input() state: string;
+  @Input() size: string;
+  @Input() text: string | number;
+  @Input() ImagePath: string;
+  @Input() iconPosition: string;
+  @Input() href: string;
+  @Input() hrefTarget: string;
+  @Input() isSubmit: boolean = false;
+
+  @Output() onClickEvent = new EventEmitter();
+  @Output() onMouseInEvent = new EventEmitter();
+  @Output() onMouseOutEvent = new EventEmitter();
+
+  svgStyle = {}
+  eventEmitObject = {}
+  uuid: number = nextId++;
+
+  ngOnChanges(): void {
+    this.svgStyle = {
+      '-webkit-mask-image': `url(${this.ImagePath})`,
+      'mask-image': `url(${this.ImagePath})`,
+    }
+    this.eventEmitObject = {
+      id: this.id
+    }
+  }
+
+  buttonClicked(evt: Event) {
+    if (this.state == "disabled") return;
+    this.onClickEvent.emit({
+      ...this.eventEmitObject,
+      evt
+    });
+    if (this.href != "") {
+      if (this.hrefTarget == "blank") window.open(this.href);
+      else if (this.hrefTarget == "self") location.href = this.href;
+    }
+  }
+
+  mouseIn() {
+    if (this.state == "disabled") return;
+    this.onMouseInEvent.emit();
+  }
+
+  mouseOut() {
+    if (this.state == "disabled") return;
+    this.onMouseOutEvent.emit();
+  }
+}

package/projects/component-library/src/lib/calendar-header/calendar-header.component.css

@@ -0,0 +1,67 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--grey-50);
+  margin-top: -4px;
+  margin-bottom: var(--small-8px, 8px);
+}
+
+.header-label {
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+
+.range-preset {
+  width: 180px;
+  position: absolute;
+
+  padding: var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);
+  box-sizing: border-box;
+
+
+  margin-top: -9px;
+  margin-left: -180px;
+
+  height: 356px;
+  background-color: white;
+  border-top: 1px solid var(--grey-50);
+  border-left: 1px solid var(--grey-50);
+  border-bottom: 1px solid var(--grey-50);
+  border-bottom-left-radius: var(--small-8px, 8px);
+  border-top-left-radius: var(--small-8px, 8px);
+
+  gap: var(--small-8px, 8px);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.preset {
+  padding: var(--small-8px, 8px);
+  display: flex;
+  gap: var(--small-4px, 4px);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  color: var(--text-mediumemphasis);
+  margin-bottom: -5px;
+}
+
+.preset-radio {
+  cursor: pointer;
+}
+
+.preset-label {
+  cursor: pointer;
+}
+
+.preset-selected {
+  color: var(--primary-500);
+}

package/projects/component-library/src/lib/calendar-header/calendar-header.component.html

@@ -0,0 +1,20 @@
+<div class="range-preset">
+  <div class="preset" *ngFor="let preset of presets, let i = index">
+    <label class="preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}"
+      for="preset-radio-{{i}}">{{preset}}</label>
+    <input class="preset-radio" (change)="presetChanged($event)" [checked]="preset == selectedPreset"
+      id="preset-radio-{{i}}" type="radio" name="preset-radios-{{uuid}}" value="{{preset}}">
+  </div>
+</div>
+
+<div class="header">
+  <button mat-icon-button (click)="previousClicked('month')">
+    <mat-icon>keyboard_arrow_left</mat-icon>
+  </button>
+
+  <button mat-button class="header-label" (click)="changeView()">{{ periodLabel }}</button>
+
+  <button mat-icon-button (click)="nextClicked('month')">
+    <mat-icon>keyboard_arrow_right</mat-icon>
+  </button>
+</div>

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

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