iss-ctrl 0.0.3 → 0.0.5

package/projects/playground/src/components/date-picker-wrapper.component.ts

@@ -1,41 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-
-@Component({
-  selector: "app-date-picker-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field" />
-    </form>
-  `,
-  styles: ``
-})
-export default class DatePickerWrapperComponent {
-  form: FormGroup = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "date",
-      "title": "date",
-      "hint": null,
-      "order": 10,
-      "mode": "edit",
-      "value": "2024-08-18T00:00:00Z",
-      "type": "date",
-      "validation": {
-        "required": true
-      },
-      "events": [],
-      "config": {
-        "minDate": new Date(),
-        "maxDate": new Date(),
-      },
-    }
-  ];
-}

package/projects/playground/src/components/date-range-picker-container.component.ts

@@ -1,24 +0,0 @@
-import {Component} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {DateRangePickerControl} from "../../../iss/src/components/controls/date-range-picker/date-range-picker.control";
-
-@Component({
-  selector: "app-date-range-picker-container",
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    DateRangePickerControl
-  ],
-  template: `
-    <mat-label>Date Range</mat-label>
-    <iss-ctrl-date-range-picker [formControl]="dateRangePicker" [maxDate]="minDate" (onDateRangeObjectChange)="logObject($event)" />
-  `,
-  styles: ``
-})
-export default class DateRangePickerContainerComponent {
-  dateRangePicker = new FormControl();
-  minDate = new Date();
-
-  logObject($event: any) { }
-}

package/projects/playground/src/components/date-range-picker-wrapper.component.ts

@@ -1,41 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-
-@Component({
-  selector: "app-date-range-picker-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field" />
-    </form>
-  `,
-  styles: ``
-})
-export default class DateRangePickerWrapperComponent {
-  form: FormGroup = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "date range",
-      "title": "date range",
-      "hint": null,
-      "order": 10,
-      "mode": "view",
-      "value": "2024-08-11T00:00:00Z,2024-08-19T00:00:00Z",
-      "type": "dateRange",
-      "validation": {
-        "required": true
-      },
-      "events": [],
-      "config": {
-        "minDate": "2024-08-10T00:00:00Z",
-        "maxDate": new Date(),
-      },
-    }
-  ];
-}

package/projects/playground/src/components/datetime-container.component.ts

@@ -1,25 +0,0 @@
-import {Component, OnInit} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {DatetimePickerControl} from "../../../iss/src/components/controls/datetime-picker/datetime-picker.control";
-
-@Component({
-  selector: "app-datetime-container",
-  imports: [
-    ReactiveFormsModule,
-    DatetimePickerControl,
-  ],
-  template: `
-    <iss-ctrl-datetime-picker [formControl]="datetimePicker">
-      <label>Datetime Picker</label>
-    </iss-ctrl-datetime-picker>
-  `,
-})
-export default class DatetimeContainerComponent implements OnInit {
-  datetimePicker = new FormControl();
-
-  ngOnInit() {
-    this.datetimePicker.valueChanges.subscribe(value => {
-      console.log(value);
-    });
-  }
-}

package/projects/playground/src/components/datetime-picker-wrapper.component.ts

@@ -1,62 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-
-@Component({
-  selector: "app-date-picker-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="fields" />
-      <br>
-    </form>
-  `,
-  styles: ``
-})
-export default class DateTimePickerWrapperComponent {
-  form: FormGroup = new FormGroup({});
-  fields: any = [
-    {
-      "id": 37,
-      "name": "startDate",
-      "title": "Start Date",
-      "hint": null,
-      "order": 10,
-      "mode": "edit",
-      "value": "2024-08-18T00:00:00Z",
-      "type": "datetime",
-      "validation": {
-        //"required": true,
-        "beforeDate": "endDate"
-      },
-      "events": [],
-      "config": {
-        // "minDate": new Date(),
-        // "maxDate": new Date(),
-      },
-    },
-    {
-      "id": 37,
-      "name": "endDate",
-      "title": "End Date",
-      "hint": null,
-      "order": 10,
-      "mode": "edit",
-      "value": "2024-08-16T00:00:00Z",
-      "type": "datetime",
-      "validation": {
-        // "required": true,
-        // "afterDate": "startDate"
-      },
-      "events": [],
-      "config": {
-        // "minDate": new Date(),
-        // "maxDate": new Date(),
-      },
-    }
-  ];
-}

package/projects/playground/src/components/input-container.component.ts

@@ -1,35 +0,0 @@
-import {Component, OnInit, signal, WritableSignal} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {InputControl} from "../../../iss/src/components/controls/input/input.control";
-
-@Component({
-  selector: "app-input-container",
-  imports: [
-    MatLabel,
-    InputControl,
-    ReactiveFormsModule
-  ],
-  template: `
-    <mat-label>Input</mat-label>
-    <iss-ctrl-input
-      [formControl]="ctrl"
-      [suffixText]="suffix()"
-      (onPrefixClick)="prefixClicked($event)"
-      (onSuffixClick)="suffixClicked($event)"
-      [min]="5"
-    >
-    </iss-ctrl-input>
-  `,
-  styles: ``
-})
-export default class InputContainerComponent implements OnInit {
-  suffix: WritableSignal<string> = signal("SAR");
-  ctrl = new FormControl();
-
-  ngOnInit(): void { }
-
-  prefixClicked($event: string) { }
-
-  suffixClicked($event: string) { }
-}

package/projects/playground/src/components/input-wrapper.component.ts

@@ -1,41 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-@Component({
-  selector: "app-input-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field"/>
-    </form>
-  `,
-  styles: ``
-})
-export default class InputWrapperComponent {
-  form = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "input",
-      "title": "input",
-      "hint": null,
-      "api": "/v1/private/subsidiaries/{key}/districts",
-      "order": 10,
-      "type": "input",
-      "config": {
-        "max": 50,
-        "min": 2,
-        "type": "text",
-      },
-      "stepName": "REQUESTER",
-      "validation": {
-        "required": true,
-      },
-      "asyncValidation": {}
-    }
-  ];
-}

package/projects/playground/src/components/mobile-container.component.ts

@@ -1,23 +0,0 @@
-import {Component} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {MobileControl} from "../../../iss/src/components/controls/mobile/mobile.control";
-
-@Component({
-  selector: "app-mobile-container",
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    MobileControl
-  ],
-  template: `
-    <mat-label>Mobile</mat-label>
-    <iss-ctrl-mobile [formControl]="mobile" (onChange)="logObject($event)" />
-  `,
-  styles: ``
-})
-export default class MobileContainerComponent {
-  mobile = new FormControl();
-
-  logObject($event: any) { }
-}

package/projects/playground/src/components/mobile-wrapper.component.ts

@@ -1,36 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-@Component({
-  selector: "app-mobile-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="fields"/>
-    </form>
-  `,
-  styles: ``
-})
-export default class MobileWrapperComponent {
-  form = new FormGroup({});
-  fields: any = [
-    {
-      "id": 37,
-      "name": "mobile",
-      "title": "Mobile",
-      "hint": null,
-      "order": 10,
-      "type": "mobile",
-      "mode": "view",
-      "value": "+966553944229",
-      "validation": {
-        "required": true
-      },
-      "events": []
-    }
-  ];
-}

package/projects/playground/src/components/note-wrapper.component.ts

@@ -1,37 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-@Component({
-  selector: "app-note-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field"/>
-    </form>
-  `,
-  styles: ``
-})
-export default class NoteWrapperComponent {
-  form = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "district",
-      "title": "My Note",
-      "hint": null,
-      "api": "/v1/private/subsidiaries/{key}/districts",
-      "order": 10,
-      "type": "note",
-      "stepName": "REQUESTER",
-      "value": "Note test",
-      "validation": {
-        "required": true
-      },
-      "events": []
-    }
-  ];
-}

package/projects/playground/src/components/outlet-container.component.ts

@@ -1,144 +0,0 @@
-import {Component, OnInit} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-@Component({
-  selector: "app-outlet-container",
-  imports: [
-    ReactiveFormsModule,
-    Outlet
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="fields"/>
-    </form>
-  `
-})
-export default class OutletContainerComponent implements OnInit {
-  form: FormGroup = new FormGroup({});
-  district: any = {
-    "id": 37,
-    "name": "district",
-    "title": "District",
-    "hint": null,
-    "order": 10,
-    "type": "select",
-    "base": "select",
-    "stepName": "REQUESTER",
-    "options": [
-      {value: "1", label: "ONE"},
-      {value: "2", label: "TWO"},
-      {value: "3", label: "THREE"},
-    ],
-    "validation": {
-      "required": true
-    },
-    "events": []
-  };
-  location: any = {
-    "id": 37,
-    "name": "location",
-    "title": "Location",
-    "hint": null,
-    "order": 10,
-    "type": "select",
-    "base": "select",
-    "stepName": "REQUESTER",
-    "options": [
-      {value: "4", label: "FOUR"},
-      {value: "5", label: "FIVE"},
-      {value: "6", label: "SIX"},
-    ],
-    "validation": {
-      "required": true
-    },
-    "events": []
-  };
-  name: any = {
-    "id": 37,
-    "name": "name",
-    "title": "Name",
-    "hint": null,
-    "api": "/v1/private/subsidiaries",
-    "order": 40,
-    "type": "input",
-    "base": "input",
-    "stepName": "REQUESTER",
-    "validation": {
-      "required": true
-    },
-    "events": [
-      {
-        "id": 401,
-        "value": "*",
-        "config": null,
-        "eventSourceName": "name",
-        "name": "load"
-      }
-    ]
-  };
-  title: any = {
-    "id": 37,
-    "name": "title",
-    "title": "title",
-    "hint": null,
-    "api": undefined,
-    "order": 10,
-    "type": "input",
-    "base": "input",
-    "stepName": "REQUESTER",
-    "validation": {
-      "required": true
-    },
-    "events": [
-      /*{
-        "id": 401,
-        "value": "*",
-        "config": null,
-        "eventSourceName": "name",
-        "name": "setValue"
-      }*/
-    ]
-  };
-  address: any = {
-    "id": 37,
-    "name": "address",
-    "title": "address",
-    "hint": null,
-    "api": "/v1/private/subsidiaries/{district}/districts/{location}",
-    "order": 10,
-    "type": "input",
-    "base": "input",
-    "stepName": "REQUESTER",
-    "validation": {
-      "required": true
-    },
-    "events": [
-      {
-        "id": 401,
-        "value": "*",
-        /*"config": {
-          "replaceApiKeyFromField": "ctrlJsonValue.value",
-          "fn": "replaceApiKeyFromField",
-        },*/
-        "eventSourceName": "location",
-        "name": "loadOptions"
-      },
-      {
-        "id": 401,
-        "value": "*",
-        /*"config": {
-          "replaceApiKeyFromField": "ctrlJsonValue.value",
-          "fn": "replaceApiKeyFromField",
-        },*/
-        "eventSourceName": "district",
-        "name": "loadOptions"
-      }
-    ]
-  };
-  fields: any = [];
-
-  ngOnInit(): void {
-    this.fields = [this.district, this.location, this.name, this.title, this.address];
-  }
-}

package/projects/playground/src/components/plate-container.component.ts

@@ -1,22 +0,0 @@
-import {Component} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {PlateControl} from "../../../iss/src/components/controls/plate/plate.control";
-
-
-@Component({
-  selector: "app-plate-container",
-  imports: [
-    MatLabel,
-    ReactiveFormsModule,
-    PlateControl
-  ],
-  template: `
-    <mat-label>Plate</mat-label>
-    <iss-ctrl-plate-number [formControl]="plateNumber" />
-  `,
-  styles: ``
-})
-export default class PlateContainerComponent {
-  plateNumber = new FormControl();
-}

package/projects/playground/src/components/plate-wrapper.component.ts

@@ -1,39 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-@Component({
-  selector: "app-plate-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field" />
-    </form>
-  `,
-  styles: ``
-})
-export default class PlateWrapperComponent {
-  form = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "district",
-      "title": "My Plate",
-      "hint": null,
-      "api": "/v1/private/subsidiaries/{key}/districts",
-      "order": 10,
-      "type": "plate",
-      "mode": "view",
-      "value": "ABS-1234",
-      "jsonValue": {letters: ["A", "B", "S"], numbers: ["1", "2", "3"]},
-      "stepName": "REQUESTER",
-      "validation": {
-        "required": true
-      },
-      "events": []
-    }
-  ];
-}

package/projects/playground/src/components/radio-wrapper.component.ts

@@ -1,45 +0,0 @@
-import {Component} from "@angular/core";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {Outlet} from "../../../iss/src/components/outlet/outlet";
-
-
-@Component({
-  selector: "app-radio-wrapper",
-  imports: [
-    Outlet,
-    ReactiveFormsModule
-  ],
-  template: `
-    <form [formGroup]="form">
-      <iss-form-outlet [fields]="field" />
-    </form>
-  `,
-  styles: ``
-})
-export default class RadioWrapperComponent {
-  form = new FormGroup({});
-  field: any = [
-    {
-      "id": 37,
-      "name": "district",
-      "title": "District",
-      "hint": null,
-      "api": "/v1/private/subsidiaries/{key}/districts",
-      "order": 10,
-      "type": "radio",
-      "stepName": "REQUESTER",
-      "value": "1",
-      "jsonValue": [{value: "1", label: "ONE"}],
-      "options": [
-        {value: "1", label: "ONE"},
-        {value: "2", label: "TWO"},
-        {value: "3", label: "THREE"},
-      ],
-      "mode": "view",
-      "validation": {
-        "required": true
-      },
-      "events": []
-    }
-  ];
-}

package/projects/playground/src/components/select-container.component.ts

@@ -1,31 +0,0 @@
-import {Component, OnInit, signal} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {SelectControl} from "../../../iss/src/components/controls/select/select.control";
-import {Option} from "../../../iss/src/shared/interfaces/option.interface";
-
-@Component({
-  selector: "app-select-container",
-  imports: [
-    ReactiveFormsModule,
-    SelectControl,
-  ],
-  template: `
-    <iss-ctrl-select (onChange)="log($event)" [formControl]="ctrl" [options]="options" [multiple]="true" [loading]="loading()">
-      <label>Select</label>
-    </iss-ctrl-select>
-  `
-})
-export default class SelectContainerComponent implements OnInit {
-  ctrl = new FormControl("");
-  options: Option[] = [];
-  loading = signal<boolean>(true);
-
-  ngOnInit(): void {
-    setTimeout(() => {
-      this.loading.set(false);
-      this.options = Array.from({length: 30}, (_, i) => ({value: `${i + 1}`, label: `${i + 1}`}));
-    }, 2000);
-  }
-
-  log($event: string | FormData) { }
-}