iss-ctrl 0.0.21 → 0.0.23

package/fesm2022/{iss-ctrl-user-picker.field-BH63sZ-X.mjs → iss-ctrl-user-picker.field-DpmYCfpD.mjs}

@@ -3,13 +3,14 @@ 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 { Subject, debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs';
-import { F as FieldBase, E as Employee, V as VIEW_PROVIDER, S as SelectControl, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-BKu6a5HF.mjs';
+import { F as FieldBase, E as Employee, V as VIEW_PROVIDER, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-BG-QWWdq.mjs';
+import { DropdownlistControl } from 'iss-ctrl/dropdownlist';
 
 /**
  * `<iss-user-picker>` — employee lookup, searched against the directory API.
  *
  * Rendered by the outlet for fields of type `userPicker`. In `edit` mode it renders
- * {@link SelectControl} — always multi-select — over the employees returned by the search;
+ * {@link DropdownlistControl} — always multi-select — over the employees returned by the search;
  * in `view` mode the stored value as plain text. Selecting a user opens a details drawer.
  *
  * ### Supported `config` keys
@@ -67,166 +68,166 @@ class UserPickerField extends FieldBase {
         this.userData = item;
     }
     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") {
-        <iss-ctrl-select
-          [formControlName]="field.name"
-          [min]="field.config.min() ?? null"
-          [max]="field.config.max() ?? null"
-          [options]="options()"
-          [multiple]="true"
-          [readonly]="field.config.readonly() ?? false"
-          (onQueryChange)="search($event)"
-          (onChange)="updateField($event)"
-        >
-          <label>{{ field.label() }}</label>
-          <ng-template let-item #optionTemplate>
-            <div class="d-flex align-items-center gap-2">
-              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
-              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
-            </div>
-          </ng-template>
-          <ng-template let-item #cardViewerTemplate>
-            <div (click)="showUserData(item);drawer.open()">
-              {{ item.name }}
-            </div>
-          </ng-template>
-        </iss-ctrl-select>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-field-viewer>
-          <label>{{ field.label() }}</label>
-          <p>{{ field.value }}</p>
-        </iss-field-viewer>
-      }
-    }
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <div class="main-sidenav">
-          <div class="sidenav-title bc-white">
-            <h3> Employee Information </h3>
-            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
-          </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]="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>
-                  @if (!userData?.job?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
-                  }
-                  @if (!userData?.position?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
-                  }
-                </div>
-              }
-              <div class="d-flex flex-wrap gap-2">
-                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
-                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
-                </div>
-                @if (userData?.contact?.mobile) {
-                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
-                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
-                      <bdi>{{ userData?.contact?.mobile }}</bdi>
-                    </a>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </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: ValidationMessage, 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"] }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
+    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") {
+        <iss-ctrl-dropdownlist
+          [formControlName]="field.name"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [options]="options()"
+          [multiple]="true"
+          [readonly]="field.config.readonly() ?? false"
+          (onQueryChange)="search($event)"
+          (onChange)="updateField($event)"
+        >
+          <label>{{ field.label() }}</label>
+          <ng-template let-item #optionTemplate>
+            <div class="d-flex align-items-center gap-2">
+              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
+              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
+            </div>
+          </ng-template>
+          <ng-template let-item #cardViewerTemplate>
+            <div (click)="showUserData(item);drawer.open()">
+              {{ item.name }}
+            </div>
+          </ng-template>
+        </iss-ctrl-dropdownlist>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <p>{{ field.value }}</p>
+        </iss-field-viewer>
+      }
+    }
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <div class="main-sidenav">
+          <div class="sidenav-title bc-white">
+            <h3> Employee Information </h3>
+            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
+          </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]="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>
+                  @if (!userData?.job?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
+                  }
+                  @if (!userData?.position?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
+                  }
+                </div>
+              }
+              <div class="d-flex flex-wrap gap-2">
+                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
+                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
+                </div>
+                @if (userData?.contact?.mobile) {
+                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
+                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
+                      <bdi>{{ userData?.contact?.mobile }}</bdi>
+                    </a>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-sidenav>
+    </mat-sidenav-container>
+  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "component", type: DropdownlistControl, selector: "iss-ctrl-dropdownlist", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessage, 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"] }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], 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", viewProviders: [VIEW_PROVIDER], imports: [
-                        SelectControl,
+                        DropdownlistControl,
                         ValidationMessage,
                         MatSidenav,
                         MatSidenavContainer,
                         FieldViewer
-                    ], template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-select
-          [formControlName]="field.name"
-          [min]="field.config.min() ?? null"
-          [max]="field.config.max() ?? null"
-          [options]="options()"
-          [multiple]="true"
-          [readonly]="field.config.readonly() ?? false"
-          (onQueryChange)="search($event)"
-          (onChange)="updateField($event)"
-        >
-          <label>{{ field.label() }}</label>
-          <ng-template let-item #optionTemplate>
-            <div class="d-flex align-items-center gap-2">
-              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
-              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
-            </div>
-          </ng-template>
-          <ng-template let-item #cardViewerTemplate>
-            <div (click)="showUserData(item);drawer.open()">
-              {{ item.name }}
-            </div>
-          </ng-template>
-        </iss-ctrl-select>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-field-viewer>
-          <label>{{ field.label() }}</label>
-          <p>{{ field.value }}</p>
-        </iss-field-viewer>
-      }
-    }
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <div class="main-sidenav">
-          <div class="sidenav-title bc-white">
-            <h3> Employee Information </h3>
-            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
-          </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]="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>
-                  @if (!userData?.job?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
-                  }
-                  @if (!userData?.position?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
-                  }
-                </div>
-              }
-              <div class="d-flex flex-wrap gap-2">
-                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
-                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
-                </div>
-                @if (userData?.contact?.mobile) {
-                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
-                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
-                      <bdi>{{ userData?.contact?.mobile }}</bdi>
-                    </a>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </mat-sidenav>
-    </mat-sidenav-container>
+                    ], template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-dropdownlist
+          [formControlName]="field.name"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [options]="options()"
+          [multiple]="true"
+          [readonly]="field.config.readonly() ?? false"
+          (onQueryChange)="search($event)"
+          (onChange)="updateField($event)"
+        >
+          <label>{{ field.label() }}</label>
+          <ng-template let-item #optionTemplate>
+            <div class="d-flex align-items-center gap-2">
+              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
+              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
+            </div>
+          </ng-template>
+          <ng-template let-item #cardViewerTemplate>
+            <div (click)="showUserData(item);drawer.open()">
+              {{ item.name }}
+            </div>
+          </ng-template>
+        </iss-ctrl-dropdownlist>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <p>{{ field.value }}</p>
+        </iss-field-viewer>
+      }
+    }
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <div class="main-sidenav">
+          <div class="sidenav-title bc-white">
+            <h3> Employee Information </h3>
+            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
+          </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]="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>
+                  @if (!userData?.job?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
+                  }
+                  @if (!userData?.position?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
+                  }
+                </div>
+              }
+              <div class="d-flex flex-wrap gap-2">
+                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
+                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
+                </div>
+                @if (userData?.contact?.mobile) {
+                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
+                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
+                      <bdi>{{ userData?.contact?.mobile }}</bdi>
+                    </a>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </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-BH63sZ-X.mjs.map
+//# sourceMappingURL=iss-ctrl-user-picker.field-DpmYCfpD.mjs.map

package/fesm2022/iss-ctrl-user-picker.field-DpmYCfpD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-user-picker.field-DpmYCfpD.mjs","sources":["../../../projects/iss/src/components/controls/user-picker/user-picker.field.ts"],"sourcesContent":["import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from \"@angular/core\";\nimport { takeUntilDestroyed } from \"@angular/core/rxjs-interop\";\nimport { MatSidenav, MatSidenavContainer } from \"@angular/material/sidenav\";\nimport { debounceTime, distinctUntilChanged, map, Subject, switchMap } from \"rxjs\";\nimport { FieldViewer } from \"../../shared/field-viewer\";\nimport { ValidationMessage } from \"../../shared/validation-message\";\nimport { FieldBase } from \"../base/field-base\";\nimport { DropdownlistControl } from \"iss-ctrl/dropdownlist\";\nimport { Employee } from \"./employee\";\nimport { VIEW_PROVIDER } from \"../../../shared/constants/view-provider.const\";\n\n/**\n * `<iss-user-picker>` — employee lookup, searched against the directory API.\n *\n * Rendered by the outlet for fields of type `userPicker`. In `edit` mode it renders\n * {@link DropdownlistControl} — always multi-select — over the employees returned by the search;\n * in `view` mode the stored value as plain text. Selecting a user opens a details drawer.\n *\n * ### Supported `config` keys\n * | Key | Type | Description |\n * | --- | --- | --- |\n * | `min` | `number` | Minimum number of users required. |\n * | `max` | `number` | Maximum number of users allowed. |\n * | `readonly` | `boolean` | Shows the value but blocks interaction. |\n *\n * ### Other field members used\n * `label()` · `value` · `ctrlJsonValue()`\n *\n * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and\n * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.\n *\n * @example\n * ```json\n * { \"name\": \"approvers\", \"type\": \"userPicker\", \"label\": \"Approvers\", \"config\": { \"max\": 3 } }\n * ```\n */\n@Component({\n  selector: \"iss-user-picker\",\n  viewProviders: [VIEW_PROVIDER],\n  imports: [\n    DropdownlistControl,\n    ValidationMessage,\n    MatSidenav,\n    MatSidenavContainer,\n    FieldViewer\n  ],\n  template: `\n    @if (field.visible()) {\n      @if (field.mode() === \"edit\") {\n        <iss-ctrl-dropdownlist\n          [formControlName]=\"field.name\"\n          [min]=\"field.config.min() ?? null\"\n          [max]=\"field.config.max() ?? null\"\n          [options]=\"options()\"\n          [multiple]=\"true\"\n          [readonly]=\"field.config.readonly() ?? false\"\n          (onQueryChange)=\"search($event)\"\n          (onChange)=\"updateField($event)\"\n        >\n          <label>{{ field.label() }}</label>\n          <ng-template let-item #optionTemplate>\n            <div class=\"d-flex align-items-center gap-2\">\n              <ds-avatar size=\"x-small\" [attr.image]=\"item.image\"></ds-avatar>\n              <span class=\"fs-14 fw-medium fc-black\">{{ item.name }}</span>\n            </div>\n          </ng-template>\n          <ng-template let-item #cardViewerTemplate>\n            <div (click)=\"showUserData(item);drawer.open()\">\n              {{ item.name }}\n            </div>\n          </ng-template>\n        </iss-ctrl-dropdownlist>\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"!ctrl.untouched\"/>\n      } @else {\n        <iss-field-viewer>\n          <label>{{ field.label() }}</label>\n          <p>{{ field.value }}</p>\n        </iss-field-viewer>\n      }\n    }\n    <mat-sidenav-container [hasBackdrop]=\"true\">\n      <mat-sidenav #drawer [mode]=\"'over'\" [position]=\"'start'\" [autoFocus]=\"false\">\n        <div class=\"main-sidenav\">\n          <div class=\"sidenav-title bc-white\">\n            <h3> Employee Information </h3>\n            <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"drawer.close()\"></ds-icon>\n          </div>\n          <div class=\"sidenav-body p-0\">\n            <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\n              <ds-avatar [attr.image]=\"userImage()\" [attr.label]=\"userData?.name\"></ds-avatar>\n              @if (userData?.employeeNumber) {\n                <div class=\"d-flex flex-column gap-1\">\n                  <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ userData?.name }}</h4>\n                  @if (!userData?.job?.name) {\n                    <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\">{{ userData?.position?.name }}</h6>\n                  }\n                  @if (!userData?.position?.name) {\n                    <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\">{{ userData?.job?.name }}</h6>\n                  }\n                </div>\n              }\n              <div class=\"d-flex flex-wrap gap-2\">\n                <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\n                  <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\n                  <a [href]=\"'mailTo:' + userData?.email\" class=\"fc-black\">{{ userData?.email }}</a>\n                </div>\n                @if (userData?.contact?.mobile) {\n                  <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\n                    <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\n                    <a [href]=\"'tel:' + userData?.contact?.mobile\" class=\"fc-black\">\n                      <bdi>{{ userData?.contact?.mobile }}</bdi>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-sidenav>\n    </mat-sidenav-container>\n  `,\n  styles: `\n    .mat-drawer {\n      position: fixed;\n      left: 0;\n    }`,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class UserPickerField extends FieldBase {\n  userImageHost = \"https://igateapp.stc.com.sa\";\n  employeeService = inject(Employee);\n  options: any = signal([]);\n  userData: any;\n  #query: Subject<string> = new Subject<string>();\n\n  constructor() {\n    super();\n    this.#query.pipe(\n      debounceTime(300),\n      distinctUntilChanged(),\n      // a new query cancels the request still in flight\n      switchMap((query: string) => this.employeeService.search(query)),\n      map((res: any) => {\n        return res.map((user: any) => {\n          user.value = user.email;\n          user.label = user.name;\n          return user;\n        });\n      }),\n      takeUntilDestroyed(this.destroyRef)\n    ).subscribe((res: any) => {\n      this.options.set(res);\n    });\n  }\n\n  userImage(): string | null {\n    const image: string | undefined = this.userData?.profileImage ?? this.userData?.profileImageUrl;\n    if (!image) {\n      return null;\n    }\n    return image.startsWith(\"http\") ? image : this.userImageHost + image;\n  }\n\n  search(event: string) {\n    this.#query.next(event);\n  }\n\n  updateField($event: string | FormData) {\n    this.options.set([]);\n  }\n\n  showUserData(item: any) {\n    this.userData = item;\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/iss-ctrl.mjs

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

package/fesm2022/iss-ctrl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"iss-ctrl.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"iss-ctrl.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iss-ctrl",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "peerDependencies": {
     "@angular/common": "^21.0.6",
     "@angular/core": "^21.0.6",
@@ -23,6 +23,74 @@
     ".": {
       "types": "./types/iss-ctrl.d.ts",
       "default": "./fesm2022/iss-ctrl.mjs"
+    },
+    "./base": {
+      "types": "./types/iss-ctrl-base.d.ts",
+      "default": "./fesm2022/iss-ctrl-base.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/iss-ctrl-checkbox.d.ts",
+      "default": "./fesm2022/iss-ctrl-checkbox.mjs"
+    },
+    "./chips": {
+      "types": "./types/iss-ctrl-chips.d.ts",
+      "default": "./fesm2022/iss-ctrl-chips.mjs"
+    },
+    "./date-picker": {
+      "types": "./types/iss-ctrl-date-picker.d.ts",
+      "default": "./fesm2022/iss-ctrl-date-picker.mjs"
+    },
+    "./date-range-picker": {
+      "types": "./types/iss-ctrl-date-range-picker.d.ts",
+      "default": "./fesm2022/iss-ctrl-date-range-picker.mjs"
+    },
+    "./datetime-picker": {
+      "types": "./types/iss-ctrl-datetime-picker.d.ts",
+      "default": "./fesm2022/iss-ctrl-datetime-picker.mjs"
+    },
+    "./dropdownlist": {
+      "types": "./types/iss-ctrl-dropdownlist.d.ts",
+      "default": "./fesm2022/iss-ctrl-dropdownlist.mjs"
+    },
+    "./file-picker": {
+      "types": "./types/iss-ctrl-file-picker.d.ts",
+      "default": "./fesm2022/iss-ctrl-file-picker.mjs"
+    },
+    "./input": {
+      "types": "./types/iss-ctrl-input.d.ts",
+      "default": "./fesm2022/iss-ctrl-input.mjs"
+    },
+    "./mobile": {
+      "types": "./types/iss-ctrl-mobile.d.ts",
+      "default": "./fesm2022/iss-ctrl-mobile.mjs"
+    },
+    "./plate": {
+      "types": "./types/iss-ctrl-plate.d.ts",
+      "default": "./fesm2022/iss-ctrl-plate.mjs"
+    },
+    "./radio": {
+      "types": "./types/iss-ctrl-radio.d.ts",
+      "default": "./fesm2022/iss-ctrl-radio.mjs"
+    },
+    "./slide-toggle": {
+      "types": "./types/iss-ctrl-slide-toggle.d.ts",
+      "default": "./fesm2022/iss-ctrl-slide-toggle.mjs"
+    },
+    "./textarea": {
+      "types": "./types/iss-ctrl-textarea.d.ts",
+      "default": "./fesm2022/iss-ctrl-textarea.mjs"
+    },
+    "./time-picker": {
+      "types": "./types/iss-ctrl-time-picker.d.ts",
+      "default": "./fesm2022/iss-ctrl-time-picker.mjs"
+    },
+    "./toggle-button": {
+      "types": "./types/iss-ctrl-toggle-button.d.ts",
+      "default": "./fesm2022/iss-ctrl-toggle-button.mjs"
+    },
+    "./tokens": {
+      "types": "./types/iss-ctrl-tokens.d.ts",
+      "default": "./fesm2022/iss-ctrl-tokens.mjs"
     }
   },
   "type": "module"