@hug/ngx-search-container 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+## 1.1.0 (2024-06-26)
+
+
+### 🚀 Features
+
+- **search-container:** first commit ([f140942](https://github.com/DSI-HUG/ngx-components/commit/f140942))
+
+
+### ❤️  Thank You
+
+- Badisi

package/README.md

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

package/karma.conf.js

@@ -0,0 +1,45 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = config => {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, '../../coverage/search-container'),
+            subdir: '.',
+            reporters: [
+                { type: 'html' },
+                { type: 'text-summary' }
+            ]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        failOnEmptyTestSuite: false,
+        restartOnFileChange: true
+    });
+};

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/search-container",
+    "assets": [
+        "CHANGELOG.md",
+        {
+            "input": "src/",
+            "glob": "_search-container-theme.scss",
+            "output": "."
+        }
+    ],
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@hug/ngx-search-container",
+    "version": "1.1.0",
+    "description": "HUG Angular - search-container component",
+    "homepage": "https://github.com/dsi-hug/ngx-components",
+    "license": "GPL-3.0-only",
+    "author": "HUG - Hôpitaux Universitaires Genève",
+    "contributors": [
+        "badisi (https://github.com/badisi)",
+        "vapkse (https://github.com/vapkse)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dsi-hug/ngx-components.git"
+    },
+    "keywords": [
+        "angular",
+        "material",
+        "material design",
+        "components"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "lint": "eslint . --fix",
+        "test": "ng test search-container",
+        "test:ci": "ng test search-container --watch=false --browsers=ChromeHeadless",
+        "build:ng": "ng build search-container -c=production",
+        "build": "nx build:ng @hug/ngx-search-container --verbose",
+        "release": "nx release -p=@hug/ngx-search-container --yes --verbose",
+        "release:dry-run": "nx release -p=@hug/ngx-search-container --verbose --dry-run"
+    },
+    "peerDependencies": {
+        "@angular/common": ">= 14",
+        "@angular/core": ">= 14",
+        "@angular/forms": ">= 14",
+        "@angular/material": ">= 14",
+        "rxjs": ">= 7.0.0",
+        "@hug/ngx-core": "1.1.5"
+    },
+    "dependencies": {
+        "tslib": "^2.6.3"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/_search-container-theme.scss

@@ -0,0 +1,76 @@
+@use '@angular/material' as mat;
+
+@mixin search-container-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    search-container {
+        .search-container {
+            background-color: mat.get-color-from-palette($background, background, 0.2);
+
+            &:hover {
+                background-color: mat.get-color-from-palette($background, background, 0.3);
+            }
+
+            &:focus,
+            &:focus-within {
+                color: mat.get-color-from-palette($foreground, text, 0.8);
+                background-color: mat.get-color-from-palette($background, background, 0.8);
+
+                input {
+                    color: mat.get-color-from-palette($foreground, text, 0.6);
+
+                    &::placeholder {
+                        color: mat.get-color-from-palette($foreground, text, 0.6);
+                    }
+                }
+
+                .icon-clear {
+                    transition: 0.3s ease-in-out;
+                    color: mat.get-color-from-palette($foreground, disabled);
+
+                    &:hover {
+                        color: mat.get-color-from-palette($foreground, text);
+                    }
+                }
+            }
+
+            .icon-clear {
+                :hover {
+                    color: mat.get-color-from-palette($background, background)
+                }
+            }
+
+            input {
+                color: mat.get-color-from-palette($background, background, 0.8);
+
+                &::placeholder {
+                    color: mat.get-color-from-palette($background, background, 0.8);
+                }
+            }
+        }
+
+        .search-container-mobile {
+            &.active {
+                background-color: mat.get-color-from-palette($background, background);
+                color: mat.get-color-from-palette($foreground, text);
+            }
+
+            .search-container {
+                &::placeholder {
+                    color: mat.get-color-from-palette($foreground, secondary-text);
+                }
+
+                input {
+                    color: mat.get-color-from-palette($foreground, text, 0.6);
+
+                    &::placeholder {
+                        color: mat.get-color-from-palette($foreground, text, 0.6);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './search-container.component';
+export * from './search-container.module';

package/src/search-container.component.html

@@ -0,0 +1,22 @@
+<div *ngIf="mediaService.isHandset$ | async; else noHandsetTpl" class="search-container-mobile mobile" [class.active]="activeSearch$ | async" #mobileSearch>
+    <ng-container *ngIf="activeSearch$ | async; else noActiveSearchTpl">
+        <mat-icon (click)="activeSearch$.next(false)">arrow_back</mat-icon>
+        <ng-container *ngTemplateOutlet="searchContainerTpl"></ng-container>
+    </ng-container>
+    <ng-template #noActiveSearchTpl>
+        <mat-icon (click)="activeSearch$.next(true)">search</mat-icon>
+    </ng-template>
+</div>
+
+<ng-template #noHandsetTpl>
+    <ng-container *ngTemplateOutlet="searchContainerTpl"></ng-container>
+</ng-template>
+
+<ng-template #searchContainerTpl>
+    <div class="search-container">
+        <mat-icon>search</mat-icon>
+        <ng-content></ng-content>
+        <mat-icon *ngIf="searchInputValue$ | async" class="icon-clear" [matTooltip]="clearTooltip" (click)="reset()">close</mat-icon>
+        <ng-container *ngTemplateOutlet="right"></ng-container>
+    </div>
+</ng-template>

package/src/search-container.component.scss

@@ -0,0 +1,65 @@
+search-container {
+    display: flex;
+    flex: 1 1 auto;
+    padding-left: 0.5rem;
+
+    .search-container {
+        width: 100%;
+
+        &.mobile {
+            justify-self: flex-end;
+        }
+
+        &:not(.mobile) {
+            min-width: 35vw;
+            max-width: 800px;
+        }
+
+        transition: 0.3s ease-in-out;
+        border-radius: 4px;
+        height: 40px;
+        display: flex;
+
+        .mat-icon {
+            padding: 0.5rem;
+        }
+
+        .icon-clear {
+            cursor: pointer;
+        }
+
+        input {
+            width: 100%;
+            background: none;
+            border: none;
+            outline: none;
+            font-size: 1.2rem;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .search-container-mobile {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        height: 40px;
+
+        &.active {
+            display: flex;
+            align-items: center;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 56px;
+            z-index: 10;
+        }
+
+        .mat-icon {
+            padding: 0.5rem;
+        }
+    }
+}

package/src/search-container.component.ts

@@ -0,0 +1,99 @@
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Self, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { Destroy, MediaService } from '@hug/ngx-core';
+import { BehaviorSubject, distinctUntilChanged, first, Observable, shareReplay, switchMap, takeUntil, tap } from 'rxjs';
+
+@Directive({
+    selector: '[searchInput]'
+})
+export class SearchInputDirective {
+    public constructor(
+        @Optional() @Self() public ngControl: NgControl,
+        private elementRef: ElementRef<HTMLElement>
+    ) {
+        this.focus();
+    }
+
+    public focus(): void {
+        this.elementRef.nativeElement.focus();
+    }
+}
+
+@Component({
+    selector: 'search-container',
+    templateUrl: './search-container.component.html',
+    styleUrls: ['./search-container.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SearchContainerComponent extends Destroy implements AfterContentInit {
+
+    @Output()
+    public readonly cleared = new EventEmitter<void>();
+
+    @Input()
+    public clearTooltip = 'Effacer la recherche';
+
+    @ContentChild('mobileSearch')
+    public mobileSearch: TemplateRef<unknown> | undefined;
+
+    protected readonly activeSearch$ = new BehaviorSubject(false);
+
+    protected searchInputValue$: Observable<string> | null | undefined;
+
+    private _searchInput: SearchInputDirective | undefined;
+
+    @ContentChild(SearchInputDirective)
+    public set searchInput(searchInput: SearchInputDirective) {
+        if (!searchInput) {
+            throw new Error('You need to add the attribute searchInput to the SearchContainerComponent');
+        }
+        if (!searchInput.ngControl) {
+            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
+        }
+        this._searchInput = searchInput;
+    }
+
+    private _right: TemplateRef<unknown> | null = null;
+
+    @Input()
+    public set right(value: TemplateRef<unknown> | null) {
+        this._right = value;
+    }
+
+    public get right(): TemplateRef<unknown> | null {
+        return this._right;
+    }
+
+    public constructor(
+        protected mediaService: MediaService,
+        private zone: NgZone
+    ) {
+        super();
+
+        this.activeSearch$.pipe(
+            switchMap(activeSearch => this.zone.onStable.pipe(
+                first(),
+                tap(() => {
+                    if (!activeSearch) {
+                        this.reset();
+                    }
+                    this._searchInput?.focus();
+                })
+            )),
+            takeUntil(this.destroyed$)
+        ).subscribe();
+    }
+
+    public ngAfterContentInit(): void {
+        this.searchInputValue$ = this._searchInput?.ngControl?.valueChanges?.pipe(
+            distinctUntilChanged(),
+            shareReplay({ bufferSize: 1, refCount: false })
+        );
+    }
+
+    public reset(): void {
+        this._searchInput?.ngControl?.reset();
+        this.cleared.emit();
+    }
+}

package/src/search-container.module.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import { SearchContainerComponent, SearchInputDirective } from './search-container.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule
+    ],
+    declarations: [
+        SearchContainerComponent,
+        SearchInputDirective
+    ],
+    exports: [
+        SearchContainerComponent,
+        SearchInputDirective
+    ]
+})
+export class SearchContainerModule { }

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+    context: (path: string, deep?: boolean, filter?: RegExp) => {
+        <T>(id: string): T;
+        keys: () => string[];
+    };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/lib",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "src/test.ts",
+        "**/*.spec.ts"
+    ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "./tsconfig.lib.json",
+    "compilerOptions": {
+        "declarationMap": false
+    },
+    "angularCompilerOptions": {
+        "compilationMode": "partial"
+    }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/spec",
+        "types": [
+            "jasmine"
+        ]
+    },
+    "files": [
+        "src/test.ts"
+    ],
+    "include": [
+        "**/*.spec.ts",
+        "**/*.d.ts"
+    ]
+}