verben-ng-ui 1.4.0 → 1.4.2

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

@@ -0,0 +1,77 @@
+<div #main class="flex-col" [style.display]="'flex'">
+  <!-- Header -->
+  <ng-container ngProjectAs="verben-card-data-view-header">
+    <ng-content select="verben-card-data-view-header"></ng-content>
+  </ng-container>
+
+  <div
+    [ngClass]="
+      !hasCurrentItem() ? 'master-only-container' : 'master-detail-container'
+    "
+  >
+    <!-- Card and Footer -->
+    <div
+      [style.borderRadius]="borderRadius"
+      [style.backgroundColor]="lbgColor"
+      class="flex-col"
+    >
+      <!-- Card section -->
+      <ng-template #content>
+        <ng-content select="verben-left-card-data-view"></ng-content>
+      </ng-template>
+
+      <cdk-virtual-scroll-viewport
+        *ngIf="useVirtualScroll; else normalView"
+        [itemSize]="virtualScrollItemSize"
+        class="virtual-scroll-viewport"
+        [style.height.px]="virtualScrollItemSize * 50"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </cdk-virtual-scroll-viewport>
+
+      <ng-template #normalView>
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </ng-template>
+
+      <!-- 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
+      class="card-detail-section"
+      [style.backgroundColor]="rbgColor"
+      *ngIf="hasCurrentItem()"
+      [style.borderRadius]="borderRadius"
+    >
+      <div class="flex justify-between items-center">
+        <div>
+          <verben-svg
+            *ngIf="this.showEditIcon"
+            (click)="onEditClicked()"
+            class="cursor-pointer"
+            icon="edit"
+            [width]="20"
+            [height]="20"
+            color="var(--vbn-color-text)"
+          ></verben-svg>
+        </div>
+        <verben-svg
+          (click)="clearData()"
+          class="cursor-pointer toRight"
+          icon="close"
+          [width]="20"
+          [height]="20"
+          color="var(--vbn-color-text)"
+        ></verben-svg>
+      </div>
+      <ng-container #right ngProjectAs="verben-right-card-data-view">
+        <ng-content
+          #rightContent
+          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,134 @@
+import {
+  AfterContentInit,
+  Component,
+  contentChild,
+  ContentChild,
+  effect,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  viewChild,
+  ViewChild,
+} from '@angular/core';
+import { CardData } from './card-data';
+import { Title } from '@angular/platform-browser';
+import { RightCardDataViewComponent } from './right-card-data-view/right-card-data-view.component';
+import { LeftCardDataComponent } from './left-card-data/left-card-data.component';
+
+@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; //what to use to identify each data
+  @Input() totalRecords: number = 0;
+  @Input() footer: boolean = false;
+  @Input() noOfVisibleChildren: number = 3;
+  @Input() showEditIcon: boolean = false;
+  @Input() useVirtualScroll: boolean = false;
+  @Input() virtualScrollItemSize: number = 48;
+  @Output() editClicked: EventEmitter<void> = new EventEmitter();
+  @ContentChild(RightCardDataViewComponent)
+  rightContent!: RightCardDataViewComponent;
+  // @ContentChild(LeftCardDataComponent) left!:LeftCardDataComponent;
+  @ContentChild('card') card!: TemplateRef<any>;
+  // @ContentChild('content') content!: TemplateRef<any>;
+  currentItem: any = {};
+  currentChildItem: any = {};
+
+  hasCurrentItem() {
+    return (
+      !!Object.keys(this.currentItem ?? {}).length ||
+      !!Object.keys(this.currentChildItem ?? {}).length
+    );
+  }
+  clearData() {
+    this.currentItem = {} as CardData;
+    this.currentChildItem = {} as CardData;
+    this.cardDataList.forEach((_) => {
+      _.selected = false;
+      _.children.forEach((c) => {
+        c.selected = false;
+        c.isChildrenExpanded = false;
+      });
+      _.isChildrenExpanded = false;
+    });
+  }
+  setDetailData() {
+    this.rightContent.parentData = this.currentItem;
+    this.rightContent.chilData = this.currentChildItem;
+  }
+  @Input() onItemClick(item: CardData) {
+    this.resetChildren(item);
+    item.selected = true;
+    this.cardDataList.forEach((element) => {
+      if (element.data[this.dataId] == item.data[this.dataId]) {
+        this.currentItem = item;
+      } else {
+        element.selected = false;
+      }
+    });
+    this.setDetailData();
+    return this.currentItem;
+  }
+  resetChildren(newSelect: CardData) {
+    if (this.currentItem && this.currentItem.children?.length) {
+      (this.currentItem.children as any[]).forEach((c) => {
+        c.selected = false;
+      });
+      if (newSelect.data[this.dataId] != this.currentItem.data[this.dataId])
+        this.currentItem.isChildrenExpanded = false;
+    }
+    this.currentChildItem = null;
+  }
+  @Input() onCardChildClick(childIndex: number) {
+    var item = this.currentItem.children[childIndex];
+    (this.currentItem.children as any[]).forEach((element) => {
+      if (element.data[this.dataId] == item.data[this.dataId]) {
+        this.currentChildItem = item;
+      } else {
+        element.selected = false;
+      }
+    });
+    this.currentChildItem.selected = true;
+    this.setDetailData();
+    return this.currentChildItem;
+  }
+  showChildren(item: CardData) {
+    var currToggleState = item.isChildrenExpanded;
+    this.cardDataList.forEach((_) => {
+      _.isChildrenExpanded = false;
+      _.selected = false;
+    });
+    item.selected = true;
+    item.isChildrenExpanded = !currToggleState;
+  }
+
+  @Output() loadMoreClick = new EventEmitter();
+  onLoadMoreClick() {
+    this.loadMoreClick.emit();
+  }
+
+  onEditClicked() {
+    this.editClicked.emit();
+  }
+}

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

@@ -0,0 +1,30 @@
+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 'verben-ng-ui/src/lib/components/svg';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+@NgModule({
+  declarations: [
+    CardDataViewComponent,
+    LeftCardDataComponent,
+    LeftCardDataViewComponent,
+    RightCardDataViewComponent,
+    CardDataViewFooterComponent,
+    CardDataViewHeaderComponent,
+  ],
+  imports: [CommonModule, SvgModule, ScrollingModule],
+  exports: [
+    CardDataViewComponent,
+    LeftCardDataComponent,
+    LeftCardDataViewComponent,
+    RightCardDataViewComponent,
+    CardDataViewFooterComponent,
+    CardDataViewHeaderComponent,
+  ],
+})
+export class CardDataViewModule {}

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

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

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

@@ -0,0 +1,46 @@
+/* .left-side
+{
+    border:1.5px solid var(--vbn-color-primary);
+    border-radius: 8px;
+    padding: 10px;
+   left: 0;
+box-sizing: border-box;
+} */
+:host {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  /* display: flex;
+  flex-direction: column; */
+  /* justify-content: center; */
+  padding: 15px;
+}
+
+.pad15 {
+  padding: 5px;
+}
+
+.center-icon {
+  align-items: center;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.childrenPadding {
+  width: 100%;
+  padding: 10px 10px 10px calc(100% - 85%);
+  display: flex;
+  gap: 10px;
+}
+
+.false-padding {
+  padding-left: calc(100% - 85%);
+}
+
+::ng-deep .childrenPadding .cdk-virtual-scroll-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

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

@@ -0,0 +1,45 @@
+@for (item of cardDataList; track $index) {
+<div class="flex">
+  <div class="flex-col full-width">
+    <ng-content
+      *ngTemplateOutlet="card; context: { $implicit: item }"
+    ></ng-content>
+    <!-- children -->
+    <ng-template #childrenList>
+      @for (child of item.children; track $index) {
+      <ng-container
+        *ngTemplateOutlet="
+          cardChild;
+          context: { index: $index, $implicit: child }
+        "
+      ></ng-container>
+      }
+    </ng-template>
+    <div
+      class="childrenPadding flex-col flex"
+      *ngIf="item.children.length > 0 && item.isChildrenExpanded"
+    >
+      @if (useVirtualScroll) {
+      <cdk-virtual-scroll-viewport
+        [itemSize]="virtualScrollItemSize"
+        class="virtual-scroll-viewport"
+        [style.height.px]="virtualScrollItemSize * 50"
+      >
+        <ng-container *ngTemplateOutlet="childrenList"></ng-container>
+      </cdk-virtual-scroll-viewport>
+      } @else {
+      <ng-container *ngTemplateOutlet="childrenList"></ng-container>
+      }
+    </div>
+    <div *ngIf="item.isChildrenExpanded" class="false-padding">
+      <ng-content
+        *ngTemplateOutlet="
+          cardFooter;
+          context: { index: $index, $implicit: item }
+        "
+      ></ng-content>
+    </div>
+  </div>
+</div>
+
+}

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,44 @@
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { CardData } from '../card-data';
+import { CardDataViewComponent } from '../card-data-view.component';
+
+@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[] = [];
+  @Input() iconCollapse: string = 'plus';
+  @Input() iconExpanded: string = 'minus';
+  @Input() parent!: CardDataViewComponent;
+  @Input() useVirtualScroll: boolean = false;
+  @Input() virtualScrollItemSize: number = 5;
+  @ContentChild('card') card!: TemplateRef<any>;
+  @ContentChild('cardChild') cardChild!: TemplateRef<any>;
+  @ContentChild('cardFooter') cardFooter!: TemplateRef<any>;
+  @Input() dataId!: string; //what to use to identify each data
+  // currentItem:any={};
+  showToggle(item: CardData) {
+    // showToggle() && item.children.length>0
+    return (
+      this.cardDataList.filter((_) => _.selected).length > 0 &&
+      item.children.length > 0
+    );
+  }
+  showChildren(item: CardData) {
+    var currToggleState = item.isChildrenExpanded;
+    this.cardDataList.forEach((_) => {
+      _.isChildrenExpanded = false;
+      _.selected = false;
+    });
+    this.parent.onItemClick(item);
+    item.isChildrenExpanded = !currToggleState;
+  }
+}

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/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

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

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

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

@@ -0,0 +1,6 @@
+     <ng-container *ngIf="parentData && !chilData">
+        <ng-content *ngTemplateOutlet="parent"></ng-content>
+     </ng-container>
+     <ng-container *ngIf="chilData">
+        <ng-content *ngTemplateOutlet="child"></ng-content>  
+     </ng-container>

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,19 @@
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { CardData } from '../card-data';
+
+@Component({
+  selector: 'verben-right-card-data-view',
+  templateUrl: './right-card-data-view.component.html',
+  styleUrl: './right-card-data-view.component.css',
+})
+export class RightCardDataViewComponent {
+  @ContentChild('parent') parent!: TemplateRef<any>;
+  @ContentChild('child') child!: TemplateRef<any>;
+  @Input() parentData!: CardData;
+  @Input() chilData!: CardData;
+  @Input() meth(d: any) {
+    //  console.log(this.parent)
+    //console.log(this.chilData)
+  }
+  //  currentData && currentData.title
+}

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: var(--vbn-color-text-muted);
+}
+
+.chip-main-content {
+  min-width: 0;
+}
+
+.chips-container {
+  width: 100%;
+  gap: 5px;
+  color: var(--vbn-color-text);
+  flex-wrap: wrap;
+}
+
+.item-chip {
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
+  border-radius: 5px;
+  padding: 1px 5px;
+  background-color: var(--vbn-chip-bg);
+}
+
+.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: var(--vbn-color-text-muted);
+}
+
+.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%);
+}