@ecodev/natural 63.1.0 → 63.2.1

package/fesm2022/ecodev-natural.mjs

@@ -8048,12 +8048,16 @@ class NaturalSearchComponent {
     /**
      * Cleaned inputted selections. Allow valid selections to be manipulated inside component
      */
-    innerSelections = [[]];
+    #innerSelections = signal([[]]);
+    /**
+     * Cleaned inputted selections. This public API is useful because `selectionChange` does not emit changes made via `[selections]`
+     */
+    innerSelections = this.#innerSelections.asReadonly();
     /**
      * Input to display at component initialisation
      */
     set selections(selections) {
-        this.innerSelections = selections?.[0] ? deepClone(selections) : [[]];
+        this.#innerSelections.set(selections?.[0] ? deepClone(selections) : [[]]);
     }
     isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
     ngOnChanges() {
@@ -8062,26 +8066,32 @@ class NaturalSearchComponent {
         }
     }
     updateGroup(groupSelections, groupIndex) {
+        const selections = [...this.#innerSelections()];
         for (let i = 0; i < groupSelections.length; i++) {
-            this.innerSelections[groupIndex][i] = groupSelections[i];
+            selections[groupIndex][i] = groupSelections[i];
         }
-        this.innerSelections[groupIndex].length = groupSelections.length;
-        this.selectionChange.emit(this.innerSelections);
+        selections[groupIndex].length = groupSelections.length;
+        this.#notify(selections);
     }
     addGroup() {
-        this.innerSelections.push([]);
-        this.selectionChange.emit(this.innerSelections);
+        const selections = [...this.#innerSelections()];
+        selections.push([]);
+        this.#notify(selections);
     }
     removeGroup(index) {
-        this.innerSelections.splice(index, 1);
-        this.selectionChange.emit(this.innerSelections);
+        const selections = [...this.#innerSelections()];
+        selections.splice(index, 1);
+        this.#notify(selections);
     }
     clear() {
-        this.innerSelections = [[]];
-        this.selectionChange.emit([[]]);
+        this.#notify([[]]);
+    }
+    #notify(selections) {
+        this.#innerSelections.set(selections);
+        this.selectionChange.emit(selections);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
@@ -8093,7 +8103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MatIconModule,
                         NaturalIconDirective,
                         MatDividerModule,
-                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
+                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], facets: [{
@@ -8940,7 +8950,7 @@ class NaturalAbstractFile {
      */
     multiple = false;
     /**
-     * Comma-separated list of unique file type specifiers. Like the native element
+     * Comma-separated list of unique file type specifiers. Like the native element,
      * it can be a mix of mime-type and file extensions.
      *
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
@@ -8964,7 +8974,7 @@ class NaturalAbstractFile {
     /**
      * If true, the file selection will be broadcast through `NaturalFileService.filesChanged`.
      *
-     * It is useful to set this to false if there is two upload on a page with different purpose
+     * It is useful to set this to false if there are two uploads on a page with different purposes,
      * and the second upload should not be confused with the first one.
      */
     broadcast = true;
@@ -9742,6 +9752,11 @@ class NaturalPanelsService {
             this.updateComponentsPosition();
         });
     }
+    /**
+     * Notify the service to start listening to route changes to open panels
+     *
+     * @internal
+     */
     start(route) {
         NaturalPanelsService._opened = true;
         this.routeSub = route.url.subscribe(segments => {
@@ -9786,6 +9801,11 @@ class NaturalPanelsService {
         const newUrl = config.map(conf => segmentsToString(conf.route.segments)).join('/');
         this.router.navigateByUrl(this.router.url + '/' + newUrl);
     }
+    /**
+     * Notify the service that all panels were closed
+     *
+     * @internal
+     */
     stop() {
         NaturalPanelsService._opened = false;
         this.routeSub?.unsubscribe();
@@ -9796,6 +9816,8 @@ class NaturalPanelsService {
     }
     /**
      * Go to panel matching given component. Causes an url change.
+     *
+     * @internal
      */
     goToPanelByComponent(component) {
         this.goToPanelByIndex(this.getPanelIndex(component));
@@ -9939,6 +9961,13 @@ class NaturalPanelsService {
         }
         return this.dialog.openDialogs.findIndex(dialog => dialog.componentInstance === component);
     }
+    /**
+     * Whether the given panel is currently the top, visible, panel. If there are no panels opened at all, then any panel given is considered top, visible, panel.
+     */
+    isTopPanel(component) {
+        const length = this.dialog.openDialogs.length;
+        return !length || this.dialog.openDialogs[length - 1]?.componentInstance === component;
+    }
     /**
      * Repositions panels from start until given index
      */