@unipin/angular-applet 18.6.20 → 18.7.0

package/fesm2022/unipin-angular-applet.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@ionic/angular';
 import { IonButton, IonicModule } from '@ionic/angular';
 import * as i1$2 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
-import { Subject, fromEvent, distinctUntilChanged, debounceTime, tap, switchMap, map, catchError, of, concat, filter, throwError } from 'rxjs';
+import { Subject, fromEvent, filter, distinctUntilChanged, debounceTime, tap, switchMap, map, catchError, of, concat, throwError } from 'rxjs';
 import { Location, DatePipe, AsyncPipe, NgStyle, NgTemplateOutlet, formatDate, JsonPipe } from '@angular/common';
 import { bootstrapApplication, createApplication } from '@angular/platform-browser';
 import { createCustomElement } from '@angular/elements';
@@ -398,13 +398,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }] }, { type: i0.ChangeDetectorRef }, { type: PermissionService }] });
 
 class LazyRouteDirective {
-    constructor(vcr) {
+    constructor(router, vcr, route) {
+        this.router = router;
         this.vcr = vcr;
+        this.route = route;
     }
     ngOnInit() {
-        this.loadRoute.loadComponent().then((m) => this.vcr.createComponent(m));
+        this.loadRoute.loadComponent().then((m) => {
+            const cr = this.vcr.createComponent(m);
+            this.setInput(cr);
+            this.sub?.unsubscribe();
+            this.sub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd), distinctUntilChanged((prev, curr) => {
+                const prevUrl = prev.urlAfterRedirects.split('#')[0];
+                const currUrl = curr.urlAfterRedirects.split('#')[0];
+                return prevUrl === currUrl;
+            })).subscribe({
+                next: () => {
+                    this.setInput(cr);
+                }
+            });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyRouteDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    setInput(cr) {
+        const params = this.route.firstChild?.snapshot.params;
+        if (Object.keys(params).length === 0 &&
+            params.constructor === Object) {
+            this.sub?.unsubscribe();
+            return;
+        }
+        Object.keys(params).forEach((key) => {
+            if (key in (cr.instance)) {
+                cr.setInput(key, params[key]);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyRouteDirective, deps: [{ token: i1$2.Router }, { token: i0.ViewContainerRef }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LazyRouteDirective, isStandalone: true, selector: "[loadRoute]", inputs: { loadRoute: "loadRoute" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyRouteDirective, decorators: [{
@@ -413,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     standalone: true,
                     selector: '[loadRoute]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { loadRoute: [{
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ViewContainerRef }, { type: i1$2.ActivatedRoute }], propDecorators: { loadRoute: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -475,7 +506,7 @@ class ColumnContainerComponent {
         this.colSize = window.innerWidth <= 768 ? 100 : 50;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnContainerComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split \n    [gutterSize]=\"0\"\n    [disabled]=\"true\" \n    [useTransition]=\"true\" \n>\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area \n            class=\"border-start\"\n            [attr.order]=\"i\"\n            [size]=\"colSize\" \n            [visible]=\"a.visible\"\n        >\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: LazyRouteDirective, selector: "[loadRoute]", inputs: ["loadRoute"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split \n    [gutterSize]=\"0\"\n    [disabled]=\"true\" \n    [useTransition]=\"true\"\n>\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area \n            class=\"border-start\"\n            [size]=\"colSize\"\n            [visible]=\"a.visible\"\n        >\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: LazyRouteDirective, selector: "[loadRoute]", inputs: ["loadRoute"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnContainerComponent, decorators: [{
             type: Component,
@@ -484,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     }, imports: [
                         AngularSplitModule,
                         LazyRouteDirective
-                    ], template: "<as-split \n    [gutterSize]=\"0\"\n    [disabled]=\"true\" \n    [useTransition]=\"true\" \n>\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area \n            class=\"border-start\"\n            [attr.order]=\"i\"\n            [size]=\"colSize\" \n            [visible]=\"a.visible\"\n        >\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n" }]
+                    ], template: "<as-split \n    [gutterSize]=\"0\"\n    [disabled]=\"true\" \n    [useTransition]=\"true\"\n>\n    @for (a of areas; track $index; let i = $index) {\n        <as-split-area \n            class=\"border-start\"\n            [size]=\"colSize\"\n            [visible]=\"a.visible\"\n        >\n            <ng-container [loadRoute]=\"a.route\" />\n        </as-split-area>\n    }\n</as-split>\n" }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { checkScreen: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -2058,6 +2089,16 @@ class ProfileService {
               isInternal
               status
             }
+            departments {
+              department {
+                hierarchyCode
+                hierarchyPath
+                name
+                guid
+                status
+              }
+              isLead
+            }
           }
         }
       `,
@@ -2110,6 +2151,16 @@ class AuthService {
               isInternal
               status
             }
+            departments {
+              department {
+                hierarchyCode
+                hierarchyPath
+                name
+                guid
+                status
+              }
+              isLead
+            }
           }
         }
       `
@@ -2563,12 +2614,16 @@ class FilterComponent {
         this.initialItems = new Map();
     }
     ngOnInit() {
-        this.config.fields.forEach(({ key, initialValue }) => {
-            if (typeof key === 'string')
-                this.createFormControl(key, initialValue);
-            else {
+        this.config.fields.forEach(({ key, initialValue, initialItems }) => {
+            if (typeof key !== 'string') {
                 key.forEach((k, i) => this.createFormControl(k, initialValue?.at(i)));
             }
+            else {
+                if (initialItems) {
+                    this.initialItems.set(key, initialItems);
+                }
+                this.createFormControl(key, initialValue);
+            }
         });
         const savedState = localStorage.getItem(`${this.id}`);
         if (savedState) {
@@ -2613,10 +2668,13 @@ class FilterComponent {
         this.close();
     }
     processFilter(key, value) {
+        if (Array.isArray(value)) {
+            value = value[0];
+        }
         const initialItem = this.initialItems.get(key)?.find(item => item.value === value);
         const label = initialItem
             ? `${key}: ${initialItem.label}`
-            : `${key}: ${key.includes('date') ? formatDate(value, 'dd MMM yyyy', 'en-US') : value}`;
+            : `${key}: ${key.toLowerCase().includes('date') ? formatDate(value, 'dd MMM yyyy', 'en-US') : value}`;
         this.activeFilter.push({ key, value, label });
     }
     add() {
@@ -2666,19 +2724,23 @@ class FilterComponent {
             extraAction?.(k, f[k]);
         });
         this.onSearch.emit({ mode: this.config.mode, data: flag ? data : null });
-        localStorage.setItem(`${this.id}`, JSON.stringify({
-            activeFilter: this.activeFilter,
-            initialItems: Object.fromEntries(this.initialItems),
-            formValues: this.form.getRawValue()
-        }));
+        this.saveState();
     }
     createFormControl(key, val) {
         this.form.addControl(key, new FormControl(''));
         if (val) {
             this.form.controls[key].setValue(val);
-            this.activeFilter.push({ label: `${key}:${val}`, key, value: val });
+            this.processFilter(key, val);
+            this.saveState();
         }
     }
+    saveState() {
+        localStorage.setItem(`${this.id}`, JSON.stringify({
+            activeFilter: this.activeFilter,
+            initialItems: Object.fromEntries(this.initialItems),
+            formValues: this.form.getRawValue()
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n    @if (activeFilter.length > 0) {\n        <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n            @for (item of activeFilter; track item.key; let i = $index) {\n                <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n                    <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n                    {{ item.label }}\n                </div>\n            }\n        </div>\n    }\n\n    <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n    <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n    <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n    \n    <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n        <ng-template>\n            <div class=\"d-flex flex-column filter overflow-auto\">\n                <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n                    <ion-buttons>\n                        <ion-button size=\"small\" (click)=\"close()\">\n                            <ion-icon slot=\"icon-only\" name=\"close\" />\n                        </ion-button>\n                    </ion-buttons>\n        \n                    <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n                </div>\n        \n                <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n                    @for (c of config.fields; track c.key) {\n                        @switch (c.type) {\n                            @case ('number') {\n                                <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n\n                            @case ('checkbox') {\n                                <div class=\"my-4\">\n                                    <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n                                </div>\n                            }\n\n                            @case ('date-range') {\n                                <div class=\"d-flex gap-3 my-4\">\n                                    <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n                                    <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n                                </div>\n                            }\n\n                            @case ('select') { \n                                <up-select \n                                    class=\"my-4\"\n                                    appendTo=\"body\" \n                                    label=\"{{ c.label }}\" \n                                    formControlName=\"{{ c.key }}\" \n                                    [items]=\"c.options!\"\n                                    [multiple]=\"c.multiple || false\"\n                                /> \n                            }\n\n                            @case ('searchable-select') { \n                                <up-searchable-select \n                                    class=\"my-4\" \n                                    appendTo=\"body\" \n                                    label=\"{{ c.label }}\" \n                                    formControlName=\"{{ c.key }}\" \n                                    [queryFunc]=\"c.getOptions!\" \n                                    [initialItems]=\"c.options! || initialItems.get(c.key.toString())!\"\n                                    [multiple]=\"c.multiple || false\"\n                                    (onChange)=\"applyInitialItems($event, c.key.toString())\"\n                                /> \n                            }\n                            \n                            @default { \n                                <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n                            }\n                        }\n                    }\n                </form>\n        \n                <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n                    <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n                    <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n                </div>\n            </div>\n        </ng-template>\n     </ion-popover>    \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled", "presentation", "minDate", "maxDate"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "addTag", "disabled", "searchable", "bindLabel", "bindValue", "appendTo"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue", "appendTo"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }