@hug/ngx-search-container 1.1.7 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 1.1.8 (2024-07-24)
2
+
3
+
4
+ ### 🐛 Fixes
5
+
6
+ - **ngx-search-container:** update patch version ([fe4999d](https://github.com/DSI-HUG/ngx-components/commit/fe4999d))
7
+
8
+
9
+ ### 🌱 Dependencies
10
+
11
+ - **@hug/ngx-core:** upgrade to v1.1.12 ([78a2936](https://github.com/DSI-HUG/ngx-components/commit/78a2936))
12
+
13
+
14
+ ### ❤️ Thank You
15
+
16
+ - dsi-hug-bot @dsi-hug-bot
17
+ - Serge
18
+
1
19
  ## 1.1.7 (2024-07-24)
2
20
 
3
21
 
@@ -68,7 +68,7 @@ export class NgxSearchContainerComponent extends NgxDestroy {
68
68
  }
69
69
  }
70
70
  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 });
71
- 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{display:flex;flex:1 1 auto;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 });
71
+ 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 });
72
72
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
73
73
  type: Component,
74
74
  args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
76
76
  NgIf,
77
77
  MatIconModule,
78
78
  MatTooltipModule
79
- ], 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{display:flex;flex:1 1 auto;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"] }]
79
+ ], 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"] }]
80
80
  }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
81
81
  type: Output
82
82
  }], clearTooltip: [{
@@ -72,7 +72,7 @@ class NgxSearchContainerComponent extends NgxDestroy {
72
72
  }
73
73
  }
74
74
  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 });
75
- 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{display:flex;flex:1 1 auto;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 });
75
+ 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 });
76
76
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
77
77
  type: Component,
78
78
  args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
80
80
  NgIf,
81
81
  MatIconModule,
82
82
  MatTooltipModule
83
- ], 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{display:flex;flex:1 1 auto;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"] }]
83
+ ], 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"] }]
84
84
  }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
85
85
  type: Output
86
86
  }], clearTooltip: [{
@@ -69,7 +69,7 @@ class NgxSearchContainerComponent extends NgxDestroy {
69
69
  }
70
70
  }
71
71
  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 });
72
- 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{display:flex;flex:1 1 auto;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 });
72
+ 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 });
73
73
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
74
74
  type: Component,
75
75
  args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -77,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
77
77
  NgIf,
78
78
  MatIconModule,
79
79
  MatTooltipModule
80
- ], 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{display:flex;flex:1 1 auto;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"] }]
80
+ ], 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"] }]
81
81
  }], ctorParameters: function () { return [{ type: i1.NgxMediaService }, { type: i0.NgZone }]; }, propDecorators: { cleared: [{
82
82
  type: Output
83
83
  }], clearTooltip: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hug/ngx-search-container",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "description": "HUG Angular - search-container component",
5
5
  "homepage": "https://github.com/dsi-hug/ngx-components",
6
6
  "license": "GPL-3.0-only",
@@ -22,18 +22,18 @@
22
22
  "sideEffects": false,
23
23
  "exports": {
24
24
  ".": {
25
- "sass": "./_search-container-theme.scss"
25
+ "sass": "./_search-container-theme.scss",
26
+ "types": "./index.d.ts",
27
+ "esm2020": "./esm2020/hug-ngx-search-container.mjs",
28
+ "es2020": "./fesm2020/hug-ngx-search-container.mjs",
29
+ "es2015": "./fesm2015/hug-ngx-search-container.mjs",
30
+ "node": "./fesm2015/hug-ngx-search-container.mjs",
31
+ "default": "./fesm2020/hug-ngx-search-container.mjs"
32
+ },
33
+ "./package.json": {
34
+ "default": "./package.json"
26
35
  }
27
36
  },
28
- "scripts": {
29
- "lint": "eslint . --fix",
30
- "test": "ng test search-container",
31
- "test:ci": "ng test search-container --watch=false --browsers=ChromeHeadless",
32
- "build:ng": "ng build search-container -c=production",
33
- "build": "nx build:ng @hug/ngx-search-container --verbose",
34
- "release": "node -r @swc-node/register ../../scripts/release.ts --projects=@hug/ngx-search-container --verbose",
35
- "release:dry-run": "npm run release -- --dry-run"
36
- },
37
37
  "peerDependencies": {
38
38
  "@angular/common": ">= 14",
39
39
  "@angular/core": ">= 14",
@@ -47,5 +47,11 @@
47
47
  },
48
48
  "publishConfig": {
49
49
  "access": "public"
50
- }
50
+ },
51
+ "module": "fesm2015/hug-ngx-search-container.mjs",
52
+ "es2020": "fesm2020/hug-ngx-search-container.mjs",
53
+ "esm2020": "esm2020/hug-ngx-search-container.mjs",
54
+ "fesm2020": "fesm2020/hug-ngx-search-container.mjs",
55
+ "fesm2015": "fesm2015/hug-ngx-search-container.mjs",
56
+ "typings": "index.d.ts"
51
57
  }