@sarasanalytics-com/design-system 0.0.42 → 0.0.43

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

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

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

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

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

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

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

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

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

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

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

package/projects/component-library/src/lib/message-banner/message-banner.component.spec.ts

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

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

@@ -0,0 +1,31 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { MessageType } from '../../interfaces/message-banner';
+import { IconComponent } from "../icon/icon.component";
+import { HttpClientModule } from '@angular/common/http';
+import { IconService } from '../icon/icon.service';
+import { ButtonComponent } from '../button/button.component';
+import { IconName } from '../../interfaces/icon-interface';
+import { ButtonIconPosition, ButtonSize, ButtonType } from '../../interfaces/button-interface';
+
+@Component({
+  selector: 'sa-message-banner',
+  standalone: true,
+  imports: [HttpClientModule, IconComponent, ButtonComponent],
+  providers: [IconService],
+  templateUrl: './message-banner.component.html',
+  styleUrl: './message-banner.component.css',
+  encapsulation: ViewEncapsulation.None
+})
+export class MessageBannerComponent {
+  @Input() type: MessageType = 'info';
+  @Input() actionText?: string;
+  @Input() content?: string = '';
+  @Input() bannerIcon?: IconName;
+  @Input() bannerIconSize?: string = '';
+  @Input() buttonIcon?: IconName;
+  @Input() buttonType?: ButtonType;
+  @Input() buttonIconPosition?: ButtonIconPosition;
+  @Input() buttonSize?: ButtonSize;
+  @Input() buttonIconSize?: string;
+  @Input() onAction: () => void = () => { };
+}

package/projects/component-library/src/lib/page-layout/page-layout.component.css

@@ -0,0 +1,76 @@
+.layout-container {
+  height: 100%;
+}
+
+.layout-container.padding {
+  padding: var(--medium-20px);
+}
+
+.layout-inner-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.layout-inner-container.border-radius {
+  border: 1px solid var(--grey-100, #EAECF0);
+  background: var(--structural-white);
+  box-shadow: 3px 4px 16px 4px rgba(0, 0, 0, 0.08);
+  border-radius: var(--small-16px, 16px);
+}
+
+.progress-bar-container {
+  border-radius: var(--small-16px, 16px);
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.content-container {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.content-container::-webkit-scrollbar,
+.left-section::-webkit-scrollbar {
+  display: none;
+  /* Safari and Chrome */
+}
+
+.left-section {
+  flex: 1;
+  padding: var(--medium-20px) var(--medium-20px) 0 var(--large-44px);
+  display: flex;
+  flex-direction: column;
+}
+
+.right-section {
+  background: var(--structural-primarytint, #FBFAFF);
+  display: flex;
+  align-items: center;
+  width: 28.9375rem;
+  max-width: 28.9375rem;
+}
+
+.left-wrapper {
+  height: calc(100% - 11.5rem);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+  padding: 1rem 0 1rem 0;
+}
+
+.footer-section {
+  display: flex;
+  margin-top: auto;
+  margin-bottom: var(--large-40px);
+}

package/projects/component-library/src/lib/page-layout/page-layout.component.html

@@ -0,0 +1,30 @@
+<div class="layout-container" [class]="showProgressBarContent === false ? 'no-padding': 'padding'">
+    <div class="layout-inner-container"
+        [class]="showProgressBarContent === false ? 'no-border-radius': 'border-radius'">
+        @if (showProgressBarContent) {
+        <div class="progress-bar-container">
+            <ng-content select="[progress-bar-content]"></ng-content>
+        </div>
+        }
+        <div class="content-container">
+            <div class="left-section">
+                <div class="top-section">
+                    <ng-content select="[top-content]"></ng-content>
+                </div>
+                <div class="left-wrapper">
+                    <ng-content select="[left-content]"></ng-content>
+                </div>
+                @if (showFooterContent) {
+                <div class="footer-section">
+                    <ng-content select="[footer-content]"></ng-content>
+                </div>
+                }
+            </div>
+            @if (showRightContent) {
+            <div class="right-section">
+                <ng-content select="[right-content]"></ng-content>
+            </div>
+            }
+        </div>
+    </div>
+</div>