@sarasanalytics-com/design-system 0.0.3 → 0.0.4

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

@@ -1,6 +0,0 @@
-export interface AvatarInterface {
-    id: string | number,
-    size: string,
-    imagePath: string,
-    altText: string
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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