iss-ctrl 0.0.3 → 0.0.4

package/projects/iss/src/components/controls/select/select.wrapper.ts

@@ -1,41 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {SelectControl} from "./select.control";
-import {SelectViewer} from "./select.viewer";
-
-@Component({
-  selector: "iss-wrp-select",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    SelectControl,
-    MatLabel,
-    SelectViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-select
-          [formControlName]="field.name"
-          [options]="field.options()"
-          [multiple]="field.config.multiple"
-          (onChange)="onChange($event)"
-        />
-      } @else {
-        <iss-vwr-select [field]="field" />
-      }
-    }
-  `
-})
-export class SelectWrapper extends WrapperBase {
-  onChange($event: string | FormData) {
-    this.field.ctrlJsonValue.set($event);
-  }
-}

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.control.ts

@@ -1,24 +0,0 @@
-import {Component} from "@angular/core";
-import {NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {MatSlideToggleModule} from "@angular/material/slide-toggle";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-slide-toggle",
-  imports: [MatSlideToggleModule, ReactiveFormsModule],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true}
-  ],
-  template: `
-    <mat-slide-toggle
-      class="d-block" [formControl]="ctrl"
-      (change)="onSlideToggleChange($event.checked)"
-    >
-    </mat-slide-toggle>
-  `
-})
-export class SlideToggleControl extends ControlBase {
-  onSlideToggleChange(checked: boolean) {
-    this.emitValue(checked);
-  }
-}

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.viewer.ts

@@ -1,14 +0,0 @@
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-slide-toggle",
-  template: `
-    @if (field().ctrlValue() === 'true') {
-      {{ field().label() + ' Yes' }}
-    } @else {
-      {{ field().label() + ' No' }}
-    }
-  `,
-})
-export class SlideToggleViewer extends ViewerBase {}

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.wrapper.ts

@@ -1,31 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {SlideToggleControl} from "./slide-toggle.control";
-import {SlideToggleViewer} from "./slide-toggle.viewer";
-
-@Component({
-  selector: "iss-wrp-slide-toggle",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-slide-toggle [formControlName]="field.name" (onChange)="onChange($event)" />
-      } @else {
-        <iss-vwr-slide-toggle [field]="field" />
-      }
-    }
-  `
-})
-export class SlideToggleWrapper extends WrapperBase {
-  onChange($event: any) {
-    this.field.jsonValue = $event;
-  }
-}

package/projects/iss/src/components/controls/table/field.viewer.ts

@@ -1,23 +0,0 @@
-import {Component, effect, EffectRef, OnDestroy, Signal, viewChild, ViewContainerRef} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-import {SelectViewer} from "../select/select.viewer";
-
-@Component({
-  selector: "iss-vwr-field",
-  template: `
-    <ng-container #container></ng-container>
-  `,
-})
-export class FieldViewer extends ViewerBase implements OnDestroy {
-  containerRef: Signal<ViewContainerRef | undefined> = viewChild("container", {read: ViewContainerRef});
-  #fieldEffectRef: EffectRef = effect(() => {
-    const componentRef = this.containerRef()?.createComponent(SelectViewer);
-    if (componentRef) {
-      componentRef.setInput("field", this.field());
-    }
-  });
-
-  ngOnDestroy(): void {
-    this.#fieldEffectRef.destroy();
-  }
-}

package/projects/iss/src/components/controls/table/table.wrapper.ts

@@ -1,233 +0,0 @@
-import {AfterViewInit, Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit, signal, Signal, viewChild, WritableSignal} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatInputModule} from "@angular/material/input";
-import {MatPaginator, MatPaginatorModule} from "@angular/material/paginator";
-import {MatSidenav, MatSidenavModule} from "@angular/material/sidenav";
-import {MatSort, MatSortModule} from "@angular/material/sort";
-import {MatTableDataSource, MatTableModule} from "@angular/material/table";
-import {FormField} from "../../../shared/classes/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {FormEngine} from "../../../shared/services/form-engine.service";
-import {LoaderService} from "../../../shared/services/loader.service";
-import {Outlet} from "../../outlet/outlet";
-import {WrapperBase} from "../base/wrapper.base";
-import {FieldViewer} from "./field.viewer";
-
-@Component({
-  selector: "iss-wrp-table",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatTableModule,
-    MatSortModule,
-    MatPaginatorModule,
-    MatSidenavModule,
-    ReactiveFormsModule,
-    Outlet,
-    FieldViewer,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()" />
-        </form>
-        <ds-button (click)="drawer.close();addRow(tableOutletForm.getRawValue());tableOutletForm.reset()">save
-        </ds-button>
-        <ds-button (click)="addRow(tableOutletForm.getRawValue());tableOutletForm.reset()">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="drawer.toggle()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (field.config.tableWithFilter) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th
-                    mat-header-cell *matHeaderCellDef mat-sort-header
-                    [disabled]="!fieldsMap().get(col)?.config?.tableWithSort"
-                  >
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row; let i = index">
-                    <iss-vwr-field [field]="fieldsWithValueInViewMode()[i][$index]" />
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (field.config.tableWithPagination) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `,
-  styles: `
-    .mat-drawer {
-      position: fixed;
-      left: 0;
-    }
-  `
-})
-export class TableWrapper extends WrapperBase implements AfterViewInit, OnInit {
-  loader: LoaderService = inject(LoaderService);
-  drawer: Signal<MatSidenav | undefined> = viewChild("drawer");
-  tableOutletForm: FormGroup = new FormGroup({});
-  fields: WritableSignal<FormField[]> = signal(this.constructFieldChildren(this.field.children));
-  fieldsWithValueInViewMode: WritableSignal<FormField[][]> = signal([]);
-  columnLabels: Signal<string[]> = computed(() => {
-    const labels: string[] = this.fields().map((f: FormField) => f.label());
-    labels.push("");
-    return labels;
-  });
-  fieldNames: Signal<string[]> = computed(() => {
-    const names = this.fields().map((f: FormField) => f.name);
-    names.push("actions");
-    return names;
-  });
-  fieldsMap: Signal<Map<string, FormField>> = computed(() => {
-    const m: Map<string, FormField> = new Map<string, FormField>();
-    this.fields().forEach((f: FormField) => {
-      m.set(f.name, f);
-    });
-    return m;
-  });
-  dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
-  clickedRows = new Set<any>();
-  paginator: Signal<MatPaginator | undefined> = viewChild(MatPaginator);
-  sort: Signal<MatSort | undefined> = viewChild(MatSort);
-  #formEngine: FormEngine = inject(FormEngine);
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.drawer()?.closedStart.subscribe(() => {
-      this.tableOutletForm.reset();
-      this.tableOutletForm.enable();
-    });
-  }
-
-  ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator() ?? null;
-    this.dataSource.sort = this.sort() ?? null;
-  }
-
-  applyFilter(event: Event) {
-    const filterValue: string = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
-  }
-
-  onRowClick(row: any) {
-    this.clickedRows.add(row);
-  }
-
-  removeRow(row: any) {
-    const newData = this.dataSource.data.filter((r) => r.id !== row.id);
-    this.renderRows(newData);
-    if (!newData.length) {
-      this.ctrl.setValue(null);
-    }
-  }
-
-  addRow(rows: any) {
-    this.renderRows([...this.dataSource.data, rows]);
-    this.fieldsWithValueInViewMode.update((fields) => {
-      return [...fields, this.#fieldValuesMapper(rows)];
-    });
-    this.ctrl.setValue("*");
-  }
-
-  renderRows(rows: any) {
-    this.dataSource = new MatTableDataSource<any>(rows);
-    this.dataSource.paginator = this.paginator() ?? null;
-    this.dataSource.sort = this.sort() ?? null;
-    this.field.jsonValue = this.dataSource.data;
-  }
-
-  viewRow(row: any) {
-    this.fields.update((fields: FormField[]): FormField[] => {
-      fields = fields.map((field) => {
-        field.value = row[field.name];
-        return field;
-      });
-      return [...fields];
-    });
-    this.tableOutletForm.patchValue(row);
-    this.tableOutletForm.disable();
-    this.drawer()?.open();
-  }
-
-  editRow(row: any) {
-    this.tableOutletForm.patchValue(row);
-    this.drawer()?.open();
-  }
-
-  private constructFieldChildren(fields: any): FormField[] {
-    return fields.map((f: any) => new FormField(f, this.loader));
-  }
-
-  #fieldValuesMapper(values: any): FormField[] {
-    return this.fields().map((field: FormField): any => {
-      const fieldWithJsonValue: FormField = this.#formEngine.fields.find((f: FormField) => f.name === field.name)!;
-      return {
-        name: fieldWithJsonValue.name,
-        type: fieldWithJsonValue.type,
-        ctrlValue: signal(values[field.name]),
-        ctrlJsonValue: signal(fieldWithJsonValue.ctrlJsonValue()),
-        config: fieldWithJsonValue.config,
-      };
-    });
-  }
-
-  #viewFieldsFactory() {
-    const viewData: any = [];
-    this.fields().forEach((f) => {
-      viewData.push({
-        name: f.name,
-        type: f.type,
-        ctrlValue: signal(f.ctrlValue()),
-        ctrlJsonValue: signal(f.ctrlJsonValue()),
-        config: f.config,
-      });
-    });
-    return viewData;
-  }
-}

package/projects/iss/src/components/controls/textarea/textarea.control.ts

@@ -1,54 +0,0 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, effect, EffectRef, OnDestroy} from "@angular/core";
-import {FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {MatFormField, MatFormFieldModule} from "@angular/material/form-field";
-import {MatInput} from "@angular/material/input";
-import {HintsComponent} from "../../shared/hints.component";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-textarea",
-  imports: [
-    MatFormField,
-    MatInput,
-    HintsComponent,
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-  ],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: TextareaControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true}
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <mat-form-field floatLabel="auto" class="custom-textarea">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <textarea
-        matInput
-        [placeholder]="placeholder()"
-        [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
-        (input)="emitValue()"
-        (focusout)="markAsTouched()"
-      >
-      </textarea>
-      <iss-ctrl-hints [hints]="hints()" />
-    </mat-form-field>
-  `
-})
-export class TextareaControl extends ControlBase implements OnDestroy {
-  #disabledEffect: EffectRef = effect(() => {
-    if (this.disabled()) {
-      this.ctrl.disable();
-    } else {
-      this.ctrl.enable();
-    }
-  });
-
-  ngOnDestroy() {
-    this.#disabledEffect.destroy();
-  }
-}

package/projects/iss/src/components/controls/textarea/textarea.viewer.ts

@@ -1,11 +0,0 @@
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-textarea",
-  template: `
-    {{ field().ctrlValue() }}
-  `,
-})
-export class TextareaViewer extends ViewerBase {
-}

package/projects/iss/src/components/controls/textarea/textarea.wrapper.ts

@@ -1,34 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {ValidationMessageComponent} from "../../shared/validation-message.component";
-import {WrapperBase} from "../base/wrapper.base";
-import {TextareaControl} from "./textarea.control";
-import {TextareaViewer} from "./textarea.viewer";
-
-@Component({
-  selector: "iss-wrp-textarea",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    TextareaControl,
-    TextareaViewer,
-    ValidationMessageComponent
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @if (field.mode() === "edit") {
-        <iss-ctrl-textarea [formControlName]="field.name" [min]="field.config.min ?? null" [max]="field.config.max ?? null" />
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
-      } @else {
-        <iss-vwr-textarea [field]="field" />
-      }
-    }
-  `
-})
-export class TextareaWrapper extends WrapperBase {}

package/projects/iss/src/components/controls/time-picker/time-picker.control.ts

@@ -1,86 +0,0 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal} from "@angular/core";
-import {NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {provideNativeDateAdapter} from "@angular/material/core";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatIcon} from "@angular/material/icon";
-import {MatInputModule} from "@angular/material/input";
-import {MatTimepickerModule} from "@angular/material/timepicker";
-import {format} from "date-fns";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-time-picker",
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    MatFormFieldModule, MatInputModule, MatTimepickerModule, ReactiveFormsModule, MatIcon,
-  ],
-  providers: [
-    provideNativeDateAdapter(),
-    {provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true},
-  ],
-  template: `
-    <mat-form-field floatLabel="auto" class="">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [formControl]="ctrl"
-        [matTimepicker]="picker"
-        [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
-        readonly
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-timepicker-toggle matIconSuffix [for]="picker" />
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker />
-
-    </mat-form-field>
-  `,
-})
-export class TimePickerControl extends ControlBase {
-  interval: InputSignal<string> = input("30min");
-  minTime: InputSignal<string | null> = input<string | null>(null);
-  maxTime: InputSignal<string | null> = input<string | null>(null);
-
-  emit(evt: any) {
-    this.propagateValue(this.#stringifyTime(evt.value));
-    this.emitOnChangeEvent(this.#stringifyTime(evt.value));
-  }
-
-  clear(event: MouseEvent) {
-    event.stopImmediatePropagation();
-    this.ctrl.setValue(null);
-
-    this.propagateValue(null);
-    this.emitOnChangeEvent(null);
-  }
-
-  override writeValue(value: any) {
-    if (value) {
-      const d = new Date();
-      d.setHours(value.split(":")[0]);
-      d.setMinutes(value.split(":")[1]);
-      d.setSeconds(value.split(":")[2] ?? "00");
-      this.ctrl.setValue(d);
-    }
-  }
-
-  #stringifyTime(value: any) {
-    let formatedTime;
-    try {
-      formatedTime = format(new Date(value), "HH:mm:ss");
-    } catch (e) {
-      formatedTime = value;
-    }
-
-    if (value instanceof Date && !Number.isNaN(value.getTime())) {
-      return formatedTime;
-    }
-
-    return null;
-  }
-}

package/projects/iss/src/components/controls/time-picker/time-picker.viewer.ts

@@ -1,10 +0,0 @@
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-time-picker",
-  template: `
-    {{ field().ctrlValue() }}
-  `,
-})
-export class TimePickerViewer extends ViewerBase {}

package/projects/iss/src/components/controls/time-picker/time-picker.wrapper.ts

@@ -1,31 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {TimePickerControl} from "./time-picker.control";
-import {TimePickerViewer} from "./time-picker.viewer";
-
-@Component({
-  selector: "iss-wrp-time-picker",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    TimePickerControl,
-    TimePickerViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @if (field.mode() === "edit") {
-        <iss-ctrl-time-picker [formControlName]="field.name" />
-      } @else {
-        <iss-vwr-time-picker [field]="field" />
-      }
-    }
-  `
-})
-export class TimePickerWrapper extends WrapperBase {}