iss-ctrl 0.0.2 → 0.0.3

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,31 @@
+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) { }
+}