iss-ctrl 0.0.8 → 0.0.10

package/fesm2022/{iss-ctrl-user-picker.field-Cx0CCAFC.mjs → iss-ctrl-user-picker.field-l-0bW6lP.mjs}

@@ -1,25 +1,39 @@
 import * as i0 from '@angular/core';
 import { inject, signal, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatSidenav, MatSidenavContainer } from '@angular/material/sidenav';
-import { map, tap } from 'rxjs';
-import { F as FieldBase, E as Employee, c as SelectControl, d as ValidationMessageComponent } from './iss-ctrl-iss-ctrl-BLjj_Aqu.mjs';
+import { Subject, debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs';
+import { F as FieldBase, E as Employee, V as VIEW_PROVIDER, S as SelectControl, c as ValidationMessageComponent } from './iss-ctrl-iss-ctrl-hz0ibyPg.mjs';
 
 class UserPickerField extends FieldBase {
     userImageHost = "https://igateapp.stc.com.sa";
     employeeService = inject(Employee);
     options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     userData;
-    search(event) {
-        this.employeeService.search(event)
-            .pipe(map((res) => {
+    #query = new Subject();
+    constructor() {
+        super();
+        this.#query.pipe(debounceTime(300), distinctUntilChanged(), 
+        // a new query cancels the request still in flight
+        switchMap((query) => this.employeeService.search(query)), map((res) => {
             return res.map((user) => {
                 user.value = user.email;
                 user.label = user.name;
                 return user;
             });
-        }), tap((res) => {
+        }), takeUntilDestroyed(this.destroyRef)).subscribe((res) => {
             this.options.set(res);
-        })).subscribe();
+        });
+    }
+    userImage() {
+        const image = this.userData?.profileImage ?? this.userData?.profileImageUrl;
+        if (!image) {
+            return null;
+        }
+        return image.startsWith("http") ? image : this.userImageHost + image;
+    }
+    search(event) {
+        this.#query.next(event);
     }
     updateField($event) {
         this.options.set([]);
@@ -27,7 +41,7 @@ class UserPickerField extends FieldBase {
     showUserData(item) {
         this.userData = item;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserPickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserPickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserPickerField, isStandalone: true, selector: "iss-user-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
@@ -35,8 +49,9 @@ class UserPickerField extends FieldBase {
           [formControlName]="field.name"
           [min]="field.config.min() ?? null"
           [max]="field.config.max() ?? null"
-          [options]="options()"
-          [multiple]="true"
+          [options]="options()"
+          [multiple]="true"
+          [readonly]="field.config.readonly() ?? false"
           (onQueryChange)="search($event)"
           (onChange)="updateField($event)"
         >
@@ -53,7 +68,7 @@ class UserPickerField extends FieldBase {
             </div>
           </ng-template>
         </iss-ctrl-select>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
         <p>{{ field.value }}</p>
       }
@@ -67,7 +82,7 @@ class UserPickerField extends FieldBase {
           </div>
           <div class="sidenav-body p-0">
             <div class="d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center">
-              <ds-avatar [attr.image]="userImageHost + userData?.profileImage || userData?.profileImageUrl" [attr.label]="userData?.name"></ds-avatar>
+              <ds-avatar [attr.image]="userImage()" [attr.label]="userData?.name"></ds-avatar>
               @if (userData?.employeeNumber) {
                 <div class="d-flex flex-column gap-1">
                   <h4 class="fs-16 fc-black fw-medium mb-0">{{ userData?.name }}</h4>
@@ -98,11 +113,11 @@ class UserPickerField extends FieldBase {
         </div>
       </mat-sidenav>
     </mat-sidenav-container>
-  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
+  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserPickerField, decorators: [{
             type: Component,
-            args: [{ selector: "iss-user-picker", imports: [
+            args: [{ selector: "iss-user-picker", viewProviders: [VIEW_PROVIDER], imports: [
                         SelectControl,
                         ValidationMessageComponent,
                         MatSidenav,
@@ -114,8 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [formControlName]="field.name"
           [min]="field.config.min() ?? null"
           [max]="field.config.max() ?? null"
-          [options]="options()"
-          [multiple]="true"
+          [options]="options()"
+          [multiple]="true"
+          [readonly]="field.config.readonly() ?? false"
           (onQueryChange)="search($event)"
           (onChange)="updateField($event)"
         >
@@ -132,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             </div>
           </ng-template>
         </iss-ctrl-select>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
         <p>{{ field.value }}</p>
       }
@@ -146,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           </div>
           <div class="sidenav-body p-0">
             <div class="d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center">
-              <ds-avatar [attr.image]="userImageHost + userData?.profileImage || userData?.profileImageUrl" [attr.label]="userData?.name"></ds-avatar>
+              <ds-avatar [attr.image]="userImage()" [attr.label]="userData?.name"></ds-avatar>
               @if (userData?.employeeNumber) {
                 <div class="d-flex flex-column gap-1">
                   <h4 class="fs-16 fc-black fw-medium mb-0">{{ userData?.name }}</h4>
@@ -178,7 +194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       </mat-sidenav>
     </mat-sidenav-container>
   `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [".mat-drawer{position:fixed;left:0}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 export { UserPickerField };
-//# sourceMappingURL=iss-ctrl-user-picker.field-Cx0CCAFC.mjs.map
+//# sourceMappingURL=iss-ctrl-user-picker.field-l-0bW6lP.mjs.map

package/fesm2022/iss-ctrl-user-picker.field-l-0bW6lP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-user-picker.field-l-0bW6lP.mjs","sources":["../../../projects/iss/src/components/controls/user-picker/user-picker.field.ts"],"sourcesContent":["import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from \"@angular/core\";\r\nimport { takeUntilDestroyed } from \"@angular/core/rxjs-interop\";\r\nimport { MatSidenav, MatSidenavContainer } from \"@angular/material/sidenav\";\r\nimport { debounceTime, distinctUntilChanged, map, Subject, switchMap } from \"rxjs\";\r\nimport { ValidationMessageComponent } from \"../../shared/validation-message.component\";\r\nimport { FieldBase } from \"../base/field-base\";\r\nimport { SelectControl } from \"../select/select.control\";\r\nimport { Employee } from \"./employee\";\r\nimport { VIEW_PROVIDER } from \"../../../shared/constants/view-provider.const\";\r\n\r\n@Component({\r\n  selector: \"iss-user-picker\",\r\n  viewProviders: [VIEW_PROVIDER],\r\n  imports: [\r\n    SelectControl,\r\n    ValidationMessageComponent,\r\n    MatSidenav,\r\n    MatSidenavContainer,\r\n  ],\r\n  template: `\r\n    @if (field.visible()) {\r\n      @if (field.mode() === \"edit\") {\r\n        <iss-ctrl-select\r\n          [formControlName]=\"field.name\"\r\n          [min]=\"field.config.min() ?? null\"\r\n          [max]=\"field.config.max() ?? null\"\r\n          [options]=\"options()\"\n          [multiple]=\"true\"\n          [readonly]=\"field.config.readonly() ?? false\"\n          (onQueryChange)=\"search($event)\"\r\n          (onChange)=\"updateField($event)\"\r\n        >\r\n          <label>{{ field.label() }}</label>\r\n          <ng-template let-item #optionTemplate>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <ds-avatar size=\"x-small\" [attr.image]=\"item.image\"></ds-avatar>\r\n              <span class=\"fs-14 fw-medium fc-black\">{{ item.name }}</span>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template let-item #cardViewerTemplate>\r\n            <div (click)=\"showUserData(item);drawer.open()\">\r\n              {{ item.name }}\r\n            </div>\r\n          </ng-template>\r\n        </iss-ctrl-select>\r\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"!ctrl.untouched\"/>\r\n      } @else {\r\n        <p>{{ field.value }}</p>\r\n      }\r\n    }\r\n    <mat-sidenav-container [hasBackdrop]=\"true\">\r\n      <mat-sidenav #drawer [mode]=\"'over'\" [position]=\"'start'\" [autoFocus]=\"false\">\r\n        <div class=\"main-sidenav\">\r\n          <div class=\"sidenav-title bc-white\">\r\n            <h3> Employee Information </h3>\r\n            <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"drawer.close()\"></ds-icon>\r\n          </div>\r\n          <div class=\"sidenav-body p-0\">\r\n            <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\r\n              <ds-avatar [attr.image]=\"userImage()\" [attr.label]=\"userData?.name\"></ds-avatar>\r\n              @if (userData?.employeeNumber) {\r\n                <div class=\"d-flex flex-column gap-1\">\r\n                  <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ userData?.name }}</h4>\r\n                  @if (!userData?.job?.name) {\r\n                    <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\">{{ userData?.position?.name }}</h6>\r\n                  }\r\n                  @if (!userData?.position?.name) {\r\n                    <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\">{{ userData?.job?.name }}</h6>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"d-flex flex-wrap gap-2\">\r\n                <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n                  <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\r\n                  <a [href]=\"'mailTo:' + userData?.email\" class=\"fc-black\">{{ userData?.email }}</a>\r\n                </div>\r\n                @if (userData?.contact?.mobile) {\r\n                  <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n                    <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\r\n                    <a [href]=\"'tel:' + userData?.contact?.mobile\" class=\"fc-black\">\r\n                      <bdi>{{ userData?.contact?.mobile }}</bdi>\r\n                    </a>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-sidenav>\r\n    </mat-sidenav-container>\r\n  `,\r\n  styles: `\r\n    .mat-drawer {\r\n      position: fixed;\r\n      left: 0;\r\n    }`,\r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\r\n})\r\nexport class UserPickerField extends FieldBase {\r\n  userImageHost = \"https://igateapp.stc.com.sa\";\r\n  employeeService = inject(Employee);\r\n  options: any = signal([]);\r\n  userData: any;\r\n  #query: Subject<string> = new Subject<string>();\r\n\r\n  constructor() {\r\n    super();\r\n    this.#query.pipe(\r\n      debounceTime(300),\r\n      distinctUntilChanged(),\r\n      // a new query cancels the request still in flight\r\n      switchMap((query: string) => this.employeeService.search(query)),\r\n      map((res: any) => {\r\n        return res.map((user: any) => {\r\n          user.value = user.email;\r\n          user.label = user.name;\r\n          return user;\r\n        });\r\n      }),\r\n      takeUntilDestroyed(this.destroyRef)\r\n    ).subscribe((res: any) => {\r\n      this.options.set(res);\r\n    });\r\n  }\r\n\r\n  userImage(): string | null {\r\n    const image: string | undefined = this.userData?.profileImage ?? this.userData?.profileImageUrl;\r\n    if (!image) {\r\n      return null;\r\n    }\r\n    return image.startsWith(\"http\") ? image : this.userImageHost + image;\r\n  }\r\n\r\n  search(event: string) {\r\n    this.#query.next(event);\r\n  }\r\n\r\n  updateField($event: string | FormData) {\r\n    this.options.set([]);\r\n  }\r\n\r\n  showUserData(item: any) {\r\n    this.userData = item;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;;;AAkGM,MAAO,eAAgB,SAAQ,SAAS,CAAA;IAC5C,aAAa,GAAG,6BAA6B;AAC7C,IAAA,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC;AAClC,IAAA,OAAO,GAAQ,MAAM,CAAC,EAAE,8EAAC;AACzB,IAAA,QAAQ;AACR,IAAA,MAAM,GAAoB,IAAI,OAAO,EAAU;AAE/C,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,IAAI,CAAC,MAAM,CAAC,IAAI,CACd,YAAY,CAAC,GAAG,CAAC,EACjB,oBAAoB,EAAE;;QAEtB,SAAS,CAAC,CAAC,KAAa,KAAK,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAChE,GAAG,CAAC,CAAC,GAAQ,KAAI;AACf,YAAA,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,IAAS,KAAI;AAC3B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;AACvB,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI;AACtB,gBAAA,OAAO,IAAI;AACb,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CACpC,CAAC,SAAS,CAAC,CAAC,GAAQ,KAAI;AACvB,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;AACvB,QAAA,CAAC,CAAC;IACJ;IAEA,SAAS,GAAA;AACP,QAAA,MAAM,KAAK,GAAuB,IAAI,CAAC,QAAQ,EAAE,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe;QAC/F,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,KAAK;IACtE;AAEA,IAAA,MAAM,CAAC,KAAa,EAAA;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB;AAEA,IAAA,WAAW,CAAC,MAAyB,EAAA;AACnC,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;IACtB;AAEA,IAAA,YAAY,CAAC,IAAS,EAAA;AACpB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;uGA7CW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/EhB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuET,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA5EC,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,0BAA0B,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,UAAU,gJACV,mBAAmB,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EALN,CAAC,aAAa,CAAC,EAAA,CAAA;;2FAsFnB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxF3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,aAAA,EACZ,CAAC,aAAa,CAAC,EAAA,OAAA,EACrB;wBACP,aAAa;wBACb,0BAA0B;wBAC1B,UAAU;wBACV,mBAAmB;qBACpB,EAAA,QAAA,EACS,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuET,EAAA,OAAA,EAMQ,CAAC,sBAAsB,CAAC,EAAA,MAAA,EAAA,CAAA,sCAAA,CAAA,EAAA;;;;;"}

package/fesm2022/iss-ctrl.mjs

@@ -1,2 +1,2 @@
-export { ai as ATTACHMENT_DOWNLOAD_URL, ah as ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ag as ATTACHMENT_UPLOAD_URL, am as ArabicNumberPipe, a0 as AttachmentViewer, ab as COMPONENTS, a6 as COUNTRIES, C as CheckboxControl, w as CheckboxField, Y as CheckboxViewer, e as ChipsControl, s as ChipsField, U as ChipsViewer, o as ControlBase, a8 as DATETIME_FORMAT, a7 as DATE_FORMAT_ADAPTER, a5 as DEFAULT_COUNTRY, D as DatePickerControl, G as DatePickerField, a3 as DatePickerTimeViewer, a2 as DatePickerViewer, f as DateRangePickerControl, K as DateRangePickerField, a4 as DateRangePickerViewer, h as DatetimePickerControl, J as DatetimePickerField, al as Droppable, E as Employee, ae as FIELD_DATA, F as FieldBase, an as FieldDataInjector, ar as FileHandler, i as FilePickerControl, A as FilePickerField, aw as FileValidators, b as FormEngine, H as HOST, ak as HintsComponent, j as InputControl, p as InputField, N as InputViewer, av as IssValidators, L as Loader, M as MobileControl, v as MobileField, X as MobileViewer, O as Outlet, P as PLACEHOLDER_REGEX, a9 as PLATE_LETTERS, as as Phone, k as PlateControl, z as PlateField, ao as PlateLetterPipe, $ as PlateViewer, R as RadioControl, t as RadioField, W as RadioViewer, ac as SERVICES, c as SelectControl, u as SelectField, ap as SelectStatusPipe, S as SelectViewer, l as SlideToggleControl, y as SlideToggleField, _ as SlideToggleViewer, T as TextareaControl, q as TextareaField, Q as TextareaViewer, m as TimePickerControl, B as TimePickerField, a1 as TimePickerViewer, ax as TimeValidator, n as ToggleButtonControl, x as ToggleButtonField, Z as ToggleButtonViewer, aq as TranslatePipe, af as UI_LANGUAGE, aj as USER_SEARCH_API, aa as VALIDATION_MESSAGES, ad as VALIDATORS, V as VIEW_PROVIDER, d as ValidationMessageComponent, at as arrayFrom, au as formatFileSize, g as getPropertyByPath, r as replacePlaceholders } from './iss-ctrl-iss-ctrl-BLjj_Aqu.mjs';
+export { ai as ATTACHMENT_DOWNLOAD_URL, ah as ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ag as ATTACHMENT_UPLOAD_URL, am as ArabicNumberPipe, a0 as AttachmentViewer, ab as COMPONENTS, a6 as COUNTRIES, d as CheckboxControl, v as CheckboxField, Y as CheckboxViewer, e as ChipsControl, q as ChipsField, Q as ChipsViewer, C as ControlBase, a8 as DATETIME_FORMAT, a7 as DATE_FORMAT_ADAPTER, a5 as DEFAULT_COUNTRY, D as DatePickerControl, B as DatePickerField, a3 as DatePickerTimeViewer, a2 as DatePickerViewer, f as DateRangePickerControl, J as DateRangePickerField, a4 as DateRangePickerViewer, h as DatetimePickerControl, G as DatetimePickerField, al as Droppable, E as Employee, ae as FIELD_DATA, F as FieldBase, an as FieldDataInjector, ar as FileHandler, i as FilePickerControl, z as FilePickerField, aw as FileValidators, b as FormEngine, H as HOST, ak as HintsComponent, j as InputControl, o as InputField, K as InputViewer, av as IssValidators, L as Loader, M as MobileControl, u as MobileField, X as MobileViewer, O as Outlet, P as PLACEHOLDER_REGEX, a9 as PLATE_LETTERS, as as Phone, k as PlateControl, y as PlateField, ao as PlateLetterPipe, $ as PlateViewer, R as RadioControl, s as RadioField, U as RadioViewer, ac as SERVICES, S as SelectControl, t as SelectField, ap as SelectStatusPipe, W as SelectViewer, l as SlideToggleControl, x as SlideToggleField, _ as SlideToggleViewer, T as TextareaControl, p as TextareaField, N as TextareaViewer, m as TimePickerControl, A as TimePickerField, a1 as TimePickerViewer, ax as TimeValidator, n as ToggleButtonControl, w as ToggleButtonField, Z as ToggleButtonViewer, aq as TranslatePipe, af as UI_LANGUAGE, aj as USER_SEARCH_API, aa as VALIDATION_MESSAGES, ad as VALIDATORS, V as VIEW_PROVIDER, c as ValidationMessageComponent, at as arrayFrom, au as formatFileSize, g as getPropertyByPath, r as replacePlaceholders } from './iss-ctrl-iss-ctrl-hz0ibyPg.mjs';
 //# sourceMappingURL=iss-ctrl.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iss-ctrl",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "^21.0.6",
     "@angular/core": "^21.0.6",

package/types/iss-ctrl.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InputSignal, WritableSignal, OutputEmitterRef, OnDestroy, OnInit, Signal, Type, DestroyRef, StaticProvider, InjectionToken, PipeTransform, Injector } from '@angular/core';
+import { InputSignal, WritableSignal, OutputEmitterRef, OnInit, OnDestroy, Signal, Type, DestroyRef, StaticProvider, InjectionToken, PipeTransform, Injector } from '@angular/core';
 import { ControlValueAccessor, Validator, FormControl, AbstractControl, ValidationErrors, FormGroup, ValidatorFn, AsyncValidatorFn, ControlContainer } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@@ -24,7 +24,10 @@ declare class ControlBase implements ControlValueAccessor, Validator {
     formControlName: InputSignal<string>;
     min: InputSignal<number | string | null>;
     max: InputSignal<number | string | null>;
+    minLength: InputSignal<number | null>;
+    maxLength: InputSignal<number | null>;
     disabled: WritableSignal<boolean>;
+    readonly: InputSignal<boolean>;
     multiple: InputSignal<boolean | undefined>;
     placeholder: InputSignal<string>;
     hints: InputSignal<Hint[]>;
@@ -32,19 +35,19 @@ declare class ControlBase implements ControlValueAccessor, Validator {
     touched: WritableSignal<boolean>;
     onChange: OutputEmitterRef<any>;
     protected ctrl: FormControl;
-    protected onTouch: () => void;
-    protected onPropagateValue: (_: any) => void;
     registerOnChange(fn: () => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     writeValue(value: string | FormData | Date | null): void;
     markAsTouched(): void;
     validate(control: AbstractControl): ValidationErrors | null;
+    protected onTouch: () => void;
+    protected onPropagateValue: (_: any) => void;
     protected emitValue(value?: any): void;
     protected propagateValue(value?: any): void;
     protected emitOnChangeEvent($event?: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ControlBase, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ControlBase, "ng-component", never, { "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hints": { "alias": "hints"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ControlBase, "ng-component", never, { "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hints": { "alias": "hints"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; }, never, never, true, never>;
 }
 
 declare class CheckboxControl extends ControlBase {
@@ -60,13 +63,12 @@ declare class CheckboxControl extends ControlBase {
     static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxControl, "iss-ctrl-checkbox", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ChipsControl extends ControlBase implements OnDestroy {
+declare class ChipsControl extends ControlBase {
     #private;
     readonly keywords: WritableSignal<string[]>;
     writeValue(value: string | null): void;
     remove(keyword: string): void;
     add(event: MatChipInputEvent): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipsControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChipsControl, "iss-ctrl-chips", never, {}, {}, never, ["label"], true, never>;
 }
@@ -75,9 +77,10 @@ declare class DatePickerControl extends ControlBase implements Validator {
     disabledDays: InputSignal<number[]>;
     minDate: InputSignal<Date | null>;
     maxDate: InputSignal<Date | null>;
-    protected calendarDaysFilter: (d: Date | null) => boolean;
     clear(event: MouseEvent): void;
+    protected calendarDaysFilter: (d: Date | null) => boolean;
     protected emit($event: MatDatepickerInputEvent<any>): void;
+    protected openPicker(picker: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerControl, "iss-ctrl-date-picker", never, { "disabledDays": { "alias": "disabledDays"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, {}, never, ["label"], true, never>;
 }
@@ -93,13 +96,15 @@ declare class DateRangePickerControl extends ControlBase implements OnInit, OnDe
     disabledDays: InputSignal<number[]>;
     minDate: InputSignal<Date | null>;
     maxDate: InputSignal<Date | null>;
-    onDateRangeObjectChange: OutputEmitterRef<DateRangeEmission>;
+    onDateRangeObjectChange: OutputEmitterRef<DateRangeEmission | null>;
     readonly range: FormGroup;
-    protected calendarDaysFilter: (d: Date | null) => boolean;
     ngOnInit(): void;
+    setDisabledState(isDisabled: boolean): void;
     clear(event: MouseEvent): void;
+    protected openPicker(picker: any): void;
     writeValue(value: string | FormData | null): void;
     ngOnDestroy(): void;
+    protected calendarDaysFilter: (d: Date | null) => boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerControl, "iss-ctrl-date-range-picker", never, { "disabledDays": { "alias": "disabledDays"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "onDateRangeObjectChange": "onDateRangeObjectChange"; }, never, ["label"], true, never>;
 }
@@ -112,6 +117,7 @@ declare class DatetimePickerControl extends ControlBase {
     maxDate: InputSignal<Date | null>;
     minTime: InputSignal<string | null>;
     maxTime: InputSignal<string | null>;
+    setDisabledState(isDisabled: boolean): void;
     emit(): void;
     writeValue(value: string | Date | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatetimePickerControl, never>;
@@ -143,12 +149,13 @@ declare class FilePickerControl extends ControlBase implements OnDestroy {
     uploading: InputSignal<boolean>;
     uploadedFiles: InputSignal<IssAttachment[]>;
     uploadingError: InputSignal<string | undefined>;
-    filesValue: Signal<any>;
+    readonly filesValue: Signal<any>;
     protected attachments: WritableSignal<IssFile[]>;
     ngOnDestroy(): void;
     writeValue(val: FormData | string | null): void;
     protected onDelete(files: IssFile[]): void;
     protected captureFile($event: FileList): void;
+    protected openFilePicker(input: HTMLInputElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilePickerControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilePickerControl, "iss-ctrl-file-picker", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "showDownloadButton": { "alias": "showDownloadButton"; "required": false; "isSignal": true; }; "showDeleteButton": { "alias": "showDeleteButton"; "required": false; "isSignal": true; }; "uploading": { "alias": "uploading"; "required": false; "isSignal": true; }; "uploadedFiles": { "alias": "uploadedFiles"; "required": false; "isSignal": true; }; "uploadingError": { "alias": "uploadingError"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -212,7 +219,7 @@ declare class MobileControl extends ControlBase implements OnDestroy, Validator
     preferredCountries: InputSignal<ISO2[]>;
     searchInput: FormControl;
     filteredCountries: Signal<Country[]>;
-    writeValue(value: string): void;
+    writeValue(value: string | null): void;
     emit(): void;
     validate(control: AbstractControl): ValidationErrors | null;
     ngOnDestroy(): void;
@@ -225,15 +232,18 @@ declare class MobileControl extends ControlBase implements OnDestroy, Validator
 }
 
 declare class PlateControl extends ControlBase {
+    #private;
     numbersAr: i0.WritableSignal<string[]>;
     numbersEn: i0.WritableSignal<string[]>;
     lettersAr: i0.WritableSignal<string[]>;
     lettersEn: i0.WritableSignal<string[]>;
     letterErrors: i0.WritableSignal<boolean[]>;
-    writeValue(value: string): void;
+    writeValue(value: string | null): void;
     onNumberInput(index: number, event: Event, lang: "ar" | "en"): void;
     onLetterInput(index: number, event: Event, lang: "ar" | "en"): void;
     protected preventNonDigits($event: KeyboardEvent, ar: string): void;
+    private emitPlate;
+    private stringifyPlate;
     private focusInput;
     private convertDigit;
     static ɵfac: i0.ɵɵFactoryDeclaration<PlateControl, never>;
@@ -254,13 +264,13 @@ declare class SelectControl extends ControlBase implements OnDestroy {
     options: InputSignal<Option[]>;
     height: InputSignal<string>;
     query: Signal<string>;
-    filteredOptions: Signal<Option[]>;
+    readonly filteredOptions: Signal<Option[]>;
     loading: InputSignal<boolean>;
     onQueryChange: OutputEmitterRef<string>;
-    displayFn: (options: Option | Option[]) => string;
     protected optionTemplate: any;
     protected cardViewerTemplate: any;
     protected allSelected: WritableSignal<boolean>;
+    displayFn: (options: Option | Option[]) => string;
     writeValue(value: string | null): void;
     captureValue($event: any): void;
     removeFromSelectedOptionsMap(option: Option): void;
@@ -312,6 +322,7 @@ declare class ToggleButtonControl extends ControlBase {
 declare class Loader {
     #private;
     loadComponent(field: IssField): Observable<Type<any> | null>;
+    loadViewer(type: string): Observable<Type<any> | null>;
     loadService<T>(serviceName: string): undefined | (() => Promise<T>);
     static ɵfac: i0.ɵɵFactoryDeclaration<Loader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<Loader>;
@@ -324,28 +335,28 @@ declare class FieldAsyncValidation {
 
 declare class FieldConfig {
     type: WritableSignal<string | undefined>;
-    suffix: WritableSignal<string | undefined>;
+    disabled: WritableSignal<boolean | undefined>;
+    readonly: WritableSignal<boolean | undefined>;
     placeholder: WritableSignal<string | undefined>;
+    suffix: WritableSignal<string | undefined>;
+    hideLabel: WritableSignal<boolean | undefined>;
     multiple: WritableSignal<boolean | undefined>;
+    minLength: WritableSignal<number | undefined>;
+    maxLength: WritableSignal<number | undefined>;
     min: WritableSignal<number | undefined>;
     max: WritableSignal<number | undefined>;
     minDate: WritableSignal<Date | undefined>;
     maxDate: WritableSignal<Date | undefined>;
-    minLength: WritableSignal<number | undefined>;
-    maxLength: WritableSignal<number | undefined>;
-    allowedFileSize: WritableSignal<number | undefined>;
-    allowedFileTypes: WritableSignal<string | undefined>;
-    readonly: WritableSignal<boolean | undefined>;
-    disabled: WritableSignal<boolean | undefined>;
     dateFilter: WritableSignal<boolean | undefined>;
     templateId: WritableSignal<string | undefined>;
     templateUrl: WritableSignal<string | undefined>;
+    allowedFileSize: WritableSignal<number | undefined>;
+    allowedFileTypes: WritableSignal<string | undefined>;
     maxFilesCount: WritableSignal<number | undefined>;
     minFilesCount: WritableSignal<number | undefined>;
     maxUsersCount: WritableSignal<number | undefined>;
     minUsersCount: WritableSignal<number | undefined>;
     showInTableColumns: WritableSignal<boolean | undefined>;
-    hideLabel: WritableSignal<boolean | undefined>;
     tableWithFilter: WritableSignal<boolean | undefined>;
     tableWithSort: WritableSignal<boolean | undefined>;
     tableWithPagination: WritableSignal<boolean | undefined>;
@@ -442,17 +453,13 @@ interface ComponentOutlet {
     data: IssField;
 }
 
-interface IssFormGroup extends FormGroup {
-    id?: string;
-}
-
 declare class Outlet implements OnInit, OnDestroy {
     #private;
     ready: OutputEmitterRef<boolean>;
     formReady: WritableSignal<boolean>;
     fields: InputSignal<IssField[]>;
     components: WritableSignal<ComponentOutlet[] | null>;
-    get hostFormGroup(): IssFormGroup;
+    get hostFormGroup(): FormGroup;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Outlet, never>;
@@ -469,7 +476,13 @@ declare class EventHandler {
 
 declare class FormEngine {
     #private;
-    fields: IssField[];
+    registerFields(form: FormGroup, owner: object, fields: IssField[]): void;
+    registerExpectedFieldNames(form: FormGroup, owner: object, names: string[]): void;
+    unregisterOutlet(form: FormGroup, owner: object): void;
+    getFields(form: FormGroup): IssField[];
+    getExpectedFieldNames(form: FormGroup): string[];
+    getField(form: FormGroup, name: string, fields?: IssField[]): IssField | undefined;
+    getControlValue(form: FormGroup, name: string): any;
     createValidators(field: IssField): ValidatorFn[];
     createAsyncValidators(field: IssField): AsyncValidatorFn[];
     getFieldValue(field: IssField): string;
@@ -581,7 +594,8 @@ declare class FilePickerField extends FieldBase implements OnDestroy {
     viewField: Signal<any>;
     attachments: WritableSignal<IssAttachment[]>;
     uploadingError: WritableSignal<string | undefined>;
-    captureFile(formData: FormData): void;
+    accept: string;
+    captureFile(formData: FormData | null): void;
     stringifyIssAttachment(attachments: IssAttachment[]): string;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilePickerField, never>;
@@ -656,6 +670,7 @@ declare class ToggleButtonViewer extends ViewerBase {
 }
 
 declare class SlideToggleViewer extends ViewerBase {
+    isChecked(value: unknown): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SlideToggleViewer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SlideToggleViewer, "iss-viewer-slide-toggle", never, {}, {}, never, never, true, never>;
 }