@hug/ngx-search-container 3.0.0 → 3.0.2
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,30 @@
|
|
|
1
|
+
## 3.0.2 (2025-03-13)
|
|
2
|
+
|
|
3
|
+
### 🐛 Fixes
|
|
4
|
+
|
|
5
|
+
- **Layout:** search bar style (NGXCPTS-12) ([de5207b](https://github.com/DSI-HUG/ngx-components/commit/de5207b))
|
|
6
|
+
|
|
7
|
+
### 🌱 Dependencies
|
|
8
|
+
|
|
9
|
+
- **@hug/ngx-core:** upgrade to v3.0.1 ([78b3172](https://github.com/DSI-HUG/ngx-components/commit/78b3172))
|
|
10
|
+
|
|
11
|
+
### ❤️ Thank You
|
|
12
|
+
|
|
13
|
+
- dsi-hug-bot @dsi-hug-bot
|
|
14
|
+
- pdth @pdth
|
|
15
|
+
|
|
16
|
+
## 3.0.1 (2025-02-07)
|
|
17
|
+
|
|
18
|
+
### 🐛 Fixes
|
|
19
|
+
|
|
20
|
+
- **#NGXCPTS-7:** fix color of placeholder ([69aa6f8](https://github.com/DSI-HUG/ngx-components/commit/69aa6f8))
|
|
21
|
+
- **#NGXCPTS-6:** do not reset value initially + add story to demonstrate ([808e4e2](https://github.com/DSI-HUG/ngx-components/commit/808e4e2))
|
|
22
|
+
- **#NGXCPTS-7:** fix color of input ([9125f78](https://github.com/DSI-HUG/ngx-components/commit/9125f78))
|
|
23
|
+
|
|
24
|
+
### ❤️ Thank You
|
|
25
|
+
|
|
26
|
+
- damien-guillermet @damien-guillermet
|
|
27
|
+
|
|
1
28
|
# 3.0.0 (2025-02-06)
|
|
2
29
|
|
|
3
30
|
### 🚀 Features
|
|
@@ -55,12 +55,14 @@ class NgxSearchContainerComponent {
|
|
|
55
55
|
destroyRef = inject(DestroyRef);
|
|
56
56
|
_searchInput;
|
|
57
57
|
_right = null;
|
|
58
|
+
_resetWhenInactiveSearch = false;
|
|
58
59
|
constructor() {
|
|
59
60
|
this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
|
|
60
|
-
if (!activeSearch) {
|
|
61
|
+
if (!activeSearch && this._resetWhenInactiveSearch) {
|
|
61
62
|
this.reset();
|
|
62
63
|
}
|
|
63
64
|
this._searchInput?.focus();
|
|
65
|
+
this._resetWhenInactiveSearch = true;
|
|
64
66
|
}))), takeUntilDestroyed(this.destroyRef)).subscribe();
|
|
65
67
|
}
|
|
66
68
|
ngAfterContentInit() {
|
|
@@ -1 +1 @@
|
|
|
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 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
|
|
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 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 @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 @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 readonly mediaService = inject(NgxMediaService);\n private readonly zone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n private _searchInput: NgxSearchInputDirective | undefined;\n\n private _right: TemplateRef<unknown> | null = null;\n\n private _resetWhenInactiveSearch = false;\n\n public constructor() {\n this.activeSearch$.pipe(\n switchMap(activeSearch => this.zone.onStable.pipe(\n first(),\n tap(() => {\n if (!activeSearch && this._resetWhenInactiveSearch) {\n this.reset();\n }\n this._searchInput?.focus();\n this._resetWhenInactiveSearch = true;\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/ngx-search-container",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
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",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@angular/forms": ">=19 <20",
|
|
37
37
|
"@angular/material": ">=19 <20",
|
|
38
38
|
"rxjs": ">= 7.4.0",
|
|
39
|
-
"@hug/ngx-core": "^3.0.
|
|
39
|
+
"@hug/ngx-core": "^3.0.1"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"tslib": "^2.7.0"
|
|
@@ -22,11 +22,12 @@ export declare class NgxSearchContainerComponent implements AfterContentInit {
|
|
|
22
22
|
set searchInput(searchInput: NgxSearchInputDirective);
|
|
23
23
|
set right(value: TemplateRef<unknown> | null);
|
|
24
24
|
get right(): TemplateRef<unknown> | null;
|
|
25
|
-
protected mediaService: NgxMediaService;
|
|
26
|
-
private zone;
|
|
27
|
-
private destroyRef;
|
|
25
|
+
protected readonly mediaService: NgxMediaService;
|
|
26
|
+
private readonly zone;
|
|
27
|
+
private readonly destroyRef;
|
|
28
28
|
private _searchInput;
|
|
29
29
|
private _right;
|
|
30
|
+
private _resetWhenInactiveSearch;
|
|
30
31
|
constructor();
|
|
31
32
|
ngAfterContentInit(): void;
|
|
32
33
|
reset(): void;
|