@sarasanalytics-com/design-system 0.0.43 → 0.0.44

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

@@ -1,65 +0,0 @@
-.sa-icon {
-    display: inline-flex;
-    /* Align with text */
-    align-items: center;
-    /* Center vertically */
-    justify-content: center;
-    /* Center horizontally */
-    color: inherit;
-    /* Inherit color from parent */
-    font-size: inherit;
-    /* Inherit font size */
-}
-
-.sa-icon>svg {
-    width: 1em;
-    /* Responsive to font size */
-    height: 1em;
-    /* Responsive to font size */
-    vertical-align: middle;
-    /* Align with text */
-}
-
-.sa-icon.auto-dimensions>svg {
-    width: fit-content;
-    height: fit-content;
-}
-
-.colored-icon {
-    color: var(--primary-500);
-}
-
-.disabled-icon {
-    color: var(--icon-grey1);
-}
-
-.disabled-checkbox-icon {
-    color: var(--grey-200);
-}
-
-.accordion-info-icon.colored-icon {
-    color: var(--icon-grey1);
-}
-
-.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon {
-    display: flex;
-    width: var(--medium-28px, 28px);
-    padding: var(--small-4px, 4px);
-    align-items: center;
-    border-radius: var(--small-4px, 4px);
-    background: var(--primary-50, #F4EBFF);
-}
-
-.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon {
-    background: var(--grey-50, #F2F4F7);
-}
-
-.checkbox-card-action-button .sa-icon>svg {
-    height: 1.3rem;
-    width: 1.05rem;
-}
-
-.sa-icon.accordion-info-icon>svg {
-    width: var(--medium-20px, 20px);
-    height: var(--medium-20px, 20px);
-}

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

@@ -1,9 +0,0 @@
-@if(img){
-<img [src]="img" [height]="size" [width]="size">
-}@else{
-<span class="sa-icon" [ngClass]="{
-    'url-icon': iconUrl
-  }" [ngClass]="customClass ? [customClass] : []" [innerHTML]="svgIcon" [ngStyle]="iconStyles">
-
-</span>
-}

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

@@ -1,64 +0,0 @@
-import { ChangeDetectorRef, Component, inject, Input, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { IconService } from './icon.service';
-import { DomSanitizer } from '@angular/platform-browser';
-import { CommonModule } from '@angular/common';
-import { IconName } from '../../interfaces/icon-interface';
-
-@Component({
-  selector: 'sa-icon',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './icon.component.html',
-  styleUrl: './icon.component.css',
-  encapsulation: ViewEncapsulation.None
-})
-export class IconComponent {
-  iconService = inject(IconService);
-  sanitizer = inject(DomSanitizer);
-
-  @Input('img') img: string;
-
-  @Input() icon?: IconName;
-  @Input('size') size: string;
-  @Input('color') color: string;
-  @Input('iconPath') iconPath: string = "";
-  @Input() iconUrl: string = "";
-  @Input('customClass') customClass: string = "";
-
-  svgIcon: any;
-  iconStyles: any = {
-    // fontSize: '44px',
-    // color: 'red'
-  };
-
-  constructor(private cdr: ChangeDetectorRef) { }
-  ngOnInit() {
-  }
-  ngOnChanges(changes: SimpleChanges) {
-
-
-    if (changes['iconPath'] && !!this.iconPath.trim()) {
-      this.iconService.getSvg(this.icon || "", this.iconPath).subscribe((svg) => {
-        this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
-      })
-    }
-    if (changes['icon'] || changes['iconUrl']) {
-      const icon = this.icon || this.iconUrl;
-      if (icon) {
-        this.iconService.getSvg(icon).subscribe((svg) => {
-          this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
-          this.cdr.detectChanges()
-        })
-      } else {
-        this.svgIcon = '';
-      }
-    }
-    if (changes['size'] || changes['color']) {
-      this.iconStyles.fontSize = this.size + 'px';
-      this.iconStyles.width = this.iconUrl ? "fit-content" : '1em';
-      this.iconStyles.height = this.iconUrl ? "fit-content" : '1em';
-      this.iconStyles.color = this.color;
-    }
-  }
-
-}

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

@@ -1,26 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class IconService {
-
-  http = inject(HttpClient);
-  private path: string = 'assets/';
-
-  constructor() { }
-
-  getSvg(iconName: string, customPath?: string): Observable<string> {
-    const isUrl = /^https?:\/\//.test(iconName);
-    const customSvgUrl = customPath ? customPath + (iconName ? iconName + '.svg' : '') : '';
-    const svgUrl = isUrl ? iconName : `${this.path}${iconName}.svg`;
-
-    return this.http.get(customSvgUrl || svgUrl, { headers: { 'skip': 'true' }, responseType: 'text' });
-  }
-
-  setIconPath(path: string) {
-    if (path) this.path = path;
-  }
-}

package/projects/component-library/src/lib/left-nav/left-nav.component.css

@@ -1,109 +0,0 @@
-.sa-left-nav {
-    height: calc(100vh - 32px);
-    width: calc(100vw - 32px);
-    padding: 8px;
-    display: flex;
-}
-
-.sa-left-nav-logo {
-    display: block;
-    width: 40px;
-    margin: auto;
-    padding: 20px 0;
-    border-bottom: 1px #fff solid;
-    min-height: 40px;
-}
-
-.sa-logo {
-    height: 40px;
-    width: 20px;
-    display: block;
-    margin: auto;
-    background-position: center;
-    background: url('../../../../../src/assets/sarasWhite.svg') no-repeat;
-}
-
-.sa-left-nav-container {
-    height: inherit;
-    width: 64px;
-    background-color: var(--primary-900);
-    border-radius: 8px;
-    padding: 8px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-}
-
-.sa-left-nav-items {
-    flex: 1;
-    overflow-y: auto;
-}
-
-.sa-left-nav-items-container {
-    padding: 40px 0;
-    height: 100%;
-    overflow: auto;
-    box-sizing: border-box;
-}
-
-.sa-left-nav-item,
-.sa-left-nav-footer-item {
-    height: 40px;
-    width: 40px;
-    margin: 8px auto;
-    cursor: pointer;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-::-webkit-scrollbar {
-    display: none;
-}
-
-.sa-left-nav-footer-item {
-    margin: 4px auto;
-}
-
-.sa-left-nav-item:hover,
-.sa-left-nav-item.active,
-.sa-left-nav-footer-item.active,
-.sa-left-nav-footer-item:hover {
-    background-color: var(--primary-500);
-}
-
-.sa-left-nav-item-name,
-.sa-left-nav-item-icon,
-.sa-left-nav-footer-icon,
-.sa-left-nav-footer-name {
-    /* background-size: 24px;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 40px;
-    width: 40px;
-    display: block; */
-    height: 24px;
-    width: 24px;
-    display: block;
-}
-
-.sa-left-nav-item-name,
-mn.sa-left-nav-footer-name {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* replace with avatar */
-}
-
-.sa-left-nav-footer {
-    min-height: fit-content;
-    border-top: 1px solid #fff;
-}
-
-.sa-left-nav-content {
-    width: calc(100% - 64px)
-}
-
-/* background: url('../../../../../src/assets/saras_white.svg') no-repeat; */

package/projects/component-library/src/lib/left-nav/left-nav.component.html

@@ -1,51 +0,0 @@
-<div class="sa-left-nav">
-
-    <div class="sa-left-nav-container">
-        <div class="sa-left-nav-logo">
-            <!-- <span class="sa-logo"></span> -->
-            <sa-icon icon="sarasWhite" size="40"></sa-icon>
-        </div>
-        <div class="sa-left-nav-items">
-            @if(data && data.items && !!data.items.length){
-            <div class="sa-left-nav-items-container">
-                <ng-container *ngFor="let item of data.items; let i = index">
-                    <div class="sa-left-nav-item" [ngClass]="item.active ? 'active' : '' "
-                        (click)="onNavItemClick(item, i, $event)" (mouseenter)="onNavItemBlur(item,i,$event,tooltip)"
-                        #tooltip="matTooltip" [matTooltip]="item.tooltip" matTooltipPosition="right">
-
-                        <sa-icon class="sa-left-nav-item-icon" [icon]="item.icon" size="24" color="white"></sa-icon>
-                        <!-- <span class="sa-left-nav-item-icon"
-                            [ngStyle]="{ 'background-image': 'url(' + item.icon_url + ')' }"></span> -->
-                    </div>
-                </ng-container>
-            </div>
-            }
-        </div>
-        <div class="sa-left-nav-footer">
-            @if(data && data.footerItems && !!data.footerItems.length){
-            <div class="sa-left-nav-footer-container">
-                <ng-container *ngFor="let item of data.footerItems; let i = index">
-                    <div class="sa-left-nav-footer-item" [ngClass]="item.active ? 'active' : '' "
-                        (click)="onFooterItemClick(item, i, $event)"
-                        (mouseenter)="onFooterItemBlur(item,i,$event,tooltip)" #tooltip="matTooltip"
-                        [matTooltip]="item.tooltip" matTooltipPosition="right">
-                        @if(item.type === 'AVATAR'){
-                        <!-- <span class="sa-left-nav-footer-name">ET</span> -->
-                        <sa-avatar altText="ET" [imagePath]="''" size="extra-small"></sa-avatar>
-                        }@else{
-                        <sa-icon class="sa-left-nav-footer-icon" [icon]="item.icon" size="24" color="white"></sa-icon>
-                        <!-- <span class="sa-left-nav-footer-icon"
-                            [ngStyle]="{ 'background-image': 'url(' + item.icon_url || '' + ')' }"></span> -->
-                        }
-                    </div>
-                </ng-container>
-            </div>
-            }
-        </div>
-    </div>
-
-    <div class="sa-left-nav-content">
-        <ng-content></ng-content>
-    </div>
-
-</div>

package/projects/component-library/src/lib/left-nav/left-nav.component.spec.ts

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

package/projects/component-library/src/lib/left-nav/left-nav.component.ts

@@ -1,180 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, inject, Inject, Input, Output } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AvatarComponent } from '../avatar/avatar.component';
-import { IconComponent } from '../icon/icon.component';
-// import { AvatarComponent } from '../avatar/avatar.component';
-
-import {
-  MatTooltip,
-  MatTooltipModule
-} from '@angular/material/tooltip';
-@Component({
-  selector: 'sa-left-nav',
-  standalone: true,
-  imports: [
-    CommonModule,
-    AvatarComponent,
-    IconComponent,
-    MatTooltipModule
-  ],
-  templateUrl: './left-nav.component.html',
-  styleUrl: './left-nav.component.css'
-})
-export class LeftNavComponent {
-  @Input('data') data: ILeftNav;
-  @Output('clickEvent') clickEvent: EventEmitter<ILeftNavClickEvent>;
-  @Output('hoverEvent') hoverEvent: EventEmitter<ILeftNavBlurEvent>;
-
-  // @Inject(ActivatedRoute) activeRouteService: ActivatedRoute;
-  // @Inject(Router) routerService: Router;
-
-  private activeItem: ILeftNavItem | null;
-
-  constructor(private route: ActivatedRoute, private router: Router) {
-    this.clickEvent = new EventEmitter();
-    this.hoverEvent = new EventEmitter();
-  }
-
-  ngOnInit() {
-    console.log(this.data.items);
-    if (!this.data.footerItems) {
-      this.data.footerItems = data.footerItems;
-    }
-    if (this.data?.items?.length) {
-      this.onNavItemClick(this.data.items[0], 0);
-    }
-  }
-
-  setItemActive(index: number) {
-    try {
-      if (this.activeItem) {
-        this.activeItem.active = false;
-      }
-      if (this.data?.items?.length) {
-        this.activeItem = this.data.items[index];
-        this.activeItem.active = true;
-      }
-    } catch (e) {
-      console.log(e);
-    }
-  }
-
-  onNavItemClick(item: ILeftNavItem, index: number, event: any = null) {
-    console.log(item, index);
-
-    this.clickEvent.emit({
-      event,
-      type: 'NAV_ITEM_CLICK',
-      item
-    });
-
-    if (!item.disable && item.path) {
-      this.setItemActive(index);
-      this.router.navigate([item.path])
-    }
-  }
-
-  onFooterItemClick(item: ILeftNavItem, index: number, event: any = null) {
-    this.clickEvent.emit({
-      event,
-      type: 'FOOTER_ITEM_CLICK',
-      item
-    });
-  }
-  onFooterItemBlur(item: ILeftNavItem, index: number, event: any = null, tooltip: MatTooltip) {
-    // console.log("blur", item, index);
-    this.hoverEvent.emit({
-      event,
-      type: 'FOOTER_ITEM_HOVER',
-      item
-    });
-    if (tooltip) {
-      tooltip.show();
-    }
-  }
-  onNavItemBlur(item: ILeftNavItem, index: number, event: any = null, tooltip: MatTooltip) {
-    // console.log(item, index);
-    this.hoverEvent.emit({
-      event,
-      type: 'NAV_ITEM_HOVER',
-      item
-    });
-    if (tooltip) {
-      tooltip.show();
-    }
-  }
-
-
-}
-
-export interface ILeftNav {
-  items?: ILeftNavItem[];
-  footerItems?: ILeftNavItem[];
-}
-export interface ILeftNavItem {
-  title: string,
-  // icon_url?: string,
-  icon?: string,
-  disable?: boolean,
-  tooltip?: string,
-  relativePath?: boolean,
-  path?: string,
-  active?: boolean,
-  type?: 'ICON' | 'AVATAR';
-}
-export interface ILeftNavClickEvent {
-  type: 'NAV_ITEM_CLICK' | 'FOOTER_ITEM_CLICK' | 'LOGO_CLICK';
-  event: any,
-  item: ILeftNavItem
-}
-export interface ILeftNavBlurEvent {
-  type: 'NAV_ITEM_HOVER' | 'FOOTER_ITEM_HOVER' | 'LOGO_HOVER';
-  event: any,
-  item: ILeftNavItem
-}
-
-export enum ILeftNavTypes {
-
-}
-
-const data: ILeftNav = {
-  items: [{
-    title: 'Home',
-    icon: '',
-    disable: false,
-    tooltip: '',
-    relativePath: true,
-    path: 'home'
-  }, {
-    title: 'Pricing',
-    icon: '',
-    disable: true,
-    tooltip: '',
-    relativePath: true,
-    path: ''
-  }, {
-    title: 'Setting',
-    icon: 'settingsOutlined',
-    disable: true,
-    tooltip: 'coming soon',
-    relativePath: true,
-    path: ''
-  }],
-  footerItems: [{
-    title: 'Help',
-    icon: 'chatHelpOutlined',
-    disable: true,
-    tooltip: 'coming soon'
-  }, {
-    title: 'Name',
-    disable: false,
-    tooltip: '',
-    type: 'AVATAR'
-  }, {
-    title: 'Chevron',
-    icon: 'doubleDownOutlined',
-    disable: true,
-    tooltip: ''
-  }]
-}

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

@@ -1,28 +0,0 @@
-.feature-list-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--small-12px, 12px);
-    align-self: stretch;
-}
-
-.feature-item {
-    display: flex;
-    align-items: center;
-    gap: var(--small-8px, 8px);
-    align-self: stretch;
-}
-
-.feature-list-container .feature-text {
-    color: var(--text-mediumemphasis, #6D6979);
-    font-family: var(--font);
-    font-size: var(--small-14px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--medium-20px);
-    letter-spacing: 0.25px;
-}
-
-.feature-icon sa-icon {
-    display: flex;
-}

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

@@ -1,10 +0,0 @@
-<div class="feature-list-container">
-    <div class="feature-item" *ngFor="let item of listData">
-        <div *ngIf="featuresIcon" class="feature-icon">
-            <sa-icon [icon]="featuresIcon" customClass="colored-icon"></sa-icon>
-        </div>
-        <div>
-            <span class="feature-text">{{ item?.text }}</span>
-        </div>
-    </div>
-</div>

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

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

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

@@ -1,15 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { IconComponent } from '../icon/icon.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'lib-list',
-  standalone: true,
-  imports: [IconComponent, CommonModule],
-  templateUrl: './list.component.html',
-  styleUrl: './list.component.css'
-})
-export class ListComponent {
-  @Input() listData: { icon?: string; text: string }[] = [];
-  @Input('featuresIcon') featuresIcon: string = '';
-}

package/projects/component-library/src/lib/message-banner/message-banner.component.css

@@ -1,52 +0,0 @@
-.message-banner {
-  display: flex;
-  align-items: center;
-  padding: var(--small-12px, 12px) var(--small-16px, 16px);
-  border-radius: var(--small-8px, 8px);
-  border: 1px solid var(--grey-100);
-  font-family: Arial, sans-serif;
-  gap: var(--small-8px, 8px);
-}
-
-.content {
-  flex: 1 0 0;
-  font-family: var(--font-roboto, Roboto);
-  font-size: var(--small-14px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--medium-20px);
-  letter-spacing: 0.25px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-}
-
-.success {
-  background-color: #e6f4ea;
-  border: 1px solid var(--grey-100, #EAECF0);
-  color: #1e8e3e;
-}
-
-.warning {
-  color: var(--text-highemphasis, #4D4D4D);
-  border: 1px solid var(--grey-50, #E9EBEB);
-  background: var(--secondary-50, #FFF3EB);
-}
-
-.info {
-  border: 1px solid var(--grey-100, #EAECF0);
-  background-color: var(--structural-primarytint, #FBFAFF);
-  color: var(--text-mediumemphasis, #6D6979);
-}
-
-.error {
-  color: var(--semantic-error-500, #BD271E);
-  border: 1px solid var(--grey-100, #EAECF0);
-  background: var(--semantic-error-50, #F8E9E9);
-}

package/projects/component-library/src/lib/message-banner/message-banner.component.html

@@ -1,15 +0,0 @@
-<div class="message-banner" [class]="type">
-    @if (bannerIcon) {
-    <sa-icon class="icon" [icon]="bannerIcon" [size]="bannerIconSize" [style.height.px]="bannerIconSize"></sa-icon>
-    }
-    <div class="content">
-        <ng-content></ng-content>
-    </div>
-    @if (actionText) {
-    <sa-button class="action-button" [text]="actionText" [icon]="buttonIcon" [size]="buttonSize" [type]="buttonType"
-        [iconPosition]="buttonIconPosition" [size]="buttonSize" [buttonIconSize]="buttonIconSize"
-        (click)="onAction()">{{
-        actionText
-        }}</sa-button>
-    }
-</div>