@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
26 lines • 13.4 kB
JavaScript
import { Component } from '@angular/core';
import { AbstractSortModeComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngbracket/ngx-layout";
import * as i3 from "@ngbracket/ngx-layout/extended";
import * as i4 from "@angular/material/checkbox";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/sort";
import * as i7 from "@angular/forms";
import * as i8 from "@ngx-translate/core";
export class SortModeComponent extends AbstractSortModeComponent {
constructor() {
super();
}
setValue() {
this.approvalFormControl.setValue(true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SortModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SortModeComponent, selector: "nc-sort-mode", usesInheritance: true, ngImport: i0, template: "<div matSort (matSortChange)=\"sortHeaderChanged($event)\" fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n <div [ngStyle]=\"{'min-width': getMinWidth()}\" *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n <div *ngIf=\"!!header; then thenBlock else elseBlock\" fxFlex></div>\n <ng-template #thenBlock>\n <span fxFlex class=\"header-text\"\n mat-sort-header=\"{{i}}-{{header.uniqueId}}\">\n {{ header.title | translate}}\n </span>\n </ng-template>\n <ng-template #elseBlock>\n <div fxFlex></div>\n </ng-template>\n </div>\n</div>\n", styles: [".header-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px;color:#64748b}.checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.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: i2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultShowHideDirective, selector: " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SortModeComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-sort-mode', template: "<div matSort (matSortChange)=\"sortHeaderChanged($event)\" fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n <div [ngStyle]=\"{'min-width': getMinWidth()}\" *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n <div *ngIf=\"!!header; then thenBlock else elseBlock\" fxFlex></div>\n <ng-template #thenBlock>\n <span fxFlex class=\"header-text\"\n mat-sort-header=\"{{i}}-{{header.uniqueId}}\">\n {{ header.title | translate}}\n </span>\n </ng-template>\n <ng-template #elseBlock>\n <div fxFlex></div>\n </ng-template>\n </div>\n</div>\n", styles: [".header-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px;color:#64748b}.checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"] }]
}], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC1tb2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2hlYWRlci9oZWFkZXItbW9kZXMvc29ydC1tb2RlL3NvcnQtbW9kZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9oZWFkZXIvaGVhZGVyLW1vZGVzL3NvcnQtbW9kZS9zb3J0LW1vZGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7Ozs7OztBQU9uRSxNQUFNLE9BQU8saUJBQWtCLFNBQVEseUJBQXlCO0lBQzVEO1FBQ0ksS0FBSyxFQUFFLENBQUM7SUFDWixDQUFDO0lBRU0sUUFBUTtRQUNYLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUMsQ0FBQzt3R0FQUSxpQkFBaUI7NEZBQWpCLGlCQUFpQiwyRUNSOUIsd2pEQXFCQTs7NEZEYmEsaUJBQWlCO2tCQUw3QixTQUFTOytCQUNJLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Fic3RyYWN0U29ydE1vZGVDb21wb25lbnR9IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtc29ydC1tb2RlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc29ydC1tb2RlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zb3J0LW1vZGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTb3J0TW9kZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0U29ydE1vZGVDb21wb25lbnQge1xuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBzdXBlcigpO1xuICAgIH1cblxuICAgIHB1YmxpYyBzZXRWYWx1ZSgpIHtcbiAgICAgICAgdGhpcy5hcHByb3ZhbEZvcm1Db250cm9sLnNldFZhbHVlKHRydWUpO1xuICAgIH1cbn1cblxuXG4iLCI8ZGl2IG1hdFNvcnQgKG1hdFNvcnRDaGFuZ2UpPVwic29ydEhlYWRlckNoYW5nZWQoJGV2ZW50KVwiIGZ4RmxleD1cIjEwMFwiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRBbGlnbj1cIiBjZW50ZXJcIj5cbiAgICA8bWF0LWNoZWNrYm94ICpuZ0lmPVwiYXBwcm92YWwgJiYgdHlwZUFwcHJvdmFsID09PSAnbXVsdGljaG9pY2UnXCIgW2Zvcm1Db250cm9sXT1cImFwcHJvdmFsRm9ybUNvbnRyb2xcIiBbaW5kZXRlcm1pbmF0ZV09XCJpbmRldGVybWluYXRlXCJcbiAgICAgICAgICAgICAgICAgIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XCIgY29sb3I9J3ByaW1hcnknIGNsYXNzPVwiY2hlY2tib3gtcGFkZGluZ1wiPjwvbWF0LWNoZWNrYm94PlxuICAgIDxtYXQtaWNvbiAqbmdJZj1cImFwcHJvdmFsICYmIHR5cGVBcHByb3ZhbCA9PT0gJ2VudW1lcmF0aW9uJ1wiIGNvbG9yPVwid2FyblwiIChjbGljayk9XCJzZXRWYWx1ZSgpOyRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcIiBjbGFzcz1cImNoZWNrYm94LXBhZGRpbmcgY3Vyc29yLWZpeFwiPmNsb3NlPC9tYXQtaWNvbj5cbiAgICA8ZGl2IFtuZ1N0eWxlXT1cInsnbWluLXdpZHRoJzogZ2V0TWluV2lkdGgoKX1cIiAqbmdGb3I9XCJsZXQgaGVhZGVyIG9mIGhlYWRlclNlcnZpY2UuaGVhZGVyU3RhdGUuc2VsZWN0ZWRIZWFkZXJzJCB8IGFzeW5jOyBsZXQgaSA9IGluZGV4XCIgZnhGbGV4XG4gICAgICAgICBbZnhIaWRlLmx0LXhsXT1cImkgPj0gNCAmJiB0aGlzLmhlYWRlclNlcnZpY2UucmVzcG9uc2l2ZUhlYWRlcnMgJiYgIXRoaXMuaGVhZGVyU2VydmljZS5vdmVyZmxvd01vZGVcIlxuICAgICAgICAgW2Z4SGlkZS5sdC1sZ109XCJpID49IDMgJiYgdGhpcy5oZWFkZXJTZXJ2aWNlLnJlc3BvbnNpdmVIZWFkZXJzICYmICF0aGlzLmhlYWRlclNlcnZpY2Uub3ZlcmZsb3dNb2RlXCJcbiAgICAgICAgIFtmeEhpZGUubHQtbWRdPVwiaSA+PSAyICYmIHRoaXMuaGVhZGVyU2VydmljZS5yZXNwb25zaXZlSGVhZGVycyAmJiAhdGhpcy5oZWFkZXJTZXJ2aWNlLm92ZXJmbG93TW9kZVwiXG4gICAgICAgICBbZnhIaWRlLmx0LXNtXT1cImkgPj0gMSAmJiB0aGlzLmhlYWRlclNlcnZpY2UucmVzcG9uc2l2ZUhlYWRlcnMgJiYgIXRoaXMuaGVhZGVyU2VydmljZS5vdmVyZmxvd01vZGVcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cIiEhaGVhZGVyOyB0aGVuIHRoZW5CbG9jayBlbHNlIGVsc2VCbG9ja1wiIGZ4RmxleD48L2Rpdj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICN0aGVuQmxvY2s+XG4gICAgICAgICAgICA8c3BhbiBmeEZsZXggY2xhc3M9XCJoZWFkZXItdGV4dFwiXG4gICAgICAgICAgICAgICAgICBtYXQtc29ydC1oZWFkZXI9XCJ7e2l9fS17e2hlYWRlci51bmlxdWVJZH19XCI+XG4gICAgICAgICAgICB7eyBoZWFkZXIudGl0bGUgfCB0cmFuc2xhdGV9fVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICA8bmctdGVtcGxhdGUgI2Vsc2VCbG9jaz5cbiAgICAgICAgICAgIDxkaXYgZnhGbGV4PjwvZGl2PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=