@sarasanalytics-com/design-system 0.0.3

package/projects/component-library/src/lib/tool-tip/tool-tip.component.css

@@ -0,0 +1,139 @@
+.tool-tip-horizontal {
+  display: flex;
+  width: max-content;
+  justify-content: center;
+  align-items: center;
+}
+
+.tool-tip-vertical {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  justify-content: center;
+  align-items: center;
+}
+
+.tool-tip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--small-16px, 16px);
+  width: 375px;
+  height: auto;
+  box-sizing: border-box;
+  padding: var(--medium-20px, 20px) var(--medium-24px, 24px);
+  border-radius: var(--small-4px, 4px);
+  background: var(--grey-700, #161E27);
+  /* background-color: blue; */
+  font-family: var(--font);
+}
+
+.tool-tip-content {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--small-8px, 8px);
+  /* background-color: green; */
+}
+
+.tool-tip-heading {
+  font-size: 16px;
+  font-style: normal;
+  color: var(--text-white, #FFF);
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.15px;
+  /* background-color: pink; */
+}
+
+.tool-tip-message {
+  font-size: 14px;
+  color: var(--grey-50, #E9EAEB);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  /* background-color: yellow; */
+}
+
+.tool-tip-controls {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  /* background-color: orange; */
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+
+.tool-tip-navigate {
+  color: var(--text-lowemphasis, #989DA3);
+  /* background-color: aqua; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.skip-button ::ng-deep .sa-button {
+  color: var(--grey-100, #BABDC1) !important;
+}
+
+.skip-button ::ng-deep .sa-button:hover {
+  background-color: transparent;
+}
+
+.tool-tip-navigate-icon {
+  cursor: pointer;
+}
+
+.left-icon {
+  transform: rotate(180deg);
+}
+
+.tool-tip-control-buttons {
+  /* background-color: aquamarine; */
+  display: flex;
+  gap: 4px;
+}
+
+.tool-tip-break {
+  width: 100%;
+  height: 0.5px;
+  background: var(--grey-50, #E9EAEB);
+}
+
+.hidden-msg {
+  display: none;
+}
+
+.tool-tip-pointer-icon {
+  display: flex;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+
+  border-bottom: 11px solid var(--grey-700, #161E27);
+}
+
+.pointer-left {
+  transform: rotate(-90deg);
+  margin-right: -3px;
+}
+
+.pointer-right {
+  transform: rotate(90deg);
+  margin-left: -3px;
+}
+
+.pointer-top {
+  margin-bottom: -3px;
+}
+
+.pointer-bottom {
+  transform: rotate(180deg);
+  margin-top: -3px;
+}

package/projects/component-library/src/lib/tool-tip/tool-tip.component.html

@@ -0,0 +1,31 @@
+<div class="tool-tip-vertical">
+  <div class="tool-tip-pointer-icon pointer-top" *ngIf="pointerPosition == 'top'"></div>
+  <div class="tool-tip-horizontal">
+    <div class="tool-tip-pointer-icon pointer-left" *ngIf="pointerPosition == 'left'"></div>
+    <div class="tool-tip">
+      <div class="tool-tip-content">
+        <div class="tool-tip-heading">Heading</div>
+        <div *ngFor="let msg of messages, let i = index" class="tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}">
+          {{msg}}
+        </div>
+      </div>
+      <div class="tool-tip-break">
+      </div>
+      <div class="tool-tip-controls">
+        <div class="tool-tip-navigate">
+          <img class="left-icon tool-tip-navigate-icon" (click)="updateMsgInd(-1)" [src]="arrowIcon" alt="">
+          {{msgInd+1}} of {{messages.length}}
+          <img class="right-icon tool-tip-navigate-icon" (click)="updateMsgInd(1)" [src]="arrowIcon" alt="">
+        </div>
+        <div class="tool-tip-control-buttons">
+          <sa-button (onClickEvent)="skipToolTip()" class="skip-button" text="Skip" type="transparent" size="medium"
+            state="default"></sa-button>
+          <sa-button (onClickEvent)="updateMsgInd(1)" text="Next" type="primary" size="medium" state="default">
+          </sa-button>
+        </div>
+      </div>
+    </div>
+    <div class="tool-tip-pointer-icon pointer-right" *ngIf="pointerPosition == 'right'"></div>
+  </div>
+  <div class="tool-tip-pointer-icon pointer-bottom" *ngIf="pointerPosition == 'bottom'"></div>
+</div>

package/projects/component-library/src/lib/tool-tip/tool-tip.component.spec.ts

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

package/projects/component-library/src/lib/tool-tip/tool-tip.component.ts

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+import { NgFor } from '@angular/common';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'sa-tool-tip',
+  standalone: true,
+  imports: [ButtonComponent, NgFor, NgIf],
+  templateUrl: './tool-tip.component.html',
+  styleUrl: './tool-tip.component.css'
+})
+export class ToolTipComponent {
+  @Input() messages: string[];
+  @Input() pointerPosition: string;
+
+  @Output() toolTipSkipped = new EventEmitter();
+  @Output() toolTipSeen = new EventEmitter();
+  arrowIcon = "../assets/arrow.svg";
+  pointer = "../assets/pointer-polygon.svg";
+
+  msgInd: number = 0;   // is the index of current message being displayed
+
+  updateMsgInd(k: number) {
+    this.msgInd += k;
+    if (this.msgInd < 0) this.msgInd = 0;
+    if (this.msgInd > this.messages.length - 1) {
+      this.msgInd = this.messages.length - 1;
+      this.toolTipSeen.emit();
+    }
+  }
+
+  skipToolTip() {
+    this.toolTipSkipped.emit();
+  }
+
+}

package/projects/component-library/src/public-api.ts

@@ -0,0 +1,25 @@
+/*
+ * Public API Surface of component-library
+ */
+
+
+export * from './lib/component-library.service';
+export * from './lib/component-library.component';
+export * from './lib/button/button.component';
+export * from './lib/chips/chips.component';
+export * from './lib/avatar/avatar.component';
+export * from './lib/grid-cell/grid-cell.component';
+export * from './lib/header/header.component';
+export * from './lib/toast/toast.component';
+export * from './lib/form-select/form-select.component';
+export * from './lib/stepper/stepper.component';
+export * from './lib/tool-tip/tool-tip.component';
+export * from './lib/datepicker/datepicker.component';
+export * from './lib/tabs/tabs.component';
+
+export * from './interfaces/grid-interface';
+export * from './interfaces/avatar-interface';
+export * from './interfaces/button-interface';
+export * from './interfaces/chip-interface';
+export * from './interfaces/select-interface';
+export * from './interfaces/tab-interface';

package/projects/component-library/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/component-library/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/component-library/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/src/Saras-logo.svg

@@ -0,0 +1,15 @@
+<svg width="193" height="80" viewBox="0 0 193 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Saras-logo.svg" clip-path="url(#clip0_1861_17)">
+<g id="Saras-logo">
+<path id="Path 1" fill-rule="evenodd" clip-rule="evenodd" d="M34.0092 27.9519C33.8942 27.9519 33.7792 27.9519 33.6655 27.945V27.9519C33.6655 27.9519 32.444 27.923 28.2619 27.8997C21.3875 27.8406 18.8431 30.6334 18.0393 31.9143H18.0256C17.4391 32.9966 17.276 34.2596 17.5682 35.4562L17.56 35.4809C17.6038 35.7654 18.2447 39.0695 23.7921 38.9554C28.2386 38.8633 30.898 38.5912 31.9702 38.4579C33.3176 38.1442 34.719 38.1477 36.0648 38.4682C37.4106 38.7887 38.6642 39.4174 39.7275 40.3052C40.7908 41.193 41.635 42.3157 42.1939 43.5855C42.7529 44.8553 43.0114 46.2377 42.9493 47.6245C42.8872 49.0113 42.5061 50.3649 41.836 51.5793C41.1658 52.7936 40.2247 53.8358 39.0863 54.6243C37.9479 55.4128 36.6431 55.9261 35.2741 56.1241C33.9051 56.3222 32.509 56.1995 31.1951 55.7657C30.5392 55.6146 29.6573 55.3919 28.4686 55.0689C21.3245 53.3248 17.4011 64.0905 17.4011 64.0905L17.3874 64.1001C16.8297 65.6489 15.8592 67.0142 14.5816 68.0475C13.304 69.0808 11.7684 69.7423 10.142 69.96C8.51564 70.1777 6.86094 69.9432 5.3582 69.2821C3.85547 68.6209 2.56235 67.5585 1.61976 66.2106C0.677165 64.8627 0.121254 63.281 0.0125998 61.6379C-0.0960548 59.9947 0.246714 58.3532 1.00356 56.8921C1.76041 55.431 2.9023 54.2064 4.3048 53.3517C5.7073 52.4971 7.31662 52.0452 8.95739 52.0452C9.22031 52.0452 9.47913 52.0576 9.73658 52.0796C10.728 52.0713 12.789 52.0796 16.9328 52.1497C24.0071 52.2761 24.9548 48.9624 25.0465 47.6059C25.0465 47.4781 25.0383 47.3503 25.0383 47.2224C25.0383 47.1661 25.0383 47.1111 25.0383 47.0561C25.0392 47.0507 25.0392 47.0451 25.0383 47.0396C24.9807 46.0471 24.6286 45.0945 24.0273 44.3044C23.426 43.5143 22.603 42.9227 21.6641 42.6058C18.1831 41.094 9.45311 41.7716 9.45311 41.7716V41.7606C9.30521 41.7679 9.1564 41.7716 9.00668 41.7716C7.75801 41.7703 6.52337 41.5072 5.38192 40.9991C4.24048 40.4909 3.21741 39.7491 2.37831 38.821C1.53921 37.8929 0.902591 36.799 0.509266 35.6096C0.115941 34.4201 -0.0254116 33.1613 0.0942722 31.9139C0.213956 30.6664 0.592034 29.4578 1.20427 28.3655C1.8165 27.2733 2.64938 26.3215 3.64952 25.5711C4.64965 24.8208 5.79497 24.2884 7.01204 24.0083C8.22912 23.7281 9.49109 23.7062 10.7171 23.9441C13.5543 24.1243 16.4025 24.017 19.2183 23.6239C23.7743 23.0618 24.8137 20.4545 25.0383 19.0293V18.9564C25.0383 17.1773 25.5639 15.4381 26.5488 13.9588C27.5336 12.4795 28.9334 11.3265 30.5711 10.6457C32.2089 9.96483 34.011 9.78669 35.7496 10.1338C37.4882 10.4809 39.0852 11.3376 40.3386 12.5957C41.5921 13.8537 42.4457 15.4565 42.7916 17.2015C43.1374 18.9464 42.9599 20.7551 42.2815 22.3988C41.6032 24.0426 40.4544 25.4475 38.9805 26.4359C37.5065 27.4243 35.7737 27.9519 34.001 27.9519H34.0092Z" fill="#27A3FE"/>
+<path id="Shape 3 copy 2" fill-rule="evenodd" clip-rule="evenodd" d="M9.01585 17.991C7.24318 17.991 5.51033 17.4634 4.03641 16.475C2.5625 15.4865 1.41372 14.0816 0.735353 12.4379C0.0569838 10.7942 -0.120508 8.98551 0.225321 7.24055C0.571151 5.4956 1.42477 3.89276 2.67823 2.63472C3.93169 1.37668 5.5287 0.519942 7.2673 0.17285C9.0059 -0.174243 10.808 0.00389743 12.4457 0.684744C14.0835 1.36559 15.4833 2.51856 16.4681 3.99786C17.4529 5.47716 17.9786 7.21635 17.9786 8.99549C17.9786 11.3812 17.0343 13.6693 15.3535 15.3563C13.6726 17.0432 11.3929 17.991 9.01585 17.991Z" fill="#8ED4FE"/>
+<path id="Shape 3 copy" d="M33.9602 79.9999C38.9094 79.9999 42.9215 75.9731 42.9215 71.0058C42.9215 66.0385 38.9094 62.0117 33.9602 62.0117C29.0109 62.0117 24.9988 66.0385 24.9988 71.0058C24.9988 75.9731 29.0109 79.9999 33.9602 79.9999Z" fill="#8ED4FE"/>
+<path id="saras copy" fill-rule="evenodd" clip-rule="evenodd" d="M72.0205 34.1535C72.0205 32.9976 72.9394 32.1881 75.0702 32.1881C75.6187 32.1393 76.1692 32.2562 76.6511 32.5236C77.1329 32.791 77.5242 33.1968 77.7748 33.6889C78.1774 34.4971 78.4594 34.9602 79.329 34.9602H84.9628C85.1611 34.9895 85.3636 34.9697 85.5527 34.9027C85.7417 34.8356 85.9116 34.7233 86.0476 34.5754C86.1836 34.4276 86.2816 34.2486 86.3331 34.0541C86.3846 33.8597 86.388 33.6555 86.3431 33.4594C85.6584 27.3364 80.4163 24.6797 75.0633 24.6797C69.0215 24.6797 63.381 27.625 63.381 34.1521C63.381 45.3576 78.4006 41.545 78.4006 45.7053C78.4006 46.8598 77.4817 47.6694 75.0633 47.6694C74.4234 47.7627 73.7702 47.6645 73.1856 47.387C72.601 47.1095 72.1109 46.6651 71.7768 46.1094C71.3742 45.359 71.0921 44.8958 70.2225 44.8958H64.5833C64.3849 44.8666 64.1824 44.8863 63.9934 44.9534C63.8044 45.0204 63.6345 45.1328 63.4985 45.2806C63.3625 45.4285 63.2645 45.6074 63.213 45.8019C63.1615 45.9964 63.158 46.2005 63.2029 46.3967C63.8876 52.5196 69.1872 55.1764 75.0579 55.1764C81.3886 55.1764 87.0278 52.3465 87.0278 45.704C87.0401 34.4421 72.0205 38.4279 72.0205 34.1535ZM103.561 24.6811C97.6914 24.6811 92.3959 27.8573 91.6468 34.0957C91.6145 34.2953 91.6289 34.4997 91.6889 34.6927C91.7489 34.8857 91.8528 35.0621 91.9924 35.2078C92.1321 35.3535 92.3036 35.4647 92.4934 35.5324C92.6832 35.6001 92.8861 35.6225 93.0861 35.598H98.7252C99.588 35.598 99.8756 35.1362 100.221 34.3266C100.552 33.7494 101.045 33.2827 101.638 32.9848C102.231 32.6869 102.899 32.5709 103.558 32.6512C105.975 32.6512 107.127 33.9226 107.127 36.7525V39.3638C104.972 37.8065 102.354 37.031 99.703 37.1648C94.6362 37.1648 90.2076 40.1679 90.2076 46.1754C90.2076 52.1829 94.639 55.186 99.703 55.186C101.093 55.2775 102.484 55.0477 103.771 54.5141C105.059 53.9806 106.206 53.1577 107.127 52.1087V52.9333C107.105 53.1283 107.127 53.3256 107.192 53.5107C107.257 53.6958 107.362 53.8639 107.5 54.0026C107.639 54.1413 107.806 54.247 107.991 54.312C108.175 54.3769 108.372 54.3994 108.566 54.3778H114.09C114.284 54.3994 114.481 54.3769 114.665 54.312C114.85 54.247 115.017 54.1413 115.155 54.0026C115.293 53.8639 115.399 53.6958 115.464 53.5107C115.528 53.3256 115.551 53.1283 115.529 52.9333V36.178C115.529 28.3782 109.886 24.6811 103.559 24.6811H103.561ZM102.755 49.0561C100.108 49.0561 98.8417 47.8425 98.8417 46.1699C98.8417 44.4972 100.107 43.2836 102.755 43.2836C105.575 43.2836 107.129 44.3832 107.129 46.1699C107.128 47.8425 105.574 49.0561 102.754 49.0561H102.755ZM135.733 25.0274C134.351 25.1738 133.043 25.7301 131.977 26.6256C130.911 27.521 130.135 28.715 129.748 30.055V26.9337C129.769 26.7388 129.747 26.5414 129.682 26.3564C129.617 26.1713 129.512 26.0032 129.374 25.8645C129.236 25.7258 129.068 25.6201 128.884 25.5551C128.699 25.4901 128.503 25.4676 128.308 25.4892H122.557C122.363 25.4676 122.166 25.4901 121.982 25.5551C121.797 25.6201 121.63 25.7258 121.492 25.8645C121.353 26.0032 121.248 26.1713 121.183 26.3564C121.119 26.5414 121.096 26.7388 121.118 26.9337V52.9251C121.096 53.12 121.119 53.3174 121.183 53.5024C121.248 53.6875 121.353 53.8556 121.492 53.9943C121.63 54.133 121.797 54.2387 121.982 54.3037C122.166 54.3687 122.363 54.3912 122.557 54.3696H128.308C128.503 54.3912 128.699 54.3687 128.884 54.3037C129.068 54.2387 129.236 54.133 129.374 53.9943C129.512 53.8556 129.617 53.6875 129.682 53.5024C129.747 53.3174 129.769 53.12 129.748 52.9251V40.7382C129.748 36.1175 132.855 34.4998 136.078 34.6153C136.826 34.6153 137.23 34.1535 137.23 33.2285V26.4197C137.23 25.4975 136.711 24.8597 135.735 25.0329L135.733 25.0274ZM152.303 24.6811C146.434 24.6811 141.138 27.8573 140.389 34.0957C140.357 34.2953 140.371 34.4997 140.431 34.6927C140.491 34.8857 140.595 35.0621 140.735 35.2078C140.875 35.3535 141.046 35.4647 141.236 35.5324C141.426 35.6001 141.629 35.6225 141.829 35.598H147.469C148.332 35.598 148.619 35.1362 148.965 34.3266C149.296 33.7494 149.788 33.2827 150.382 32.9848C150.975 32.6869 151.643 32.5709 152.302 32.6512C154.719 32.6512 155.87 33.9226 155.87 36.7525V39.3638C153.716 37.8065 151.098 37.031 148.447 37.1648C143.38 37.1648 138.951 40.1679 138.951 46.1754C138.951 52.1829 143.383 55.186 148.447 55.186C149.836 55.2775 151.228 55.0477 152.515 54.5141C153.802 53.9806 154.95 53.1577 155.87 52.1087V52.9333C155.849 53.1283 155.871 53.3256 155.936 53.5107C156.001 53.6958 156.106 53.8639 156.244 54.0026C156.383 54.1413 156.55 54.247 156.734 54.312C156.919 54.3769 157.115 54.3994 157.31 54.3778H162.833C163.027 54.3994 163.223 54.3769 163.408 54.312C163.592 54.247 163.76 54.1413 163.898 54.0026C164.036 53.8639 164.141 53.6958 164.206 53.5107C164.271 53.3256 164.293 53.1283 164.272 52.9333V36.178C164.272 28.381 158.631 24.6838 152.3 24.6838L152.303 24.6811ZM151.502 49.0561C148.855 49.0561 147.59 47.8425 147.59 46.1699C147.59 44.4972 148.855 43.2836 151.502 43.2836C154.322 43.2836 155.876 44.3832 155.876 46.1699C155.876 47.8425 154.322 49.0561 151.502 49.0561ZM177.633 34.1535C177.633 32.9976 178.552 32.1881 180.683 32.1881C181.231 32.1393 181.782 32.2562 182.264 32.5236C182.745 32.791 183.137 33.1968 183.387 33.6889C183.79 34.4971 184.072 34.9602 184.94 34.9602H190.579C190.778 34.9898 190.98 34.9702 191.17 34.9032C191.359 34.8363 191.529 34.724 191.665 34.5761C191.801 34.4282 191.899 34.2492 191.951 34.0546C192.003 33.8599 192.006 33.6556 191.961 33.4594C191.276 27.3364 186.034 24.6797 180.681 24.6797C174.638 24.6797 168.999 27.625 168.999 34.1521C168.999 45.3576 184.019 41.545 184.019 45.7053C184.019 46.8598 183.1 47.6694 180.681 47.6694C180.041 47.7627 179.388 47.6645 178.804 47.387C178.219 47.1095 177.729 46.6651 177.395 46.1094C176.992 45.359 176.71 44.8958 175.84 44.8958H170.208C170.01 44.8663 169.807 44.8859 169.618 44.9528C169.429 45.0198 169.258 45.1321 169.122 45.28C168.986 45.4279 168.888 45.6069 168.836 45.8015C168.785 45.9961 168.781 46.2004 168.826 46.3967C169.511 52.5196 174.811 55.1764 180.681 55.1764C187.012 55.1764 192.651 52.3465 192.651 45.704C192.653 34.4421 177.633 38.4279 177.633 34.1535Z" fill="#36A9FD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1861_17">
+<rect width="192.653" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/app/app.component.css

@@ -0,0 +1,13 @@
+#table {
+  height: 250px;
+  --ag-header-background-color: var(--primary-50);
+  --ag-borders: none;
+  --ag-selected-row-background-color: var(--primary-50);
+  --ag-row-border-style: none;
+}
+
+.display {
+  padding: 20px;
+  margin: 15px;
+  border-bottom: 2px solid var(--primary-500);
+}

package/src/app/app.component.html

@@ -0,0 +1,77 @@
+<div>
+  <div class="display">
+    <app-kitchen-sink [inputComponent]="testComp" [params]="testInputs" [paramTypes]="testParams">
+    </app-kitchen-sink>
+    <br><br>
+    <app-kitchen-sink [inputComponent]="testCompChip" [params]="testInputsChip" [paramTypes]="testParamsChip">
+    </app-kitchen-sink>
+    <br><br>
+    <app-kitchen-sink [inputComponent]="testCompAvatar" [params]="testInputsAvatar" [paramTypes]="testParamsAvatar">
+    </app-kitchen-sink>
+  </div>
+  <div class="display">
+    <ag-grid-angular class="ag-theme-alpine" [rowHeight]=50 [headerHeight]=44 id="table" [rowSelection]="'multiple'"
+      (gridReady)="onGridReady($event)" [rowData]="rowData" [columnDefs]="colDefs">
+    </ag-grid-angular>
+  </div>
+
+  <div class="display">
+    <form (ngSubmit)="submit(model)">
+      <formly-form [model]="model" [fields]="fields">
+      </formly-form>
+      <br><br>
+      <sa-button [isSubmit]=true text="Submit" type="primary" size="medium" state="default"></sa-button>
+    </form>
+    <br>
+    {{model | json}}
+  </div>
+
+  <div class="display">
+    <sa-stepper (stepped)="stepped($event)" [latestStep]=-1 [stepLabels]="stepLabels" [editable]="editable"
+      [doneIcon]="doneIcon"></sa-stepper>
+    <br>
+  </div>
+
+  <div class="display">
+    <sa-tool-tip (toolTipSeen)="seen()" (toolTipSkipped)="skip()" pointerPosition="left" [messages]="messages">
+    </sa-tool-tip>
+  </div>
+
+  <div class="display">
+    <sa-toast firstButtonName="Button" secondButtonName="Button" [statusIcon]="statusIcon" status="tentative"
+      (firstButton)="clicked(0)" (secondButton)="clicked(1)" [heading]="heading" [subHeading]="subHeading"
+      [finishPercentage]="percent"></sa-toast>
+  </div>
+
+  <div class="display">
+    <sa-header (helperButtonClicked)="clicked(0)" (mainButtonClicked)="clicked(1)" [buttonMain]=" mainButton"
+      [buttonHelper]="helperButton" [chipConfig]="chipConfig" [headerName]="header" [info]="info">
+    </sa-header>
+  </div>
+
+  <div class="display">
+    <sa-tabs [defaultTab]="defaultTab" (tabChanged)="tabSwitch($event)" type="inline" [tabs]="tabs"></sa-tabs>
+    <br>
+    <sa-tabs [defaultTab]="defaultTab" (tabChanged)="tabSwitch($event)" type="box" [tabs]="tabs"></sa-tabs>
+  </div>
+
+  <div class="display">
+    <sa-datepicker [range]="range"></sa-datepicker>
+    <br>
+    {{range.value | json}}
+  </div>
+
+</div>
+
+
+
+<sa-chip
+    type = 'large'
+    state = 'success'
+    filling = 'outline'
+    text = 'Chip text'
+    iconPath = '../assets/Frame.svg'
+    iconPosition = 'both'
+    largeStateIcon = '../assets/dot.svg'
+    largeStateText = 'Good'
+  ></sa-chip>

package/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'sadlc' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('sadlc');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, sadlc');
+  });
+});