@ecodev/natural 47.0.1 → 47.2.0

package/fesm2020/ecodev-natural.mjs

@@ -5,7 +5,7 @@ import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith,
 import * as i3 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, UntypedFormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/router';
-import { Router, ActivatedRoute, NavigationStart, NavigationEnd, RouterModule, NavigationError, DefaultUrlSerializer } from '@angular/router';
+import { Router, ActivatedRoute, NavigationStart, NavigationEnd, PRIMARY_OUTLET, RouterModule, NavigationError, DefaultUrlSerializer } from '@angular/router';
 import { merge, isArray, pickBy, isEmpty, cloneDeep, uniq, groupBy, mergeWith, defaultsDeep, omit, kebabCase, clone, pick, isEqual, defaults, isObject, intersection, flatten, differenceWith } from 'lodash-es';
 import * as i1 from '@angular/material/legacy-dialog';
 import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
@@ -5107,6 +5107,9 @@ class NaturalIconComponent {
         this.fontSize = 24;
         this.labelColor = 'accent';
         this.labelPosition = 'top-right';
+        this.icon = {
+            name: '',
+        };
         this.registerIcons(config);
     }
     set name(value) {
@@ -5142,10 +5145,10 @@ class NaturalIconComponent {
     }
 }
 NaturalIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalIconComponent, deps: [{ token: i1$6.MatIconRegistry }, { token: i2$2.DomSanitizer }, { token: IconsConfigService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalIconComponent, selector: "natural-icon", inputs: { label: "label", labelColor: "labelColor", labelPosition: "labelPosition", name: "name", size: "size" }, host: { properties: { "style.color": "this.fgColor", "class.material-icons": "this.isMaterialIcon", "class.mat-icon": "this.isIcon", "style.min-width.px": "this.width", "style.min-height.px": "this.height", "style.font-size.px": "this.fontSize" } }, ngImport: i0, template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon.class\" data-nosnippet>{{ icon.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+NaturalIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalIconComponent, selector: "natural-icon", inputs: { label: "label", labelColor: "labelColor", labelPosition: "labelPosition", name: "name", size: "size" }, host: { properties: { "style.color": "this.fgColor", "class.material-icons": "this.isMaterialIcon", "class.mat-icon": "this.isIcon", "style.min-width.px": "this.width", "style.min-height.px": "this.height", "style.font-size.px": "this.fontSize" } }, ngImport: i0, template: "<mat-icon *ngIf=\"icon.font\" [class]=\"icon.class\" [fontIcon]=\"icon.font\"></mat-icon>\n<mat-icon *ngIf=\"icon.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-icon', template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon.class\" data-nosnippet>{{ icon.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"] }]
+            args: [{ selector: 'natural-icon', template: "<mat-icon *ngIf=\"icon.font\" [class]=\"icon.class\" [fontIcon]=\"icon.font\"></mat-icon>\n<mat-icon *ngIf=\"icon.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$6.MatIconRegistry }, { type: i2$2.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IconsConfigService]
@@ -5734,6 +5737,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                 }]
         }] });
 
+class NaturalDialogTriggerComponent {
+    constructor(dialog, route, router) {
+        this.dialog = dialog;
+        this.route = route;
+        this.router = router;
+        // Data from activated route
+        this.triggerConfig = this.route.snapshot.data.trigger;
+        // Get data relative to dialog service configuration
+        const { data, ...config } = this.triggerConfig.dialogConfig;
+        const dialogConfig = {
+            ...config,
+            data: {
+                data: data,
+                // Set data accessible into component instantiated by the dialog service
+                activatedRoute: this.route,
+            },
+        };
+        this.dialogRef = this.dialog.open(this.triggerConfig.component, dialogConfig);
+        // Redirect on closing (if applicable)
+        this.dialogRef.beforeClosed().subscribe(exitValue => this.redirect(exitValue));
+    }
+    /**
+     * Called when router leaves route, and so on, closes the modal with undefined value to prevent a new redirection
+     */
+    ngOnDestroy() {
+        if (this.dialogRef) {
+            this.dialogRef.close(-1); // -1 = no redirection
+        }
+    }
+    /**
+     * Redirects on modal closing under following rules/conditions
+     *
+     * If -1 : no redirection
+     * If undefined, null or empty string : uses the router provided redirection route or fallbacks on parent route if router don't provide
+     * If a value is provided, should be of type any[] and it's used for redirection.
+     */
+    redirect(exitValue) {
+        const isEmptyExitValue = exitValue == null || exitValue === ''; // undefined, null or ''
+        if (exitValue === -1) {
+            // if -1, don't redirect
+            return;
+        }
+        else if (!isEmptyExitValue) {
+            // If value provided, redirect to that route
+            this.router.navigate(exitValue);
+        }
+        else if (isEmptyExitValue && this.triggerConfig.afterClosedRoute) {
+            // If value is not provided (null) and router context specified default redirection route, use it
+            this.router.navigate(this.triggerConfig.afterClosedRoute);
+        }
+        else if (isEmptyExitValue) {
+            // If neither of component or router provides redirection, go to parent (care : parent can't have empty path : ''),
+            this.router.navigate(['.'], { relativeTo: this.route.parent });
+        }
+    }
+}
+NaturalDialogTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [{ token: i1.MatLegacyDialog }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+NaturalDialogTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalDialogTriggerComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatLegacyDialog }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }]; } });
+
 const NATURAL_SEO_CONFIG = new InjectionToken('Configuration for SEO service');
 function stripTags(str) {
     return str.replace(/<\/?[^>]+>/g, '');
@@ -5747,7 +5815,10 @@ function stripTags(str) {
  *
  * The full title has the following structure:
  *
- *     page title - extra part - app name
+ *     dialog title - page title - extra part - app name
+ *
+ * `dialog title` only exists if a `NaturalDialogTriggerComponent` is currently open, and that some SEO is
+ * configured for it in the routing.
  */
 class NaturalSeoService {
     constructor(config, router, titleService, metaTagService) {
@@ -5756,9 +5827,19 @@ class NaturalSeoService {
         this.titleService = titleService;
         this.metaTagService = metaTagService;
         this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-            this.routeData = this.getRouteData(this.router.routerState.root.snapshot);
+            const root = this.router.routerState.root.snapshot;
+            this.routeData = this.getRouteData(root);
             const seo = this.routeData.seo ?? { title: '' };
-            const basic = this.toBasic(seo);
+            const dialogRouteData = this.getDialogRouteData(root);
+            const dialogSeo = dialogRouteData?.seo;
+            let basic = this.toBasic(seo, this.routeData);
+            if (dialogRouteData && dialogSeo) {
+                const dialogBasic = this.toBasic(dialogSeo, dialogRouteData);
+                basic = {
+                    ...dialogBasic,
+                    title: this.join([dialogBasic.title, basic.title]),
+                };
+            }
             this.update(basic);
         });
     }
@@ -5775,10 +5856,10 @@ class NaturalSeoService {
         // Title
         const parts = [
             seo.title,
-            this.config.extraPart && this.routeData ? this.config.extraPart(this.routeData) : null,
+            this.config.extraPart && this.routeData ? this.config.extraPart(this.routeData) : '',
             this.config.applicationName,
         ];
-        const title = parts.filter(s => !!s).join(' - ');
+        const title = this.join(parts);
         this.titleService.setTitle(title);
         // Description
         const description = seo?.description ?? this.config.defaultDescription;
@@ -5787,6 +5868,9 @@ class NaturalSeoService {
         const robots = seo?.robots ?? this.config.defaultRobots;
         this.updateTag('robots', robots);
     }
+    join(parts) {
+        return parts.filter(s => !!s).join(' - ');
+    }
     updateTag(name, value) {
         if (value) {
             this.metaTagService.updateTag({
@@ -5806,18 +5890,30 @@ class NaturalSeoService {
             return this.getRouteData(route.firstChild);
         }
         else {
-            return route.data ?? null;
+            return route.data;
         }
     }
-    toBasic(seo) {
-        if (!this.routeData) {
-            throw new Error('Must have some route data to get basic SEO');
+    /**
+     * Returns the data from the `NaturalDialogTriggerComponent` if one is open
+     */
+    getDialogRouteData(route) {
+        if (route.component === NaturalDialogTriggerComponent && route.outlet !== PRIMARY_OUTLET) {
+            return route.data;
+        }
+        for (const child of route.children) {
+            const data = this.getDialogRouteData(child);
+            if (data) {
+                return data;
+            }
         }
+        return null;
+    }
+    toBasic(seo, routeData) {
         if (typeof seo === 'function') {
-            return seo(this.routeData);
+            return seo(routeData);
         }
         else if ('resolveKey' in seo) {
-            const data = this.routeData[seo.resolveKey];
+            const data = routeData[seo.resolveKey];
             if (!data) {
                 throw new Error('Could not find resolved data for SEO service with key: ' + seo.resolveKey);
             }
@@ -8172,6 +8268,12 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     constructor(hierarchicSelectorDialogService, ngControl) {
         super(ngControl);
         this.hierarchicSelectorDialogService = hierarchicSelectorDialogService;
+        /**
+         * Configuration for hierarchic relations
+         *
+         * It should be an array with at least one element with `selectableAtKey` configured, otherwise the selector will never open.
+         */
+        this.config = null;
         /**
          * The selected value as an object. The internal value is `internalCtrl.value`, and that is a string.
          */
@@ -8205,11 +8307,14 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
         if (this.lockOpenDialog) {
             return;
         }
+        const selectAtKey = this.getSelectKey();
+        if (!selectAtKey || !this.config) {
+            return;
+        }
         this.lockOpenDialog = true;
         if (this.onTouched) {
             this.onTouched();
         }
-        const selectAtKey = this.getSelectKey();
         const selected = {};
         if (this.internalCtrl.value) {
             selected[selectAtKey] = [this.value];
@@ -8237,14 +8342,10 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
         });
     }
     showSelectButton() {
-        return !!(this.internalCtrl?.enabled && this.selectLabel && this.config);
+        return !!(this.internalCtrl?.enabled && this.selectLabel && this.getSelectKey());
     }
     getSelectKey() {
-        const selectKey = this.config.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
-        if (!selectKey) {
-            throw new Error('Hierarchic selector must be configured with at least one selectableAtKey');
-        }
-        return selectKey;
+        return this.config?.filter(c => !!c.selectableAtKey)[0]?.selectableAtKey;
     }
 }
 NaturalSelectHierarchicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [{ token: NaturalHierarchicSelectorDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -10370,71 +10471,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
  * Public API Surface of natural
  */
 
-class NaturalDialogTriggerComponent {
-    constructor(dialog, route, router) {
-        this.dialog = dialog;
-        this.route = route;
-        this.router = router;
-        // Data from activated route
-        this.triggerConfig = this.route.snapshot.data.trigger;
-        // Get data relative to dialog service configuration
-        const { data, ...config } = this.triggerConfig.dialogConfig;
-        const dialogConfig = {
-            ...config,
-            data: {
-                data: data,
-                // Set data accessible into component instantiated by the dialog service
-                activatedRoute: this.route,
-            },
-        };
-        this.dialogRef = this.dialog.open(this.triggerConfig.component, dialogConfig);
-        // Redirect on closing (if applicable)
-        this.dialogRef.beforeClosed().subscribe(exitValue => this.redirect(exitValue));
-    }
-    /**
-     * Called when router leaves route, and so on, closes the modal with undefined value to prevent a new redirection
-     */
-    ngOnDestroy() {
-        if (this.dialogRef) {
-            this.dialogRef.close(-1); // -1 = no redirection
-        }
-    }
-    /**
-     * Redirects on modal closing under following rules/conditions
-     *
-     * If -1 : no redirection
-     * If undefined, null or empty string : uses the router provided redirection route or fallbacks on parent route if router don't provide
-     * If a value is provided, should be of type any[] and it's used for redirection.
-     */
-    redirect(exitValue) {
-        const isEmptyExitValue = exitValue == null || exitValue === ''; // undefined, null or ''
-        if (exitValue === -1) {
-            // if -1, don't redirect
-            return;
-        }
-        else if (!isEmptyExitValue) {
-            // If value provided, redirect to that route
-            this.router.navigate(exitValue);
-        }
-        else if (isEmptyExitValue && this.triggerConfig.afterClosedRoute) {
-            // If value is not provided (null) and router context specified default redirection route, use it
-            this.router.navigate(this.triggerConfig.afterClosedRoute);
-        }
-        else if (isEmptyExitValue) {
-            // If neither of component or router provides redirection, go to parent (care : parent can't have empty path : ''),
-            this.router.navigate(['.'], { relativeTo: this.route.parent });
-        }
-    }
-}
-NaturalDialogTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [{ token: i1.MatLegacyDialog }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-NaturalDialogTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalDialogTriggerComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.MatLegacyDialog }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }]; } });
-
 class NaturalDialogTriggerModule {
 }
 NaturalDialogTriggerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDialogTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });