@netgrif/components/esm2022/lib/search/advanced-search/search-predicate-component/search-predicate.component.mjs

Netgrif Application Engine frontend Angular components

import { Component, Inject } from '@angular/core';
import { AbstractSearchPredicateComponent, NAE_SEARCH_CATEGORIES } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@netgrif/components-core";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "@angular/material/core";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/icon";
import * as i8 from "@angular/material/form-field";
import * as i9 from "@angular/material/select";
import * as i10 from "../search-configuration-input-component/search-configuration-input.component";
import * as i11 from "@ngx-translate/core";
export class SearchPredicateComponent extends AbstractSearchPredicateComponent {
    constructor(searchCategories, logger, initializationService, categoryFactory) {
        super(searchCategories, logger, initializationService, categoryFactory);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchPredicateComponent, deps: [{ token: NAE_SEARCH_CATEGORIES }, { token: i1.LoggerService }, { token: i1.AdvancedSearchComponentInitializationService }, { token: i1.CategoryFactory }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchPredicateComponent, selector: "nc-search-predicate", usesInheritance: true, ngImport: i0, template: "<div class=\"predicate-body netgrif-input-search-fix netgrif-input-primary-search-fix\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <div *ngIf=\"!selectedCategory; then categorySelection else categoryDisplay\"></div>\n    <ng-template #categorySelection>\n        <mat-form-field class=\"mat-form-field-wrapper-search\" appearance=\"outline\">\n            <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n            <mat-label>{{'search.category.select' | translate}}</mat-label>\n            <mat-select (selectionChange)=\"categoryChanged($event.value)\" #categoryInput [disabled]=\"!editable\">\n                <mat-option *ngFor=\"let category of searchCategories\"\n                            [value]=\"category\">{{category.translationPath | translate}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </ng-template>\n    <ng-template #categoryDisplay>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"text-margin\"\n             [ngClass]=\"{'bold-text': selectedCategory.displayBold}\"\n             (click)=\"clearCategorySelection()\">\n            {{selectedCategory.translationPath | translate}}\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"selectedCategory\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-template ngFor let-configurationInput [ngForOf]=\"selectedCategory.configurationInputs$ | async\">\n            <nc-search-configuration-input [configuration]=\"configurationInput\" [selectedCategory]=\"selectedCategory\"\n                                           [editable]=\"editable\"></nc-search-configuration-input>\n        </ng-template>\n    </div>\n    <div *ngIf=\"editable\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-stroked-button color=\"warn\" (click)=\"remove()\" class=\"advanced-search-buttons\">\n            <mat-icon class=\"fix-mat-icon\">clear</mat-icon>\n        </button>\n    </div>\n</div>\n", styles: [".predicate-body{border-radius:4px;padding-right:4px;min-height:32px}.smaller-button{width:32px;height:32px;line-height:32px;margin-right:-4px}.bold-text{font-weight:700}.text-margin{margin-left:4px}.white-background{background:#fafafa}::ng-deep .mat-mdc-form-field-wrapper{margin:0;padding-bottom:0}.mat-mdc-form-field-wrapper-search{margin:0!important;border-radius:5px;background:#fafafa;min-width:250px}.advanced-search-buttons{min-height:43px;margin:0 8px 0 4px;min-width:43px;padding:0}.prefix-icon{color:#64748b}@media only screen and (max-width: 599px){.mat-mdc-form-field-wrapper-search{min-width:unset}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.SearchConfigurationInputComponent, selector: "nc-search-configuration-input" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchPredicateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-search-predicate', template: "<div class=\"predicate-body netgrif-input-search-fix netgrif-input-primary-search-fix\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <div *ngIf=\"!selectedCategory; then categorySelection else categoryDisplay\"></div>\n    <ng-template #categorySelection>\n        <mat-form-field class=\"mat-form-field-wrapper-search\" appearance=\"outline\">\n            <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n            <mat-label>{{'search.category.select' | translate}}</mat-label>\n            <mat-select (selectionChange)=\"categoryChanged($event.value)\" #categoryInput [disabled]=\"!editable\">\n                <mat-option *ngFor=\"let category of searchCategories\"\n                            [value]=\"category\">{{category.translationPath | translate}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </ng-template>\n    <ng-template #categoryDisplay>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"text-margin\"\n             [ngClass]=\"{'bold-text': selectedCategory.displayBold}\"\n             (click)=\"clearCategorySelection()\">\n            {{selectedCategory.translationPath | translate}}\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"selectedCategory\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-template ngFor let-configurationInput [ngForOf]=\"selectedCategory.configurationInputs$ | async\">\n            <nc-search-configuration-input [configuration]=\"configurationInput\" [selectedCategory]=\"selectedCategory\"\n                                           [editable]=\"editable\"></nc-search-configuration-input>\n        </ng-template>\n    </div>\n    <div *ngIf=\"editable\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-stroked-button color=\"warn\" (click)=\"remove()\" class=\"advanced-search-buttons\">\n            <mat-icon class=\"fix-mat-icon\">clear</mat-icon>\n        </button>\n    </div>\n</div>\n", styles: [".predicate-body{border-radius:4px;padding-right:4px;min-height:32px}.smaller-button{width:32px;height:32px;line-height:32px;margin-right:-4px}.bold-text{font-weight:700}.text-margin{margin-left:4px}.white-background{background:#fafafa}::ng-deep .mat-mdc-form-field-wrapper{margin:0;padding-bottom:0}.mat-mdc-form-field-wrapper-search{margin:0!important;border-radius:5px;background:#fafafa;min-width:250px}.advanced-search-buttons{min-height:43px;margin:0 8px 0 4px;min-width:43px;padding:0}.prefix-icon{color:#64748b}@media only screen and (max-width: 599px){.mat-mdc-form-field-wrapper-search{min-width:unset}}\n"] }]
        }], ctorParameters: () => [{ type: Array, decorators: [{
                    type: Inject,
                    args: [NAE_SEARCH_CATEGORIES]
                }] }, { type: i1.LoggerService }, { type: i1.AdvancedSearchComponentInitializationService }, { type: i1.CategoryFactory }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLXByZWRpY2F0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9zZWFyY2gvYWR2YW5jZWQtc2VhcmNoL3NlYXJjaC1wcmVkaWNhdGUtY29tcG9uZW50L3NlYXJjaC1wcmVkaWNhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvc2VhcmNoL2FkdmFuY2VkLXNlYXJjaC9zZWFyY2gtcHJlZGljYXRlLWNvbXBvbmVudC9zZWFyY2gtcHJlZGljYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFPLE1BQU0sZUFBZSxDQUFDO0FBQ3RELE9BQU8sRUFDSCxnQ0FBZ0MsRUFHaEMscUJBQXFCLEVBRXhCLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7Ozs7Ozs7QUFPbEMsTUFBTSxPQUFPLHdCQUF5QixTQUFRLGdDQUFnQztJQUUxRSxZQUEyQyxnQkFBNEMsRUFDM0UsTUFBcUIsRUFDckIscUJBQW1FLEVBQ25FLGVBQWdDO1FBQ3hDLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUscUJBQXFCLEVBQUUsZUFBZSxDQUFDLENBQUM7SUFDNUUsQ0FBQzt3R0FQUSx3QkFBd0Isa0JBRWIscUJBQXFCOzRGQUZoQyx3QkFBd0Isa0ZDZHJDLDg2REFnQ0E7OzRGRGxCYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0kscUJBQXFCOzswQkFNbEIsTUFBTTsyQkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0LCBUeXBlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RTZWFyY2hQcmVkaWNhdGVDb21wb25lbnQsXG4gICAgQWR2YW5jZWRTZWFyY2hDb21wb25lbnRJbml0aWFsaXphdGlvblNlcnZpY2UsXG4gICAgQ2F0ZWdvcnksIExvZ2dlclNlcnZpY2UsXG4gICAgTkFFX1NFQVJDSF9DQVRFR09SSUVTLFxuICAgIENhdGVnb3J5RmFjdG9yeVxufSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLXNlYXJjaC1wcmVkaWNhdGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2gtcHJlZGljYXRlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtcHJlZGljYXRlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoUHJlZGljYXRlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RTZWFyY2hQcmVkaWNhdGVDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IoQEluamVjdChOQUVfU0VBUkNIX0NBVEVHT1JJRVMpIHNlYXJjaENhdGVnb3JpZXM6IEFycmF5PFR5cGU8Q2F0ZWdvcnk8YW55Pj4+LFxuICAgICAgICAgICAgICAgIGxvZ2dlcjogTG9nZ2VyU2VydmljZSxcbiAgICAgICAgICAgICAgICBpbml0aWFsaXphdGlvblNlcnZpY2U6IEFkdmFuY2VkU2VhcmNoQ29tcG9uZW50SW5pdGlhbGl6YXRpb25TZXJ2aWNlLFxuICAgICAgICAgICAgICAgIGNhdGVnb3J5RmFjdG9yeTogQ2F0ZWdvcnlGYWN0b3J5KSB7XG4gICAgICAgIHN1cGVyKHNlYXJjaENhdGVnb3JpZXMsIGxvZ2dlciwgaW5pdGlhbGl6YXRpb25TZXJ2aWNlLCBjYXRlZ29yeUZhY3RvcnkpO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJwcmVkaWNhdGUtYm9keSBuZXRncmlmLWlucHV0LXNlYXJjaC1maXggbmV0Z3JpZi1pbnB1dC1wcmltYXJ5LXNlYXJjaC1maXhcIiBmeExheW91dD1cInJvd1wiIGZ4TGF5b3V0QWxpZ249XCJzdGFydCBjZW50ZXJcIj5cbiAgICA8ZGl2ICpuZ0lmPVwiIXNlbGVjdGVkQ2F0ZWdvcnk7IHRoZW4gY2F0ZWdvcnlTZWxlY3Rpb24gZWxzZSBjYXRlZ29yeURpc3BsYXlcIj48L2Rpdj5cbiAgICA8bmctdGVtcGxhdGUgI2NhdGVnb3J5U2VsZWN0aW9uPlxuICAgICAgICA8bWF0LWZvcm0tZmllbGQgY2xhc3M9XCJtYXQtZm9ybS1maWVsZC13cmFwcGVyLXNlYXJjaFwiIGFwcGVhcmFuY2U9XCJvdXRsaW5lXCI+XG4gICAgICAgICAgICA8bWF0LWljb24gbWF0UHJlZml4IGNsYXNzPVwicHJlZml4LWljb25cIj5zZWFyY2g8L21hdC1pY29uPlxuICAgICAgICAgICAgPG1hdC1sYWJlbD57eydzZWFyY2guY2F0ZWdvcnkuc2VsZWN0JyB8IHRyYW5zbGF0ZX19PC9tYXQtbGFiZWw+XG4gICAgICAgICAgICA8bWF0LXNlbGVjdCAoc2VsZWN0aW9uQ2hhbmdlKT1cImNhdGVnb3J5Q2hhbmdlZCgkZXZlbnQudmFsdWUpXCIgI2NhdGVnb3J5SW5wdXQgW2Rpc2FibGVkXT1cIiFlZGl0YWJsZVwiPlxuICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBjYXRlZ29yeSBvZiBzZWFyY2hDYXRlZ29yaWVzXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbdmFsdWVdPVwiY2F0ZWdvcnlcIj57e2NhdGVnb3J5LnRyYW5zbGF0aW9uUGF0aCB8IHRyYW5zbGF0ZX19PC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgPC9tYXQtc2VsZWN0PlxuICAgICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPG5nLXRlbXBsYXRlICNjYXRlZ29yeURpc3BsYXk+XG4gICAgICAgIDxkaXYgZnhMYXlvdXQ9XCJyb3dcIiBmeExheW91dEFsaWduPVwic3RhcnQgY2VudGVyXCIgY2xhc3M9XCJ0ZXh0LW1hcmdpblwiXG4gICAgICAgICAgICAgW25nQ2xhc3NdPVwieydib2xkLXRleHQnOiBzZWxlY3RlZENhdGVnb3J5LmRpc3BsYXlCb2xkfVwiXG4gICAgICAgICAgICAgKGNsaWNrKT1cImNsZWFyQ2F0ZWdvcnlTZWxlY3Rpb24oKVwiPlxuICAgICAgICAgICAge3tzZWxlY3RlZENhdGVnb3J5LnRyYW5zbGF0aW9uUGF0aCB8IHRyYW5zbGF0ZX19XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2ICpuZ0lmPVwic2VsZWN0ZWRDYXRlZ29yeVwiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cInN0YXJ0IGNlbnRlclwiPlxuICAgICAgICA8bmctdGVtcGxhdGUgbmdGb3IgbGV0LWNvbmZpZ3VyYXRpb25JbnB1dCBbbmdGb3JPZl09XCJzZWxlY3RlZENhdGVnb3J5LmNvbmZpZ3VyYXRpb25JbnB1dHMkIHwgYXN5bmNcIj5cbiAgICAgICAgICAgIDxuYy1zZWFyY2gtY29uZmlndXJhdGlvbi1pbnB1dCBbY29uZmlndXJhdGlvbl09XCJjb25maWd1cmF0aW9uSW5wdXRcIiBbc2VsZWN0ZWRDYXRlZ29yeV09XCJzZWxlY3RlZENhdGVnb3J5XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbZWRpdGFibGVdPVwiZWRpdGFibGVcIj48L25jLXNlYXJjaC1jb25maWd1cmF0aW9uLWlucHV0PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJlZGl0YWJsZVwiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cImNlbnRlciBjZW50ZXJcIj5cbiAgICAgICAgPGJ1dHRvbiBtYXQtc3Ryb2tlZC1idXR0b24gY29sb3I9XCJ3YXJuXCIgKGNsaWNrKT1cInJlbW92ZSgpXCIgY2xhc3M9XCJhZHZhbmNlZC1zZWFyY2gtYnV0dG9uc1wiPlxuICAgICAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiZml4LW1hdC1pY29uXCI+Y2xlYXI8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19