@hug/ngx-search-container 1.1.10 → 2.0.0

package/CHANGELOG.md

@@ -1,132 +1,162 @@
-## 1.1.10 (2024-07-25)
+# 2.0.0 (2024-09-11)
 
 
-### 🐛 Fixes
+### 🚀 Features
 
-- **ngx-search-container:** update patch version ([43b005b](https://github.com/DSI-HUG/ngx-components/commit/43b005b))
+- update to angular 15 - FC-67 ([6bad712](https://github.com/DSI-HUG/ngx-components/commit/6bad712))
 
+- update material to angular 15 - FC-67 ([44406c1](https://github.com/DSI-HUG/ngx-components/commit/44406c1))
 
-### 🌱 Dependencies
+- datepicker angular15 ([fc101f9](https://github.com/DSI-HUG/ngx-components/commit/fc101f9))
 
-- **@hug/ngx-core:** upgrade to v1.1.14 ([12ee5d4](https://github.com/DSI-HUG/ngx-components/commit/12ee5d4))
+- apply angular material 18 ([f65d64c](https://github.com/DSI-HUG/ngx-components/commit/f65d64c))
 
+- remove NgxDetroy ([c64d8bb](https://github.com/DSI-HUG/ngx-components/commit/c64d8bb))
 
-### ❤️  Thank You
+- prettier ([2aa36f0](https://github.com/DSI-HUG/ngx-components/commit/2aa36f0))
 
-- dsi-hug-bot @dsi-hug-bot
-- Serge
+- **ng18:** remove no more necessary files ([54c46a1](https://github.com/DSI-HUG/ngx-components/commit/54c46a1))
 
-## 1.1.9 (2024-07-25)
+
+### 🐛 Fixes
+
+- correctif passage compelt ng18 ([3fe864e](https://github.com/DSI-HUG/ngx-components/commit/3fe864e))
+
+- **ci:** tests ([9387ba8](https://github.com/DSI-HUG/ngx-components/commit/9387ba8))
 
 
 ### 🌱 Dependencies
 
-- **@hug/ngx-core:** upgrade to v1.1.13 ([15e11d7](https://github.com/DSI-HUG/ngx-components/commit/15e11d7))
+- **@hug/ngx-core:** upgrade to v2.0.0 ([ce6226c](https://github.com/DSI-HUG/ngx-components/commit/ce6226c))
 
 
 ### ❤️  Thank You
 
+- Badisi
 - dsi-hug-bot @dsi-hug-bot
+- rfrt
 
-## 1.1.8 (2024-07-24)
-
+## 1.1.11 (2024-07-26)
 
 ### 🐛 Fixes
 
-- **ngx-search-container:** update patch version ([fe4999d](https://github.com/DSI-HUG/ngx-components/commit/fe4999d))
+-   error message ([e174fe9](https://github.com/DSI-HUG/ngx-components/commit/e174fe9))
+
+-   **ngx-search-container:** add NgTemplateOutlet import + add tooltip and style to icons ([46ae279](https://github.com/DSI-HUG/ngx-components/commit/46ae279))
+
+### ❤️ Thank You
 
+-   damien-guillermet
+-   Serge
+
+## 1.1.10 (2024-07-25)
+
+### 🐛 Fixes
+
+-   **ngx-search-container:** update patch version ([43b005b](https://github.com/DSI-HUG/ngx-components/commit/43b005b))
 
 ### 🌱 Dependencies
 
-- **@hug/ngx-core:** upgrade to v1.1.12 ([78a2936](https://github.com/DSI-HUG/ngx-components/commit/78a2936))
+-   **@hug/ngx-core:** upgrade to v1.1.14 ([12ee5d4](https://github.com/DSI-HUG/ngx-components/commit/12ee5d4))
 
+### ❤️ Thank You
 
-### ❤️  Thank You
+-   dsi-hug-bot @dsi-hug-bot
+-   Serge
 
-- dsi-hug-bot @dsi-hug-bot
-- Serge
+## 1.1.9 (2024-07-25)
 
-## 1.1.7 (2024-07-24)
+### 🌱 Dependencies
 
+-   **@hug/ngx-core:** upgrade to v1.1.13 ([15e11d7](https://github.com/DSI-HUG/ngx-components/commit/15e11d7))
+
+### ❤️ Thank You
+
+-   dsi-hug-bot @dsi-hug-bot
+
+## 1.1.8 (2024-07-24)
 
 ### 🐛 Fixes
 
-- **ngx-search-container:** remove module ([938de48](https://github.com/DSI-HUG/ngx-components/commit/938de48))
+-   **ngx-search-container:** update patch version ([fe4999d](https://github.com/DSI-HUG/ngx-components/commit/fe4999d))
 
+### 🌱 Dependencies
 
-### ❤️  Thank You
+-   **@hug/ngx-core:** upgrade to v1.1.12 ([78a2936](https://github.com/DSI-HUG/ngx-components/commit/78a2936))
 
-- Serge
+### ❤️ Thank You
 
-## 1.1.6 (2024-07-24)
+-   dsi-hug-bot @dsi-hug-bot
+-   Serge
 
+## 1.1.7 (2024-07-24)
 
 ### 🐛 Fixes
 
-- **ngx-search-container:** update patch version ([bfacbcb](https://github.com/DSI-HUG/ngx-components/commit/bfacbcb))
+-   **ngx-search-container:** remove module ([938de48](https://github.com/DSI-HUG/ngx-components/commit/938de48))
 
+### ❤️ Thank You
 
-### 🌱 Dependencies
+-   Serge
 
-- **@hug/ngx-core:** upgrade to v1.1.11 ([bda1d8c](https://github.com/DSI-HUG/ngx-components/commit/bda1d8c))
+## 1.1.6 (2024-07-24)
 
+### 🐛 Fixes
 
-### ❤️  Thank You
+-   **ngx-search-container:** update patch version ([bfacbcb](https://github.com/DSI-HUG/ngx-components/commit/bfacbcb))
 
-- dsi-hug-bot @dsi-hug-bot
-- Serge
+### 🌱 Dependencies
 
-## 1.1.5 (2024-07-23)
+-   **@hug/ngx-core:** upgrade to v1.1.11 ([bda1d8c](https://github.com/DSI-HUG/ngx-components/commit/bda1d8c))
 
+### ❤️ Thank You
 
-### 🐛 Fixes
+-   dsi-hug-bot @dsi-hug-bot
+-   Serge
 
-- **ngx-search-container:** compile path ([22cc8b6](https://github.com/DSI-HUG/ngx-components/commit/22cc8b6))
+## 1.1.5 (2024-07-23)
 
+### 🐛 Fixes
 
-### 🌱 Dependencies
+-   **ngx-search-container:** compile path ([22cc8b6](https://github.com/DSI-HUG/ngx-components/commit/22cc8b6))
 
-- **@hug/ngx-core:** upgrade to v1.1.9 ([3692c68](https://github.com/DSI-HUG/ngx-components/commit/3692c68))
+### 🌱 Dependencies
 
-- **@hug/ngx-core:** upgrade to v1.1.10 ([78dbe21](https://github.com/DSI-HUG/ngx-components/commit/78dbe21))
+-   **@hug/ngx-core:** upgrade to v1.1.9 ([3692c68](https://github.com/DSI-HUG/ngx-components/commit/3692c68))
 
+-   **@hug/ngx-core:** upgrade to v1.1.10 ([78dbe21](https://github.com/DSI-HUG/ngx-components/commit/78dbe21))
 
-### ❤️  Thank You
+### ❤️ Thank You
 
-- dsi-hug-bot @dsi-hug-bot
-- Serge
+-   dsi-hug-bot @dsi-hug-bot
+-   Serge
 
 ## 1.1.4 (2024-07-23)
 
-
 ### 🐛 Fixes
 
-- **ngx-snackbar:** use inject ([042cf24](https://github.com/DSI-HUG/ngx-components/commit/042cf24))
-
-- **ngx-search-container:** ngx prefix ([2ed4360](https://github.com/DSI-HUG/ngx-components/commit/2ed4360))
+-   **ngx-snackbar:** use inject ([042cf24](https://github.com/DSI-HUG/ngx-components/commit/042cf24))
 
+-   **ngx-search-container:** ngx prefix ([2ed4360](https://github.com/DSI-HUG/ngx-components/commit/2ed4360))
 
-### ❤️  Thank You
+### ❤️ Thank You
 
-- Serge
+-   Serge
 
 ## 1.1.3 (2024-07-23)
 
-
 ### 🐛 Fixes
 
-- **ngx-search-container:** ngx prefix ([064666d](https://github.com/DSI-HUG/ngx-components/commit/064666d))
-
+-   **ngx-search-container:** ngx prefix ([064666d](https://github.com/DSI-HUG/ngx-components/commit/064666d))
 
 ### 🌱 Dependencies
 
-- **@hug/ngx-core:** upgrade to v1.1.8 ([26f0d10](https://github.com/DSI-HUG/ngx-components/commit/26f0d10))
+-   **@hug/ngx-core:** upgrade to v1.1.8 ([26f0d10](https://github.com/DSI-HUG/ngx-components/commit/26f0d10))
 
+### ❤️ Thank You
 
-### ❤️  Thank You
-
-- dsi-hug-bot @dsi-hug-bot
-- Serge
+-   dsi-hug-bot @dsi-hug-bot
+-   Serge
 
 ## 1.1.2 (2024-07-05)
 

package/README.md

@@ -1,4 +1,5 @@
-# @hug/search-container
+@hug/search-container
+=======
 
 The sources for this package are in the main [DSI-HUG/ngx-components](https://github.com/dsi-hug/ngx-components) repo. Please file issues and pull requests against that repo.
 

package/_search-container-theme.scss

@@ -8,66 +8,66 @@
 
     ngx-search-container {
         .ngx-search-container {
-            background-color: mat.get-color-from-palette($background, background, 0.2);
+            background-color: mat.m2-get-color-from-palette($background, background, 0.2);
 
             &:hover {
-                background-color: mat.get-color-from-palette($background, background, 0.3);
+                background-color: mat.m2-get-color-from-palette($background, background, 0.3);
             }
 
             &:focus,
             &:focus-within {
-                color: mat.get-color-from-palette($foreground, text, 0.8);
-                background-color: mat.get-color-from-palette($background, background, 0.8);
+                color: mat.m2-get-color-from-palette($foreground, text, 0.8);
+                background-color: mat.m2-get-color-from-palette($background, background, 0.8);
 
                 input {
-                    color: mat.get-color-from-palette($foreground, text, 0.6);
+                    color: mat.m2-get-color-from-palette($foreground, text, 0.6);
 
                     &::placeholder {
-                        color: mat.get-color-from-palette($foreground, text, 0.6);
+                        color: mat.m2-get-color-from-palette($foreground, text, 0.6);
                     }
                 }
 
                 .icon-clear {
                     transition: 0.3s ease-in-out;
-                    color: mat.get-color-from-palette($foreground, disabled);
+                    color: mat.m2-get-color-from-palette($foreground, disabled);
 
                     &:hover {
-                        color: mat.get-color-from-palette($foreground, text);
+                        color: mat.m2-get-color-from-palette($foreground, text);
                     }
                 }
             }
 
             .icon-clear {
                 :hover {
-                    color: mat.get-color-from-palette($background, background);
+                    color: mat.m2-get-color-from-palette($background, background);
                 }
             }
 
             input {
-                color: mat.get-color-from-palette($background, background, 0.8);
+                color: mat.m2-get-color-from-palette($background, background, 0.8);
 
                 &::placeholder {
-                    color: mat.get-color-from-palette($background, background, 0.8);
+                    color: mat.m2-get-color-from-palette($background, background, 0.8);
                 }
             }
         }
 
         .ngx-search-container-mobile {
             &.active {
-                background-color: mat.get-color-from-palette($background, background);
-                color: mat.get-color-from-palette($foreground, text);
+                background-color: mat.m2-get-color-from-palette($background, background);
+                color: mat.m2-get-color-from-palette($foreground, text);
             }
 
             .ngx-search-container {
                 &::placeholder {
-                    color: mat.get-color-from-palette($foreground, secondary-text);
+                    color: mat.m2-get-color-from-palette($foreground, secondary-text);
                 }
 
                 input {
-                    color: mat.get-color-from-palette($foreground, text, 0.6);
+                    color: mat.m2-get-color-from-palette($foreground, text, 0.6);
 
                     &::placeholder {
-                        color: mat.get-color-from-palette($foreground, text, 0.6);
+                        color: mat.m2-get-color-from-palette($foreground, text, 0.6);
                     }
                 }
             }

package/esm2022/search-container.component.mjs

@@ -0,0 +1,100 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ContentChild, DestroyRef, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgxMediaService } from '@hug/ngx-core';
+import { BehaviorSubject, distinctUntilChanged, first, shareReplay, switchMap, tap } from 'rxjs';
+import * as i0 from "@angular/core";
+export class NgxSearchInputDirective {
+    ngControl = inject(NgControl);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.focus();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-search-input]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+export class NgxSearchContainerComponent {
+    cleared = new EventEmitter();
+    clearTooltip = 'Effacer la recherche';
+    openSearchTooltip = 'Ouvrir la recherche';
+    closeSearchTooltip = 'Quitter la recherche';
+    mobileSearch;
+    activeSearch$ = new BehaviorSubject(false);
+    searchInputValue$;
+    set searchInput(searchInput) {
+        if (!searchInput) {
+            throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
+        }
+        if (!searchInput.ngControl) {
+            throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');
+        }
+        this._searchInput = searchInput;
+    }
+    set right(value) {
+        this._right = value;
+    }
+    get right() {
+        return this._right;
+    }
+    mediaService = inject(NgxMediaService);
+    zone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    _searchInput;
+    _right = null;
+    constructor() {
+        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
+            if (!activeSearch) {
+                this.reset();
+            }
+            this._searchInput?.focus();
+        }))), takeUntilDestroyed(this.destroyRef)).subscribe();
+    }
+    ngAfterContentInit() {
+        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false })) ?? undefined;
+    }
+    reset() {
+        this._searchInput?.ngControl?.reset();
+        this.cleared.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { clearTooltip: "clearTooltip", openSearchTooltip: "openSearchTooltip", closeSearchTooltip: "closeSearchTooltip", right: "right" }, outputs: { cleared: "cleared" }, queries: [{ propertyName: "mobileSearch", first: true, predicate: ["mobileSearch"], descendants: true }, { propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true }], ngImport: i0, template: "@if (mediaService.isHandset$ | async) {\n    <div class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n        @if (activeSearch$ | async) {\n            <mat-icon class=\"icon-close-search\" [matTooltip]=\"closeSearchTooltip\" (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon class=\"icon-open-search\" [matTooltip]=\"openSearchTooltip\" (click)=\"activeSearch$.next(true)\">\n                search\n            </mat-icon>\n        }\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n}\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        @if (searchInputValue$ | async) {\n            <mat-icon class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:absolute;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container-mobile .icon-close-search,ngx-search-container .ngx-search-container-mobile .icon-open-search{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        MatIcon,
+                        MatTooltip
+                    ], template: "@if (mediaService.isHandset$ | async) {\n    <div class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n        @if (activeSearch$ | async) {\n            <mat-icon class=\"icon-close-search\" [matTooltip]=\"closeSearchTooltip\" (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon class=\"icon-open-search\" [matTooltip]=\"openSearchTooltip\" (click)=\"activeSearch$.next(true)\">\n                search\n            </mat-icon>\n        }\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n}\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        @if (searchInputValue$ | async) {\n            <mat-icon class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:absolute;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container-mobile .icon-close-search,ngx-search-container .ngx-search-container-mobile .icon-open-search{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cleared: [{
+                type: Output
+            }], clearTooltip: [{
+                type: Input
+            }], openSearchTooltip: [{
+                type: Input
+            }], closeSearchTooltip: [{
+                type: Input
+            }], mobileSearch: [{
+                type: ContentChild,
+                args: ['mobileSearch']
+            }], searchInput: [{
+                type: ContentChild,
+                args: [NgxSearchInputDirective]
+            }], right: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWNvbnRhaW5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9zZWFyY2gtY29udGFpbmVyL3NyYy9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3Byb2plY3RzL3NlYXJjaC1jb250YWluZXIvc3JjL3NlYXJjaC1jb250YWluZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlELE9BQU8sRUFBb0IsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFlLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25OLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDakQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxvQkFBb0IsRUFBRSxLQUFLLEVBQWMsV0FBVyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBTTdHLE1BQU0sT0FBTyx1QkFBdUI7SUFDekIsU0FBUyxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUUzQixVQUFVLEdBQUcsTUFBTSxDQUEwQixVQUFVLENBQUMsQ0FBQztJQUVuRTtRQUNJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzFDLENBQUM7dUdBWFEsdUJBQXVCOzJGQUF2Qix1QkFBdUI7OzJGQUF2Qix1QkFBdUI7a0JBSm5DLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsVUFBVSxFQUFFLElBQUk7aUJBQ25COztBQTZCRCxNQUFNLE9BQU8sMkJBQTJCO0lBR3BCLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBRzVDLFlBQVksR0FBRyxzQkFBc0IsQ0FBQztJQUd0QyxpQkFBaUIsR0FBRyxxQkFBcUIsQ0FBQztJQUcxQyxrQkFBa0IsR0FBRyxzQkFBc0IsQ0FBQztJQUc1QyxZQUFZLENBQW1DO0lBRW5DLGFBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUVwRCxpQkFBaUIsQ0FBaUM7SUFHNUQsSUFDVyxXQUFXLENBQUMsV0FBb0M7UUFDdkQsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ2YsTUFBTSxJQUFJLEtBQUssQ0FBQyxtRkFBbUYsQ0FBQyxDQUFDO1FBQ3pHLENBQUM7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ3pCLE1BQU0sSUFBSSxLQUFLLENBQUMsMEVBQTBFLENBQUMsQ0FBQztRQUNoRyxDQUFDO1FBQ0QsSUFBSSxDQUFDLFlBQVksR0FBRyxXQUFXLENBQUM7SUFDcEMsQ0FBQztJQUdELElBQ1csS0FBSyxDQUFDLEtBQWtDO1FBQy9DLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxJQUFXLEtBQUs7UUFDWixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDdkIsQ0FBQztJQUVTLFlBQVksR0FBRyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUM7SUFDekMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN0QixVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBRWhDLFlBQVksQ0FBc0M7SUFFbEQsTUFBTSxHQUFnQyxJQUFJLENBQUM7SUFHbkQ7UUFFSSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FDbkIsU0FBUyxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUM3QyxLQUFLLEVBQUUsRUFDUCxHQUFHLENBQUMsR0FBRyxFQUFFO1lBQ0wsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUNoQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDakIsQ0FBQztZQUNELElBQUksQ0FBQyxZQUFZLEVBQUUsS0FBSyxFQUFFLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQ0wsQ0FBQyxFQUNGLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FDdEMsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRU0sa0JBQWtCO1FBQ3JCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsSUFBSSxDQUNyRSxvQkFBb0IsRUFBRSxFQUN0QixXQUFXLENBQUMsRUFBRSxVQUFVLEVBQUUsQ0FBQyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUNsRCxJQUFJLFNBQVMsQ0FBQztJQUNuQixDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksQ0FBQyxZQUFZLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO1FBQ3RDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDeEIsQ0FBQzt1R0E5RVEsMkJBQTJCOzJGQUEzQiwyQkFBMkIscVlBc0J0Qix1QkFBdUIsZ0RDL0R6QyxtcENBMkJBLG9zQ0RRUSxTQUFTLDhDQUNULGdCQUFnQixvSkFDaEIsT0FBTywySUFDUCxVQUFVOzsyRkFHTCwyQkFBMkI7a0JBZHZDLFNBQVM7K0JBQ0ksc0JBQXNCLGlCQUdqQixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLElBQUksV0FDUDt3QkFDTCxTQUFTO3dCQUNULGdCQUFnQjt3QkFDaEIsT0FBTzt3QkFDUCxVQUFVO3FCQUNiO3dEQUtlLE9BQU87c0JBRHRCLE1BQU07Z0JBSUEsWUFBWTtzQkFEbEIsS0FBSztnQkFJQyxpQkFBaUI7c0JBRHZCLEtBQUs7Z0JBSUMsa0JBQWtCO3NCQUR4QixLQUFLO2dCQUlDLFlBQVk7c0JBRGxCLFlBQVk7dUJBQUMsY0FBYztnQkFTakIsV0FBVztzQkFEckIsWUFBWTt1QkFBQyx1QkFBdUI7Z0JBYTFCLEtBQUs7c0JBRGYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFzeW5jUGlwZSwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIERlc3Ryb3lSZWYsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBOZ1pvbmUsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBOZ0NvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBNYXRJY29uIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBNYXRUb29sdGlwIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XG5pbXBvcnQgeyBOZ3hNZWRpYVNlcnZpY2UgfSBmcm9tICdAaHVnL25neC1jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgZGlzdGluY3RVbnRpbENoYW5nZWQsIGZpcnN0LCBPYnNlcnZhYmxlLCBzaGFyZVJlcGxheSwgc3dpdGNoTWFwLCB0YXAgfSBmcm9tICdyeGpzJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbbmd4LXNlYXJjaC1pbnB1dF0nLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2VhcmNoSW5wdXREaXJlY3RpdmUge1xuICAgIHB1YmxpYyBuZ0NvbnRyb2wgPSBpbmplY3QoTmdDb250cm9sKTtcblxuICAgIHByb3RlY3RlZCBlbGVtZW50UmVmID0gaW5qZWN0PEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+PihFbGVtZW50UmVmKTtcblxuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5mb2N1cygpO1xuICAgIH1cblxuICAgIHB1YmxpYyBmb2N1cygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG59XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LXNlYXJjaC1jb250YWluZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQXN5bmNQaXBlLFxuICAgICAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICAgICAgICBNYXRJY29uLFxuICAgICAgICBNYXRUb29sdGlwXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTZWFyY2hDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcblxuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyByZWFkb25seSBjbGVhcmVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY2xlYXJUb29sdGlwID0gJ0VmZmFjZXIgbGEgcmVjaGVyY2hlJztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG9wZW5TZWFyY2hUb29sdGlwID0gJ091dnJpciBsYSByZWNoZXJjaGUnO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY2xvc2VTZWFyY2hUb29sdGlwID0gJ1F1aXR0ZXIgbGEgcmVjaGVyY2hlJztcblxuICAgIEBDb250ZW50Q2hpbGQoJ21vYmlsZVNlYXJjaCcpXG4gICAgcHVibGljIG1vYmlsZVNlYXJjaDogVGVtcGxhdGVSZWY8dW5rbm93bj4gfCB1bmRlZmluZWQ7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgYWN0aXZlU2VhcmNoJCA9IG5ldyBCZWhhdmlvclN1YmplY3QoZmFsc2UpO1xuXG4gICAgcHJvdGVjdGVkIHNlYXJjaElucHV0VmFsdWUkOiBPYnNlcnZhYmxlPHN0cmluZz4gfCB1bmRlZmluZWQ7XG5cblxuICAgIEBDb250ZW50Q2hpbGQoTmd4U2VhcmNoSW5wdXREaXJlY3RpdmUpXG4gICAgcHVibGljIHNldCBzZWFyY2hJbnB1dChzZWFyY2hJbnB1dDogTmd4U2VhcmNoSW5wdXREaXJlY3RpdmUpIHtcbiAgICAgICAgaWYgKCFzZWFyY2hJbnB1dCkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdZb3UgbmVlZCB0byBhZGQgdGhlIGF0dHJpYnV0ZSBuZ3gtc2VhcmNoLWlucHV0IHRvIHRoZSBOZ3hTZWFyY2hDb250YWluZXJDb21wb25lbnQnKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoIXNlYXJjaElucHV0Lm5nQ29udHJvbCkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdZb3UgbmVlZCB0byBhZGQgdGhlIGF0dHJpYnV0ZSBuZ01vZGVsIHRvIHRoZSBOZ3hTZWFyY2hDb250YWluZXJDb21wb25lbnQnKTtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLl9zZWFyY2hJbnB1dCA9IHNlYXJjaElucHV0O1xuICAgIH1cblxuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IHJpZ2h0KHZhbHVlOiBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IG51bGwpIHtcbiAgICAgICAgdGhpcy5fcmlnaHQgPSB2YWx1ZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IHJpZ2h0KCk6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgbnVsbCB7XG4gICAgICAgIHJldHVybiB0aGlzLl9yaWdodDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgbWVkaWFTZXJ2aWNlID0gaW5qZWN0KE5neE1lZGlhU2VydmljZSk7XG4gICAgcHJpdmF0ZSB6b25lID0gaW5qZWN0KE5nWm9uZSk7XG4gICAgcHJpdmF0ZSBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuXG4gICAgcHJpdmF0ZSBfc2VhcmNoSW5wdXQ6IE5neFNlYXJjaElucHV0RGlyZWN0aXZlIHwgdW5kZWZpbmVkO1xuXG4gICAgcHJpdmF0ZSBfcmlnaHQ6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgbnVsbCA9IG51bGw7XG5cblxuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcblxuICAgICAgICB0aGlzLmFjdGl2ZVNlYXJjaCQucGlwZShcbiAgICAgICAgICAgIHN3aXRjaE1hcChhY3RpdmVTZWFyY2ggPT4gdGhpcy56b25lLm9uU3RhYmxlLnBpcGUoXG4gICAgICAgICAgICAgICAgZmlyc3QoKSxcbiAgICAgICAgICAgICAgICB0YXAoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoIWFjdGl2ZVNlYXJjaCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5yZXNldCgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuX3NlYXJjaElucHV0Py5mb2N1cygpO1xuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApKSxcbiAgICAgICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpXG4gICAgICAgICkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZWFyY2hJbnB1dFZhbHVlJCA9IHRoaXMuX3NlYXJjaElucHV0Py5uZ0NvbnRyb2w/LnZhbHVlQ2hhbmdlcz8ucGlwZShcbiAgICAgICAgICAgIGRpc3RpbmN0VW50aWxDaGFuZ2VkKCksXG4gICAgICAgICAgICBzaGFyZVJlcGxheSh7IGJ1ZmZlclNpemU6IDEsIHJlZkNvdW50OiBmYWxzZSB9KVxuICAgICAgICApID8/IHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICBwdWJsaWMgcmVzZXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX3NlYXJjaElucHV0Py5uZ0NvbnRyb2w/LnJlc2V0KCk7XG4gICAgICAgIHRoaXMuY2xlYXJlZC5lbWl0KCk7XG4gICAgfVxufVxuIiwiQGlmIChtZWRpYVNlcnZpY2UuaXNIYW5kc2V0JCB8IGFzeW5jKSB7XG4gICAgPGRpdiBjbGFzcz1cIm5neC1zZWFyY2gtY29udGFpbmVyLW1vYmlsZSBtb2JpbGVcIiBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZVNlYXJjaCQgfCBhc3luY1wiICNtb2JpbGVTZWFyY2g+XG4gICAgICAgIEBpZiAoYWN0aXZlU2VhcmNoJCB8IGFzeW5jKSB7XG4gICAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCJpY29uLWNsb3NlLXNlYXJjaFwiIFttYXRUb29sdGlwXT1cImNsb3NlU2VhcmNoVG9vbHRpcFwiIChjbGljayk9XCJhY3RpdmVTZWFyY2gkLm5leHQoZmFsc2UpXCI+XG4gICAgICAgICAgICAgICAgYXJyb3dfYmFja1xuICAgICAgICAgICAgPC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzZWFyY2hDb250YWluZXJUcGxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCJpY29uLW9wZW4tc2VhcmNoXCIgW21hdFRvb2x0aXBdPVwib3BlblNlYXJjaFRvb2x0aXBcIiAoY2xpY2spPVwiYWN0aXZlU2VhcmNoJC5uZXh0KHRydWUpXCI+XG4gICAgICAgICAgICAgICAgc2VhcmNoXG4gICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICB9XG4gICAgPC9kaXY+XG59IEBlbHNlIHtcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwic2VhcmNoQ29udGFpbmVyVHBsXCI+PC9uZy1jb250YWluZXI+XG59XG5cbjxuZy10ZW1wbGF0ZSAjc2VhcmNoQ29udGFpbmVyVHBsPlxuICAgIDxkaXYgY2xhc3M9XCJuZ3gtc2VhcmNoLWNvbnRhaW5lclwiPlxuICAgICAgICA8bWF0LWljb24+c2VhcmNoPC9tYXQtaWNvbj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICBAaWYgKHNlYXJjaElucHV0VmFsdWUkIHwgYXN5bmMpIHtcbiAgICAgICAgICAgIDxtYXQtaWNvbiBjbGFzcz1cImljb24tY2xlYXJcIiBbbWF0VG9vbHRpcF09XCJjbGVhclRvb2x0aXBcIiAoY2xpY2spPVwicmVzZXQoKVwiPmNsb3NlPC9tYXQtaWNvbj5cbiAgICAgICAgfVxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicmlnaHRcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/fesm2022/hug-ngx-search-container.mjs

@@ -0,0 +1,107 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, EventEmitter, NgZone, DestroyRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, Input, ContentChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgxMediaService } from '@hug/ngx-core';
+import { BehaviorSubject, switchMap, first, tap, distinctUntilChanged, shareReplay } from 'rxjs';
+
+class NgxSearchInputDirective {
+    ngControl = inject(NgControl);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.focus();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-search-input]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+class NgxSearchContainerComponent {
+    cleared = new EventEmitter();
+    clearTooltip = 'Effacer la recherche';
+    openSearchTooltip = 'Ouvrir la recherche';
+    closeSearchTooltip = 'Quitter la recherche';
+    mobileSearch;
+    activeSearch$ = new BehaviorSubject(false);
+    searchInputValue$;
+    set searchInput(searchInput) {
+        if (!searchInput) {
+            throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
+        }
+        if (!searchInput.ngControl) {
+            throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');
+        }
+        this._searchInput = searchInput;
+    }
+    set right(value) {
+        this._right = value;
+    }
+    get right() {
+        return this._right;
+    }
+    mediaService = inject(NgxMediaService);
+    zone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    _searchInput;
+    _right = null;
+    constructor() {
+        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
+            if (!activeSearch) {
+                this.reset();
+            }
+            this._searchInput?.focus();
+        }))), takeUntilDestroyed(this.destroyRef)).subscribe();
+    }
+    ngAfterContentInit() {
+        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false })) ?? undefined;
+    }
+    reset() {
+        this._searchInput?.ngControl?.reset();
+        this.cleared.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { clearTooltip: "clearTooltip", openSearchTooltip: "openSearchTooltip", closeSearchTooltip: "closeSearchTooltip", right: "right" }, outputs: { cleared: "cleared" }, queries: [{ propertyName: "mobileSearch", first: true, predicate: ["mobileSearch"], descendants: true }, { propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true }], ngImport: i0, template: "@if (mediaService.isHandset$ | async) {\n    <div class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n        @if (activeSearch$ | async) {\n            <mat-icon class=\"icon-close-search\" [matTooltip]=\"closeSearchTooltip\" (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon class=\"icon-open-search\" [matTooltip]=\"openSearchTooltip\" (click)=\"activeSearch$.next(true)\">\n                search\n            </mat-icon>\n        }\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n}\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        @if (searchInputValue$ | async) {\n            <mat-icon class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:absolute;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container-mobile .icon-close-search,ngx-search-container .ngx-search-container-mobile .icon-open-search{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        MatIcon,
+                        MatTooltip
+                    ], template: "@if (mediaService.isHandset$ | async) {\n    <div class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n        @if (activeSearch$ | async) {\n            <mat-icon class=\"icon-close-search\" [matTooltip]=\"closeSearchTooltip\" (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon class=\"icon-open-search\" [matTooltip]=\"openSearchTooltip\" (click)=\"activeSearch$.next(true)\">\n                search\n            </mat-icon>\n        }\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n}\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        @if (searchInputValue$ | async) {\n            <mat-icon class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:absolute;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container-mobile .icon-close-search,ngx-search-container .ngx-search-container-mobile .icon-open-search{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cleared: [{
+                type: Output
+            }], clearTooltip: [{
+                type: Input
+            }], openSearchTooltip: [{
+                type: Input
+            }], closeSearchTooltip: [{
+                type: Input
+            }], mobileSearch: [{
+                type: ContentChild,
+                args: ['mobileSearch']
+            }], searchInput: [{
+                type: ContentChild,
+                args: [NgxSearchInputDirective]
+            }], right: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxSearchContainerComponent, NgxSearchInputDirective };
+//# sourceMappingURL=hug-ngx-search-container.mjs.map

package/fesm2022/hug-ngx-search-container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hug-ngx-search-container.mjs","sources":["../../../projects/search-container/src/search-container.component.ts","../../../projects/search-container/src/search-container.component.html","../../../projects/search-container/src/hug-ngx-search-container.ts"],"sourcesContent":["import { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, DestroyRef, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgControl } from '@angular/forms';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, tap } from 'rxjs';\n\n@Directive({\n    selector: '[ngx-search-input]',\n    standalone: true\n})\nexport class NgxSearchInputDirective {\n    public ngControl = inject(NgControl);\n\n    protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    public constructor() {\n        this.focus();\n    }\n\n    public focus(): void {\n        this.elementRef.nativeElement.focus();\n    }\n}\n\n@Component({\n    selector: 'ngx-search-container',\n    templateUrl: './search-container.component.html',\n    styleUrls: ['./search-container.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [\n        AsyncPipe,\n        NgTemplateOutlet,\n        MatIcon,\n        MatTooltip\n    ]\n})\nexport class NgxSearchContainerComponent implements AfterContentInit {\n\n    @Output()\n    public readonly cleared = new EventEmitter<void>();\n\n    @Input()\n    public clearTooltip = 'Effacer la recherche';\n\n    @Input()\n    public openSearchTooltip = 'Ouvrir la recherche';\n\n    @Input()\n    public closeSearchTooltip = 'Quitter la recherche';\n\n    @ContentChild('mobileSearch')\n    public mobileSearch: TemplateRef<unknown> | undefined;\n\n    protected readonly activeSearch$ = new BehaviorSubject(false);\n\n    protected searchInputValue$: Observable<string> | undefined;\n\n\n    @ContentChild(NgxSearchInputDirective)\n    public set searchInput(searchInput: NgxSearchInputDirective) {\n        if (!searchInput) {\n            throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');\n        }\n        if (!searchInput.ngControl) {\n            throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');\n        }\n        this._searchInput = searchInput;\n    }\n\n\n    @Input()\n    public set right(value: TemplateRef<unknown> | null) {\n        this._right = value;\n    }\n\n    public get right(): TemplateRef<unknown> | null {\n        return this._right;\n    }\n\n    protected mediaService = inject(NgxMediaService);\n    private zone = inject(NgZone);\n    private destroyRef = inject(DestroyRef);\n\n    private _searchInput: NgxSearchInputDirective | undefined;\n\n    private _right: TemplateRef<unknown> | null = null;\n\n\n    public constructor() {\n\n        this.activeSearch$.pipe(\n            switchMap(activeSearch => this.zone.onStable.pipe(\n                first(),\n                tap(() => {\n                    if (!activeSearch) {\n                        this.reset();\n                    }\n                    this._searchInput?.focus();\n                })\n            )),\n            takeUntilDestroyed(this.destroyRef)\n        ).subscribe();\n    }\n\n    public ngAfterContentInit(): void {\n        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(\n            distinctUntilChanged(),\n            shareReplay({ bufferSize: 1, refCount: false })\n        ) ?? undefined;\n    }\n\n    public reset(): void {\n        this._searchInput?.ngControl?.reset();\n        this.cleared.emit();\n    }\n}\n","@if (mediaService.isHandset$ | async) {\n    <div class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n        @if (activeSearch$ | async) {\n            <mat-icon class=\"icon-close-search\" [matTooltip]=\"closeSearchTooltip\" (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon class=\"icon-open-search\" [matTooltip]=\"openSearchTooltip\" (click)=\"activeSearch$.next(true)\">\n                search\n            </mat-icon>\n        }\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n}\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        @if (searchInputValue$ | async) {\n            <mat-icon class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        }\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,57 +1,51 @@
 {
-    "name": "@hug/ngx-search-container",
-    "version": "1.1.10",
-    "description": "HUG Angular - search-container component",
-    "homepage": "https://github.com/dsi-hug/ngx-components",
-    "license": "GPL-3.0-only",
-    "author": "HUG - Hôpitaux Universitaires Genève",
-    "contributors": [
-        "badisi (https://github.com/badisi)",
-        "vapkse (https://github.com/vapkse)"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dsi-hug/ngx-components.git"
+  "name": "@hug/ngx-search-container",
+  "version": "2.0.0",
+  "description": "HUG Angular - search-container component",
+  "homepage": "https://github.com/dsi-hug/ngx-components",
+  "license": "GPL-3.0-only",
+  "author": "HUG - Hôpitaux Universitaires Genève",
+  "contributors": [
+    "badisi (https://github.com/badisi)",
+    "vapkse (https://github.com/vapkse)"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dsi-hug/ngx-components.git"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "material design",
+    "components"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./_search-container-theme.scss",
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/hug-ngx-search-container.mjs",
+      "esm": "./esm2022/hug-ngx-search-container.mjs",
+      "default": "./fesm2022/hug-ngx-search-container.mjs"
     },
-    "keywords": [
-        "angular",
-        "material",
-        "material design",
-        "components"
-    ],
-    "sideEffects": false,
-    "exports": {
-        ".": {
-            "sass": "./_search-container-theme.scss",
-            "types": "./index.d.ts",
-            "esm2020": "./esm2020/hug-ngx-search-container.mjs",
-            "es2020": "./fesm2020/hug-ngx-search-container.mjs",
-            "es2015": "./fesm2015/hug-ngx-search-container.mjs",
-            "node": "./fesm2015/hug-ngx-search-container.mjs",
-            "default": "./fesm2020/hug-ngx-search-container.mjs"
-        },
-        "./package.json": {
-            "default": "./package.json"
-        }
-    },
-    "peerDependencies": {
-        "@angular/common": ">= 14",
-        "@angular/core": ">= 14",
-        "@angular/forms": ">= 14",
-        "@angular/material": ">= 14",
-        "rxjs": ">= 7.0.0",
-        "@hug/ngx-core": "^1.1.14"
-    },
-    "dependencies": {
-        "tslib": "^2.6.3"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "module": "fesm2015/hug-ngx-search-container.mjs",
-    "es2020": "fesm2020/hug-ngx-search-container.mjs",
-    "esm2020": "esm2020/hug-ngx-search-container.mjs",
-    "fesm2020": "fesm2020/hug-ngx-search-container.mjs",
-    "fesm2015": "fesm2015/hug-ngx-search-container.mjs",
-    "typings": "index.d.ts"
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "peerDependencies": {
+    "@angular/common": ">=18 <19",
+    "@angular/core": ">=18 <19",
+    "@angular/forms": ">=18 <19",
+    "@angular/material": ">=18 <19",
+    "rxjs": ">= 7.4.0",
+    "@hug/ngx-core": "^2.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.7.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/hug-ngx-search-container.mjs",
+  "typings": "index.d.ts"
 }

package/search-container.component.d.ts

@@ -1,6 +1,6 @@
-import { AfterContentInit, ElementRef, EventEmitter, NgZone, TemplateRef } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, TemplateRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { NgxDestroy, NgxMediaService } from '@hug/ngx-core';
+import { NgxMediaService } from '@hug/ngx-core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class NgxSearchInputDirective {
@@ -9,24 +9,27 @@ export declare class NgxSearchInputDirective {
     constructor();
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSearchInputDirective, "[ngx-search-input]", never, {}, {}, never, never, true>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSearchInputDirective, "[ngx-search-input]", never, {}, {}, never, never, true, never>;
 }
-export declare class NgxSearchContainerComponent extends NgxDestroy implements AfterContentInit {
-    protected mediaService: NgxMediaService;
-    private zone;
+export declare class NgxSearchContainerComponent implements AfterContentInit {
     readonly cleared: EventEmitter<void>;
     clearTooltip: string;
+    openSearchTooltip: string;
+    closeSearchTooltip: string;
     mobileSearch: TemplateRef<unknown> | undefined;
     protected readonly activeSearch$: BehaviorSubject<boolean>;
     protected searchInputValue$: Observable<string> | undefined;
-    private _searchInput;
     set searchInput(searchInput: NgxSearchInputDirective);
-    private _right;
     set right(value: TemplateRef<unknown> | null);
     get right(): TemplateRef<unknown> | null;
-    constructor(mediaService: NgxMediaService, zone: NgZone);
+    protected mediaService: NgxMediaService;
+    private zone;
+    private destroyRef;
+    private _searchInput;
+    private _right;
+    constructor();
     ngAfterContentInit(): void;
     reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "clearTooltip": "clearTooltip"; "right": "right"; }, { "cleared": "cleared"; }, ["mobileSearch", "searchInput"], ["*"], true>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "clearTooltip": { "alias": "clearTooltip"; "required": false; }; "openSearchTooltip": { "alias": "openSearchTooltip"; "required": false; }; "closeSearchTooltip": { "alias": "closeSearchTooltip"; "required": false; }; "right": { "alias": "right"; "required": false; }; }, { "cleared": "cleared"; }, ["mobileSearch", "searchInput"], ["*"], true, never>;
 }

package/esm2020/search-container.component.mjs

@@ -1,93 +0,0 @@
-import { AsyncPipe, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, Output, ViewEncapsulation } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { NgxDestroy } from '@hug/ngx-core';
-import { BehaviorSubject, distinctUntilChanged, first, shareReplay, switchMap, takeUntil, tap } from 'rxjs';
-import * as i0 from "@angular/core";
-import * as i1 from "@hug/ngx-core";
-import * as i2 from "@angular/material/icon";
-import * as i3 from "@angular/material/tooltip";
-export class NgxSearchInputDirective {
-    constructor() {
-        this.ngControl = inject(NgControl);
-        this.elementRef = inject(ElementRef);
-        this.focus();
-    }
-    focus() {
-        this.elementRef.nativeElement.focus();
-    }
-}
-NgxSearchInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgxSearchInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-search-input]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; } });
-export class NgxSearchContainerComponent extends NgxDestroy {
-    constructor(mediaService, zone) {
-        super();
-        this.mediaService = mediaService;
-        this.zone = zone;
-        this.cleared = new EventEmitter();
-        this.clearTooltip = 'Effacer la recherche';
-        this.activeSearch$ = new BehaviorSubject(false);
-        this._right = null;
-        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
-            if (!activeSearch) {
-                this.reset();
-            }
-            this._searchInput?.focus();
-        }))), takeUntil(this.destroyed$)).subscribe();
-    }
-    set searchInput(searchInput) {
-        if (!searchInput) {
-            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');
-        }
-        if (!searchInput.ngControl) {
-            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
-        }
-        this._searchInput = searchInput;
-    }
-    set right(value) {
-        this._right = value;
-    }
-    get right() {
-        return this._right;
-    }
-    ngAfterContentInit() {
-        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false })) ?? undefined;
-    }
-    reset() {
-        this._searchInput?.ngControl?.reset();
-        this.cleared.emit();
-    }
-}
-NgxSearchContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, deps: [{ token: i1.NgxMediaService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxSearchContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { clearTooltip: "clearTooltip", right: "right" }, outputs: { cleared: "cleared" }, queries: [{ propertyName: "mobileSearch", first: true, predicate: ["mobileSearch"], descendants: true }, { propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        AsyncPipe,
-                        NgIf,
-                        MatIconModule,
-                        MatTooltipModule
-                    ], template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
-                type: Output
-            }], clearTooltip: [{
-                type: Input
-            }], mobileSearch: [{
-                type: ContentChild,
-                args: ['mobileSearch']
-            }], searchInput: [{
-                type: ContentChild,
-                args: [NgxSearchInputDirective]
-            }], right: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWNvbnRhaW5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9zZWFyY2gtY29udGFpbmVyL3NyYy9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3Byb2plY3RzL3NlYXJjaC1jb250YWluZXIvc3JjL3NlYXJjaC1jb250YWluZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNsRCxPQUFPLEVBQW9CLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQWUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdk0sT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsVUFBVSxFQUFtQixNQUFNLGVBQWUsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLG9CQUFvQixFQUFFLEtBQUssRUFBYyxXQUFXLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7O0FBTXhILE1BQU0sT0FBTyx1QkFBdUI7SUFLaEM7UUFKTyxjQUFTLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRTNCLGVBQVUsR0FBRyxNQUFNLENBQTBCLFVBQVUsQ0FBQyxDQUFDO1FBRy9ELElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksQ0FBQyxVQUFVLENB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c0JBRHJCLFlBQVk7dUJBQUMsdUJBQXVCO2dCQWMxQixLQUFLO3NCQURmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBc3luY1BpcGUsIE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgaW5qZWN0LCBJbnB1dCwgTmdab25lLCBPdXRwdXQsIFRlbXBsYXRlUmVmLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgTWF0VG9vbHRpcE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Rvb2x0aXAnO1xuaW1wb3J0IHsgTmd4RGVzdHJveSwgTmd4TWVkaWFTZXJ2aWNlIH0gZnJvbSAnQGh1Zy9uZ3gtY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBmaXJzdCwgT2JzZXJ2YWJsZSwgc2hhcmVSZXBsYXksIHN3aXRjaE1hcCwgdGFrZVVudGlsLCB0YXAgfSBmcm9tICdyeGpzJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbbmd4LXNlYXJjaC1pbnB1dF0nLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2VhcmNoSW5wdXREaXJlY3RpdmUge1xuICAgIHB1YmxpYyBuZ0NvbnRyb2wgPSBpbmplY3QoTmdDb250cm9sKTtcblxuICAgIHByb3RlY3RlZCBlbGVtZW50UmVmID0gaW5qZWN0PEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+PihFbGVtZW50UmVmKTtcblxuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5mb2N1cygpO1xuICAgIH1cblxuICAgIHB1YmxpYyBmb2N1cygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG59XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LXNlYXJjaC1jb250YWluZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtY29udGFpbmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQXN5bmNQaXBlLFxuICAgICAgICBOZ0lmLFxuICAgICAgICBNYXRJY29uTW9kdWxlLFxuICAgICAgICBNYXRUb29sdGlwTW9kdWxlXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTZWFyY2hDb250YWluZXJDb21wb25lbnQgZXh0ZW5kcyBOZ3hEZXN0cm95IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgY2xlYXJlZCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGNsZWFyVG9vbHRpcCA9ICdFZmZhY2VyIGxhIHJlY2hlcmNoZSc7XG5cbiAgICBAQ29udGVudENoaWxkKCdtb2JpbGVTZWFyY2gnKVxuICAgIHB1YmxpYyBtb2JpbGVTZWFyY2g6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgdW5kZWZpbmVkO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGFjdGl2ZVNlYXJjaCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KGZhbHNlKTtcblxuICAgIHByb3RlY3RlZCBzZWFyY2hJbnB1dFZhbHVlJDogT2JzZXJ2YWJsZTxzdHJpbmc+IHwgdW5kZWZpbmVkO1xuXG4gICAgcHJpdmF0ZSBfc2VhcmNoSW5wdXQ6IE5neFNlYXJjaElucHV0RGlyZWN0aXZlIHwgdW5kZWZpbmVkO1xuXG4gICAgQENvbnRlbnRDaGlsZChOZ3hTZWFyY2hJbnB1dERpcmVjdGl2ZSlcbiAgICBwdWJsaWMgc2V0IHNlYXJjaElucHV0KHNlYXJjaElucHV0OiBOZ3hTZWFyY2hJbnB1dERpcmVjdGl2ZSkge1xuICAgICAgICBpZiAoIXNlYXJjaElucHV0KSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ1lvdSBuZWVkIHRvIGFkZCB0aGUgYXR0cmlidXRlIHNlYXJjaElucHV0IHRvIHRoZSBTZWFyY2hDb250YWluZXJDb21wb25lbnQnKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoIXNlYXJjaElucHV0Lm5nQ29udHJvbCkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdZb3UgbmVlZCB0byBhZGQgdGhlIGF0dHJpYnV0ZSBuZ01vZGVsIHRvIHRoZSBTZWFyY2hDb250YWluZXJDb21wb25lbnQnKTtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLl9zZWFyY2hJbnB1dCA9IHNlYXJjaElucHV0O1xuICAgIH1cblxuICAgIHByaXZhdGUgX3JpZ2h0OiBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IG51bGwgPSBudWxsO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IHJpZ2h0KHZhbHVlOiBUZW1wbGF0ZVJlZjx1bmtub3duPiB8IG51bGwpIHtcbiAgICAgICAgdGhpcy5fcmlnaHQgPSB2YWx1ZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IHJpZ2h0KCk6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgbnVsbCB7XG4gICAgICAgIHJldHVybiB0aGlzLl9yaWdodDtcbiAgICB9XG5cbiAgICBwdWJsaWMgY29uc3RydWN0b3IoXG4gICAgICAgIHByb3RlY3RlZCBtZWRpYVNlcnZpY2U6IE5neE1lZGlhU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSB6b25lOiBOZ1pvbmVcbiAgICApIHtcbiAgICAgICAgc3VwZXIoKTtcblxuICAgICAgICB0aGlzLmFjdGl2ZVNlYXJjaCQucGlwZShcbiAgICAgICAgICAgIHN3aXRjaE1hcChhY3RpdmVTZWFyY2ggPT4gdGhpcy56b25lLm9uU3RhYmxlLnBpcGUoXG4gICAgICAgICAgICAgICAgZmlyc3QoKSxcbiAgICAgICAgICAgICAgICB0YXAoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoIWFjdGl2ZVNlYXJjaCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5yZXNldCgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuX3NlYXJjaElucHV0Py5mb2N1cygpO1xuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApKSxcbiAgICAgICAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCQpXG4gICAgICAgICkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZWFyY2hJbnB1dFZhbHVlJCA9IHRoaXMuX3NlYXJjaElucHV0Py5uZ0NvbnRyb2w/LnZhbHVlQ2hhbmdlcz8ucGlwZShcbiAgICAgICAgICAgIGRpc3RpbmN0VW50aWxDaGFuZ2VkKCksXG4gICAgICAgICAgICBzaGFyZVJlcGxheSh7IGJ1ZmZlclNpemU6IDEsIHJlZkNvdW50OiBmYWxzZSB9KVxuICAgICAgICApID8/IHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICBwdWJsaWMgcmVzZXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX3NlYXJjaElucHV0Py5uZ0NvbnRyb2w/LnJlc2V0KCk7XG4gICAgICAgIHRoaXMuY2xlYXJlZC5lbWl0KCk7XG4gICAgfVxufVxuIiwiPGRpdiAqbmdJZj1cIm1lZGlhU2VydmljZS5pc0hhbmRzZXQkIHwgYXN5bmM7IGVsc2Ugbm9IYW5kc2V0VHBsXCIgY2xhc3M9XCJuZ3gtc2VhcmNoLWNvbnRhaW5lci1tb2JpbGUgbW9iaWxlXCIgW2NsYXNzLmFjdGl2ZV09XCJhY3RpdmVTZWFyY2gkIHwgYXN5bmNcIiAjbW9iaWxlU2VhcmNoPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhY3RpdmVTZWFyY2gkIHwgYXN5bmM7IGVsc2Ugbm9BY3RpdmVTZWFyY2hUcGxcIj5cbiAgICAgICAgPG1hdC1pY29uIChjbGljayk9XCJhY3RpdmVTZWFyY2gkLm5leHQoZmFsc2UpXCI+YXJyb3dfYmFjazwvbWF0LWljb24+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzZWFyY2hDb250YWluZXJUcGxcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI25vQWN0aXZlU2VhcmNoVHBsPlxuICAgICAgICA8bWF0LWljb24gKGNsaWNrKT1cImFjdGl2ZVNlYXJjaCQubmV4dCh0cnVlKVwiPnNlYXJjaDwvbWF0LWljb24+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI25vSGFuZHNldFRwbD5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwic2VhcmNoQ29udGFpbmVyVHBsXCI+PC9uZy1jb250YWluZXI+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3NlYXJjaENvbnRhaW5lclRwbD5cbiAgICA8ZGl2IGNsYXNzPVwibmd4LXNlYXJjaC1jb250YWluZXJcIj5cbiAgICAgICAgPG1hdC1pY29uPnNlYXJjaDwvbWF0LWljb24+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgPG1hdC1pY29uICpuZ0lmPVwic2VhcmNoSW5wdXRWYWx1ZSQgfCBhc3luY1wiIGNsYXNzPVwiaWNvbi1jbGVhclwiIFttYXRUb29sdGlwXT1cImNsZWFyVG9vbHRpcFwiIChjbGljayk9XCJyZXNldCgpXCI+Y2xvc2U8L21hdC1pY29uPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicmlnaHRcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/fesm2015/hug-ngx-search-container.mjs

@@ -1,103 +0,0 @@
-import { AsyncPipe, NgIf } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, Input, ContentChild } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@hug/ngx-core';
-import { NgxDestroy } from '@hug/ngx-core';
-import { BehaviorSubject, switchMap, first, tap, takeUntil, distinctUntilChanged, shareReplay } from 'rxjs';
-
-class NgxSearchInputDirective {
-    constructor() {
-        this.ngControl = inject(NgControl);
-        this.elementRef = inject(ElementRef);
-        this.focus();
-    }
-    focus() {
-        this.elementRef.nativeElement.focus();
-    }
-}
-NgxSearchInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgxSearchInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-search-input]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; } });
-class NgxSearchContainerComponent extends NgxDestroy {
-    constructor(mediaService, zone) {
-        super();
-        this.mediaService = mediaService;
-        this.zone = zone;
-        this.cleared = new EventEmitter();
-        this.clearTooltip = 'Effacer la recherche';
-        this.activeSearch$ = new BehaviorSubject(false);
-        this._right = null;
-        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
-            var _a;
-            if (!activeSearch) {
-                this.reset();
-            }
-            (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.focus();
-        }))), takeUntil(this.destroyed$)).subscribe();
-    }
-    set searchInput(searchInput) {
-        if (!searchInput) {
-            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');
-        }
-        if (!searchInput.ngControl) {
-            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
-        }
-        this._searchInput = searchInput;
-    }
-    set right(value) {
-        this._right = value;
-    }
-    get right() {
-        return this._right;
-    }
-    ngAfterContentInit() {
-        var _a, _b, _c, _d;
-        this.searchInputValue$ = (_d = (_c = (_b = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.ngControl) === null || _b === void 0 ? void 0 : _b.valueChanges) === null || _c === void 0 ? void 0 : _c.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false }))) !== null && _d !== void 0 ? _d : undefined;
-    }
-    reset() {
-        var _a, _b;
-        (_b = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.ngControl) === null || _b === void 0 ? void 0 : _b.reset();
-        this.cleared.emit();
-    }
-}
-NgxSearchContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, deps: [{ token: i1.NgxMediaService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxSearchContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { clearTooltip: "clearTooltip", right: "right" }, outputs: { cleared: "cleared" }, queries: [{ propertyName: "mobileSearch", first: true, predicate: ["mobileSearch"], descendants: true }, { propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        AsyncPipe,
-                        NgIf,
-                        MatIconModule,
-                        MatTooltipModule
-                    ], template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
-                type: Output
-            }], clearTooltip: [{
-                type: Input
-            }], mobileSearch: [{
-                type: ContentChild,
-                args: ['mobileSearch']
-            }], searchInput: [{
-                type: ContentChild,
-                args: [NgxSearchInputDirective]
-            }], right: [{
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NgxSearchContainerComponent, NgxSearchInputDirective };
-//# sourceMappingURL=hug-ngx-search-container.mjs.map

package/fesm2015/hug-ngx-search-container.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"hug-ngx-search-container.mjs","sources":["../../../projects/search-container/src/search-container.component.ts","../../../projects/search-container/src/search-container.component.html","../../../projects/search-container/src/hug-ngx-search-container.ts"],"sourcesContent":["import { AsyncPipe, NgIf } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxDestroy, NgxMediaService } from '@hug/ngx-core';\nimport { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, takeUntil, tap } from 'rxjs';\n\n@Directive({\n    selector: '[ngx-search-input]',\n    standalone: true\n})\nexport class NgxSearchInputDirective {\n    public ngControl = inject(NgControl);\n\n    protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    public constructor() {\n        this.focus();\n    }\n\n    public focus(): void {\n        this.elementRef.nativeElement.focus();\n    }\n}\n\n@Component({\n    selector: 'ngx-search-container',\n    templateUrl: './search-container.component.html',\n    styleUrls: ['./search-container.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [\n        AsyncPipe,\n        NgIf,\n        MatIconModule,\n        MatTooltipModule\n    ]\n})\nexport class NgxSearchContainerComponent extends NgxDestroy implements AfterContentInit {\n\n    @Output()\n    public readonly cleared = new EventEmitter<void>();\n\n    @Input()\n    public clearTooltip = 'Effacer la recherche';\n\n    @ContentChild('mobileSearch')\n    public mobileSearch: TemplateRef<unknown> | undefined;\n\n    protected readonly activeSearch$ = new BehaviorSubject(false);\n\n    protected searchInputValue$: Observable<string> | undefined;\n\n    private _searchInput: NgxSearchInputDirective | undefined;\n\n    @ContentChild(NgxSearchInputDirective)\n    public set searchInput(searchInput: NgxSearchInputDirective) {\n        if (!searchInput) {\n            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');\n        }\n        if (!searchInput.ngControl) {\n            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');\n        }\n        this._searchInput = searchInput;\n    }\n\n    private _right: TemplateRef<unknown> | null = null;\n\n    @Input()\n    public set right(value: TemplateRef<unknown> | null) {\n        this._right = value;\n    }\n\n    public get right(): TemplateRef<unknown> | null {\n        return this._right;\n    }\n\n    public constructor(\n        protected mediaService: NgxMediaService,\n        private zone: NgZone\n    ) {\n        super();\n\n        this.activeSearch$.pipe(\n            switchMap(activeSearch => this.zone.onStable.pipe(\n                first(),\n                tap(() => {\n                    if (!activeSearch) {\n                        this.reset();\n                    }\n                    this._searchInput?.focus();\n                })\n            )),\n            takeUntil(this.destroyed$)\n        ).subscribe();\n    }\n\n    public ngAfterContentInit(): void {\n        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(\n            distinctUntilChanged(),\n            shareReplay({ bufferSize: 1, refCount: false })\n        ) ?? undefined;\n    }\n\n    public reset(): void {\n        this._searchInput?.ngControl?.reset();\n        this.cleared.emit();\n    }\n}\n","<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/hug-ngx-search-container.mjs

@@ -1,100 +0,0 @@
-import { AsyncPipe, NgIf } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, Input, ContentChild } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@hug/ngx-core';
-import { NgxDestroy } from '@hug/ngx-core';
-import { BehaviorSubject, switchMap, first, tap, takeUntil, distinctUntilChanged, shareReplay } from 'rxjs';
-
-class NgxSearchInputDirective {
-    constructor() {
-        this.ngControl = inject(NgControl);
-        this.elementRef = inject(ElementRef);
-        this.focus();
-    }
-    focus() {
-        this.elementRef.nativeElement.focus();
-    }
-}
-NgxSearchInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgxSearchInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-search-input]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; } });
-class NgxSearchContainerComponent extends NgxDestroy {
-    constructor(mediaService, zone) {
-        super();
-        this.mediaService = mediaService;
-        this.zone = zone;
-        this.cleared = new EventEmitter();
-        this.clearTooltip = 'Effacer la recherche';
-        this.activeSearch$ = new BehaviorSubject(false);
-        this._right = null;
-        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
-            if (!activeSearch) {
-                this.reset();
-            }
-            this._searchInput?.focus();
-        }))), takeUntil(this.destroyed$)).subscribe();
-    }
-    set searchInput(searchInput) {
-        if (!searchInput) {
-            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');
-        }
-        if (!searchInput.ngControl) {
-            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
-        }
-        this._searchInput = searchInput;
-    }
-    set right(value) {
-        this._right = value;
-    }
-    get right() {
-        return this._right;
-    }
-    ngAfterContentInit() {
-        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false })) ?? undefined;
-    }
-    reset() {
-        this._searchInput?.ngControl?.reset();
-        this.cleared.emit();
-    }
-}
-NgxSearchContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, deps: [{ token: i1.NgxMediaService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxSearchContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { clearTooltip: "clearTooltip", right: "right" }, outputs: { cleared: "cleared" }, queries: [{ propertyName: "mobileSearch", first: true, predicate: ["mobileSearch"], descendants: true }, { propertyName: "searchInput", first: true, predicate: NgxSearchInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        AsyncPipe,
-                        NgIf,
-                        MatIconModule,
-                        MatTooltipModule
-                    ], template: "<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n", styles: ["ngx-search-container{flex:1 1 auto;display:flex;padding-left:.5rem}ngx-search-container .ngx-search-container{width:100%;transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}ngx-search-container .ngx-search-container.mobile{justify-self:flex-end}ngx-search-container .ngx-search-container:not(.mobile){min-width:35vw;max-width:800px}ngx-search-container .ngx-search-container .mat-icon{padding:.5rem}ngx-search-container .ngx-search-container .icon-clear{cursor:pointer}ngx-search-container .ngx-search-container input{width:100%;background:none;border:none;outline:none;font-size:1.2rem}ngx-search-container .ngx-search-container input:focus{outline:none}ngx-search-container .ngx-search-container-mobile{width:100%;display:flex;justify-content:flex-end;height:40px}ngx-search-container .ngx-search-container-mobile.active{display:flex;align-items:center;position:fixed;top:0;left:0;width:100vw;height:56px;z-index:10}ngx-search-container .ngx-search-container-mobile .mat-icon{padding:.5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
-                type: Output
-            }], clearTooltip: [{
-                type: Input
-            }], mobileSearch: [{
-                type: ContentChild,
-                args: ['mobileSearch']
-            }], searchInput: [{
-                type: ContentChild,
-                args: [NgxSearchInputDirective]
-            }], right: [{
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NgxSearchContainerComponent, NgxSearchInputDirective };
-//# sourceMappingURL=hug-ngx-search-container.mjs.map

package/fesm2020/hug-ngx-search-container.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"hug-ngx-search-container.mjs","sources":["../../../projects/search-container/src/search-container.component.ts","../../../projects/search-container/src/search-container.component.html","../../../projects/search-container/src/hug-ngx-search-container.ts"],"sourcesContent":["import { AsyncPipe, NgIf } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxDestroy, NgxMediaService } from '@hug/ngx-core';\nimport { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, takeUntil, tap } from 'rxjs';\n\n@Directive({\n    selector: '[ngx-search-input]',\n    standalone: true\n})\nexport class NgxSearchInputDirective {\n    public ngControl = inject(NgControl);\n\n    protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    public constructor() {\n        this.focus();\n    }\n\n    public focus(): void {\n        this.elementRef.nativeElement.focus();\n    }\n}\n\n@Component({\n    selector: 'ngx-search-container',\n    templateUrl: './search-container.component.html',\n    styleUrls: ['./search-container.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n    imports: [\n        AsyncPipe,\n        NgIf,\n        MatIconModule,\n        MatTooltipModule\n    ]\n})\nexport class NgxSearchContainerComponent extends NgxDestroy implements AfterContentInit {\n\n    @Output()\n    public readonly cleared = new EventEmitter<void>();\n\n    @Input()\n    public clearTooltip = 'Effacer la recherche';\n\n    @ContentChild('mobileSearch')\n    public mobileSearch: TemplateRef<unknown> | undefined;\n\n    protected readonly activeSearch$ = new BehaviorSubject(false);\n\n    protected searchInputValue$: Observable<string> | undefined;\n\n    private _searchInput: NgxSearchInputDirective | undefined;\n\n    @ContentChild(NgxSearchInputDirective)\n    public set searchInput(searchInput: NgxSearchInputDirective) {\n        if (!searchInput) {\n            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');\n        }\n        if (!searchInput.ngControl) {\n            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');\n        }\n        this._searchInput = searchInput;\n    }\n\n    private _right: TemplateRef<unknown> | null = null;\n\n    @Input()\n    public set right(value: TemplateRef<unknown> | null) {\n        this._right = value;\n    }\n\n    public get right(): TemplateRef<unknown> | null {\n        return this._right;\n    }\n\n    public constructor(\n        protected mediaService: NgxMediaService,\n        private zone: NgZone\n    ) {\n        super();\n\n        this.activeSearch$.pipe(\n            switchMap(activeSearch => this.zone.onStable.pipe(\n                first(),\n                tap(() => {\n                    if (!activeSearch) {\n                        this.reset();\n                    }\n                    this._searchInput?.focus();\n                })\n            )),\n            takeUntil(this.destroyed$)\n        ).subscribe();\n    }\n\n    public ngAfterContentInit(): void {\n        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(\n            distinctUntilChanged(),\n            shareReplay({ bufferSize: 1, refCount: false })\n        ) ?? undefined;\n    }\n\n    public reset(): void {\n        this._searchInput?.ngControl?.reset();\n        this.cleared.emit();\n    }\n}\n","<div *ngIf=\"mediaService.isHandset$ | async; else noHandsetTpl\" class=\"ngx-search-container-mobile mobile\" [class.active]=\"activeSearch$ | async\" #mobileSearch>\n    <ng-container *ngIf=\"activeSearch$ | async; else noActiveSearchTpl\">\n        <mat-icon (click)=\"activeSearch$.next(false)\">arrow_back</mat-icon>\n        <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n    </ng-container>\n    <ng-template #noActiveSearchTpl>\n        <mat-icon (click)=\"activeSearch$.next(true)\">search</mat-icon>\n    </ng-template>\n</div>\n\n<ng-template #noHandsetTpl>\n    <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n</ng-template>\n\n<ng-template #searchContainerTpl>\n    <div class=\"ngx-search-container\">\n        <mat-icon>search</mat-icon>\n        <ng-content></ng-content>\n        <mat-icon *ngIf=\"searchInputValue$ | async\" class=\"icon-clear\" [matTooltip]=\"clearTooltip\" (click)=\"reset()\">close</mat-icon>\n        <ng-container *ngTemplateOutlet=\"right\"></ng-container>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}