ets-fe-ng-sdk 17.0.310 → 17.0.312

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

@@ -12124,81 +12124,81 @@ class WebcamMediaComponent {
         // will be set by the startup() function.
         this.canvas = signal(undefined);
         this.mediaFile = signal(undefined);
-        this.photoSrc = signal(undefined);
-        this.videoSrc = signal(undefined);
+        this.mediaFileLink = computed(() => (this.mediaFile() ? URL.createObjectURL(this.mediaFile()) : undefined));
         this.stream = signal(undefined);
         this.isRecording = toSignal(this.recordingState.pipe(map$1((r) => r == 'recording' || r == 'paused')));
         this.recordedBlobs = [];
-        this.recordedTime = signal(0);
+        /**In Milliseconds */
+        this.recordedTimeMS = signal(0);
+        this.recordedTime = computed(() => Math.round(this.recordedTimeMS() / 1000));
+        this.loading = signal(false);
         this.startRecording = (stream = this.stream()) => {
             if (!this.isVideo())
                 return;
             this.recorder = new MediaRecorder(stream);
             this.recordedBlobs = [];
-            this.recordedTime.set(0);
-            const lengths = [];
+            this.recordedTimeMS.set(0);
+            const startTime = Date.now();
             this.recorder.ondataavailable = (event) => {
                 this.recordedBlobs.push(event.data);
+                this.recordedTimeMS.set(Date.now() - startTime);
                 this.mediaFile.set(new File(this.recordedBlobs, this.computedFileName(), { type: this.computedFileType() }));
-                lengths.push([this.mediaFile().size, event.data.size]);
+                this.recordingChanged.emit(this.mediaFile());
             };
             // 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.start(this.computedRecordingNotificationInterval());
             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();
             };
         };
+        this.extractImg = 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));
     }
     ngAfterViewInit() {
         this.startUpWebcam();
     }
     ngOnDestroy() {
         this.sub?.unsubscribe();
+        this.closeWebcam();
     }
     /**
      * Start the webcam stream
      */
     startUpWebcam() {
+        this.loading.set(true);
         this.clear();
         navigator.mediaDevices
             .getUserMedia({ video: true, audio: this.useAudio() })
             .then((stream) => {
             this.streaming.set(true);
+            this.loading.set(false);
+            // stream.onaddtrack = () => this.loading.set(false);
             this.canvas.set(document.createElement('canvas'));
             this.canvas()?.setAttribute('width', this.width() + 'px');
             this.canvas()?.setAttribute('height', this.height() + 'px');
@@ -12216,15 +12216,7 @@ class WebcamMediaComponent {
      */
     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.extractImg.subscribe(() => {
                 this.closed.emit(this.mediaFile());
                 this.closeWebcam();
             });
@@ -12251,11 +12243,18 @@ class WebcamMediaComponent {
             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.mediaFile.set(undefined);
+            // this.photoSrc.set(data);
             this.streaming.set(true);
             this.preview.set(false);
         }
     }
+    retake() {
+        if (!this.stream())
+            this.startUpWebcam();
+        else
+            this.clear();
+    }
     /**
      * Shutdown the webcam stream
      */
@@ -12292,8 +12291,9 @@ class WebcamMediaComponent {
                 return canvas;
             });
             context.drawImage(this.recordingVideoRefEl(), 0, 0, width, height);
-            const data = this.canvas().toDataURL('image/png');
-            this.photoSrc.set(data);
+            this.extractImg.subscribe();
+            // const data = this.canvas()!.toDataURL('image/png');
+            // this.photoSrc.set(data);
         }
         else
             this.clear();
@@ -12314,11 +12314,11 @@ class WebcamMediaComponent {
             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"] }] }); }
+    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: "<loader [loading]=\"loading()\">\n  <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-center\">\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\n                text=\"{{ isPaused() ? 'Play' : 'Pause' }} Recording\"\n                (mclick)=\"pauseRecording()\"\n                type=\"outline\"\n                [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]=\"mediaFileLink()\" />\n        } @else {\n          <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" controls autoplay [src]=\"mediaFileLink()\"></video>\n        }\n      </div>\n      <div class=\"mt-3 row row-cols-lg-auto justify-content-center g-3\">\n        <div>\n          <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"retake()\" />\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</loader>\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"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }] }); }
 }
 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"] }]
+            args: [{ selector: 'lib-webcam-media', standalone: true, imports: [CommonModule, BtnComponent, LoaderComponent], template: "<loader [loading]=\"loading()\">\n  <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-center\">\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\n                text=\"{{ isPaused() ? 'Play' : 'Pause' }} Recording\"\n                (mclick)=\"pauseRecording()\"\n                type=\"outline\"\n                [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]=\"mediaFileLink()\" />\n        } @else {\n          <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" controls autoplay [src]=\"mediaFileLink()\"></video>\n        }\n      </div>\n      <div class=\"mt-3 row row-cols-lg-auto justify-content-center g-3\">\n        <div>\n          <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"retake()\" />\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</loader>\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: [{
@@ -12396,11 +12396,11 @@ class FileUploadComponent {
         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"] }] }); }
+    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\" [showFooter]=\"false\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); $event ? acceptFiles($event) : null\" />\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"] }]
+            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\" [showFooter]=\"false\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); $event ? acceptFiles($event) : null\" />\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: [{