ets-fe-ng-sdk 17.0.309 → 17.0.310

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -3,10 +3,10 @@ import { FormControl, Validators, FormArray, FormGroup, FormBuilder, NG_VALUE_AC
 import 'zone.js/plugins/zone-error';
 import { cloneDeep, clone, isEqual, isEmpty, uniqBy } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, NgModule, signal, inject, Directive, Input, booleanAttribute, input, computed, EventEmitter, DestroyRef, effect, Component, Output, ViewChild, forwardRef, HostListener, viewChild, Inject, HostBinding, ContentChild, InjectionToken, ErrorHandler } from '@angular/core';
+import { Injectable, Pipe, NgModule, signal, inject, Directive, Input, booleanAttribute, input, computed, EventEmitter, DestroyRef, effect, Component, Output, ViewChild, forwardRef, HostListener, viewChild, Inject, HostBinding, ContentChild, model, InjectionToken, ErrorHandler } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, NgClass, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgStyle, JsonPipe } from '@angular/common';
-import { faPlus, faSlidersH, faMoneyCheck, faCancel, faCheck, faListAlt, faClone, faCogs, faTrash, faDownload, faEdit, faFileExport, faFile, faFilter, faPenFancy, faUserShield, faHistory, faHome, faFileImport, faInfoCircle, faLock, faArrowRight, faPen, faArrowLeft, faRecycle, faSave, faSearch, faEye, faBellSlash, faUpload, faUnlock, faUsers, faTruck, faTag, faReceipt, faBank, faArrowsH, faPlay, faPercent, faHandshake, faCircleExclamation, faTable, faSpoon } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faSlidersH, faMoneyCheck, faCancel, faCheck, faListAlt, faClone, faCogs, faTrash, faDownload, faEdit, faFileExport, faFile, faFilter, faPenFancy, faUserShield, faHistory, faHome, faFileImport, faInfoCircle, faLock, faArrowRight, faPause, faPen, faArrowLeft, faRecycle, faSave, faSearch, faEye, faBellSlash, faUpload, faUnlock, faUsers, faStop, faTruck, faTag, faReceipt, faBank, faArrowsH, faPlay, faPercent, faHandshake, faCircleExclamation, faTable, faSpoon } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import { timer, take, tap, merge, Observable, BehaviorSubject, debounceTime, filter, ReplaySubject, lastValueFrom, isObservable, of, firstValueFrom, throwError, fromEvent, map as map$1, distinct, interval, concat, Subject, debounce } from 'rxjs';
 import { catchError, tap as tap$1, map, retry, debounceTime as debounceTime$1, filter as filter$1, startWith, switchMap, first, timeout } from 'rxjs/operators';
@@ -52,14 +52,14 @@ import * as i6$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { toSignal } from '@angular/core/rxjs-interop';
 import PerfectScrollbar from 'perfect-scrollbar';
-import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i1$4 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { NGTelInputDirective } from '@serene-dev/ng-tel-input';
 import * as i2$2 from 'ngx-quill';
 import { QuillEditorComponent, QuillModule } from 'ngx-quill';
 import 'quill-emoji/dist/quill-emoji.js';
 import 'quill-mention';
+import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i1$4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$6 from '@angular/material/paginator';
@@ -1302,169 +1302,173 @@ class BtnService {
                 _mclass: 'btn btn-lg btn-success w-100',
             },
         };
-        this.getIcon = (iconType) => {
-            const index = {
-                add: {
-                    icon: faPlus,
-                },
-                adjust: {
-                    icon: faSlidersH,
-                },
-                calendar: {
-                    iconString: 'fas fa-calendar-alt',
-                },
-                cash: {
-                    icon: faMoneyCheck,
-                },
-                cancel: {
-                    icon: faCancel,
-                },
-                checked: {
-                    icon: faCheck,
-                },
-                checklist: {
-                    icon: faListAlt,
-                },
-                clone: {
-                    icon: faClone,
-                },
-                close: {
-                    iconString: 'fa fa-close',
-                },
-                cogs: {
-                    icon: faCogs,
-                },
-                delete: {
-                    icon: faTrash,
-                },
-                download: {
-                    icon: faDownload,
-                },
-                dropdown: {
-                    iconPosition: 'right',
-                    iconString: 'fa fa-chevron-down',
-                },
-                edit: {
-                    icon: faEdit,
-                },
-                export: {
-                    icon: faFileExport,
-                },
-                file: {
-                    icon: faFile,
-                },
-                filter: {
-                    icon: faFilter,
-                },
-                generate: {
-                    icon: faPenFancy,
-                },
-                guard: {
-                    icon: faUserShield,
-                },
-                access: {
-                    icon: faUserShield,
-                },
-                history: {
-                    icon: faHistory,
-                },
-                home: {
-                    icon: faHome,
-                },
-                import: {
-                    icon: faFileImport,
-                },
-                info: {
-                    icon: faInfoCircle,
-                },
-                link: {
-                    iconString: 'fas fa-chain',
-                },
-                lock: {
-                    icon: faLock,
-                },
-                next: {
-                    icon: faArrowRight,
-                    iconPosition: 'right',
-                },
-                pen: {
-                    icon: faPen,
-                },
-                post: {
-                    icon: faPaperPlane,
-                },
-                previous: {
-                    icon: faArrowLeft,
-                },
-                renew: {
-                    icon: faRecycle,
-                },
-                save: {
-                    icon: faSave,
-                },
-                search: {
-                    icon: faSearch,
-                },
-                show: {
-                    icon: faEye,
-                },
-                view: {
-                    icon: faEye,
-                },
-                snooze: {
-                    icon: faBellSlash,
-                },
-                upload: {
-                    icon: faUpload,
-                },
-                unlock: {
-                    icon: faUnlock,
-                },
-                users: {
-                    icon: faUsers,
-                },
-                recycle: {
-                    icon: faRecycle,
-                },
-                refresh: {
-                    iconString: 'fa fa-refresh',
-                },
-                truck: {
-                    icon: faTruck,
-                },
-                tag: {
-                    icon: faTag,
-                },
-                receipt: {
-                    icon: faReceipt,
-                },
-                bank: {
-                    icon: faBank,
-                },
-                arrowh: {
-                    icon: faArrowsH,
-                },
-                play: {
-                    icon: faPlay,
-                },
-                percent: {
-                    icon: faPercent,
-                },
-                shake: {
-                    icon: faHandshake,
-                },
-                error: {
-                    icon: faCircleExclamation,
-                },
-                table: {
-                    icon: faTable,
-                },
-                spoon: {
-                    icon: faSpoon,
-                },
-            };
-            return index[iconType];
+        this.buttonIconIndex = {
+            add: {
+                icon: faPlus,
+            },
+            adjust: {
+                icon: faSlidersH,
+            },
+            calendar: {
+                iconString: 'fas fa-calendar-alt',
+            },
+            cash: {
+                icon: faMoneyCheck,
+            },
+            cancel: {
+                icon: faCancel,
+            },
+            checked: {
+                icon: faCheck,
+            },
+            checklist: {
+                icon: faListAlt,
+            },
+            clone: {
+                icon: faClone,
+            },
+            close: {
+                iconString: 'fa fa-close',
+            },
+            cogs: {
+                icon: faCogs,
+            },
+            delete: {
+                icon: faTrash,
+            },
+            download: {
+                icon: faDownload,
+            },
+            dropdown: {
+                iconPosition: 'right',
+                iconString: 'fa fa-chevron-down',
+            },
+            edit: {
+                icon: faEdit,
+            },
+            export: {
+                icon: faFileExport,
+            },
+            file: {
+                icon: faFile,
+            },
+            filter: {
+                icon: faFilter,
+            },
+            generate: {
+                icon: faPenFancy,
+            },
+            guard: {
+                icon: faUserShield,
+            },
+            access: {
+                icon: faUserShield,
+            },
+            history: {
+                icon: faHistory,
+            },
+            home: {
+                icon: faHome,
+            },
+            import: {
+                icon: faFileImport,
+            },
+            info: {
+                icon: faInfoCircle,
+            },
+            link: {
+                iconString: 'fas fa-chain',
+            },
+            lock: {
+                icon: faLock,
+            },
+            next: {
+                icon: faArrowRight,
+                iconPosition: 'right',
+            },
+            pause: {
+                icon: faPause,
+            },
+            pen: {
+                icon: faPen,
+            },
+            post: {
+                icon: faPaperPlane,
+            },
+            previous: {
+                icon: faArrowLeft,
+            },
+            renew: {
+                icon: faRecycle,
+            },
+            save: {
+                icon: faSave,
+            },
+            search: {
+                icon: faSearch,
+            },
+            show: {
+                icon: faEye,
+            },
+            view: {
+                icon: faEye,
+            },
+            snooze: {
+                icon: faBellSlash,
+            },
+            upload: {
+                icon: faUpload,
+            },
+            unlock: {
+                icon: faUnlock,
+            },
+            users: {
+                icon: faUsers,
+            },
+            recycle: {
+                icon: faRecycle,
+            },
+            refresh: {
+                iconString: 'fa fa-refresh',
+            },
+            stop: {
+                icon: faStop,
+            },
+            truck: {
+                icon: faTruck,
+            },
+            tag: {
+                icon: faTag,
+            },
+            receipt: {
+                icon: faReceipt,
+            },
+            bank: {
+                icon: faBank,
+            },
+            arrowh: {
+                icon: faArrowsH,
+            },
+            play: {
+                icon: faPlay,
+            },
+            percent: {
+                icon: faPercent,
+            },
+            shake: {
+                icon: faHandshake,
+            },
+            error: {
+                icon: faCircleExclamation,
+            },
+            table: {
+                icon: faTable,
+            },
+            spoon: {
+                icon: faSpoon,
+            },
         };
+        this.getIcon = (iconType) => this.buttonIconIndex[iconType];
         this.defaultType = 'secondary';
         this.setFormState = (btn) => {
             btn.checkFormStateSub?.unsubscribe();
@@ -7997,91 +8001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: ['searchQuery']
             }] } });
 
-class FileUploadComponent {
-    set _accept(v) {
-        switch (v) {
-            case 'image':
-                this.accept = '.png,.jpg,.docx,.pdf';
-                break;
-            default:
-                this.accept = v;
-                break;
-        }
-    }
-    constructor() {
-        this.class = input();
-        this.mini = input(true);
-        this.listFiles = input(true);
-        this.fileChange = new EventEmitter();
-        this.filesChange = new EventEmitter();
-        this.uS = inject(UtilityService);
-    }
-    ngOnInit() { }
-    get isSingle() {
-        return !this.multiple;
-    }
-    acceptFiles(...files) {
-        this.files = files;
-        this.file = files ? files[0] : null;
-    }
-    emitFiles() {
-        if (this.multiple)
-            this.filesChange.emit(this.files);
-        else
-            this.fileChange.emit(this.file);
-    }
-    onUpload(event) {
-        const files = Array.from(event.target.files);
-        this.acceptFiles(...files);
-        this.emitFiles();
-    }
-    removeFile(index) {
-        this.files.splice(index, 1);
-        this.file = this.files ? this.files[0] : null;
-        this.fileChange.emit(this.file);
-        this.filesChange.emit(this.files);
-    }
-    openDialog() {
-        const inp = document.createElement('input');
-        inp.type = 'file';
-        inp.accept = this.accept;
-        inp.multiple = this.multiple;
-        inp.onchange = (e) => {
-            this.onUpload(e);
-            inp.remove();
-        };
-        // document.body.appendChild(inp);
-        inp.click();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, useDocumentModal: { classPropertyName: "useDocumentModal", publicName: "useDocumentModal", isSignal: false, isRequired: false, transformFunction: null }, listFiles: { classPropertyName: "listFiles", publicName: "listFiles", isSignal: true, isRequired: false, transformFunction: null }, _accept: { classPropertyName: "_accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, ngImport: i0, template: "\n@if (listFiles()) {\n<div [ngClass]=\"{meta:mini()}\" class=\"{{class()}} form-label mb-2 hide-scroll\">\n  @for (item of files; track item;) {\n  <div class=\"row align-items-start mb-1\">\n    <div class=\"col\">\n      <div class=\"hide-scroll file-name\">\n        {{item?.name}}\n      </div>\n    </div>\n    <div class=\"col-auto text-end\">\n      <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index);\"></span>\n    </div>\n  </div>\n}\n</div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn icon=\"upload\" (mclick)=\"openDialog()\" [type]=\"file?'primary':'secondary'\"\n  [disabled]=\"disabled\" [help]=\"help\" [text]=\"label\">\n\n</app-btn>", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file-upload', standalone: true, imports: [NgIf, NgClass, NgFor, BtnComponent], template: "\n@if (listFiles()) {\n<div [ngClass]=\"{meta:mini()}\" class=\"{{class()}} form-label mb-2 hide-scroll\">\n  @for (item of files; track item;) {\n  <div class=\"row align-items-start mb-1\">\n    <div class=\"col\">\n      <div class=\"hide-scroll file-name\">\n        {{item?.name}}\n      </div>\n    </div>\n    <div class=\"col-auto text-end\">\n      <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index);\"></span>\n    </div>\n  </div>\n}\n</div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn icon=\"upload\" (mclick)=\"openDialog()\" [type]=\"file?'primary':'secondary'\"\n  [disabled]=\"disabled\" [help]=\"help\" [text]=\"label\">\n\n</app-btn>", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { help: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], useDocumentModal: [{
-                type: Input
-            }], _accept: [{
-                type: Input,
-                args: ['accept']
-            }], file: [{
-                type: Input
-            }], fileChange: [{
-                type: Output
-            }], files: [{
-                type: Input
-            }], filesChange: [{
-                type: Output
-            }] } });
-
 class FadingCirclesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FadingCirclesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FadingCirclesComponent, isStandalone: true, selector: "fading-circles", ngImport: i0, template: "<div class=\"lds-ellipsis\">\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [".lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:var(--primary);animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}\n"] }); }
@@ -12155,6 +12074,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 
 const ModalComponents = [ModalComponent, ModalFormComponent, ModalHeaderComponent, ModalBodyDirective, ModalFooterDirective];
 
+class WebcamMediaComponent {
+    constructor() {
+        this.closed = new EventEmitter();
+        this.recorderStopped = new EventEmitter();
+        this.recorderErrored = new EventEmitter();
+        this.recorderStarted = new EventEmitter();
+        this.recordingState = new EventEmitter();
+        this.recordingChanged = new EventEmitter();
+        this.isVideo = input();
+        this.useAudio = input();
+        this.fileName = input();
+        this.fileNameFactory = input();
+        this.fileType = input();
+        this.extraClass = input();
+        /**
+         * Seconds
+         */
+        this.recordingNotificationInterval = input(5);
+        this.isBackground = input(false);
+        this.computedRecordingNotificationInterval = computed(() => (this.recordingNotificationInterval() || 5) * 1000);
+        this.isPicture = computed(() => !this.isVideo());
+        this.subject = computed(() => (this.isPicture() ? 'Image' : 'Video'));
+        this.isPaused = toSignal(this.recordingState.pipe(map$1((r) => r == 'paused')));
+        this.computedFileType = computed(() => {
+            const ft = this.fileType(), isp = this.isPicture();
+            return ft || (isp ? 'image/jpeg' : 'video/mp4');
+        });
+        this.computedFileExtension = computed(() => this.computedFileType()?.split('/')[1]);
+        this.computedFileName = computed(() => {
+            const ff = this.fileNameFactory(), fn = this.fileName() || ff?.(this), fx = this.computedFileExtension(), subject = this.subject();
+            return fn?.includes('.' + fx) ? fn : `${fn || subject}.${fx}`;
+        });
+        this.streamingVideoTemplate = viewChild('streamVideoTemp');
+        this.recordingVideoRef = viewChild('recordingVideoTag');
+        this.recordingVideoRefEl = computed(() => this.recordingVideoRef()?.nativeElement);
+        this.streaming = signal(undefined);
+        this.preview = signal(false);
+        this.computedPreview = computed(() => !this.isBackground() && this.preview());
+        // The width and height of the captured photo. We will set the
+        // width to the value defined here, but the height will be
+        // calculated based on the aspect ratio of the input stream.
+        this.width = model(1080); // We will scale the photo width to this
+        this.height = computed(() => {
+            const width = this.width();
+            return width / (4 / 3);
+        }); // This will be computed based on the input stream
+        // The various HTML elements we need to configure or control. These
+        // will be set by the startup() function.
+        this.canvas = signal(undefined);
+        this.mediaFile = signal(undefined);
+        this.photoSrc = signal(undefined);
+        this.videoSrc = signal(undefined);
+        this.stream = signal(undefined);
+        this.isRecording = toSignal(this.recordingState.pipe(map$1((r) => r == 'recording' || r == 'paused')));
+        this.recordedBlobs = [];
+        this.recordedTime = signal(0);
+        this.startRecording = (stream = this.stream()) => {
+            if (!this.isVideo())
+                return;
+            this.recorder = new MediaRecorder(stream);
+            this.recordedBlobs = [];
+            this.recordedTime.set(0);
+            const lengths = [];
+            this.recorder.ondataavailable = (event) => {
+                this.recordedBlobs.push(event.data);
+                this.mediaFile.set(new File(this.recordedBlobs, this.computedFileName(), { type: this.computedFileType() }));
+                lengths.push([this.mediaFile().size, event.data.size]);
+            };
+            // this.recorder.ondataavailable = (event) => {
+            //   this.recordedBlobs = [event.data];
+            //   lengths.push(event.data.size);
+            // };
+            // this.recorder.ondataavailable = (event) => this.recordedBlobs.push(event.data);
+            this.recorder.start();
+            let notifSub;
+            const startTimer = () => {
+                let lastDateTime = Date.now();
+                notifSub = timer(1000, 1000)
+                    .pipe(tap(() => this.recordedTime.update((t) => (t += 1))), tap(() => console.log(Date.now(), this.computedRecordingNotificationInterval(), this.recordingNotificationInterval())), filter(() => Date.now() - lastDateTime > this.computedRecordingNotificationInterval()), tap(() => this.recorder.requestData()))
+                    .subscribe((r) => {
+                    lastDateTime = Date.now();
+                    this.recordingChanged.emit(this.mediaFile());
+                });
+            };
+            this.recorder.onstart = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderStarted.emit(e);
+                startTimer();
+            };
+            this.recorder.onstop = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderStopped.emit(e);
+                console.log('new length', lengths);
+                notifSub?.unsubscribe();
+            };
+            this.recorder.onpause = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                notifSub?.unsubscribe();
+            };
+            this.recorder.onresume = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                startTimer();
+            };
+            this.recorder.onerror = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderErrored.emit(e);
+                notifSub?.unsubscribe();
+            };
+        };
+    }
+    ngAfterViewInit() {
+        this.startUpWebcam();
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    /**
+     * Start the webcam stream
+     */
+    startUpWebcam() {
+        this.clear();
+        navigator.mediaDevices
+            .getUserMedia({ video: true, audio: this.useAudio() })
+            .then((stream) => {
+            this.streaming.set(true);
+            this.canvas.set(document.createElement('canvas'));
+            this.canvas()?.setAttribute('width', this.width() + 'px');
+            this.canvas()?.setAttribute('height', this.height() + 'px');
+            this.stream.set(stream);
+            // debugger;
+        })
+            .catch((err) => {
+            console.error(`An error occurred:`, err);
+        });
+    }
+    /**
+     * Indicate that the user is done with the webcam component.
+     *
+     * Any media obtained will be emitted
+     */
+    save() {
+        if (this.isPicture())
+            new Observable((sub) => this.canvas().toBlob((blob) => {
+                if (blob) {
+                    this.mediaFile.set(new File([blob], this.computedFileName()));
+                    sub.next(this.mediaFile());
+                    sub.complete();
+                }
+                else
+                    sub.error(`No ${this.subject()} file generated`);
+            }, this.computedFileType(), 1)).subscribe(() => {
+                this.closed.emit(this.mediaFile());
+                this.closeWebcam();
+            });
+        else {
+            this.closed.emit(this.mediaFile());
+            this.closeWebcam();
+        }
+    }
+    /**
+     * Indicate that the user is done with the webcam component.
+     *
+     * Any media obtained will be deleted
+     */
+    cancel() {
+        this.closed.emit(null);
+        this.closeWebcam();
+    }
+    /**
+     * Clear the media taken and close preview
+     */
+    clear() {
+        if (this.canvas()) {
+            const context = this.canvas()?.getContext('2d');
+            context.fillStyle = '#AAA';
+            context.fillRect(0, 0, this.canvas().width, this.canvas().height);
+            const data = this.canvas().toDataURL(this.computedFileType());
+            this.photoSrc.set(data);
+            this.streaming.set(true);
+            this.preview.set(false);
+        }
+    }
+    /**
+     * Shutdown the webcam stream
+     */
+    closeWebcam() {
+        this.stream()
+            ?.getTracks()
+            .forEach((x) => x.stop());
+        this.stream.set(undefined);
+        this.streaming.set(undefined);
+        // this.stream.set(this.stream()?.getTracks[0].stop());
+    }
+    /**
+     * Capture a photo by fetching the current contents of the video
+     * and drawing it into a canvas, then converting that to a PNG
+     * format data URL.
+     *
+     * By drawing it on an offscreen canvas and then
+     * drawing that to the screen, we can change its size and/or apply
+     * other changes before drawing it.
+     */
+    takePicture() {
+        if (!this.isPicture())
+            return;
+        const context = this.canvas().getContext('2d'), width = this.width(), height = this.height();
+        if (width && height && context) {
+            this.canvas.update((canvas) => {
+                if (canvas)
+                    canvas.width = width;
+                return canvas;
+            });
+            this.canvas.update((canvas) => {
+                if (canvas)
+                    canvas.height = height;
+                return canvas;
+            });
+            context.drawImage(this.recordingVideoRefEl(), 0, 0, width, height);
+            const data = this.canvas().toDataURL('image/png');
+            this.photoSrc.set(data);
+        }
+        else
+            this.clear();
+        this.streaming.set(false);
+        this.preview.set(true);
+    }
+    stopRecording() {
+        if (this.recorder.state === 'recording')
+            this.recorder.stop();
+        this.preview.set(true);
+        this.streaming.set(false);
+    }
+    pauseRecording() {
+        // debugger;
+        if (this.recorder.state === 'paused')
+            this.recorder.resume();
+        else
+            this.recorder.pause();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WebcamMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: WebcamMediaComponent, isStandalone: true, selector: "lib-webcam-media", inputs: { isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null }, useAudio: { classPropertyName: "useAudio", publicName: "useAudio", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileNameFactory: { classPropertyName: "fileNameFactory", publicName: "fileNameFactory", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, recordingNotificationInterval: { classPropertyName: "recordingNotificationInterval", publicName: "recordingNotificationInterval", isSignal: true, isRequired: false, transformFunction: null }, isBackground: { classPropertyName: "isBackground", publicName: "isBackground", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", recorderStopped: "recorderStopped", recorderErrored: "recorderErrored", recorderStarted: "recorderStarted", recordingState: "recordingState", recordingChanged: "recordingChanged", width: "widthChange" }, viewQueries: [{ propertyName: "streamingVideoTemplate", first: true, predicate: ["streamVideoTemp"], descendants: true, isSignal: true }, { propertyName: "recordingVideoRef", first: true, predicate: ["recordingVideoTag"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n  <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n  @if (!isBackground()) {\n    <div class=\"wm-buttons\">\n      <div class=\"  row row-cols-lg-auto g-3 justify-content-start\">\n        @if (!isRecording()) {\n          <div>\n            <app-btn [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\" (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n          </div>\n        } @else {\n          <div>\n            <app-btn text=\"{{isPaused()?'Play': 'Pause'}} Recording\" (mclick)=\"pauseRecording()\" type=\"outline\" [icon]=\"isPaused()?'play':'pause'\" />\n          </div>\n          <div>\n            <app-btn [text]=\"'Stop Recording'\" (mclick)=\"stopRecording()\" type=\"danger\" icon=\"stop\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #streamVideoTemp>\n  <div class=\"wm-recording-video-cont\">\n    <video #recordingVideoTag [srcObject]=\"stream()\" autoplay class=\"wm-recording-video {{ extraClass() }}\"></video>\n    @if (isRecording()) {\n      <div class=\"wm-recordingDot\"></div>\n    }\n  </div>\n</ng-template>\n\n@if (computedPreview()) {\n  <div class=\"wm-preview\">\n    <div>\n      @if (isPicture()) {\n        <img class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"photoSrc()\" />\n      } @else {\n        <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"mediaFile()\"></video>\n      }\n    </div>\n    <div class=\"mt-3 row row-cols-lg-auto g-3\">\n      <div>\n        <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"clear()\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"save()\" text=\"Done\" type=\"primary\" icon=\"save\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"cancel()\" text=\"Cancel\" type=\"danger\" icon=\"cancel\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}:host .wm-recording-video{width:100%}:host .wm-preview image,:host .wm-preview video{object-fit:contain}:host .wm-recording-video-cont{position:relative}@keyframes wmAnimateDot{0%{background-color:transparent}50%{background-color:#ff000086}}:host .wm-recordingDot{animation-name:wmAnimateDot;animation-duration:1s;animation-iteration-count:infinite;border-radius:5px;--dimen: 20px;width:var(--dimen);height:var(--dimen);position:absolute;top:10px;right:10px}:host .wm-buttons{margin-top:var(--space-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WebcamMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-webcam-media', standalone: true, imports: [CommonModule, BtnComponent], template: "<div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n  <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n  @if (!isBackground()) {\n    <div class=\"wm-buttons\">\n      <div class=\"  row row-cols-lg-auto g-3 justify-content-start\">\n        @if (!isRecording()) {\n          <div>\n            <app-btn [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\" (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n          </div>\n        } @else {\n          <div>\n            <app-btn text=\"{{isPaused()?'Play': 'Pause'}} Recording\" (mclick)=\"pauseRecording()\" type=\"outline\" [icon]=\"isPaused()?'play':'pause'\" />\n          </div>\n          <div>\n            <app-btn [text]=\"'Stop Recording'\" (mclick)=\"stopRecording()\" type=\"danger\" icon=\"stop\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #streamVideoTemp>\n  <div class=\"wm-recording-video-cont\">\n    <video #recordingVideoTag [srcObject]=\"stream()\" autoplay class=\"wm-recording-video {{ extraClass() }}\"></video>\n    @if (isRecording()) {\n      <div class=\"wm-recordingDot\"></div>\n    }\n  </div>\n</ng-template>\n\n@if (computedPreview()) {\n  <div class=\"wm-preview\">\n    <div>\n      @if (isPicture()) {\n        <img class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"photoSrc()\" />\n      } @else {\n        <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"mediaFile()\"></video>\n      }\n    </div>\n    <div class=\"mt-3 row row-cols-lg-auto g-3\">\n      <div>\n        <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"clear()\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"save()\" text=\"Done\" type=\"primary\" icon=\"save\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"cancel()\" text=\"Cancel\" type=\"danger\" icon=\"cancel\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}:host .wm-recording-video{width:100%}:host .wm-preview image,:host .wm-preview video{object-fit:contain}:host .wm-recording-video-cont{position:relative}@keyframes wmAnimateDot{0%{background-color:transparent}50%{background-color:#ff000086}}:host .wm-recordingDot{animation-name:wmAnimateDot;animation-duration:1s;animation-iteration-count:infinite;border-radius:5px;--dimen: 20px;width:var(--dimen);height:var(--dimen);position:absolute;top:10px;right:10px}:host .wm-buttons{margin-top:var(--space-16)}\n"] }]
+        }], propDecorators: { closed: [{
+                type: Output
+            }], recorderStopped: [{
+                type: Output
+            }], recorderErrored: [{
+                type: Output
+            }], recorderStarted: [{
+                type: Output
+            }], recordingState: [{
+                type: Output
+            }], recordingChanged: [{
+                type: Output
+            }] } });
+
+class FileUploadComponent {
+    set _accept(v) {
+        switch (v) {
+            case 'image':
+                this.accept = '.png,.jpg,.docx,.pdf';
+                break;
+            default:
+                this.accept = v;
+                break;
+        }
+    }
+    constructor() {
+        this.mediaWidth = model(1080);
+        this.class = input();
+        this.useWebcam = input(false);
+        /**
+         * Only useful if using the webcam option
+         */
+        this.fileName = input();
+        this.mini = input(true);
+        this.listFiles = input(true);
+        this.fileChange = new EventEmitter();
+        this.filesChange = new EventEmitter();
+        this.uS = inject(UtilityService);
+    }
+    ngOnInit() { }
+    get isSingle() {
+        return !this.multiple;
+    }
+    acceptFiles(...files) {
+        this.files = files;
+        this.file = files ? files[0] : null;
+        this.emitFiles();
+    }
+    emitFiles() {
+        if (this.multiple)
+            this.filesChange.emit(this.files);
+        else
+            this.fileChange.emit(this.file);
+    }
+    onUpload(event) {
+        const files = Array.from(event.target.files);
+        this.acceptFiles(...files);
+    }
+    removeFile(index) {
+        this.files.splice(index, 1);
+        this.file = this.files ? this.files[0] : null;
+        this.fileChange.emit(this.file);
+        this.filesChange.emit(this.files);
+    }
+    openDialog() {
+        const inp = document.createElement('input');
+        inp.type = 'file';
+        inp.accept = this.accept;
+        inp.multiple = this.multiple;
+        inp.onchange = (e) => {
+            this.onUpload(e);
+            inp.remove();
+        };
+        // document.body.appendChild(inp);
+        inp.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, mediaWidth: { classPropertyName: "mediaWidth", publicName: "mediaWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, useWebcam: { classPropertyName: "useWebcam", publicName: "useWebcam", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, useDocumentModal: { classPropertyName: "useDocumentModal", publicName: "useDocumentModal", isSignal: false, isRequired: false, transformFunction: null }, listFiles: { classPropertyName: "listFiles", publicName: "listFiles", isSignal: true, isRequired: false, transformFunction: null }, _accept: { classPropertyName: "_accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mediaWidth: "mediaWidthChange", fileChange: "fileChange", filesChange: "filesChange" }, ngImport: i0, template: "@if (listFiles()) {\n  <div [ngClass]=\"{ meta: mini() }\" class=\"{{ class() }} form-label mb-2 hide-scroll\">\n    @for (item of files; track item) {\n      <div class=\"row align-items-start mb-1\">\n        <div class=\"col\">\n          <div class=\"hide-scroll file-name\">\n            {{ item?.name }}\n          </div>\n        </div>\n        <div class=\"col-auto text-end\">\n          <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index)\"></span>\n        </div>\n      </div>\n    }\n  </div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn\n  icon=\"upload\"\n  (mclick)=\"useWebcam() ? null : openDialog()\"\n  [type]=\"file ? 'primary' : 'secondary'\"\n  [disabled]=\"disabled\"\n  [help]=\"help\"\n  [text]=\"label\"\n  [matMenuTriggerFor]=\"useWebcam() ? menu : null\" />\n\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"openDialog()\">Upload</button>\n  <button mat-menu-item (click)=\"webcamModal.open()\">Use Camera</button>\n</mat-menu>\n\n<modal-comp #webcamModal width=\"1080px\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); acceptFiles($event)\" />\n  </ng-template>\n</modal-comp>\n", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: WebcamMediaComponent, selector: "lib-webcam-media", inputs: ["isVideo", "useAudio", "fileName", "fileNameFactory", "fileType", "extraClass", "recordingNotificationInterval", "isBackground", "width"], outputs: ["closed", "recorderStopped", "recorderErrored", "recorderStarted", "recordingState", "recordingChanged", "widthChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-upload', standalone: true, imports: [NgIf, NgClass, NgFor, BtnComponent, ModalComponents, MatMenuModule, WebcamMediaComponent], template: "@if (listFiles()) {\n  <div [ngClass]=\"{ meta: mini() }\" class=\"{{ class() }} form-label mb-2 hide-scroll\">\n    @for (item of files; track item) {\n      <div class=\"row align-items-start mb-1\">\n        <div class=\"col\">\n          <div class=\"hide-scroll file-name\">\n            {{ item?.name }}\n          </div>\n        </div>\n        <div class=\"col-auto text-end\">\n          <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index)\"></span>\n        </div>\n      </div>\n    }\n  </div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn\n  icon=\"upload\"\n  (mclick)=\"useWebcam() ? null : openDialog()\"\n  [type]=\"file ? 'primary' : 'secondary'\"\n  [disabled]=\"disabled\"\n  [help]=\"help\"\n  [text]=\"label\"\n  [matMenuTriggerFor]=\"useWebcam() ? menu : null\" />\n\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"openDialog()\">Upload</button>\n  <button mat-menu-item (click)=\"webcamModal.open()\">Use Camera</button>\n</mat-menu>\n\n<modal-comp #webcamModal width=\"1080px\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); acceptFiles($event)\" />\n  </ng-template>\n</modal-comp>\n", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { help: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], useDocumentModal: [{
+                type: Input
+            }], _accept: [{
+                type: Input,
+                args: ['accept']
+            }], file: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], files: [{
+                type: Input
+            }], filesChange: [{
+                type: Output
+            }] } });
+
 class FieldsToDisplayComponent {
     set _fields(v) {
         this.allFields.set(cloneDeep(v).map((x) => {
@@ -17916,5 +18185,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundModule, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FindItemModule, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, ImageLoaderDirective, ImageUpload, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MrouterLinkirective, NarrationHistoryCompComponent, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberComponent as PhoneNumberModule, PhoneNumberService, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableCol, TableHttpsComponent, TableHttpsComponent as TableHttpsModule, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TablePlainComponent as TablePlainModule, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipe, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
+export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundModule, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FindItemModule, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, ImageLoaderDirective, ImageUpload, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MrouterLinkirective, NarrationHistoryCompComponent, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberComponent as PhoneNumberModule, PhoneNumberService, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableCol, TableHttpsComponent, TableHttpsComponent as TableHttpsModule, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TablePlainComponent as TablePlainModule, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipe, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
 //# sourceMappingURL=ets-fe-ng-sdk.mjs.map