npm - @hug/ngx-search-container - Versions diffs - 21.0.2 → 22.0.0-alpha.2 - Mend

@hug/ngx-search-container 21.0.2 → 22.0.0-alpha.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.

Files changed (13) hide show

package/CHANGELOG.md +12 -0
package/README.md +1 -1
package/fesm2022/hug-ngx-search-container-m2.mjs +125 -0
package/fesm2022/hug-ngx-search-container-m2.mjs.map +1 -0
package/fesm2022/hug-ngx-search-container.mjs +2 -119
package/fesm2022/hug-ngx-search-container.mjs.map +1 -1
package/package.json +13 -8
package/types/hug-ngx-search-container-m2.d.ts +58 -0
package/types/hug-ngx-search-container.d.ts +2 -57
/package/{_search-container-theme.scss → m2/_search-container-theme.scss} +0 -0
/package/{translations → m2/translations}/de-CH.json +0 -0
/package/{translations → m2/translations}/en-US.json +0 -0
/package/{translations → m2/translations}/fr-CH.json +0 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,15 @@
+## 22.0.0-alpha.2 (2026-04-01)
+### 🌱 Dependencies
+- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.2`
+## 22.0.0-alpha.1 (2026-03-13)
+### 🌱 Dependencies
+- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.1`
 ## 21.0.2 (2026-02-13)
 ### 🌱 Dependencies

package/README.md CHANGED Viewed

@@ -13,7 +13,7 @@ First of all you have to import the asset translation files like:
     "assets": [
         ...
         {
-            "input": "node_modules/@hug/ngx-search-container/translations",
+            "input": "node_modules/@hug/ngx-search-container/m2/translations",
             "glob": "**/*",
             "output": "translations/ngx-search-container"
         }

package/fesm2022/hug-ngx-search-container-m2.mjs ADDED Viewed

@@ -0,0 +1,125 @@
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, Directive, EventEmitter, NgZone, DestroyRef, Input, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } 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 { NgxAbstractIntl, provideNgxIntl, NgxMediaService } from '@hug/ngx-core';
+import { BehaviorSubject, switchMap, first, tap, distinctUntilChanged, shareReplay } from 'rxjs';
+/**
+ * Data for internationalization
+ */
+class NgxSearchContainerIntl extends NgxAbstractIntl {
+    clearSearch = '';
+    openSearch = '';
+    exitSearch = '';
+    addAttSearchInput = '';
+    addAttNgmodel = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchContainerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchContainerIntl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchContainerIntl, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Provide the component to the application level.
+ * @param options - The component's providing options.
+ * @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
+ * @param options.customIntl - A custom internationalization class to inject.
+ */
+const provideNgxSearchContainer = (options) => provideNgxIntl(NgxSearchContainerIntl, options?.translationsPath ?? 'translations/ngx-search-container', options?.customIntl ?? NgxSearchContainerIntl);
+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: "21.2.6", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-search-input]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+class NgxSearchContainerComponent {
+    cleared = new EventEmitter();
+    mobileSearch;
+    intl = inject(NgxSearchContainerIntl, { optional: true });
+    activeSearch$ = new BehaviorSubject(false);
+    searchInputValue$;
+    set searchInput(searchInput) {
+        if (!searchInput) {
+            throw new Error(this.intl?.addAttSearchInput ?? 'You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
+        }
+        if (!searchInput.ngControl) {
+            throw new Error(this.intl?.addAttNgmodel ?? '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;
+    _resetWhenInactiveSearch = false;
+    constructor() {
+        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
+            if (!activeSearch && this._resetWhenInactiveSearch) {
+                this.reset();
+            }
+            this._searchInput?.focus();
+            this._resetWhenInactiveSearch = true;
+        }))), 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: "21.2.6", ngImport: i0, type: NgxSearchContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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\n                class=\"icon-close-search\"\n                [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n                (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon\n                class=\"icon-open-search\"\n                [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n                (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 ?? 'Clear the search'\" (click)=\"reset()\">\n                close\n            </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%}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{transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}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: "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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\n                class=\"icon-close-search\"\n                [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n                (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon\n                class=\"icon-open-search\"\n                [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n                (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 ?? 'Clear the search'\" (click)=\"reset()\">\n                close\n            </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%}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{transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}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
+            }], mobileSearch: [{
+                type: ContentChild,
+                args: ['mobileSearch']
+            }], searchInput: [{
+                type: ContentChild,
+                args: [NgxSearchInputDirective]
+            }], right: [{
+                type: Input
+            }] } });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { NgxSearchContainerComponent, NgxSearchContainerIntl, NgxSearchInputDirective, provideNgxSearchContainer };
+//# sourceMappingURL=hug-ngx-search-container-m2.mjs.map

package/fesm2022/hug-ngx-search-container-m2.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hug-ngx-search-container-m2.mjs","sources":["../../../projects/search-container/m2/providers/ngx-search-container-intl.ts","../../../projects/search-container/m2/providers/index.ts","../../../projects/search-container/m2/search-container.component.ts","../../../projects/search-container/m2/search-container.component.html","../../../projects/search-container/m2/hug-ngx-search-container-m2.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, { optional: true });\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 ?? 'You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');\n }\n if (!searchInput.ngControl) {\n throw new Error(this.intl?.addAttNgmodel ?? '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\n class=\"icon-close-search\"\n [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n (click)=\"activeSearch$.next(false)\">\n arrow_back\n </mat-icon>\n <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n } @else {\n <mat-icon\n class=\"icon-open-search\"\n [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n (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 ?? 'Clear the search'\" (click)=\"reset()\">\n close\n </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/fesm2022/hug-ngx-search-container.mjs CHANGED Viewed

@@ -1,125 +1,8 @@
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, Directive, EventEmitter, NgZone, DestroyRef, Input, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } 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 { NgxAbstractIntl, provideNgxIntl, NgxMediaService } from '@hug/ngx-core';
-import { BehaviorSubject, switchMap, first, tap, distinctUntilChanged, shareReplay } from 'rxjs';
-/**
- * Data for internationalization
- */
-class NgxSearchContainerIntl extends NgxAbstractIntl {
-    clearSearch = '';
-    openSearch = '';
-    exitSearch = '';
-    addAttSearchInput = '';
-    addAttNgmodel = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchContainerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchContainerIntl });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchContainerIntl, decorators: [{
-            type: Injectable
-        }] });
-/**
- * Provide the component to the application level.
- * @param options - The component's providing options.
- * @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
- * @param options.customIntl - A custom internationalization class to inject.
- */
-const provideNgxSearchContainer = (options) => provideNgxIntl(NgxSearchContainerIntl, options?.translationsPath ?? 'translations/ngx-search-container', options?.customIntl ?? NgxSearchContainerIntl);
-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: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: NgxSearchInputDirective, isStandalone: true, selector: "[ngx-search-input]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-search-input]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
-class NgxSearchContainerComponent {
-    cleared = new EventEmitter();
-    mobileSearch;
-    intl = inject(NgxSearchContainerIntl, { optional: true });
-    activeSearch$ = new BehaviorSubject(false);
-    searchInputValue$;
-    set searchInput(searchInput) {
-        if (!searchInput) {
-            throw new Error(this.intl?.addAttSearchInput ?? 'You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
-        }
-        if (!searchInput.ngControl) {
-            throw new Error(this.intl?.addAttNgmodel ?? '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;
-    _resetWhenInactiveSearch = false;
-    constructor() {
-        this.activeSearch$.pipe(switchMap(activeSearch => this.zone.onStable.pipe(first(), tap(() => {
-            if (!activeSearch && this._resetWhenInactiveSearch) {
-                this.reset();
-            }
-            this._searchInput?.focus();
-            this._resetWhenInactiveSearch = true;
-        }))), 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: "21.1.1", ngImport: i0, type: NgxSearchContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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\n                class=\"icon-close-search\"\n                [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n                (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon\n                class=\"icon-open-search\"\n                [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n                (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 ?? 'Clear the search'\" (click)=\"reset()\">\n                close\n            </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%}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{transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}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: "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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NgxSearchContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-search-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\n                class=\"icon-close-search\"\n                [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n                (click)=\"activeSearch$.next(false)\">\n                arrow_back\n            </mat-icon>\n            <ng-container *ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n        } @else {\n            <mat-icon\n                class=\"icon-open-search\"\n                [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n                (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 ?? 'Clear the search'\" (click)=\"reset()\">\n                close\n            </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%}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{transition:.3s ease-in-out;border-radius:4px;height:40px;display:flex}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
-            }], mobileSearch: [{
-                type: ContentChild,
-                args: ['mobileSearch']
-            }], searchInput: [{
-                type: ContentChild,
-                args: [NgxSearchInputDirective]
-            }], right: [{
-                type: Input
-            }] } });
+const m3 = 'M3';
 /**
  * Generated bundle index. Do not edit.
  */
-export { NgxSearchContainerComponent, NgxSearchContainerIntl, NgxSearchInputDirective, provideNgxSearchContainer };
+export { m3 };
 //# sourceMappingURL=hug-ngx-search-container.mjs.map

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

	@@ -1 +1 @@
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, { optional: true });\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 ?? 'You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');\n }\n if (!searchInput.ngControl) {\n throw new Error(this.intl?.addAttNgmodel ?? '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\n class=\"icon-close-search\"\n [matTooltip]=\"intl?.exitSearch ?? 'Exit the search'\"\n (click)=\"activeSearch$.next(false)\">\n arrow_back\n </mat-icon>\n <ng-container ngTemplateOutlet=\"searchContainerTpl\"></ng-container>\n } @else {\n <mat-icon\n class=\"icon-open-search\"\n [matTooltip]=\"intl?.openSearch ?? 'Open the search'\"\n (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 ?? 'Clear the search'\" (click)=\"reset()\">\n close\n </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":";;;;;;;;;;AAGA;;AAEG;AAEG,MAAO,sBAAuB,SAAQ,eAAuC,CAAA;IAExE,WAAW,GAAG,EAAE;IAChB,UAAU,GAAG,EAAE;IACf,UAAU,GAAG,EAAE;IACf,iBAAiB,GAAG,EAAE;IACtB,aAAa,GAAG,EAAE;uGANhB,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAtB,sBAAsB,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBADlC;;;ACCD;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,CAAC,OAAgD,KACtF,cAAc,CACV,sBAAsB,EACtB,OAAO,EAAE,gBAAgB,IAAI,mCAAmC,EAChE,OAAO,EAAE,UAAU,IAAI,sBAAsB;;MCFxC,uBAAuB,CAAA;AACzB,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE1B,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAElE,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,KAAK,EAAE;IAChB;IAEO,KAAK,GAAA;AACR,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE;IACzC;uGAXS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,UAAU,EAAE;AACf,iBAAA;;MA4BY,2BAA2B,CAAA;AAGpB,IAAA,OAAO,GAAG,IAAI,YAAY,EAAQ;AAG3C,IAAA,YAAY;IAEA,IAAI,GAAG,MAAM,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEzD,IAAA,aAAa,GAAG,IAAI,eAAe,CAAC,KAAK,CAAC;AAEnD,IAAA,iBAAiB;IAE3B,IACW,WAAW,CAAC,WAAoC,EAAA;QACvD,IAAI,CAAC,WAAW,EAAE;YACd,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,iBAAiB,IAAI,mFAAmF,CAAC;QACxI;AACA,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE;YACxB,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,IAAI,0EAA0E,CAAC;QAC3H;AACA,QAAA,IAAI,CAAC,YAAY,GAAG,WAAW;IACnC;IAEA,IACW,KAAK,CAAC,KAAkC,EAAA;AAC/C,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;IACvB;AAEA,IAAA,IAAW,KAAK,GAAA;QACZ,OAAO,IAAI,CAAC,MAAM;IACtB;AAEmB,IAAA,YAAY,GAAG,MAAM,CAAC,eAAe,CAAC;AACxC,IAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;AACrB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAExC,IAAA,YAAY;IAEZ,MAAM,GAAgC,IAAI;IAE1C,wBAAwB,GAAG,KAAK;AAExC,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,aAAa,CAAC,IAAI,CACnB,SAAS,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAC7C,KAAK,EAAE,EACP,GAAG,CAAC,MAAK;AACL,YAAA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,wBAAwB,EAAE;gBAChD,IAAI,CAAC,KAAK,EAAE;YAChB;AACA,YAAA,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI;AACxC,QAAA,CAAC,CAAC,CACL,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CACtC,CAAC,SAAS,EAAE;IACjB;IAEO,kBAAkB,GAAA;AACrB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,CACrE,oBAAoB,EAAE,EACtB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAClD,IAAI,SAAS;IAClB;IAEO,KAAK,GAAA;AACR,QAAA,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE;AACrC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACvB;uGAtES,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EActB,uBAAuB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDzC,21CAmCA,EAAA,MAAA,EAAA,CAAA,4rCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEQ,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAHV,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAMJ,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAbvC,SAAS;+BACI,sBAAsB,EAAA,aAAA,EAGjB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACL,SAAS;wBACT,gBAAgB;wBAChB,OAAO;wBACP;AACH,qBAAA,EAAA,QAAA,EAAA,21CAAA,EAAA,MAAA,EAAA,CAAA,4rCAAA,CAAA,EAAA;;sBAIA;;sBAGA,YAAY;uBAAC,cAAc;;sBAS3B,YAAY;uBAAC,uBAAuB;;sBAWpC;;;AEnEL;;AAEG;;;;"}
1	+ {"version":3,"file":"hug-ngx-search-container.mjs","sources":["../../../projects/search-container/src/index.ts","../../../projects/search-container/src/hug-ngx-search-container.ts"],"sourcesContent":["export const m3 = 'M3';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"AAAO,MAAM,EAAE,GAAG;;ACAlB;;AAEG;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@hug/ngx-search-container",
-    "version": "21.0.2",
+    "version": "22.0.0-alpha.2",
     "description": "HUG Angular - search-container component",
     "homepage": "https://github.com/dsi-hug/ngx-components",
     "license": "GPL-3.0-only",
@@ -21,16 +21,20 @@
     ],
     "sideEffects": false,
     "exports": {
-        ".": {
-            "sass": "./_search-container-theme.scss",
-            "types": "./types/hug-ngx-search-container.d.ts",
-            "default": "./fesm2022/hug-ngx-search-container.mjs"
+        "./m2": {
+            "sass": "./m2/_search-container-theme.scss",
+            "types": "./types/hug-ngx-search-container-m2.d.ts",
+            "default": "./fesm2022/hug-ngx-search-container-m2.mjs"
         },
-        "./translations/*": {
+        "./m2/translations/*": {
             "default": "./**/*.json"
         },
         "./package.json": {
             "default": "./package.json"
+        },
+        ".": {
+            "types": "./types/hug-ngx-search-container.d.ts",
+            "default": "./fesm2022/hug-ngx-search-container.mjs"
         }
     },
     "peerDependencies": {
@@ -38,7 +42,7 @@
         "@angular/core": ">=21 <22",
         "@angular/forms": ">=21 <22",
         "@angular/material": ">=21 <22",
-        "@hug/ngx-core": "^21.2.0",
+        "@hug/ngx-core": "^22.0.0-alpha.2",
         "rxjs": "^7.8.2",
         "zone.js": "^0.16.0"
     },
@@ -46,7 +50,8 @@
         "tslib": "^2.8.1"
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "tag": "alpha"
     },
     "module": "fesm2022/hug-ngx-search-container.mjs",
     "typings": "types/hug-ngx-search-container.d.ts"

package/types/hug-ngx-search-container-m2.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { EnvironmentProviders, AfterContentInit, EventEmitter, TemplateRef, ElementRef } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { NgxAbstractIntl, NgxOptionsIntl, NgxMediaService } from '@hug/ngx-core';
+import { BehaviorSubject, Observable } from 'rxjs';
+/**
+ * Data for internationalization
+ */
+declare class NgxSearchContainerIntl extends NgxAbstractIntl<NgxSearchContainerIntl> {
+    clearSearch: string;
+    openSearch: string;
+    exitSearch: string;
+    addAttSearchInput: string;
+    addAttNgmodel: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgxSearchContainerIntl>;
+}
+/**
+ * Provide the component to the application level.
+ * @param options - The component's providing options.
+ * @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
+ * @param options.customIntl - A custom internationalization class to inject.
+ */
+declare const provideNgxSearchContainer: (options?: NgxOptionsIntl<NgxSearchContainerIntl>) => EnvironmentProviders;
+declare class NgxSearchInputDirective {
+    ngControl: NgControl;
+    protected elementRef: ElementRef<HTMLElement>;
+    constructor();
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSearchInputDirective, "[ngx-search-input]", never, {}, {}, never, never, true, never>;
+}
+declare class NgxSearchContainerComponent implements AfterContentInit {
+    readonly cleared: EventEmitter<void>;
+    mobileSearch: TemplateRef<unknown> | undefined;
+    protected readonly intl: NgxSearchContainerIntl | null;
+    protected readonly activeSearch$: BehaviorSubject<boolean>;
+    protected searchInputValue$: Observable<string> | undefined;
+    set searchInput(searchInput: NgxSearchInputDirective);
+    set right(value: TemplateRef<unknown> | null);
+    get right(): TemplateRef<unknown> | null;
+    protected readonly mediaService: NgxMediaService;
+    private readonly zone;
+    private readonly destroyRef;
+    private _searchInput;
+    private _right;
+    private _resetWhenInactiveSearch;
+    constructor();
+    ngAfterContentInit(): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "right": { "alias": "right"; "required": false; }; }, { "cleared": "cleared"; }, ["mobileSearch", "searchInput"], ["*"], true, never>;
+}
+export { NgxSearchContainerComponent, NgxSearchContainerIntl, NgxSearchInputDirective, provideNgxSearchContainer };

package/types/hug-ngx-search-container.d.ts CHANGED Viewed

@@ -1,58 +1,3 @@
-import * as i0 from '@angular/core';
-import { EnvironmentProviders, ElementRef, AfterContentInit, EventEmitter, TemplateRef } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { NgxAbstractIntl, NgxOptionsIntl, NgxMediaService } from '@hug/ngx-core';
-import { BehaviorSubject, Observable } from 'rxjs';
+declare const m3 = "M3";
-/**
- * Data for internationalization
- */
-declare class NgxSearchContainerIntl extends NgxAbstractIntl<NgxSearchContainerIntl> {
-    clearSearch: string;
-    openSearch: string;
-    exitSearch: string;
-    addAttSearchInput: string;
-    addAttNgmodel: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerIntl, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NgxSearchContainerIntl>;
-}
-/**
- * Provide the component to the application level.
- * @param options - The component's providing options.
- * @param options.translationsPath - The path to the translations files (default: `translations/ngx-search-container`).
- * @param options.customIntl - A custom internationalization class to inject.
- */
-declare const provideNgxSearchContainer: (options?: NgxOptionsIntl<NgxSearchContainerIntl>) => EnvironmentProviders;
-declare class NgxSearchInputDirective {
-    ngControl: NgControl;
-    protected elementRef: ElementRef<HTMLElement>;
-    constructor();
-    focus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSearchInputDirective, "[ngx-search-input]", never, {}, {}, never, never, true, never>;
-}
-declare class NgxSearchContainerComponent implements AfterContentInit {
-    readonly cleared: EventEmitter<void>;
-    mobileSearch: TemplateRef<unknown> | undefined;
-    protected readonly intl: NgxSearchContainerIntl | null;
-    protected readonly activeSearch$: BehaviorSubject<boolean>;
-    protected searchInputValue$: Observable<string> | undefined;
-    set searchInput(searchInput: NgxSearchInputDirective);
-    set right(value: TemplateRef<unknown> | null);
-    get right(): TemplateRef<unknown> | null;
-    protected readonly mediaService: NgxMediaService;
-    private readonly zone;
-    private readonly destroyRef;
-    private _searchInput;
-    private _right;
-    private _resetWhenInactiveSearch;
-    constructor();
-    ngAfterContentInit(): void;
-    reset(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSearchContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSearchContainerComponent, "ngx-search-container", never, { "right": { "alias": "right"; "required": false; }; }, { "cleared": "cleared"; }, ["mobileSearch", "searchInput"], ["*"], true, never>;
-}
-export { NgxSearchContainerComponent, NgxSearchContainerIntl, NgxSearchInputDirective, provideNgxSearchContainer };
+export { m3 };

/package/{_search-container-theme.scss → m2/_search-container-theme.scss} RENAMED Viewed

File without changes

/package/{translations → m2/translations}/de-CH.json RENAMED Viewed

File without changes

/package/{translations → m2/translations}/en-US.json RENAMED Viewed

File without changes

/package/{translations → m2/translations}/fr-CH.json RENAMED Viewed

File without changes