verben-ng-ui 0.0.1

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

@@ -0,0 +1,209 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  Self,
+  TemplateRef,
+} from '@angular/core';
+import { DropDownItemComponent } from '../drop-down/drop-down-item/drop-down-item.component';
+import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ChipChangeEvent } from './ChipChangeEvent';
+import { SharedModule } from '../shared.module';
+import { TemplateDirective } from '../TemplateDirective.directive';
+import { SvgModule } from '../svg/svg.module';
+
+@Component({
+  selector: 'verben-chip',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropDownItemComponent,
+    SharedModule,
+    FormsModule,
+    SvgModule,
+  ],
+  templateUrl: './chip.component.html',
+  styleUrl: './chip.component.css',
+})
+export class ChipComponent
+  implements ControlValueAccessor, OnInit, AfterContentInit
+{
+  // INPUTS
+  @Input() width: string = '100%';
+  @Input() placeholder: string = '';
+  @Input() max?: number;
+  @Input() styleClass: string = '';
+  @Input() separator: string = ',';
+  @Input() disabled: boolean = false;
+  @Input() required: boolean = false;
+  @Input() invalidMessage?: string;
+  @Input() errorPosition: string = '';
+
+  // OUTPUTS
+  @Output() onChange: EventEmitter<ChipChangeEvent> = new EventEmitter();
+  // @Output() onClear: EventEmitter<Event> = new EventEmitter();
+
+  onItemChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+  isInvalid: boolean = false;
+
+  //TEMPLATING
+  @ContentChildren(TemplateDirective) templates!: QueryList<TemplateDirective>;
+  @HostBinding('class.focused') isFocused = false;
+  isInputFocused = false;
+
+  @HostListener('focus') onFocus() {
+    this.isFocused = true;
+  }
+
+  @HostListener('blur') onBlur() {
+    this.isFocused = false;
+  }
+
+  onInputFocus() {
+    this.isFocused = true;
+  }
+
+  onInputBlur() {
+    this.isFocused = false;
+  }
+
+  itemTemplate: TemplateRef<any> | null = null;
+
+  chips: string[] = [];
+  chipInput: string = '';
+
+  constructor(@Self() private ngControl: NgControl) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this; // Assign this component as the value accessor
+      this.ngControl?.statusChanges?.subscribe((status) => {
+        this.isInvalid = this.ngControl.touched
+          ? status === 'INVALID' && this.ngControl.touched
+          : false;
+      });
+    }
+  }
+
+  ngOnInit(): void {}
+  ngAfterContentInit(): void {
+    this.templates.forEach((templateDirective) => {
+      if (templateDirective.vTemplate === 'item') {
+        this.itemTemplate = templateDirective.template;
+      }
+    });
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) {
+      return;
+    }
+    const inputValue = (event.target as HTMLInputElement).value;
+    // Check for 'Enter' key or custom separator
+    if (event.key === 'Enter' || event.key == this.separator) {
+      event.preventDefault();
+      this.addChips(inputValue);
+    }
+
+    // Handle 'Backspace' key when input is empty
+    if (
+      event.key === 'Backspace' &&
+      inputValue.length === 0 &&
+      this.chips.length > 0
+    ) {
+      this.removeLastChip();
+    }
+  }
+
+  addChips(inputValue: string): void {
+    if (this.disabled) {
+      return;
+    }
+    // Split by separator and trim each part
+    const values = inputValue
+      .split(this.separator)
+      .map((value) => value.trim());
+
+    values.forEach((value) => {
+      if (value.length > 0) {
+        if (this.max && this.chips.length == this.max) {
+          return;
+        }
+        this.chips.push(value); // Add chip
+      }
+    });
+    if (this.isInvalid) {
+      this.isInvalid = false;
+    }
+
+    this.chipInput = ''; // Clear input
+    this.onTouched();
+    this.onChange.emit({ value: this.chips });
+  }
+
+  removeChip(index: number, event: Event): void {
+    if (this.disabled) {
+      return;
+    }
+    this.chips.splice(index, 1);
+    if (this.chips.length == 0) {
+      if (this.required == true) {
+        this.isInvalid = true;
+      }
+    }
+    this.onTouched();
+    this.onChange.emit({ originalEvent: event, value: this.chips });
+  }
+
+  removeLastChip(): void {
+    if (this.disabled) {
+      return;
+    }
+    this.chips.pop(); // Remove the last chip
+    if (this.chips.length == 0) {
+      if (this.required == true) {
+        this.isInvalid = true;
+      }
+    }
+    this.onTouched();
+    this.onChange.emit({ originalEvent: event, value: this.chips });
+  }
+
+  // clearSelection(event: Event) {
+  //   if (this.disabled) {
+  //     return;
+  //   }
+  //   this.chips = [];
+  //   if (this.required == true) {
+  //     this.isInvalid = true;
+  //   }
+  //   this.onTouched();
+  //   this.onChange.emit({ originalEvent: event, value: this.chips });
+  // }
+
+  writeValue(obj: string[]): void {
+    this.chips = obj;
+    this.onTouched();
+    this.onChange.emit({ value: this.chips });
+  }
+  registerOnChange(fn: any): void {
+    this.onItemChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  get placeholderState(): string | undefined {
+    return this.chips && this.chips.length == 0 ? this.placeholder : '';
+  }
+}

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

@@ -0,0 +1,24 @@
+import { forwardRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChipComponent } from './chip.component';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SharedModule } from '../shared.module';
+
+@NgModule({
+  declarations: [],
+  imports: [ChipComponent],
+  exports: [ChipComponent],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ChipComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ChipComponent),
+      multi: true,
+    },
+  ],
+})
+export class ChipModule {}

package/src/lib/components/chip/documentation.md

@@ -0,0 +1,26 @@
+SELECTOR - <verbena-chip></verbena-chip>
+
+INPUTS
+width: string- sets the width of the chip.
+placeholder: string - Any value you want the chip to display when nothing has been added.
+max: number - Allows you to set the maximum number of chips that can be added.
+styleClass: string - Optional class addition that would be added to the chip.
+separator: string - By Default, pressing enter triggers conversion of current text to chip. This allows you to set another input value that does similarly e.g ','.
+disabled: boolean (default = false) - Sets the disabled state of the chip.
+required: boolean (default = false) - If set as true, display visual cues when no chip is added and the chip is marked as touched.
+invalidMessage: string - Specifies message to be shown when the dropdown is invalid. If not set, no message is shown.
+errorPosition: string - Specifies the position you want the dropdown's invalid message to show relative to the dropdown. Has 3 options - 'top', 'left' and 'right'. If none of these is set, it defaults to bottom.
+
+OUTPUTS
+onChange: EventEmitter<ChipChangeEvent> - emitted when changes are made to the selected option or options.
+
+TEMPLATING
+item - Configure how chip items look.
+<ng-template let-item vTemplate="item">
+{{item}} Test Selected Template
+</ng-template>
+
+OBJECTS
+ChipChangeEvent - Sent when the chip value changes.
+originalEvent: Event - Event captured.
+value: any - Selected option or options.

package/src/lib/components/data-export/data-export.component.html

@@ -0,0 +1,90 @@
+<h2>Export Configuration</h2>
+
+<h3>Create Operation</h3>
+<form [formGroup]="operationForm" (ngSubmit)="onSubmitOperation()">
+  <input formControlName="name" placeholder="Operation Name" />
+  <select formControlName="field1">
+    <option value="">Select Field 1</option>
+    <option *ngFor="let prop of baseProperties" [value]="prop">
+      {{ prop }}
+    </option>
+  </select>
+  <select formControlName="operator">
+    <option value="">Select Operator</option>
+    <option value="add">+</option>
+    <option value="subtract">-</option>
+    <option value="multiply">*</option>
+    <option value="divide">/</option>
+  </select>
+  <select formControlName="field2">
+    <option value="">Select Field 2</option>
+    <option *ngFor="let prop of baseProperties" [value]="prop">
+      {{ prop }}
+    </option>
+  </select>
+  <button type="submit" [disabled]="!operationForm.valid">Add Operation</button>
+</form>
+
+<h3>Operations</h3>
+<div
+  *ngFor="let operation of exportService.getOperations()"
+  class="operation-item"
+>
+  <span
+    >{{ operation.name }}: {{ operation.field1 }} {{ operation.operator }}
+    {{ operation.field2 }}</span
+  >
+  <div>
+    <button (click)="editOperation(operation)">Edit</button>
+    <button (click)="removeOperation(operation.id)">Remove</button>
+  </div>
+</div>
+
+<h3>Create Profile</h3>
+<form [formGroup]="profileForm" (ngSubmit)="onSubmitProfile()">
+  <input formControlName="name" placeholder="Profile Name" />
+  <div formArrayName="items" class="checkbox-group">
+    <label
+      *ngFor="let item of exportService.getAllItems(); let i = index"
+      class="checkbox-label"
+    >
+      <input type="checkbox" [formControlName]="i" />
+      {{ item.name }} ({{ item.type }})
+    </label>
+  </div>
+  <button type="submit" [disabled]="!profileForm.valid">Save Profile</button>
+</form>
+
+<h3>Profiles</h3>
+<ul>
+  <li *ngFor="let profile of exportService.getProfiles()">
+    <span>{{ profile.name }}</span>
+    <div>
+      <button *ngIf="profile.id !== 'default'" (click)="editProfile(profile)">
+        Edit
+      </button>
+      <button
+        *ngIf="profile.id !== 'default'"
+        (click)="removeProfile(profile.id)"
+      >
+        Remove
+      </button>
+    </div>
+  </li>
+</ul>
+
+<button (click)="resetAll()">Reset All</button>
+
+<h3>Export</h3>
+<form [formGroup]="profileSelectionForm">
+  <div formArrayName="selectedProfiles" class="checkbox-group">
+    <label
+      *ngFor="let profile of exportService.getProfiles(); let i = index"
+      class="checkbox-label"
+    >
+      <input type="checkbox" [formControlName]="i" />
+      {{ profile.name }}
+    </label>
+  </div>
+</form>
+<button (click)="exportData()">Export Selected Profiles</button>

package/src/lib/components/data-export/data-export.component.spec.ts

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

package/src/lib/components/data-export/data-export.component.ts

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DataExportService } from './data-export.service';
+import { ExportProfile, Operation } from './data-export.types';
+
+@Component({
+  selector: 'lib-data-export',
+  templateUrl: './data-export.component.html',
+  styleUrl: './data-export.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataExportComponent {
+  @Input() data!: any[];
+  @Output() exportDataEvent = new EventEmitter<Record<string, any>[]>();
+
+  profileForm!: FormGroup;
+  operationForm!: FormGroup;
+  profileSelectionForm!: FormGroup;
+  baseProperties: string[] = [];
+  allProperties: string[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    public exportService: DataExportService
+  ) {}
+
+  ngOnInit() {
+    this.initForms();
+    this.updateProperties();
+  }
+
+  private initForms() {
+    this.initProfileForm();
+    this.initOperationForm();
+    this.initProfileSelectionForm();
+  }
+
+  private initProfileForm() {
+    const itemControls = this.exportService.getAllItems().map(() => false);
+    this.profileForm = this.fb.group({
+      name: ['', Validators.required],
+      items: this.fb.array(itemControls),
+    });
+  }
+
+  private initOperationForm() {
+    this.operationForm = this.fb.group({
+      name: ['', Validators.required],
+      field1: ['', Validators.required],
+      operator: ['', Validators.required],
+      field2: ['', Validators.required],
+    });
+  }
+
+  private initProfileSelectionForm() {
+    const profileControls = this.exportService.getProfiles().map(() => false);
+    this.profileSelectionForm = this.fb.group({
+      selectedProfiles: this.fb.array(profileControls),
+    });
+  }
+
+  private updateProperties() {
+    if (this.data && this.data.length > 0) {
+      const baseProperties = Object.keys(this.data[0]);
+      this.exportService.setBaseProperties(baseProperties);
+    }
+    this.allProperties = this.exportService
+      .getAllItems()
+      .map((item) => item.id);
+    this.initProfileForm();
+  }
+
+  onSubmitOperation() {
+    if (this.operationForm.valid) {
+      const operation: Operation = {
+        id: Date.now().toString(),
+        ...this.operationForm.value,
+      };
+      this.exportService.addOperation(operation);
+      this.operationForm.reset();
+      this.updateProperties();
+    }
+  }
+
+  onSubmitProfile() {
+    if (this.profileForm.valid) {
+      const formValue = this.profileForm.value;
+      const selectedItems = this.exportService
+        .getAllItems()
+        .filter((_, i) => formValue.items[i]);
+      const newProfile: ExportProfile = {
+        id: Date.now().toString(),
+        name: formValue.name,
+        items: selectedItems,
+      };
+      this.exportService.addProfile(newProfile);
+      this.profileForm.reset();
+      this.initProfileSelectionForm();
+    }
+  }
+
+  editProfile(profile: ExportProfile) {
+    this.profileForm.patchValue({
+      name: profile.name,
+      items: this.exportService
+        .getAllItems()
+        .map((item) =>
+          profile.items.some((profileItem) => profileItem.id === item.id)
+        ),
+    });
+  }
+
+  editOperation(operation: Operation) {
+    this.operationForm.patchValue(operation);
+  }
+
+  removeOperation(id: string) {
+    this.exportService.removeOperation(id);
+    this.updateProperties();
+  }
+
+  removeProfile(id: string) {
+    this.exportService.removeProfile(id);
+    this.initProfileSelectionForm();
+  }
+
+  resetAll() {
+    this.exportService.resetAll();
+    this.initForms();
+    this.updateProperties();
+  }
+
+  exportData() {
+    const selectedProfiles = this.exportService
+      .getProfiles()
+      .filter(
+        (_, i) =>
+          (this.profileSelectionForm.get('selectedProfiles') as FormArray).at(i)
+            .value
+      );
+
+    if (selectedProfiles.length > 0) {
+      const exportedData = this.exportService.exportData(
+        this.data,
+        selectedProfiles
+      );
+      this.exportDataEvent.emit(exportedData);
+    } else {
+      console.log('No profiles selected for export');
+    }
+  }
+}

package/src/lib/components/data-export/data-export.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataExportService } from './data-export.service';
+import { DataExportComponent } from './data-export.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [DataExportComponent],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  providers: [],
+  exports: [DataExportComponent],
+})
+export class DataExportModule {}

package/src/lib/components/data-export/data-export.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataExportService } from './data-export.service';
+
+describe('DataExportService', () => {
+  let service: DataExportService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataExportService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});