@planeasyinc/le-angular 0.0.21 → 0.0.22

package/dist/fesm2022/planeasyinc-le-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
+import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, switchMap, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
 import { Location, UpperCasePipe, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
 import { CdkDrag } from '@angular/cdk/drag-drop';
@@ -1784,19 +1784,69 @@ const getTabJSONControl = (control, engine) => {
     });
     return result;
 };
+const mapValueToString = (value) => {
+    if (typeof value === 'object' && value !== null) {
+        if (Array.isArray(value)) {
+            return value.map((chunk) => mapValueToString(chunk)).join('\n');
+        }
+        else {
+            return mapValueToString(Object.entries(value));
+        }
+    }
+    return `${value}`;
+};
+
+class ToastListItemComponent {
+    _engine = signal(null);
+    _sections = signal([]);
+    controls = input.required();
+    actions = output();
+    engine = this._engine.asReadonly();
+    sections = this._sections.asReadonly();
+    constructor() {
+        effect((onCleanup) => {
+            const controls = this.controls();
+            const form = adaptForm(controls);
+            const engine = createEngine(form);
+            let cleanup = () => { };
+            untracked(() => {
+                this._engine.set(engine);
+                this._sections.set(form.sections ?? []);
+                cleanup = engine.on('action', ({ action }) => {
+                    const actionObj = action;
+                    this.actions.emit(actionObj.actions);
+                });
+            });
+            onCleanup(() => {
+                cleanup();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListItemComponent, isStandalone: true, selector: "le-toast-list-item", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actions: "actions" }, ngImport: i0, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-toast-list-item', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class ToastListComponent {
     toastService = inject(LeToastService);
     toasts = this.toastService.toasts;
-    onButtonClick(actions) {
-        actions.forEach((action) => this.toastService.processAction(action));
+    onActions(actions) {
+        actions.forEach((action) => {
+            this.toastService.action$.next(action);
+            if (action.type === 'close_popup') {
+                this.toastService.remove(action.target_id);
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ToastListItemComponent, selector: "le-toast-list-item", inputs: ["controls"], outputs: ["actions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
-            args: [{ template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ imports: [ToastListItemComponent], template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
 let ID = 100_000_000;
@@ -1805,6 +1855,7 @@ class LeToastService {
     overlay = inject(Overlay);
     _toasts = signal([]);
     toasts = this._toasts.asReadonly();
+    action$ = new Subject();
     constructor() {
         effect(() => {
             const toasts = this._toasts();
@@ -1834,11 +1885,6 @@ class LeToastService {
     remove(id) {
         this._toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
     }
-    processAction(action) {
-        if (action.type === 'close_popup') {
-            this.remove(action.target);
-        }
-    }
     show() {
         if (this.overlayRef)
             return;
@@ -1854,19 +1900,26 @@ class LeToastService {
     }
     buildToast(type, messages) {
         const id = `${type}_${ID++}`;
-        const textControls = messages.map((message) => ({
-            type: 'text',
+        return {
+            id,
+            type,
+            controls: [...this.buildTextControls(id, messages), this.buildButtonControl(id)],
+        };
+    }
+    buildTextControls(id, messages) {
+        return messages.map((message, index) => ({
+            type: 'paragraph',
             value: message,
+            name: `${id}_${index}`
         }));
-        const buttonControl = {
+    }
+    buildButtonControl(id) {
+        return {
             type: 'button',
             label: 'Ok',
-            actions: [{ type: 'close_popup', target: id }],
-        };
-        return {
-            id,
-            type,
-            controls: [...textControls, buttonControl],
+            hideLabel: true,
+            name: `${id}_button`,
+            actions: [{ type: 'close_popup', target_id: id }],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2118,13 +2171,18 @@ class FormViewComponent {
             this.viewportScroller.scrollToPosition([0, 0]);
             return of(null);
         },
-        show_popup: (action) => {
+        show_popup: (action, response) => {
             this.toastService.notify({
-                ...action.item,
+                controls: this.populatePopupControlsWithResponse(action.controls, response),
+                id: action.id,
                 type: 'success',
             });
             return of(null);
         },
+        close_popup: (action) => {
+            this.toastService.remove(action.target_id);
+            return of(null);
+        },
         open_url: (action) => {
             window.open(action.url, '_blank');
             return of(null);
@@ -2199,6 +2257,9 @@ class FormViewComponent {
                 this.init(form);
             });
         });
+        this.toastService.action$
+            .pipe(switchMap((action) => this.processAction(action)), takeUntilDestroyed())
+            .subscribe();
     }
     init(form) {
         this._sections.set(this.sortSections(form.sections));
@@ -2294,6 +2355,19 @@ class FormViewComponent {
         }))
             .subscribe();
     }
+    populatePopupControlsWithResponse(controls, response) {
+        return controls.map((control) => {
+            if (isPlaceholder(control.value)) {
+                const path = getPlaceholderValue(control.value);
+                const value = mapValueToString(getValueByPath({ response }, path));
+                return {
+                    ...control,
+                    value,
+                };
+            }
+            return control;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormViewComponent, isStandalone: true, selector: "form-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss", "config"], outputs: ["event"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }