iss-ctrl 0.0.21 → 0.0.22

package/fesm2022/iss-ctrl-iss-ctrl-DvnkwSMG.mjs

@@ -0,0 +1,1789 @@
+import { DATETIME_FORMAT } from 'iss-ctrl/base';
+import { UI_LANGUAGE, USER_SEARCH_API, ATTACHMENT_UPLOAD_URL, ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER } from 'iss-ctrl/tokens';
+import { NgComponentOutlet, AsyncPipe, KeyValuePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, isSignal, Injectable, inject, Injector, InjectionToken, Pipe, output, input, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { Validators, ControlContainer, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject, merge, of, map, from, tap, debounceTime, first, forkJoin, EMPTY } from 'rxjs';
+import { MatError } from '@angular/material/form-field';
+import { PLATE_LETTERS } from 'iss-ctrl/plate';
+import { HttpClient } from '@angular/common/http';
+import { format } from 'date-fns';
+
+class FieldAsyncValidation {
+    alreadyExists;
+    constructor(asyncValidation) {
+        this.alreadyExists = asyncValidation?.alreadyExists;
+    }
+}
+
+/**
+ * Per-field configuration, reachable as `field.config` and consumed by the `iss-field-*`
+ * components. Every entry is a signal, so it can be changed at runtime by field events.
+ *
+ * Not every key applies to every field — the class doc of each `iss-field-*` component
+ * lists exactly which of these it reads.
+ *
+ * ### Keys by area
+ * - **Common:** `type` · `disabled` · `readonly` · `placeholder` · `suffix` · `hideLabel` · `multiple`
+ * - **Bounds:** `min` · `max` · `minLength` · `maxLength`
+ * - **Dates:** `minDate` · `maxDate` · `dateFilter` · `hijriCalendar` · `emitHijri`
+ * - **Attachments:** `allowedFileSize` · `allowedFileTypes` · `minFilesCount` · `maxFilesCount` · `templateId` · `templateUrl`
+ * - **Users:** `minUsersCount` · `maxUsersCount`
+ * - **Table:** `showInTableColumns` · `tableWithFilter` · `tableWithSort` · `tableWithPagination`
+ *
+ * @example
+ * ```json
+ * { "name": "email", "type": "text_input", "config": { "type": "email", "maxLength": 120 } }
+ * ```
+ */
+class FieldConfig {
+    /**
+     * Native input type for `text_input` (`text`, `email`, `number`, `password`, …).
+     */
+    type = signal(undefined, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables the control; the underlying `FormControl` is disabled on init.
+     */
+    disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the value but blocks interaction. Unlike `disabled`, the value is still submitted.
+     */
+    readonly = signal(undefined, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text shown while the field is empty.
+     */
+    placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Text rendered after the value (a unit or currency, for example).
+     */
+    suffix = signal(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    /**
+     * Hides the field label without removing it from the accessibility tree.
+     */
+    hideLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows more than one value — multi select, multi file upload, multi toggle.
+     */
+    multiple = signal(undefined, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum number of characters. Source: `config.minLength`.
+     */
+    minLength = signal(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of characters. Source: `config.maxLength`.
+     */
+    maxLength = signal(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum numeric value (also the minimum user count for the user picker).
+     */
+    min = signal(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum numeric value (also the maximum user count for the user picker).
+     */
+    max = signal(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Earliest selectable date for date, datetime and date-range fields.
+     */
+    minDate = signal(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Latest selectable date for date, datetime and date-range fields.
+     */
+    maxDate = signal(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Restricts the calendar to working days. Source: `config.acceptWorkDaysOnly`.
+     */
+    dateFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the calendar as an Umm al-Qura Hijri calendar. The emitted value stays Gregorian
+     * unless {@link FieldConfig.emitHijri} is also on. Source: `config.hijriCalendar`, also
+     * accepted as `config.HijriCalendar`.
+     */
+    hijriCalendar = signal(undefined, ...(ngDevMode ? [{ debugName: "hijriCalendar" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the picked date as a Hijri date instead of a Gregorian one — the same day emitted
+     * as `1447-03-16` rather than `2025-09-08`. Implies {@link FieldConfig.hijriCalendar}: a
+     * Hijri value is always picked from a Hijri calendar.
+     */
+    emitHijri = signal(undefined, ...(ngDevMode ? [{ debugName: "emitHijri" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of a downloadable template offered next to an attachment field.
+     */
+    templateId = signal(undefined, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
+    /**
+     * Direct URL of the downloadable template for an attachment field.
+     */
+    templateUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "templateUrl" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum size per uploaded file. Source: `config.allowedSize`.
+     */
+    allowedFileSize = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Comma separated list of accepted file extensions or MIME types.
+     */
+    allowedFileTypes = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileTypes" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of files that may be attached.
+     */
+    maxFilesCount = signal(undefined, ...(ngDevMode ? [{ debugName: "maxFilesCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum number of files required.
+     */
+    minFilesCount = signal(undefined, ...(ngDevMode ? [{ debugName: "minFilesCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of users selectable in a user picker.
+     */
+    maxUsersCount = signal(undefined, ...(ngDevMode ? [{ debugName: "maxUsersCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum number of users required in a user picker.
+     */
+    minUsersCount = signal(undefined, ...(ngDevMode ? [{ debugName: "minUsersCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Parsed from the field definition but not consumed yet — table columns currently come
+     * from `field.children`.
+     */
+    showInTableColumns = signal(undefined, ...(ngDevMode ? [{ debugName: "showInTableColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables the filter row on a `table` field.
+     */
+    tableWithFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables column sorting on a `table` field.
+     */
+    tableWithSort = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithSort" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables the paginator on a `table` field.
+     */
+    tableWithPagination = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithPagination" }] : /* istanbul ignore next */ []));
+    constructor(config) {
+        this.type.set(config?.type);
+        this.suffix.set(config?.suffix);
+        this.placeholder.set(config?.placeholder);
+        this.readonly.set(config?.readonly);
+        this.disabled.set(config?.disabled);
+        this.multiple.set(config?.multiple);
+        this.hideLabel.set(config?.hideLabel);
+        this.min.set(config?.min);
+        this.max.set(config?.max);
+        this.minDate.set(config?.minDate);
+        this.maxDate.set(config?.maxDate);
+        this.dateFilter.set(config?.acceptWorkDaysOnly);
+        this.hijriCalendar.set(config?.hijriCalendar ?? config?.HijriCalendar);
+        this.emitHijri.set(config?.emitHijri);
+        this.minLength.set(config?.minLength);
+        this.maxLength.set(config?.maxLength);
+        this.allowedFileSize.set(config?.allowedSize);
+        this.allowedFileTypes.set(config?.allowedFileTypes);
+        this.maxFilesCount.set(config?.maxFilesCount);
+        this.minFilesCount.set(config?.minFilesCount);
+        this.templateId.set(config?.templateId);
+        this.templateUrl.set(config?.templateUrl);
+        this.maxUsersCount.set(config?.maxUsersCount);
+        this.minUsersCount.set(config?.minUsersCount);
+        this.showInTableColumns.set(config?.showInTableColumns);
+        this.tableWithFilter.set(config?.tableWithFilter);
+        this.tableWithSort.set(config?.tableWithSort);
+        this.tableWithPagination.set(config?.tableWithPagination);
+    }
+}
+
+class FieldActionConfig {
+    operator;
+    setValueFromApiResponse;
+    setValueFromRequestDto;
+    setValueFromLoggedInUser;
+    setValueFromJsonValue;
+    triggerFromApiResponse;
+    triggerFromJsonValue;
+    replaceApiKeyFromField;
+    fn = undefined;
+    fnPromise = undefined;
+    afterFetchFn = undefined;
+    afterFetchFnPromise = undefined;
+    triggerFn;
+    triggerFnPromise = undefined;
+    disableAfterFetching = false;
+    disableAfterSetValue = false;
+    constructor(action, loader) {
+        this.operator = action.config?.operator;
+        this.setValueFromApiResponse = action.config?.setValueFromApiResponse;
+        this.setValueFromRequestDto = action.config?.setValueFromRequestDto;
+        this.setValueFromLoggedInUser = action.config?.setValueFromLoggedInUser;
+        this.setValueFromJsonValue = action.config?.setValueFromJsonValue;
+        this.triggerFromApiResponse = action.config?.fromApiResponse;
+        this.triggerFromJsonValue = action.config?.fromApiResponse;
+        this.replaceApiKeyFromField = action.config?.replaceApiKeyFromField;
+        this.disableAfterFetching = action.config?.disableAfterFetching ?? false;
+        this.disableAfterSetValue = action.config?.disableAfterSetValue ?? false;
+        if (action.config?.fn) {
+            const fn = loader.loadService(action.config.fn);
+            if (fn) {
+                this.fnPromise = fn();
+            }
+        }
+        if (action.config?.afterFetchFn) {
+            const fn = loader.loadService(action.config.afterFetchFn);
+            if (fn) {
+                this.afterFetchFnPromise = fn();
+            }
+        }
+        if (action.config?.triggerFn) {
+            const fn = loader.loadService(action.config.triggerFn);
+            if (fn) {
+                this.triggerFnPromise = fn();
+            }
+        }
+    }
+}
+
+class FieldEvent {
+    id;
+    name;
+    value;
+    trackedFieldName;
+    triggered;
+    config;
+    fn;
+    fnPromise = undefined;
+    constructor(action, loader) {
+        this.id = action.id;
+        this.name = action.name;
+        this.value = action.value;
+        this.trackedFieldName = action.eventSourceName;
+        this.triggered = false;
+        this.config = new FieldActionConfig(action, loader);
+        const actionFn = loader.loadService(action.name);
+        if (actionFn) {
+            this.fnPromise = actionFn();
+        }
+        this.fn = undefined;
+    }
+}
+
+/**
+ * Runtime model of a single form field, built from the JSON definition returned by the API.
+ *
+ * It is what `iss-field-*` components inject through the `FIELD_DATA` token, and the object
+ * field events read from and write to. Signal-valued members can be changed at runtime and
+ * the rendered field reacts immediately.
+ *
+ * ### Properties
+ * | Property | Type | Description |
+ * | --- | --- | --- |
+ * | `id` | `number` | Unique field id. |
+ * | `name` | `string` | Control name inside the form group. |
+ * | `type` | `string` | Key into the `COMPONENTS` index (`text_input`, `dropdown_list`, …). |
+ * | `base` | `string` | Underlying data type of the field. |
+ * | `label()` | `string` | Visible label. |
+ * | `hint()` | `string` | Helper text under the field. |
+ * | `options()` | `Option[]` | Choices for select, radio, checkbox and toggle fields. |
+ * | `api()` | `string` | Endpoint used to load options or lookups. |
+ * | `mode()` | `"edit" \| "view"` | Renders the control or the read-only viewer. |
+ * | `visible()` | `boolean` | Whether the field is rendered at all. |
+ * | `loading()` | `boolean` | Shows the field's own loading state. |
+ * | `config` | `FieldConfig` | Per-type configuration — see {@link FieldConfig}. |
+ * | `validation` | `any` | Synchronous validation rules, exactly as the JSON declared them. |
+ * | `validationFns` | `Record<string, Function>` | Validator factory behind each active rule, resolved by the outlet. |
+ * | `asyncValidation` | `FieldAsyncValidation` | Remote validation rules. |
+ * | `events` | `FieldEvent[]` | Cross-field reactions (show, hide, set value, …). |
+ * | `children` | `IssField[]` | Nested fields, used by table and group fields. |
+ * | `value` / `defaultValue` | `string` | Initial and fallback raw values. |
+ * | `jsonValue` | `any` | Initial resolved value for controls with a rich payload. |
+ * | `ctrlValue()` | `string \| null` | Live raw value of the control. |
+ * | `ctrlJsonValue()` | `any` | Live resolved value (selected options, files, users, …). |
+ * | `response()` / `apiResponse` | `any` | Latest payload returned for this field. |
+ */
+class IssField {
+    id;
+    name;
+    type;
+    base;
+    label = signal("", ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = signal("", ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    api = signal("", ...(ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []));
+    mode = signal("edit", ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    visible;
+    wasVisible = signal(true, ...(ngDevMode ? [{ debugName: "wasVisible" }] : /* istanbul ignore next */ []));
+    events;
+    validation;
+    // The lazily imported factory behind each active rule in `validation`, keyed by rule name.
+    // The factories are kept beside the rules instead of inside them so `validation` stays the
+    // object the JSON declared: what a rule says is the API's, how it is applied is ours.
+    validationFns = {};
+    asyncValidation;
+    children;
+    apiResponse = new BehaviorSubject(null);
+    response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : /* istanbul ignore next */ []));
+    config;
+    value;
+    jsonValue;
+    defaultValue;
+    ctrlValue = signal(null, ...(ngDevMode ? [{ debugName: "ctrlValue" }] : /* istanbul ignore next */ []));
+    ctrlJsonValue = signal(null, ...(ngDevMode ? [{ debugName: "ctrlJsonValue" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    constructor(field, loader) {
+        this.id = field.id;
+        this.name = field.name;
+        this.type = field.type;
+        this.base = field.base;
+        if (isSignal(field.label)) {
+            this.label = field.label;
+        }
+        else {
+            this.label = signal(field.label ?? field.title, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        }
+        if (isSignal(field.hint)) {
+            this.hint = field.hint;
+        }
+        else {
+            this.hint = signal(field.hint, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        }
+        if (isSignal(field.options)) {
+            this.options = field.options ?? [];
+        }
+        else {
+            this.options = signal(field.options ?? [], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        }
+        if (isSignal(field.api)) {
+            this.api = field.api;
+        }
+        else {
+            this.api = signal(field.api, ...(ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []));
+        }
+        field.mode = field.mode ?? "edit";
+        if (isSignal(field.mode)) {
+            this.mode = field.mode;
+        }
+        else {
+            this.mode = signal(field.mode, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        }
+        if (!field.events) {
+            field.events = [];
+        }
+        // this.mode() and not field.mode: the caller may have passed a signal
+        this.visible = signal(!field.events.some((obj) => obj.name === "show" && this.mode() === "edit"), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.events = field.events.map((action) => new FieldEvent(action, loader));
+        this.validation = field.validation;
+        this.asyncValidation = new FieldAsyncValidation(field.asyncValidation);
+        this.children = field.children;
+        this.config = new FieldConfig(field.config);
+        this.value = field?.value;
+        this.ctrlValue.set(field.value);
+        this.ctrlJsonValue.set(field?.jsonValue);
+        this.loading.set(field?.loading ?? false);
+        this.defaultValue = field?.defaultValue;
+        this.jsonValue = field?.jsonValue;
+        this.apiResponse = new BehaviorSubject(null);
+    }
+    updateVisibility(value) {
+        this.wasVisible.set(this.visible());
+        this.visible.set(value);
+    }
+}
+
+const VALIDATORS = {
+    required: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.required),
+    max: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.max),
+    min: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.min),
+    requiredTrue: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.requiredTrue),
+    email: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.email),
+    minLength: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.minLength),
+    maxLength: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.maxLength),
+    pattern: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.pattern),
+    regExp: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.pattern),
+    nullValidator: () => Promise.resolve().then(function () { return core_validator; }).then((c) => c.IssValidators.null),
+    beforeDate: () => Promise.resolve().then(function () { return time_validator; }).then((c) => c.TimeValidator.beforeDate),
+    afterDate: () => Promise.resolve().then(function () { return time_validator; }).then((c) => c.TimeValidator.afterDate),
+    within: () => Promise.resolve().then(function () { return time_validator; }).then((c) => c.TimeValidator.afterDate),
+    maxFilesCount: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.maxCount),
+    minFilesCount: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.minCount),
+    fileSize: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.size),
+    fileType: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.type),
+};
+/**
+ * Whether a rule in a field's `validation` is switched on.
+ *
+ * The rule's value is the argument its validator is built with, so it is also what says
+ * whether the rule applies at all: `{ "required": false }` is an optional field, not a
+ * required one, and a rule the API left out or sent as null is off the same way. Values
+ * that are falsy but meaningful — `0`, `""` — are rules, so only the three off states are
+ * rejected here.
+ */
+function isActiveValidationRule(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+
+class FormEngine {
+    // Fields are stored per host FormGroup, never on the service itself: a single root
+    // FormEngine serves every form on the page, including the nested outlet that
+    // iss-field-table renders against its own tableOutletForm.
+    // The outer WeakMap lets a form's entry be collected with the form. The inner Map is
+    // keyed by the outlet that registered them, so several outlets can share one host form
+    // without overwriting each other, and re-registering the same outlet replaces its own
+    // contribution instead of accumulating stale entries.
+    #registry = new WeakMap();
+    registerFields(form, owner, fields) {
+        this.#registration(form, owner).fields = fields;
+    }
+    // The names an outlet expects to see as controls on the host form. An outlet is ready
+    // once every one of them has been added, so this is registered up front in ngOnInit,
+    // before the fields themselves resolve.
+    registerExpectedFieldNames(form, owner, names) {
+        this.#registration(form, owner).expectedFieldNames = names;
+    }
+    unregisterOutlet(form, owner) {
+        const owners = this.#registry.get(form);
+        if (!owners) {
+            return;
+        }
+        owners.delete(owner);
+        if (!owners.size) {
+            this.#registry.delete(form);
+        }
+    }
+    getFields(form) {
+        return this.#registrations(form).map((registration) => registration.fields).flat();
+    }
+    getExpectedFieldNames(form) {
+        const names = this.#registrations(form).map((registration) => registration.expectedFieldNames).flat();
+        return Array.from(new Set(names));
+    }
+    // Searches nested children too, so a field inside a table can be found from the form
+    // that hosts the table.
+    getField(form, name, fields = this.getFields(form)) {
+        const match = fields.find((field) => field.name === name);
+        if (match) {
+            return match;
+        }
+        return fields
+            .filter((field) => field.children?.length)
+            .reduce((found, field) => found ?? this.getField(form, name, field.children), undefined);
+    }
+    getControlValue(form, name) {
+        const ctrlValue = form.get(name)?.getRawValue();
+        if (ctrlValue !== null && ctrlValue !== undefined && ctrlValue !== "") {
+            return ctrlValue;
+        }
+        return this.getField(form, name)?.value;
+    }
+    createValidators(field) {
+        if (!this.fieldHasValidation(field)) {
+            return [Validators.nullValidator];
+        }
+        return this.#validatorsToNgValidators(field);
+    }
+    createAsyncValidators(field) {
+        if (!(field && field.asyncValidation)) {
+            return [];
+        }
+        return this.#asyncValidatorsToNgValidators(field);
+    }
+    getFieldValue(field) {
+        let fieldValue = field.value;
+        if (field.value === undefined && field.defaultValue) {
+            fieldValue = field.defaultValue;
+        }
+        return fieldValue ?? null;
+    }
+    trackChangesEvents(field, form) {
+        const changes$ = [];
+        const masterNames = new Set();
+        field.events.forEach((action) => {
+            this.processTrackChanges(action.trackedFieldName, masterNames, changes$, field, form);
+        });
+        return merge(...changes$);
+    }
+    trackChangesValidations(field, form) {
+        const changes$ = [];
+        const masterNames = new Set();
+        // A rule that names another field — `beforeDate`, say — carries that name as its value, and
+        // `processTrackChanges` ignores every value that is not a string.
+        const iterateOn = Object.entries(field.validation ?? {});
+        iterateOn.forEach((validationObj) => {
+            this.processTrackChanges(validationObj[1], masterNames, changes$, field, form);
+        });
+        return merge(...changes$);
+    }
+    processTrackChanges(masterName, masterNames, changes$, field, form) {
+        if (typeof masterName !== "string") {
+            return;
+        }
+        const masterCtrl = form.get(masterName);
+        const masterField = this.getField(form, masterName);
+        if (!masterField) {
+            return;
+        }
+        if (!masterCtrl) {
+            return;
+        }
+        if (masterNames.has(masterName)) {
+            return;
+        }
+        masterNames.add(masterName);
+        // if the field tracks itself, will not subscribe to value changes, it avoids infinite loops
+        if (field.name === masterName) {
+            changes$.push(of({
+                trackedField: masterField,
+                trackedControl: masterCtrl,
+                value: masterCtrl.value
+            }));
+        }
+        else {
+            changes$.push(this.#mapMasterFieldValueChangesToFieldChanges(masterField, masterCtrl));
+        }
+    }
+    // A field carries validation only where a rule is actually switched on: one sent as `false`
+    // or `null` says the field is free of it, so it counts for nothing here.
+    fieldHasValidation(field) {
+        return !!field.validation && Object.values(field.validation).some(isActiveValidationRule);
+    }
+    fieldHasAsyncValidation(field) {
+        return !!(field.asyncValidation && Object.values(field.asyncValidation).filter((v) => v).length);
+    }
+    isFormValid(form, fields) {
+        return fields.map((childField) => {
+            const currentCtrl = form.get(childField.name);
+            if (isActiveValidationRule(childField.validation?.required) && childField.visible() && childField.mode() === "edit" && currentCtrl?.status !== "DISABLED") {
+                return currentCtrl?.valid;
+            }
+            return true;
+        }).every((status) => status);
+    }
+    #registrations(form) {
+        const owners = this.#registry.get(form);
+        if (!owners) {
+            return [];
+        }
+        return Array.from(owners.values());
+    }
+    #registration(form, owner) {
+        let owners = this.#registry.get(form);
+        if (!owners) {
+            owners = new Map();
+            this.#registry.set(form, owners);
+        }
+        let registration = owners.get(owner);
+        if (!registration) {
+            registration = { fields: [], expectedFieldNames: [] };
+            owners.set(owner, registration);
+        }
+        return registration;
+    }
+    // Builds each switched-on rule into its validator, out of the value the rule was given:
+    // `{ "minLength": 3 }` is what makes the validator refuse two characters, and `{ "required":
+    // false }` builds nothing at all. The field rides along as the second argument for the rules
+    // that need their neighbours — `beforeDate` and friends — and is ignored by the rest.
+    // A rule whose factory never resolved is skipped rather than called.
+    #validatorsToNgValidators(field) {
+        return Object.entries(field.validation ?? {})
+            .filter(([key, value]) => isActiveValidationRule(value) && typeof field.validationFns?.[key] === "function")
+            .map(([key, value]) => field.validationFns[key](value, field));
+    }
+    #mapNgValidators(validationObj) {
+        return Object.entries((validationObj ? validationObj : {}))
+            .filter((validationObj) => validationObj[1] !== undefined)
+            .map((validationObj) => validationObj[1]);
+    }
+    #asyncValidatorsToNgValidators(field) {
+        return this.#mapNgValidators(field.asyncValidation).map((validatorValue) => validatorValue?.fn(field));
+    }
+    #mapMasterFieldValueChangesToFieldChanges(masterField, masterCtrl) {
+        return masterCtrl.valueChanges.pipe(map((value) => {
+            return {
+                trackedField: masterField,
+                trackedControl: masterCtrl,
+                value: value,
+            };
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormEngine, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormEngine, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/**
+ * Maps a field's `type` to the `iss-field-*` component that renders it.
+ *
+ * The outlet looks the field up here and lazy-loads the component, so a `type` that is not
+ * a key of this object renders nothing. Hover a field class for the `config` keys it reads.
+ *
+ * | `type` | Component | Control | Renders |
+ * | --- | --- | --- | --- |
+ * | `text_input` | `InputField` | `iss-ctrl-input` | Single line text, number, email, password. |
+ * | `textarea` | `TextareaField` | `iss-ctrl-textarea` | Multi line free text. |
+ * | `dropdown_list` | `SelectField` | `iss-ctrl-select` | Searchable single/multi select. |
+ * | `toggle_button` | `ToggleButtonField` | `iss-ctrl-toggle-button` | Options as a button group. |
+ * | `checkbox` | `CheckboxField` | `iss-ctrl-checkbox` | Multi choice checkbox list. |
+ * | `radio` | `RadioField` | `iss-ctrl-radio` | Single choice radio list. |
+ * | `date` | `DatePickerField` | `iss-ctrl-date-picker` | A single date. |
+ * | `time` | `TimePickerField` | `iss-ctrl-time-picker` | A time of day. |
+ * | `datetime` | `DatetimePickerField` | `iss-ctrl-datetime-picker` | Date and time together. |
+ * | `date_range` | `DateRangePickerField` | `iss-ctrl-date-range-picker` | A start/end date range. |
+ * | `attachment` | `FilePickerField` | `iss-ctrl-file-picker` | File upload. |
+ * | `userPicker` | `UserPickerField` | `iss-ctrl-select` | Employee lookup. |
+ * | `vehicle_plate` | `PlateField` | `iss-ctrl-plate-number` | Saudi vehicle plate. |
+ * | `enrichment` | `NoteField` | — | Read-only explanatory text. |
+ * | `mobile` | `MobileField` | `iss-ctrl-mobile` | International phone number. |
+ * | `table` | `TableField` | `iss-ctrl-table` | Repeatable rows built from `children`. |
+ * | `chips` | `ChipsField` | `iss-ctrl-chips` | Free text as removable chips. |
+ * | `switch` | `SlideToggleField` | `iss-ctrl-slide-toggle` | Boolean on/off switch. |
+ */
+const COMPONENTS = {
+    text_input: () => import('./iss-ctrl-input.field-Ctlf3OCN.mjs').then((c) => c.InputField),
+    textarea: () => import('./iss-ctrl-textarea.field-CmHPDpk-.mjs').then((c) => c.TextareaField),
+    dropdown_list: () => import('./iss-ctrl-select.field-DoU4G_8t.mjs').then((c) => c.SelectField),
+    toggle_button: () => import('./iss-ctrl-toggle-button.field-Bj8WrkB-.mjs').then((c) => c.ToggleButtonField),
+    checkbox: () => import('./iss-ctrl-checkbox.field-Dj5EGLUr.mjs').then((c) => c.CheckboxField),
+    radio: () => import('./iss-ctrl-radio.field-B_JjPIlb.mjs').then((c) => c.RadioField),
+    date: () => import('./iss-ctrl-date-picker.field-BSpXukpO.mjs').then((c) => c.DatePickerField),
+    time: () => import('./iss-ctrl-time-picker.field-Cb0I5Ut1.mjs').then((c) => c.TimePickerField),
+    datetime: () => import('./iss-ctrl-datetime-picker.field-DGMY9PaU.mjs').then((c) => c.DatetimePickerField),
+    date_range: () => import('./iss-ctrl-date-range-picker.field-CjNHU1RW.mjs').then((c) => c.DateRangePickerField),
+    attachment: () => import('./iss-ctrl-file-picker.field-CbepZaX6.mjs').then((c) => c.FilePickerField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-BIzB5ZX6.mjs').then((c) => c.UserPickerField),
+    vehicle_plate: () => import('./iss-ctrl-plate.field-aI81tAOV.mjs').then((c) => c.PlateField),
+    enrichment: () => import('./iss-ctrl-note.field-C8X9-mgD.mjs').then((c) => c.NoteField),
+    mobile: () => import('./iss-ctrl-mobile.field-DXVYT3q-.mjs').then((c) => c.MobileField),
+    table: () => import('./iss-ctrl-table.field-E0r9w0os.mjs').then((c) => c.TableField),
+    chips: () => import('./iss-ctrl-chips.field-BLLAjBbP.mjs').then((c) => c.ChipsField),
+    switch: () => import('./iss-ctrl-slide-toggle.field-TVVbAr6p.mjs').then((c) => c.SlideToggleField),
+};
+
+const SERVICES = {
+    setValue: () => import('./iss-ctrl-set-value-event-Dhw0Vj5J.mjs').then((s) => s.SetValueEvent),
+    show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
+    load: () => import('./iss-ctrl-load-value-event-C-aRgKLx.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-B10rhdqh.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-D9rTXVD1.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-DLnagkOr.mjs').then((s) => s.ReplaceApiKeys),
+};
+
+// Read-only counterpart of COMPONENTS: the component used to render a field's value
+// without an editable control, keyed by the same field types.
+const VIEWERS = {
+    date: () => import('./iss-ctrl-date-picker.viewer-Dsmsf91t.mjs').then((c) => c.DatePickerViewer),
+    datetime: () => import('./iss-ctrl-datetime-picker.viewer-BeUyEBKo.mjs').then((c) => c.DatePickerTimeViewer),
+    dateRange: () => import('./iss-ctrl-date-range-picker.viewer-tmTQGPFh.mjs').then((c) => c.DateRangePickerViewer),
+    date_range: () => import('./iss-ctrl-date-range-picker.viewer-tmTQGPFh.mjs').then((c) => c.DateRangePickerViewer),
+    select: () => import('./iss-ctrl-select.viewer-Dv9M-lG-.mjs').then((c) => c.SelectViewer),
+    input: () => import('./iss-ctrl-input.viewer-BOZnW0_e.mjs').then((c) => c.InputViewer),
+    text: () => import('./iss-ctrl-input.viewer-BOZnW0_e.mjs').then((c) => c.InputViewer),
+    checkbox: () => import('./iss-ctrl-checkbox.viewer-C3SEUszR.mjs').then((c) => c.CheckboxViewer),
+    file: () => import('./iss-ctrl-attachment.viewer-DVUL39xd.mjs').then((c) => c.AttachmentViewer),
+    file2: () => import('./iss-ctrl-attachment.viewer-DVUL39xd.mjs').then((c) => c.AttachmentViewer),
+    radio: () => import('./iss-ctrl-radio.viewer-EiDliZro.mjs').then((c) => c.RadioViewer),
+    textarea: () => import('./iss-ctrl-textarea.viewer-CpmLauik.mjs').then((c) => c.TextareaViewer),
+    chips: () => import('./iss-ctrl-chips.viewer-BcKT2hcq.mjs').then((c) => c.ChipsViewer),
+    plate: () => import('./iss-ctrl-plate.viewer-B8PUBLH8.mjs').then((c) => c.PlateViewer),
+    slideToggle: () => import('./iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs').then((c) => c.SlideToggleViewer),
+    toggle: () => import('./iss-ctrl-toggle-button.viewer-CC-8_Dy4.mjs').then((c) => c.ToggleButtonViewer),
+    time: () => import('./iss-ctrl-time-picker.viewer-CJeFLrdI.mjs').then((c) => c.TimePickerViewer),
+    mobile: () => import('./iss-ctrl-mobile.viewer-DQgxAcR-.mjs').then((c) => c.MobileViewer),
+};
+
+class Loader {
+    #injector = inject(Injector);
+    #loadedComponents = new Map();
+    #loadedViewers = new Map();
+    #loadedServices = new Map();
+    loadComponent(field) {
+        const loadedComponent = this.#loadedComponents.get(field.type);
+        if (loadedComponent) {
+            return of(loadedComponent);
+        }
+        const componentImportFn = COMPONENTS[field.type];
+        if (!componentImportFn) {
+            return of(null);
+        }
+        return this.#createObservableFromPromise(componentImportFn, field.type, this.#loadedComponents);
+    }
+    loadViewer(type) {
+        const loadedViewer = this.#loadedViewers.get(type);
+        if (loadedViewer) {
+            return of(loadedViewer);
+        }
+        const viewerImportFn = VIEWERS[type];
+        if (!viewerImportFn) {
+            return of(null);
+        }
+        return this.#createObservableFromPromise(viewerImportFn, type, this.#loadedViewers);
+    }
+    loadService(serviceName) {
+        const loadedService = this.#loadedServices.get(serviceName);
+        if (loadedService) {
+            return loadedService;
+        }
+        if (!SERVICES[serviceName]) {
+            // throw new Error(`Service ${serviceName} not found`);
+            return undefined;
+        }
+        return () => SERVICES[serviceName]()
+            .then((serviceClass) => this.#injector.get(serviceClass))
+            .then((loadedService) => {
+            this.#loadedServices.set(serviceName, () => loadedService);
+            return loadedService;
+        });
+    }
+    #createObservableFromPromise(componentImportFn, type, cache) {
+        return from(componentImportFn()).pipe(tap((component) => {
+            cache.set(type, component);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Loader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Loader, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Loader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+const FIELD_DATA = new InjectionToken("Form Field Data");
+
+class FieldDataInjector {
+    injector = inject(Injector);
+    transform(field) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: FIELD_DATA,
+                    useValue: field,
+                },
+            ],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldDataInjector, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FieldDataInjector, isStandalone: true, name: "FieldDataInjector" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldDataInjector, decorators: [{
+            type: Pipe,
+            args: [{ name: "FieldDataInjector" }]
+        }] });
+
+class Outlet {
+    ready = output();
+    formReady = signal(false, ...(ngDevMode ? [{ debugName: "formReady" }] : /* istanbul ignore next */ []));
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    components = signal(null, ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
+    #controlContainer = inject(ControlContainer);
+    #destroyRef = inject(DestroyRef);
+    #formEngine = inject(FormEngine);
+    #loader = inject(Loader);
+    #effectRef = effect((onCleanup) => {
+        // Dynamic imports cannot be canceled, but an old result must never replace
+        // the components produced for a newer fields input (or a destroyed outlet).
+        let active = true;
+        onCleanup(() => {
+            active = false;
+        });
+        // Remove the previous outlet immediately. This destroys its field components
+        // (which remove their controls in ngOnDestroy) and prevents A's metadata from
+        // being returned while B is still loading.
+        this.components.set(null);
+        this.#formEngine.registerFields(this.hostFormGroup, this, []);
+        void this.#componentsFactory(this.fields()).then((components) => {
+            if (!active) {
+                return;
+            }
+            this.components.set(components);
+            this.#formEngine.registerFields(this.hostFormGroup, this, components.map((component) => component.data));
+        });
+    }, ...(ngDevMode ? [{ debugName: "#effectRef" }] : /* istanbul ignore next */ []));
+    get hostFormGroup() {
+        return this.#controlContainer.control;
+    }
+    ngOnInit() {
+        const expectedFieldNames = this.fields()
+            .filter((f) => f.mode() === "edit" || (f.mode() === "view" && f.value))
+            .map((f) => f.name);
+        this.#formEngine.registerExpectedFieldNames(this.hostFormGroup, this, expectedFieldNames);
+        this.#listenToHostFormGroupChanges().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((isReady) => {
+            if (isReady) {
+                this.formReady.set(true);
+                this.ready.emit(true);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.#effectRef.destroy();
+        this.#formEngine.unregisterOutlet(this.hostFormGroup, this);
+    }
+    async #componentsFactory(fields) {
+        const fieldsComponentPromise = fields.map(async (field) => {
+            return {
+                self$: this.#loader.loadComponent(field),
+                data: await this.#initField(field)
+            };
+        });
+        return await Promise.all(fieldsComponentPromise);
+    }
+    /*todo needs refactoring to be in the issField class*/
+    async #initField(field) {
+        const f = new IssField(field, this.#loader);
+        await Promise.all([
+            this.#loadFieldEvents(f),
+            this.#loadFieldValidation(f)
+        ]);
+        return f;
+    }
+    async #loadFieldEvents(f) {
+        if (!f.events?.length)
+            return;
+        await Promise.all(f.events.map(async (action) => {
+            const [fn, triggerFn, configFn] = await Promise.all([
+                action.fnPromise,
+                action.config.triggerFnPromise,
+                action.config.fnPromise
+            ]);
+            action.fn = fn;
+            if (triggerFn) {
+                action.config.triggerFn = triggerFn;
+            }
+            action.config.fn = configFn;
+        }));
+    }
+    // Resolves the validator behind every rule the field switched on. `validation` itself is left
+    // exactly as it arrived — the caller's own object, which it may still read and re-render — so
+    // the factories land in `validationFns` and the rules keep the values they were given.
+    // A rule that is off carries no validator: nothing is imported for it and nothing is built
+    // from it, which is what makes `{ "required": false }` an optional field.
+    async #loadFieldValidation(f) {
+        if (!f.validation)
+            return;
+        const validationEntries = Object.entries(f.validation).filter(([key, validation]) => {
+            if (VALIDATORS[key] === undefined) {
+                console.error(`${key} not found`);
+                return false;
+            }
+            return isActiveValidationRule(validation);
+        });
+        await Promise.all(validationEntries.map(async ([key]) => {
+            f.validationFns[key] = await VALIDATORS[key]();
+        }));
+    }
+    #listenToHostFormGroupChanges() {
+        return this.hostFormGroup.valueChanges.pipe(debounceTime(500), map(() => {
+            const controlNames = Object.keys(this.hostFormGroup.getRawValue());
+            const fieldNames = this.#formEngine.getExpectedFieldNames(this.hostFormGroup);
+            const diff = fieldNames.filter((x) => !controlNames.includes(x));
+            return diff.length === 0;
+        }), first((v) => v));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Outlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Outlet, isStandalone: true, selector: "iss-form-outlet", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { ready: "ready" }, ngImport: i0, template: `
+    @if (components() && components()?.length) {
+      @for (component of components(); track $index) {
+        <ng-container
+          [ngComponentOutlet]="component.self$ | async"
+          [ngComponentOutletInjector]="component.data | FieldDataInjector"
+          [ngComponentOutletInputs]="{formReady: formReady(), issField: component.data | FieldDataInjector}"
+        />
+      }
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:2rem}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: FieldDataInjector, name: "FieldDataInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Outlet, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-form-outlet", imports: [
+                        NgComponentOutlet,
+                        FieldDataInjector,
+                        AsyncPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (components() && components()?.length) {
+      @for (component of components(); track $index) {
+        <ng-container
+          [ngComponentOutlet]="component.self$ | async"
+          [ngComponentOutletInjector]="component.data | FieldDataInjector"
+          [ngComponentOutletInputs]="{formReady: formReady(), issField: component.data | FieldDataInjector}"
+        />
+      }
+    }
+  `, styles: [":host{display:flex;flex-direction:column;gap:2rem}\n"] }]
+        }], propDecorators: { ready: [{ type: i0.Output, args: ["ready"] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }] } });
+
+class EventTrigger {
+    isTriggered(field, change, action, masterField) {
+        if (field.name === action.trackedFieldName) {
+            return true;
+        }
+        return action.value.split(",").some((actionValue) => {
+            if (actionValue === "*" && change.value !== null && change.value !== undefined) {
+                return true;
+            }
+            if (!change) {
+                return false;
+            }
+            if (change.value === null || change.value === undefined) {
+                return false;
+            }
+            const changeValueArray = change?.value.toString().split(",").map((val) => val.trim());
+            return (changeValueArray?.includes(actionValue.trim()));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTrigger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTrigger, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTrigger, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class EventTriggerManager {
+    actionTriggerService = inject(EventTrigger);
+    async getActionsToBeTriggered(field, change) {
+        const actionsToBeTriggered = [];
+        for (const action of field.events) {
+            /* todo remove await from array and use allSettle instead or any other solution */
+            const isTruthy = await this.#filterCondition(field, action, change);
+            if (isTruthy) {
+                actionsToBeTriggered.push(action);
+            }
+        }
+        return actionsToBeTriggered;
+    }
+    async getActionsToBeReverted(field, change) {
+        const actionsToBeReverted = [];
+        for (const action of field.events) {
+            if (action.trackedFieldName !== change.trackedField.name) {
+                /* todo remove await from array and use allSettle instead or any other solution */
+                const isTruthy = await this.#filterCondition(field, action, change);
+                if (!isTruthy && action.triggered) {
+                    actionsToBeReverted.push(action);
+                }
+            }
+        }
+        return actionsToBeReverted;
+    }
+    async #filterCondition(field, action, change) {
+        let triggerFn = action.config.triggerFn;
+        if (!triggerFn && action.config.triggerFnPromise) {
+            triggerFn = await action.config.triggerFnPromise;
+        }
+        if (triggerFn) {
+            return triggerFn.isTriggered(field, change, action);
+        }
+        return this.actionTriggerService.isTriggered(field, change, action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTriggerManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTriggerManager, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventTriggerManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class EventHandler {
+    #actionTriggerManager = inject(EventTriggerManager);
+    async fire(control, form, field, change) {
+        let actions = await this.#actionTriggerManager.getActionsToBeTriggered(field, change);
+        /* todo need to follow up on actions on this field (self) */
+        for (let i = 0; i < actions.length; i++) {
+            let evt = actions[i].fn;
+            if (!evt) {
+                /* todo remove await from array and use allSettle instead or any other solution */
+                evt = await actions[i].fnPromise;
+            }
+            const args = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
+            evt?.fire(args);
+        }
+    }
+    async revert(control, form, field, change) {
+        const actions = await this.#actionTriggerManager.getActionsToBeReverted(field, change);
+        for (let i = 0; i < actions.length; i++) {
+            let evt = actions[i].fn;
+            if (!evt) {
+                evt = await actions[i].fnPromise;
+            }
+            const args = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
+            evt?.revert(args);
+        }
+    }
+    #fieldEventArgumentFactory(control, form, field, change, action) {
+        return {
+            action,
+            change,
+            control,
+            field,
+            form
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventHandler, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/**
+ * Base class for every `iss-field-*` field.
+ *
+ * A field is the form-engine layer around a control: it reads its whole configuration from
+ * the injected {@link IssField} (label, options, config, validation, events), registers its
+ * `FormControl` on the parent `FormGroup` on init and removes it again on destroy, and
+ * switches between the control (`mode() === "edit"`) and the viewer (`mode() === "view"`).
+ *
+ * ### Inputs
+ * | Property | Type | Description |
+ * | --- | --- | --- |
+ * | `issField` | `IssField` | **Required.** The field definition; also provided through the `FIELD_DATA` token. |
+ * | `formReady` | `boolean \| undefined` | Set by the outlet once the whole form exists; gates event wiring. |
+ *
+ * ### Properties available on `field`
+ * `name` · `type` · `base` · `label()` · `hint()` · `options()` · `api()` · `mode()` ·
+ * `visible()` · `loading()` · `value` · `jsonValue` · `defaultValue` · `ctrlValue()` ·
+ * `ctrlJsonValue()` · `events` · `validation` · `asyncValidation` · `children` ·
+ * `response()` · `config` — see {@link IssField} and {@link FieldConfig}.
+ *
+ * Fields are not used directly in templates; the outlet resolves them from the field `type`
+ * through the `COMPONENTS` index.
+ */
+class FieldBase {
+    /**
+     * The field definition rendered by this component. Required.
+     */
+    issField = input.required(...(ngDevMode ? [{ debugName: "issField" }] : /* istanbul ignore next */ []));
+    /**
+     * Set by the outlet once every field is registered; field events start only after it turns true.
+     */
+    formReady = input(...(ngDevMode ? [undefined, { debugName: "formReady" }] : /* istanbul ignore next */ []));
+    /**
+     * The {@link IssField} for this instance, injected through the `FIELD_DATA` token.
+     */
+    field = inject(FIELD_DATA);
+    parentFormGroup = inject(ControlContainer);
+    formEngine = inject(FormEngine);
+    eventHandler = inject(EventHandler);
+    destroyRef = inject(DestroyRef);
+    /**
+     * The `FormControl` this field registers on the parent form under `field.name`.
+     */
+    ctrl = new FormControl(null);
+    ctrlValueChange = toSignal(this.ctrl.valueChanges, { initialValue: this.ctrl.getRawValue() });
+    #valueChangeEffectRef = effect(() => {
+        this.field.ctrlValue.set(this.ctrlValueChange());
+    }, ...(ngDevMode ? [{ debugName: "#valueChangeEffectRef" }] : /* istanbul ignore next */ []));
+    #eventEffectRef = effect(() => {
+        if (this.formReady()) {
+            this.#initiateEvents();
+        }
+    }, ...(ngDevMode ? [{ debugName: "#eventEffectRef" }] : /* istanbul ignore next */ []));
+    get form() {
+        return this.parentFormGroup.control;
+    }
+    ngOnInit() {
+        this.#addControlToForm();
+    }
+    ngOnDestroy() {
+        this.#valueChangeEffectRef.destroy();
+        this.#eventEffectRef.destroy();
+        this.#removeControlFromForm();
+    }
+    #addControlToForm() {
+        this.ctrl.setValue(this.formEngine.getFieldValue(this.field));
+        this.ctrl.setValidators(this.formEngine.createValidators(this.field));
+        this.ctrl.setAsyncValidators(this.formEngine.createAsyncValidators(this.field));
+        if (this.field.config.disabled() === true) {
+            this.ctrl.disable({ emitEvent: false });
+        }
+        this.form.addControl(this.field.name, this.ctrl);
+        if (this.ctrl.getRawValue()) {
+            this.ctrl.markAsTouched();
+        }
+    }
+    // a conditionally rendered field would otherwise leave its control behind on the host
+    // form, keeping it in the form value and in the outlet's readiness diff forever
+    #removeControlFromForm() {
+        if (this.form?.get(this.field.name) === this.ctrl) {
+            this.form.removeControl(this.field.name);
+        }
+    }
+    #initiateEvents() {
+        // todo don't start events in view mode, just set value
+        if (this.field.events && this.field.events.length) {
+            this.#startEvents();
+        }
+        if (this.field.validation) {
+            this.#updateValidityOnMasterChanges();
+        }
+    }
+    #startEvents() {
+        this.formEngine.trackChangesEvents(this.field, this.form)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((change) => {
+            this.eventHandler.revert(this.ctrl, this.form, this.field, change).then();
+            this.eventHandler.fire(this.ctrl, this.form, this.field, change).then();
+        });
+    }
+    #updateValidityOnMasterChanges() {
+        this.formEngine.trackChangesValidations(this.field, this.form)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.ctrl.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FieldBase, isStandalone: true, selector: "ng-component", inputs: { issField: { classPropertyName: "issField", publicName: "issField", isSignal: true, isRequired: true, transformFunction: null }, formReady: { classPropertyName: "formReady", publicName: "formReady", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    imports: [ReactiveFormsModule]
+                }]
+        }], propDecorators: { issField: [{ type: i0.Input, args: [{ isSignal: true, alias: "issField", required: true }] }], formReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "formReady", required: false }] }] } });
+
+const VIEW_PROVIDER = {
+    provide: ControlContainer,
+    useFactory: () => inject(ControlContainer, { skipSelf: true }),
+};
+
+const PLACEHOLDER_REGEX = /\{((\w+).)*(\w+)}/gi;
+
+const VALIDATION_MESSAGES = {
+    required: () => {
+        return {
+            en: "Mandatory Field",
+            ar: "حقل إجباري",
+        };
+    },
+    requiredTrue: () => {
+        return {
+            en: "Please Choose",
+            ar: "يُرجى الموافقة",
+        };
+    },
+    email: () => {
+        return {
+            en: "Please enter a valid email address",
+            ar: "يرجى كتابة عنوان بريد إلكتروني صحيح",
+        };
+    },
+    minlength: ({ requiredLength }) => {
+        return {
+            en: `Please enter at least ${requiredLength} characters`,
+            ar: `يُرجى إدخال ${requiredLength} على الأقل`,
+        };
+    },
+    maxlength: ({ requiredLength }) => {
+        return {
+            en: `Please enter at most ${requiredLength} characters`,
+            ar: `يُرجى إدخال ${requiredLength} على الأكثر`,
+        };
+    },
+    maxAllowedUsers: (max) => {
+        return {
+            en: `Please enter at most ${max} users`,
+            ar: `يُرجى اختيار ${max} مستخدم على الأكثر `,
+        };
+    },
+    minAllowedUsers: (min) => {
+        return {
+            en: `Please enter at least ${min} users`,
+            ar: `يُرجى اختيار ${min} مستخدم على الأقل `,
+        };
+    },
+    min: ({ min }) => {
+        return {
+            en: `Please enter at least ${min}`,
+            ar: `يُرجى إدخال ${min} على الأقل`,
+        };
+    },
+    max: ({ max }) => {
+        return {
+            en: `Please enter at most ${max}`,
+            ar: `يُرجى إدخال ${max} على الأكثر`,
+        };
+    },
+    pattern: () => {
+        return {
+            en: "Please enter a valid value",
+            ar: "يرجى إدخال قيم صحيحة",
+        };
+    },
+    wrongTimeSelected: (wrongTimeSelected) => {
+        return {
+            en: `Selected time should be after ${wrongTimeSelected} hours from now.`,
+            ar: `الوقت المختار يجب أن يكون بعد ${wrongTimeSelected} من الآن. `,
+        };
+    },
+    relativeTimeValidation_after: (relativeTimeValidation) => {
+        return {
+            en: `The selected end date should be greater than the ${relativeTimeValidation}.`,
+            ar: ` تاريخ الانتهاء يجب ان يكون اكبر من ${relativeTimeValidation}.`,
+        };
+    },
+    relativeTimeValidation_before: (relativeTimeValidation) => {
+        return {
+            en: `Selected time should be before ${relativeTimeValidation}.`,
+            ar: `الوقت المختار يجب أن يكون قبل ${relativeTimeValidation}.`,
+        };
+    },
+    relativeTimeValidation_before_noOfDays: (relativeTimeValidation) => {
+        return {
+            en: `Selected time should be before ${relativeTimeValidation} .`,
+            ar: `الوقت المختار يجب أن يكون قبل ${relativeTimeValidation} .`,
+        };
+    },
+    relativeTimeValidation_within: (relativeTimeValidation) => {
+        return {
+            en: `Selected time should be within ${relativeTimeValidation}.`,
+            ar: ` يجب أن يكون الوقت المحدد ضمن ${relativeTimeValidation}.`,
+        };
+    },
+    fileType: ({ validFileExtensions, inValidFileName }) => ({
+        en: `${inValidFileName} should be ${validFileExtensions}`,
+        ar: `يجب أن يكون ${inValidFileName} بصيغة ${validFileExtensions}`,
+    }),
+    fileSize: ({ limitSize, inValidFileName }) => ({
+        en: `${inValidFileName} size should not exceed ${limitSize}.`,
+        ar: `يجب ألا يزيد حجم ${inValidFileName}} عن ${limitSize}`,
+    }),
+    minFileCount: ({ minCount, fileCount }) => {
+        return {
+            en: `At least ${minCount} file(s) required, but only ${fileCount} selected.`,
+            ar: `تتطلب العملية على الأقل ${minCount} ملف(ات)، لكن تم اختيار ${fileCount} فقط.`,
+        };
+    },
+    maxFileCount: ({ maxCount, fileCount }) => {
+        return {
+            en: `You can upload a maximum of ${maxCount} file(s). You have selected ${fileCount} file(s).`,
+            ar: `يمكنك تحميل حد أقصى من ${maxCount} ملف(ات). لقد قمت باختيار ${fileCount} ملف(ات).`
+        };
+    }
+};
+
+class TranslatePipe {
+    currentLanguage = inject(UI_LANGUAGE);
+    transform(value, locale = "") {
+        if (typeof value === "string") {
+            return value; // Return the string as is, if it's a string
+        }
+        if (value && locale) {
+            return value[locale];
+        }
+        return value?.[this.currentLanguage];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "translate" }]
+        }] });
+
+class ValidationMessage {
+    errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    showMessage = input.required(...(ngDevMode ? [{ debugName: "showMessage" }] : /* istanbul ignore next */ []));
+    getValidationMessage(error) {
+        const errorMessageGenerator = VALIDATION_MESSAGES[error.key];
+        if (!errorMessageGenerator) {
+            console.warn(`THERE IS NO VALIDATION MESSAGE FOR KEY "${error.key}"`);
+            return error.key;
+        }
+        return errorMessageGenerator(error.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessage, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (errors() !== null && showMessage()) {
+      <div class="messages">
+        @for (error of errors() ?? {} | keyvalue; track error) {
+          <p>
+            <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
+          </p>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-validation-message-viewer", imports: [
+                        KeyValuePipe,
+                        TranslatePipe,
+                        MatError
+                    ], template: `
+    @if (errors() !== null && showMessage()) {
+      <div class="messages">
+        @for (error of errors() ?? {} | keyvalue; track error) {
+          <p>
+            <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
+          </p>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"] }]
+        }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: true }] }] } });
+
+/**
+ * `<iss-field-viewer>` — read-only presentation of a single field as a
+ * label / value row.
+ *
+ * Project the caption into the `label` slot and the rendered value into any
+ * element carrying a `value` attribute:
+ *
+ * ```html
+ * <iss-field-viewer>
+ *   <label>Request Type</label>
+ *   <span>value</span>
+ * </iss-field-viewer>
+ * ```
+ *
+ * The label sits in a fixed-width column, so every value in a stack of viewers
+ * starts on the same vertical line. Override that column with the
+ * `--field-viewer-label-width` custom property on any ancestor.
+ * When no label is projected, the value spans the full width of the row.
+ */
+class FieldViewer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: FieldViewer, isStandalone: true, selector: "iss-field-viewer", ngImport: i0, template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, isInline: true, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-field-viewer", imports: [], template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] }]
+        }] });
+
+class ArabicNumberPipe {
+    transform(n) {
+        if (n === null || n === undefined) {
+            return "";
+        }
+        if (Number.isNaN(+n)) {
+            return n;
+        }
+        return new Intl.NumberFormat("ar-SA", {}).format(+n);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArabicNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: ArabicNumberPipe, isStandalone: true, name: "arabicNumber" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArabicNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "arabicNumber" }]
+        }] });
+
+class PlateLetterPipe {
+    transform(value) {
+        const letter = PLATE_LETTERS.find((l) => l.value === value);
+        if (letter) {
+            return letter.label.ar;
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PlateLetterPipe, isStandalone: true, name: "plateLetter" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateLetterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "plateLetter" }]
+        }] });
+
+class Employee {
+    loggedInUserProfile;
+    USER_SEARCH_URL = inject(USER_SEARCH_API);
+    userImageHost = "https://igateapp.stc.com.sa";
+    #http = inject(HttpClient);
+    getProfile(email) {
+        const url = this.replacePlaceholders(this.USER_SEARCH_URL, { email: email });
+        return this.#http.get(url).pipe(map((dto) => {
+            dto.data.profileImageUrl = this.getProfileImageUrl(dto.data);
+            return dto.data;
+        }), tap((user) => {
+            localStorage.setItem("user", JSON.stringify(user));
+            this.loggedInUserProfile = user;
+        }));
+    }
+    search(username, endpoint) {
+        let url = this.replacePlaceholders(this.USER_SEARCH_URL, { username });
+        if (endpoint) {
+            if (!endpoint.includes("{username}")) {
+                throw "endpoint should have this string {username} as a placeholder to be able to replace it";
+            }
+        }
+        if (endpoint) {
+            url = this.replacePlaceholders(endpoint, { username });
+        }
+        return this.#http.get(url).pipe(map((employees) => {
+            employees.data = employees.data.map((emp) => {
+                emp.image = this.getProfileImageUrl(emp);
+                return emp;
+            });
+            return employees.data;
+        }));
+    }
+    getProfileImageUrl(user) {
+        if (user.image && this.#checkIfImageHasValue(user.image)) {
+            return this.userImageHost + user.image;
+        }
+        return "";
+    }
+    replacePlaceholders(str, values) {
+        /*TODO check if placeholders passed in values object*/
+        if (!str) {
+            return "";
+        }
+        return str.replace(PLACEHOLDER_REGEX, (match) => {
+            return values[match.replace("{", "").replace("}", "")] ?? match;
+        });
+    }
+    #checkIfImageHasValue(imageUri) {
+        const splitResult = imageUri.split("/");
+        return !!(splitResult[splitResult.length - 1] && splitResult[splitResult.length - 1] !== ".jpg");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Employee, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Employee, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Employee, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+function replacePlaceholders(str, values) {
+    /*TODO check if placeholders passed in values object*/
+    if (!str) {
+        return "";
+    }
+    return str.replace(PLACEHOLDER_REGEX, (match) => {
+        const key = match.replace("{", "").replace("}", "");
+        return values[key] ?? match;
+    });
+}
+
+class FileHandler {
+    ATTACHMENT_UPLOAD_URL = inject(ATTACHMENT_UPLOAD_URL);
+    ATTACHMENT_DOWNLOAD_URL = inject(ATTACHMENT_DOWNLOAD_URL);
+    attachmentAdapter = inject(ATTACHMENT_UPLOAD_RESPONSE_MAPPER);
+    #http = inject(HttpClient);
+    #units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    upload(data) {
+        const url = this.ATTACHMENT_UPLOAD_URL;
+        // no Content-Type header: the browser adds it with the FormData boundary
+        return this.#http.post(url, data).pipe(map((res) => this.attachmentAdapter(res)));
+    }
+    formDataFactory(files, multiple) {
+        if (files.length === 0) {
+            return null;
+        }
+        const fd = new FormData();
+        let formDataKey = "file";
+        if (multiple) {
+            formDataKey = "files";
+        }
+        for (let i = 0; i < files.length; i++) {
+            // @ts-ignore
+            fd.append(formDataKey, files[i]);
+        }
+        return fd;
+    }
+    formDataHasValue(formData) {
+        if (formData) {
+            for (const key of formData.keys()) {
+                if (formData.get(key)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    getFileFromFormData(formData, name) {
+        if (!formData) {
+            return [];
+        }
+        const fileFD = formData.getAll("file");
+        const filesFD = formData.getAll("files");
+        if (filesFD.length) {
+            return filesFD.filter((f) => f.name === name);
+        }
+        if (fileFD.length) {
+            return fileFD.filter((f) => f.name === name);
+        }
+        return [];
+    }
+    formatFileSize(x) {
+        let l = 0;
+        let n = parseInt(x.toString(), 10) || 0;
+        while (n >= 1024 && ++l) {
+            n /= 1024;
+        }
+        return Math.floor(n) + " " + this.#units[l];
+    }
+    fetchFileInfo(id) {
+        const url = replacePlaceholders(this.ATTACHMENT_DOWNLOAD_URL, { fileId: id });
+        const httpRequestOptions = { observe: "response", responseType: "blob" };
+        return this.#http.get(url, httpRequestOptions).pipe(map((res) => this.#processFileBinaryStream(res, id)));
+    }
+    fetchFiles(ids) {
+        if (ids) {
+            return forkJoin(ids.split(",").map((id) => {
+                return this.fetchFileInfo(id);
+            }));
+        }
+        return EMPTY;
+    }
+    #processFileBinaryStream(res, fileId) {
+        const fileNameHeader = res.headers.get("content-disposition");
+        const typeHeader = res.headers.get("content-type");
+        let fileName = "";
+        if (fileNameHeader) {
+            fileName = decodeURIComponent(fileNameHeader.split(";")[1].split("=")[1].replaceAll("\"", ""));
+        }
+        const file = new File([res.body], fileName, { type: typeHeader });
+        return {
+            id: fileId,
+            name: file.name,
+            type: file.type,
+            size: this.formatFileSize(file.size),
+            file: file,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandler, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+function arrayFrom(length, valueFunction) {
+    const valuesArray = Array(length);
+    for (let i = 0; i < length; i++) {
+        valuesArray[i] = valueFunction(i);
+    }
+    return valuesArray;
+}
+
+function getPropertyByPath(obj, path) {
+    if (obj && path) {
+        let currentProp;
+        const props = path.split(".");
+        for (let i = 0; i < props.length; i++) {
+            const propKey = props[i];
+            if (!currentProp) {
+                const target = obj[propKey];
+                if (typeof target === "function") {
+                    currentProp = target();
+                }
+                else {
+                    currentProp = target;
+                }
+            }
+            else {
+                const target = currentProp[propKey];
+                if (typeof target === "function") {
+                    currentProp = target();
+                }
+                else {
+                    currentProp = target;
+                }
+            }
+            if (currentProp === undefined) {
+                break;
+            }
+        }
+        return currentProp;
+    }
+    return undefined;
+}
+
+function formatFileSize(x) {
+    const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    let l = 0;
+    let n = parseInt(x.toString(), 10) || 0;
+    while (n >= 1024 && ++l) {
+        n /= 1024;
+    }
+    return `${Math.floor(n)}${units[l]}`;
+}
+
+class IssValidators {
+    static required() {
+        return Validators.required;
+    }
+    static max(maxValue) {
+        return Validators.max(maxValue);
+    }
+    static min(minValue) {
+        return Validators.min(minValue);
+    }
+    static requiredTrue() {
+        return Validators.requiredTrue;
+    }
+    static email() {
+        return Validators.email;
+    }
+    static minLength(minLength) {
+        return Validators.minLength(minLength);
+    }
+    static maxLength(maxLength) {
+        return Validators.maxLength(maxLength);
+    }
+    static pattern(pattern) {
+        return Validators.pattern(pattern);
+    }
+    static null() {
+        return Validators.nullValidator;
+    }
+}
+
+var core_validator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    IssValidators: IssValidators
+});
+
+class FileValidators {
+    static size(limitSize) {
+        return (control) => {
+            const formData = control.value;
+            if (!formData || !(formData instanceof FormData)) {
+                return null; // No validation errors if there's no form data or the value is not FormData
+            }
+            const filesValidity = [];
+            const inValidFileName = [];
+            formData.forEach((value) => {
+                if (value instanceof File) {
+                    if (value.size > limitSize) {
+                        inValidFileName.push(value.name);
+                        filesValidity.push(false);
+                    }
+                    else {
+                        filesValidity.push(true);
+                    }
+                }
+            });
+            return filesValidity.every((v) => v) ? null : {
+                fileSize: {
+                    limitSize: formatFileSize(limitSize),
+                    inValidFileName: inValidFileName.join()
+                }
+            };
+        };
+    }
+    static type(validFileExtensions) {
+        return (control) => {
+            const formData = control.value;
+            if (!formData || !(formData instanceof FormData) || validFileExtensions.length === 0) {
+                return null; // No validation errors if there's no form data or the value is not FormData
+            }
+            const filesValidity = [];
+            const inValidFileName = [];
+            formData.forEach((value) => {
+                if (value instanceof File) {
+                    const uploadedFileExt = value.name.split(".").pop()?.toLowerCase();
+                    const isValidExtension = validFileExtensions.some((ext) => ext.toLowerCase() === uploadedFileExt);
+                    if (!isValidExtension) {
+                        inValidFileName.push(value.name);
+                        filesValidity.push(false);
+                    }
+                    else {
+                        filesValidity.push(true);
+                    }
+                }
+            });
+            return filesValidity.every((v) => v) ? null : {
+                fileType: {
+                    validFileExtensions: validFileExtensions.join(", "),
+                    inValidFileName: inValidFileName.join(", ")
+                }
+            };
+        };
+    }
+    static maxCount(maxCount) {
+        return (control) => {
+            const formData = control.value;
+            if (!formData || !(formData instanceof FormData)) {
+                return null; // No validation errors if there's no form data or the value is not FormData
+            }
+            let fileCount = 0;
+            formData.forEach((value) => {
+                if (value instanceof File) {
+                    fileCount++;
+                }
+            });
+            return fileCount <= maxCount ? null : { maxFileCount: { maxCount, fileCount } };
+        };
+    }
+    static minCount(minCount) {
+        return (control) => {
+            const formData = control.value;
+            if (!formData || !(formData instanceof FormData)) {
+                return null; // No validation errors if there's no form data or the value is not FormData
+            }
+            let fileCount = 0;
+            formData.forEach((value) => {
+                if (value instanceof File) {
+                    fileCount++;
+                }
+            });
+            return fileCount >= minCount ? null : { minFileCount: { minCount, fileCount } };
+        };
+    }
+}
+
+var file_validator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FileValidators: FileValidators
+});
+
+class TimeValidator {
+    // The rule's value is the name of the field this one must not run past, so it arrives here
+    // rather than being read back off the field.
+    static beforeDate(otherFieldName) {
+        const controlContainer = inject(ControlContainer);
+        const parentForm = controlContainer.control;
+        return (control) => {
+            const anotherControl = parentForm.get(otherFieldName);
+            if (anotherControl) {
+                const anotherControlValue = anotherControl.getRawValue();
+                const controlValue = control.getRawValue();
+                if (new Date(anotherControlValue) < new Date(controlValue)) {
+                    return {
+                        relativeTimeValidation_before: format(anotherControlValue.replace("Z", ""), DATETIME_FORMAT)
+                    };
+                }
+            }
+            return null;
+        };
+    }
+    static afterDate(otherFieldName) {
+        return (control) => {
+            return null;
+        };
+    }
+}
+
+var time_validator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TimeValidator: TimeValidator
+});
+
+// The form engine: the outlet, the field/viewer indexes it resolves through, and everything
+// a host application needs to drive a form.
+//
+// Controls are NOT exported from here. Each one is its own entry point — `iss-ctrl/input`,
+// `iss-ctrl/select`, `iss-ctrl/mobile`, … — because re-exporting a control statically makes
+// the bundler inline it, and with it every control, back into whatever loads this file. The
+// fields below reach their control through that entry point, so an app downloads only the
+// controls it renders. `iss-ctrl/base` and `iss-ctrl/tokens` are re-exported for convenience;
+// an app configuring the tokens in its root providers should still import them directly from
+// `iss-ctrl/tokens` so the engine stays out of its initial bundle.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArabicNumberPipe as A, COMPONENTS as C, Employee as E, FieldBase as F, IssField as I, Loader as L, Outlet as O, PLACEHOLDER_REGEX as P, SERVICES as S, TranslatePipe as T, VIEW_PROVIDER as V, ValidationMessage as a, FieldViewer as b, FileHandler as c, FormEngine as d, FieldDataInjector as e, VALIDATION_MESSAGES as f, getPropertyByPath as g, VALIDATORS as h, isActiveValidationRule as i, FIELD_DATA as j, PlateLetterPipe as k, arrayFrom as l, formatFileSize as m, IssValidators as n, FileValidators as o, TimeValidator as p, replacePlaceholders as r };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-DvnkwSMG.mjs.map