verben-ng-ui 0.0.1

package/src/lib/components/card-data-view/card-data-view.component.html

@@ -0,0 +1,29 @@
+
+<div class="container flex-col" [style.display]="'flex'" [style.margin]="mg" > 
+     <!-- Header -->
+     <ng-container ngProjectAs="verben-card-data-view-header">
+        <ng-content select='verben-card-data-view-header'></ng-content>
+     </ng-container>
+
+     <div [style.padding]="pd"  [ngClass]="!hasCurrentItem()?'master-only-container':'master-detail-container'"  >
+      <!-- Card and Footer -->
+        <div [style.borderRadius]="borderRadius" [style.backgroundColor]="lbgColor" class="flex-col ">
+          <!-- Card section -->
+          <ng-container ngProjectAs="verben-left-card-data-view">
+            <ng-content select='verben-left-card-data-view'></ng-content>
+          </ng-container>
+
+          <!-- Footer-->
+          <ng-container ngProjectAs="verben-card-data-view-footer">
+            <ng-content select='verben-card-data-view-footer'></ng-content>
+          </ng-container>
+        </div>
+      <!-- Detail Section-->
+       <div [style.backgroundColor]="rbgColor" *ngIf="hasCurrentItem()" [style.borderRadius]="borderRadius">
+         <verben-svg  (click)="clearData()" class="cursor-pointer toRight" icon="close" [width]="20" [height]="20"  color="black"></verben-svg> 
+         <ng-container   ngProjectAs="verben-right-card-data-view">
+           <ng-content select='verben-right-card-data-view'></ng-content>
+         </ng-container>
+       </div>
+     </div>
+</div>

package/src/lib/components/card-data-view/card-data-view.component.spec.ts

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

package/src/lib/components/card-data-view/card-data-view.component.ts

@@ -0,0 +1,66 @@
+import { AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
+import { CardData } from './card-data';
+import { Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'verben-card-data-view',
+  templateUrl: './card-data-view.component.html',
+  styleUrl: './card-data-view.component.css'
+})
+
+export class CardDataViewComponent  {
+  @Input() pd = '10px';
+  @Input() mg = '0px';
+  @Input() lHeight?:string="100%";
+  @Input() rHeight?:string="100%";
+  @Input() rWidth?:string="70%";
+  @Input() lWidth?:string="30%";
+  @Input() textColor?:string ;
+  @Input() lbgColor?:string ;
+  @Input() rbgColor?:string ;
+  @Input() border?:string ;
+  @Input() display?:string ;
+  @Input() borderRadius?:string="12px";
+  @Input() activeCss?:string ;
+  @Input() inActiveCss?:string ;
+  @Input() displayAsRow?:boolean =true;
+  @Input() cardDataList:CardData[]=[];
+  @Input() dataId!:string;
+  @Input() totalRecords:number=0;
+  @Input() footer:boolean=false;
+
+
+  @ContentChild('card') card!: TemplateRef<any>;
+  // @ContentChild('content') content!: TemplateRef<any>;
+  currentItem:any={};
+  hasCurrentItem()
+  {
+    return !!Object.keys(this.currentItem).length
+  }
+  clearData()
+   {
+    this.currentItem={} as CardData
+    this.cardDataList.forEach(_=>{
+      _.selected=false;
+    });
+   }
+  @Input() onItemClick(item:CardData){
+    item.selected= true;
+    this.cardDataList.forEach(element => {
+      if(element.data[this.dataId]==item.data[this.dataId])
+      {
+        this.currentItem= item;
+      }
+      else
+      {
+        element.selected=false;
+      }
+    });
+    return this.currentItem
+  }
+  @Output() loadMoreClick = new EventEmitter();
+  onLoadMoreClick()
+  {
+    this.loadMoreClick.emit();
+  }
+}

package/src/lib/components/card-data-view/card-data-view.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CardDataViewComponent } from './card-data-view.component';
+import { LeftCardDataComponent } from './left-card-data/left-card-data.component';
+import { LeftCardDataViewComponent } from './left-card-data-view/left-card-data-view.component';
+import { RightCardDataViewComponent } from './right-card-data-view/right-card-data-view.component';
+import { CardDataViewFooterComponent } from './card-data-view-footer/card-data-view-footer.component';
+import { CardDataViewHeaderComponent } from './card-data-view-header/card-data-view-header.component';
+import { SvgModule } from "../svg/svg.module";
+
+@NgModule({
+  declarations:[CardDataViewComponent,LeftCardDataComponent,
+    LeftCardDataViewComponent,RightCardDataViewComponent,CardDataViewFooterComponent,
+    CardDataViewHeaderComponent],
+  imports: [CommonModule, SvgModule],
+  exports: [CardDataViewComponent,LeftCardDataComponent,
+    LeftCardDataViewComponent,RightCardDataViewComponent,CardDataViewFooterComponent,
+    CardDataViewHeaderComponent]
+})
+export class CardDataViewModule {}

package/src/lib/components/card-data-view/card-data.ts

@@ -0,0 +1,7 @@
+export class CardData
+{
+  selected:boolean=false;
+  title:string='';
+  body:{title:string,value:string}[]=[];
+  data?:any;
+}

package/src/lib/components/card-data-view/left-card-data/left-card-data.component.css

@@ -0,0 +1,15 @@
+/* .left-side
+{
+    border:1.5px solid rgb(246, 191, 109);
+    border-radius: 8px;
+    padding: 10px;
+   left: 0;
+box-sizing: border-box;
+} */
+:host{
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+  gap:15px;
+  justify-content: center;
+  padding: 15px;
+}

package/src/lib/components/card-data-view/left-card-data/left-card-data.component.html

@@ -0,0 +1,4 @@
+            @for (item of cardDataList; track item.title) {
+                <ng-content  *ngTemplateOutlet="card;context: {$implicit: item}"></ng-content>
+            }
+

package/src/lib/components/card-data-view/left-card-data/left-card-data.component.spec.ts

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

package/src/lib/components/card-data-view/left-card-data/left-card-data.component.ts

@@ -0,0 +1,19 @@
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { CardData } from '../card-data';
+
+@Component({
+  selector: 'verben-left-card-data',
+  templateUrl: './left-card-data.component.html',
+  styleUrl: './left-card-data.component.css'
+})
+export class LeftCardDataComponent {
+  @Input() pd = '10px';
+  @Input() mg = '0px';
+  @Input() height?:string="100%";
+  @Input() weight?:string="100%";
+  @Input() activeCss?:string ;
+  @Input() inActiveCss?:string ;
+  @Input() cardDataList:CardData[]=[];
+  @ContentChild('card') card!: TemplateRef<any>;
+
+}

package/src/lib/components/card-data-view/left-card-data-view/left-card-data-view.component.html

@@ -0,0 +1,4 @@
+    <ng-container ngProjectAs="verben-left-card-data">
+      <ng-content select="verben-left-card-data"></ng-content>  
+    </ng-container>
+

package/src/lib/components/card-data-view/left-card-data-view/left-card-data-view.component.spec.ts

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

package/src/lib/components/card-data-view/left-card-data-view/left-card-data-view.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { CardData } from '../card-data';
+
+@Component({
+  selector: 'verben-left-card-data-view',
+  templateUrl: './left-card-data-view.component.html',
+  styleUrl: './left-card-data-view.component.css'
+})
+export class LeftCardDataViewComponent {
+   @Input() cardDataList:CardData[]=[];
+
+}

package/src/lib/components/card-data-view/right-card-data-view/right-card-data-view.component.css

@@ -0,0 +1,3 @@
+:host{
+    /* padding: 15px 10px; */
+}

package/src/lib/components/card-data-view/right-card-data-view/right-card-data-view.component.html

@@ -0,0 +1 @@
+  <ng-content></ng-content>  

package/src/lib/components/card-data-view/right-card-data-view/right-card-data-view.component.spec.ts

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

package/src/lib/components/card-data-view/right-card-data-view/right-card-data-view.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'verben-right-card-data-view',
+  templateUrl: './right-card-data-view.component.html',
+  styleUrl: './right-card-data-view.component.css'
+})
+export class RightCardDataViewComponent {
+
+}

package/src/lib/components/chip/ChipChangeEvent.ts

@@ -0,0 +1,4 @@
+export interface ChipChangeEvent {
+  originalEvent?: Event;
+  value: any;
+}

package/src/lib/components/chip/chip.component.css

@@ -0,0 +1,94 @@
+@import '../../../styles.css';
+
+.chip {
+  position: relative;
+}
+
+.chip-content-input {
+  gap: 5px;
+  padding: 5px;
+  flex-wrap: wrap;
+  min-height: 23px;
+  align-items: center;
+}
+
+.chip-content-input.disabled .chips-container {
+  color: #64748b;
+}
+
+.chip-main-content {
+  min-width: 0;
+}
+
+.chips-container {
+  width: 100%;
+  gap: 5px;
+  color: #334155;
+  flex-wrap: wrap;
+}
+
+.item-chip {
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
+  border-radius: 5px;
+  padding: 1px 5px;
+  background-color: rgba(52, 121, 233, 0.5);
+}
+
+.item-chip>span {
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-chip>svg {
+  width: 12px;
+  height: 12px;
+}
+
+
+.input-container {
+  flex: 1 1 0;
+}
+
+.chip-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+.chip-input::placeholder {
+  color: #64748b;
+}
+
+.error-message {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  bottom: -20px;
+}
+
+.top-error .error-message {
+  top: -20px !important;
+  bottom: initial !important;
+}
+
+.left-error .error-message {
+  bottom: 50% !important;
+  right: calc(100% + 10px) !important;
+  width: max-content;
+  left: initial !important;
+  transform: translateY(50%);
+}
+
+.right-error .error-message {
+  bottom: 50% !important;
+  left: calc(100% + 10px) !important;
+  width: max-content;
+  right: initial !important;
+  transform: translateY(50%);
+}

package/src/lib/components/chip/chip.component.html

@@ -0,0 +1,49 @@
+<div [ngClass]="styleClass" [style.width]="width"
+  [ngClass]="{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}"
+  class="chip">
+  <div [class.focused]="isFocused" [ngClass]="{'ng-invalid': isInvalid, 'disabled': disabled}" (focus)="onFocus()"
+    (blur)="onBlur()" tabindex="0" class="chip-content-input verben-input flex">
+    <div class="chip-main-content">
+      <div class="default-item flex">
+        <!-- <div class="dropdown-label place-holder" *ngIf="this.chips.length == 0">{{placeholder}}</div> -->
+        <div *ngIf="chips && this.chips.length > 0" class="chips-container flex">
+          <span *ngFor="let item of chips; index as i" class="item-chip flex">
+            <ng-container *ngIf="itemTemplate; else defaultItem">
+              <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+            </ng-container>
+            <ng-template #defaultItem>
+              <span>{{item}}</span>
+            </ng-template>
+            <verben-svg (click)="removeChip(i, $event);" icon="close-circle" [width]="15" [height]="15"></verben-svg>
+            <!-- <svg (click)="removeChip(i, $event);" width="10" height="10" viewBox="0 0 10 10" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z"
+                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M6.25 3.91797L3.75 6.41797" stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path d="M3.75 3.91797L6.25 6.41797" stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" />
+            </svg> -->
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="input-container">
+      <input [disabled]="this.max != null && chips && this.chips.length == max" (keydown)="onKeyDown($event)"
+        [placeholder]="placeholderState" [(ngModel)]="chipInput" (focus)="onInputFocus()" (blur)="onInputBlur()"
+        class="chip-input" />
+    </div>
+    <!-- <span *ngIf="this.chips.length > 0" (click)="this.clearSelection($event); $event.stopPropagation()"
+      class="chip-icon-item chip-clear-button">
+      <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.84375 0.84375L8.15625 8.15625" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round" />
+        <path d="M0.84375 8.15625L8.15625 0.84375" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round" />
+      </svg>
+    </span> -->
+  </div>
+  <div *ngIf="this.isInvalid && this.invalidMessage" class="verben-error-message error-message">{{invalidMessage}}
+  </div>
+</div>

package/src/lib/components/chip/chip.component.spec.ts

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