@hug/ngx-search-container 3.0.5 → 4.0.0
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 +12 -2
- package/README.md +53 -0
- package/fesm2022/hug-ngx-search-container.mjs +32 -16
- package/fesm2022/hug-ngx-search-container.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +5 -2
- package/providers/index.d.ts +11 -0
- package/providers/ngx-search-container-intl.d.ts +14 -0
- package/search-container.component.d.ts +3 -4
- package/translations/de-CH.json +7 -0
- package/translations/en-US.json +7 -0
- package/translations/fr-CH.json +7 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
# 4.0.0 (2025-11-06)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- ⚠️ **i18n:** remove public folder + avoid providing Ngx*Intl + improve fallback logic (#NGXCPTS-35) ([b9380ef](https://github.com/DSI-HUG/ngx-components/commit/b9380ef))
|
|
6
|
+
- **search-container:** internationalisation (#NGXCPTS-33) ([659c372](https://github.com/DSI-HUG/ngx-components/commit/659c372))
|
|
2
7
|
|
|
3
8
|
### 🌱 Dependencies
|
|
4
9
|
|
|
5
|
-
- **@hug/ngx-core**: upgraded to `
|
|
10
|
+
- **@hug/ngx-core**: upgraded to `v4.0.0`
|
|
11
|
+
|
|
12
|
+
### ❤️ Thank You
|
|
13
|
+
|
|
14
|
+
- Aniata Lehartel
|
|
15
|
+
- damien-guillermet
|
|
6
16
|
|
|
7
17
|
## 3.0.2 (2025-03-13)
|
|
8
18
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,59 @@
|
|
|
1
1
|
@hug/search-container
|
|
2
2
|
=======
|
|
3
3
|
|
|
4
|
+
#### > Configuration for internationalization
|
|
5
|
+
|
|
6
|
+
This library supports internationalization.
|
|
7
|
+
|
|
8
|
+
First of all you have to import the asset translation files like:
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
{
|
|
12
|
+
...
|
|
13
|
+
"assets": [
|
|
14
|
+
...
|
|
15
|
+
{
|
|
16
|
+
"input": "node_modules/@hug/ngx-search-container/translations",
|
|
17
|
+
"glob": "**/*",
|
|
18
|
+
"output": "translations/ngx-search-container"
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
You can choose another output path, but you will need to override the default value in the `provideNgxSearchContainer('my/custom/output/path')`.
|
|
25
|
+
|
|
26
|
+
Then you have to provide `provideNgxSearchContainer()` ; you call provide it globally in your main `ApplicationConfig` like:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { NgxSearchContainerIntl, provideNgxSearchContainer } from '@hug/ngx-search-container';
|
|
30
|
+
|
|
31
|
+
export const appConfig: ApplicationConfig = {
|
|
32
|
+
providers: [
|
|
33
|
+
provideNgxSearchContainer()
|
|
34
|
+
]
|
|
35
|
+
};
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Note that you can also override specific translation entries by providing a custom class implementation like:
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
@Injectable()
|
|
42
|
+
export class CustomNgxSearchContainerIntl extends NgxSearchContainerIntl {
|
|
43
|
+
public override errorDetails = '***My custom errorDetails***';
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const appConfig: ApplicationConfig = {
|
|
47
|
+
providers: [
|
|
48
|
+
{
|
|
49
|
+
provide: NgxSearchContainerIntl,
|
|
50
|
+
useClass: CustomNgxSearchContainerIntl
|
|
51
|
+
},
|
|
52
|
+
provideNgxSearchContainer()
|
|
53
|
+
]
|
|
54
|
+
};
|
|
55
|
+
```
|
|
56
|
+
|
|
4
57
|
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.
|
|
5
58
|
|
|
6
59
|
License: GPL-3.0-only
|
|
@@ -1,13 +1,37 @@
|
|
|
1
1
|
import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, ElementRef, Directive, EventEmitter, NgZone, DestroyRef, Input, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
|
+
import { Injectable, inject, ElementRef, Directive, EventEmitter, NgZone, DestroyRef, Input, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { NgControl } from '@angular/forms';
|
|
6
6
|
import { MatIcon } from '@angular/material/icon';
|
|
7
7
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
8
|
-
import { NgxMediaService } from '@hug/ngx-core';
|
|
8
|
+
import { NgxAbstractIntl, provideNgxIntl, NgxMediaService } from '@hug/ngx-core';
|
|
9
9
|
import { BehaviorSubject, switchMap, first, tap, distinctUntilChanged, shareReplay } from 'rxjs';
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* Data for internationalization
|
|
13
|
+
*/
|
|
14
|
+
class NgxSearchContainerIntl extends NgxAbstractIntl {
|
|
15
|
+
clearSearch = '';
|
|
16
|
+
openSearch = '';
|
|
17
|
+
exitSearch = '';
|
|
18
|
+
addAttSearchInput = '';
|
|
19
|
+
addAttNgmodel = '';
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxSearchContainerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxSearchContainerIntl });
|
|
22
|
+
}
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxSearchContainerIntl, decorators: [{
|
|
24
|
+
type: Injectable
|
|
25
|
+
}] });
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Provide the component to the application level.
|
|
29
|
+
* @param options - The component's providing options.
|
|
30
|
+
* @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
|
|
31
|
+
* @param options.customIntl - A custom internationalization class to inject.
|
|
32
|
+
*/
|
|
33
|
+
const provideNgxSearchContainer = (options) => provideNgxIntl(NgxSearchContainerIntl, options?.translationsPath ?? 'translations/ngx-search-container', options?.customIntl ?? NgxSearchContainerIntl);
|
|
34
|
+
|
|
11
35
|
class NgxSearchInputDirective {
|
|
12
36
|
ngControl = inject(NgControl);
|
|
13
37
|
elementRef = inject(ElementRef);
|
|
@@ -29,18 +53,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
29
53
|
}], ctorParameters: () => [] });
|
|
30
54
|
class NgxSearchContainerComponent {
|
|
31
55
|
cleared = new EventEmitter();
|
|
32
|
-
clearTooltip = 'Effacer la recherche';
|
|
33
|
-
openSearchTooltip = 'Ouvrir la recherche';
|
|
34
|
-
closeSearchTooltip = 'Quitter la recherche';
|
|
35
56
|
mobileSearch;
|
|
57
|
+
intl = inject(NgxSearchContainerIntl);
|
|
36
58
|
activeSearch$ = new BehaviorSubject(false);
|
|
37
59
|
searchInputValue$;
|
|
38
60
|
set searchInput(searchInput) {
|
|
39
61
|
if (!searchInput) {
|
|
40
|
-
throw new Error(
|
|
62
|
+
throw new Error(this.intl.addAttSearchInput);
|
|
41
63
|
}
|
|
42
64
|
if (!searchInput.ngControl) {
|
|
43
|
-
throw new Error(
|
|
65
|
+
throw new Error(this.intl.addAttNgmodel);
|
|
44
66
|
}
|
|
45
67
|
this._searchInput = searchInput;
|
|
46
68
|
}
|
|
@@ -73,7 +95,7 @@ class NgxSearchContainerComponent {
|
|
|
73
95
|
this.cleared.emit();
|
|
74
96
|
}
|
|
75
97
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxSearchContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
76
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: {
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NgxSearchContainerComponent, isStandalone: true, selector: "ngx-search-container", inputs: { 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]=\"intl.exitSearch\" (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]=\"intl.openSearch\" (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]=\"intl.clearSearch\" (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 });
|
|
77
99
|
}
|
|
78
100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
|
|
79
101
|
type: Component,
|
|
@@ -82,15 +104,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
82
104
|
NgTemplateOutlet,
|
|
83
105
|
MatIcon,
|
|
84
106
|
MatTooltip
|
|
85
|
-
], 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]=\"
|
|
107
|
+
], 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]=\"intl.exitSearch\" (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]=\"intl.openSearch\" (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]=\"intl.clearSearch\" (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"] }]
|
|
86
108
|
}], ctorParameters: () => [], propDecorators: { cleared: [{
|
|
87
109
|
type: Output
|
|
88
|
-
}], clearTooltip: [{
|
|
89
|
-
type: Input
|
|
90
|
-
}], openSearchTooltip: [{
|
|
91
|
-
type: Input
|
|
92
|
-
}], closeSearchTooltip: [{
|
|
93
|
-
type: Input
|
|
94
110
|
}], mobileSearch: [{
|
|
95
111
|
type: ContentChild,
|
|
96
112
|
args: ['mobileSearch']
|
|
@@ -105,5 +121,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
105
121
|
* Generated bundle index. Do not edit.
|
|
106
122
|
*/
|
|
107
123
|
|
|
108
|
-
export { NgxSearchContainerComponent, NgxSearchInputDirective };
|
|
124
|
+
export { NgxSearchContainerComponent, NgxSearchContainerIntl, NgxSearchInputDirective, provideNgxSearchContainer };
|
|
109
125
|
//# sourceMappingURL=hug-ngx-search-container.mjs.map
|
|
@@ -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 @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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"}
|
|
1
|
+
{"version":3,"file":"hug-ngx-search-container.mjs","sources":["../../../projects/search-container/src/providers/ngx-search-container-intl.ts","../../../projects/search-container/src/providers/index.ts","../../../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 { Injectable } from '@angular/core';\nimport { NgxAbstractIntl } from '@hug/ngx-core';\n\n/**\n * Data for internationalization\n */\n@Injectable()\nexport class NgxSearchContainerIntl extends NgxAbstractIntl<NgxSearchContainerIntl> {\n\n public clearSearch = '';\n public openSearch = '';\n public exitSearch = '';\n public addAttSearchInput = '';\n public addAttNgmodel = '';\n}\n","import type { EnvironmentProviders } from '@angular/core';\nimport { type NgxOptionsIntl, provideNgxIntl } from '@hug/ngx-core';\n\nimport { NgxSearchContainerIntl } from './ngx-search-container-intl';\n\nexport * from './ngx-search-container-intl';\n\n/**\n * Provide the component to the application level.\n * @param options - The component's providing options.\n * @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).\n * @param options.customIntl - A custom internationalization class to inject.\n */\nexport const provideNgxSearchContainer = (options?: NgxOptionsIntl<NgxSearchContainerIntl>): EnvironmentProviders =>\n provideNgxIntl(\n NgxSearchContainerIntl,\n options?.translationsPath ?? 'translations/ngx-search-container',\n options?.customIntl ?? NgxSearchContainerIntl\n );\n","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\nimport { NgxSearchContainerIntl } from './providers';\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 @ContentChild('mobileSearch')\n public mobileSearch: TemplateRef<unknown> | undefined;\n\n protected readonly intl = inject(NgxSearchContainerIntl);\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(this.intl.addAttSearchInput);\n }\n if (!searchInput.ngControl) {\n throw new Error(this.intl.addAttNgmodel);\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]=\"intl.exitSearch\" (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]=\"intl.openSearch\" (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]=\"intl.clearSearch\" (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/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/ngx-search-container",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
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",
|
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
"types": "./index.d.ts",
|
|
27
27
|
"default": "./fesm2022/hug-ngx-search-container.mjs"
|
|
28
28
|
},
|
|
29
|
+
"./translations/*": {
|
|
30
|
+
"default": "./**/*.json"
|
|
31
|
+
},
|
|
29
32
|
"./package.json": {
|
|
30
33
|
"default": "./package.json"
|
|
31
34
|
}
|
|
@@ -36,7 +39,7 @@
|
|
|
36
39
|
"@angular/forms": ">=19 <20",
|
|
37
40
|
"@angular/material": ">=19 <20",
|
|
38
41
|
"rxjs": ">= 7.4.0",
|
|
39
|
-
"@hug/ngx-core": "^
|
|
42
|
+
"@hug/ngx-core": "^4.0.0"
|
|
40
43
|
},
|
|
41
44
|
"dependencies": {
|
|
42
45
|
"tslib": "^2.7.0"
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { EnvironmentProviders } from '@angular/core';
|
|
2
|
+
import { type NgxOptionsIntl } from '@hug/ngx-core';
|
|
3
|
+
import { NgxSearchContainerIntl } from './ngx-search-container-intl';
|
|
4
|
+
export * from './ngx-search-container-intl';
|
|
5
|
+
/**
|
|
6
|
+
* Provide the component to the application level.
|
|
7
|
+
* @param options - The component's providing options.
|
|
8
|
+
* @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
|
|
9
|
+
* @param options.customIntl - A custom internationalization class to inject.
|
|
10
|
+
*/
|
|
11
|
+
export declare const provideNgxSearchContainer: (options?: NgxOptionsIntl<NgxSearchContainerIntl>) => EnvironmentProviders;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { NgxAbstractIntl } from '@hug/ngx-core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Data for internationalization
|
|
5
|
+
*/
|
|
6
|
+
export declare class NgxSearchContainerIntl extends NgxAbstractIntl<NgxSearchContainerIntl> {
|
|
7
|
+
clearSearch: string;
|
|
8
|
+
openSearch: string;
|
|
9
|
+
exitSearch: string;
|
|
10
|
+
addAttSearchInput: string;
|
|
11
|
+
addAttNgmodel: string;
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerIntl, never>;
|
|
13
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<NgxSearchContainerIntl>;
|
|
14
|
+
}
|
|
@@ -2,6 +2,7 @@ import { AfterContentInit, ElementRef, EventEmitter, TemplateRef } from '@angula
|
|
|
2
2
|
import { NgControl } from '@angular/forms';
|
|
3
3
|
import { NgxMediaService } from '@hug/ngx-core';
|
|
4
4
|
import { BehaviorSubject, Observable } from 'rxjs';
|
|
5
|
+
import { NgxSearchContainerIntl } from './providers';
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
6
7
|
export declare class NgxSearchInputDirective {
|
|
7
8
|
ngControl: NgControl;
|
|
@@ -13,10 +14,8 @@ export declare class NgxSearchInputDirective {
|
|
|
13
14
|
}
|
|
14
15
|
export declare class NgxSearchContainerComponent implements AfterContentInit {
|
|
15
16
|
readonly cleared: EventEmitter<void>;
|
|
16
|
-
clearTooltip: string;
|
|
17
|
-
openSearchTooltip: string;
|
|
18
|
-
closeSearchTooltip: string;
|
|
19
17
|
mobileSearch: TemplateRef<unknown> | undefined;
|
|
18
|
+
protected readonly intl: NgxSearchContainerIntl;
|
|
20
19
|
protected readonly activeSearch$: BehaviorSubject<boolean>;
|
|
21
20
|
protected searchInputValue$: Observable<string> | undefined;
|
|
22
21
|
set searchInput(searchInput: NgxSearchInputDirective);
|
|
@@ -32,5 +31,5 @@ export declare class NgxSearchContainerComponent implements AfterContentInit {
|
|
|
32
31
|
ngAfterContentInit(): void;
|
|
33
32
|
reset(): void;
|
|
34
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerComponent, never>;
|
|
35
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "
|
|
34
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "right": { "alias": "right"; "required": false; }; }, { "cleared": "cleared"; }, ["mobileSearch", "searchInput"], ["*"], true, never>;
|
|
36
35
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"clearSearch": "Suche löschen",
|
|
3
|
+
"openSearch": "Suche öffnen",
|
|
4
|
+
"exitSearch": "Die Suche beenden",
|
|
5
|
+
"addAttSearchInput": "Sie müssen das Attribut ngx-search-input zur Komponente NgxSearchContainerComponent hinzufügen.",
|
|
6
|
+
"addAttNgmodel": "Sie müssen das Attribut ngModel zur Komponente NgxSearchContainerComponent hinzufügen."
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"clearSearch": "Clear the search",
|
|
3
|
+
"openSearch": "Open the search",
|
|
4
|
+
"exitSearch": "Exit the search",
|
|
5
|
+
"addAttSearchInput": "You need to add the attribute ngx-search-input to the NgxSearchContainerComponent",
|
|
6
|
+
"addAttNgmodel": "You need to add the attribute ngModel to the NgxSearchContainerComponent"
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"clearSearch": "Effacer la recherche",
|
|
3
|
+
"openSearch": "Ouvrir la recherche",
|
|
4
|
+
"exitSearch": "Quitter la recherche",
|
|
5
|
+
"addAttSearchInput": "Vous devez ajouter l'attribut ngx-search-input au composant NgxSearchContainerComponent.",
|
|
6
|
+
"addAttNgmodel": "Vous devez ajouter l'attribut ngModel au composant NgxSearchContainerComponent."
|
|
7
|
+
}
|