@netgrif/components/esm2022/lib/panel/panel-item/panel-item.component.mjs

Netgrif Application Engine frontend Angular components

import { Component } from '@angular/core';
import { AbstractPanelItemComponent } 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/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/tooltip";
import * as i7 from "../immediate/immediate-filter-text/immediate-filter-text.component";
export class PanelItemComponent extends AbstractPanelItemComponent {
    constructor() {
        super();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PanelItemComponent, selector: "nc-panel-item", usesInheritance: true, ngImport: i0, template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault class=\"panel-text\"\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n", styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{padding-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}.panel-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: i3.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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.ImmediateFilterTextComponent, selector: "nc-immediate-filter-text" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PanelItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-panel-item', template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault class=\"panel-text\"\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n", styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{padding-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}.panel-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lbC9wYW5lbC1pdGVtL3BhbmVsLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvcGFuZWwvcGFuZWwtaXRlbS9wYW5lbC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7OztBQU90RSxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsMEJBQTBCO0lBRWhFO1FBQ0ksS0FBSyxFQUFFLENBQUM7SUFDWixDQUFDO3dHQUpVLGtCQUFrQjs0RkFBbEIsa0JBQWtCLDRFQ1IvQiw0dUNBbUJBOzs0RkRYYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWJzdHJhY3RQYW5lbEl0ZW1Db21wb25lbnQgfSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduYy1wYW5lbC1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhbmVsLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYW5lbC1pdGVtLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUGFuZWxJdGVtQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RQYW5lbEl0ZW1Db21wb25lbnQge1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgICAgc3VwZXIoKTtcbiAgfVxufVxuIiwiPHNwYW4gY2xhc3M9J3RleHQtY29sdW1uLW1hcmdpbicgZnhMYXlvdXRBbGlnbj0nc3RhcnQgY2VudGVyJz5cbiAgICA8bWF0LWljb24gY2xhc3M9J3BhbmVsLWljb24gcGFuZWwtcHJpbWFyeS1pY29uJyAqbmdJZj0nbGVhZGluZ0ljb25FbmFibGVkJz5cbiAgICAgICAge3tsZWFkaW5nSWNvbiA/IGxlYWRpbmdJY29uIDogJ2xhYmVsJ319PC9tYXQtaWNvbj5cbiAgICA8bWF0LWljb24gY2xhc3M9J3BhbmVsLWljb24gcGFuZWwtcHJpbWFyeS1pY29uJ1xuICAgICAgICAgICAgICAqbmdJZj1cIiEhZmVhdHVyZWRWYWx1ZS5pY29uICYmICEhZmVhdHVyZWRWYWx1ZS52YWx1ZSAmJiBmZWF0dXJlZFZhbHVlLnR5cGUgIT09ICdidXR0b24nICYmICFsZWFkaW5nSWNvbkVuYWJsZWRcIj57e2ZlYXR1cmVkVmFsdWUuaWNvbn19PC9tYXQtaWNvbj5cbiAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09J2ZlYXR1cmVkVmFsdWUudHlwZSc+XG4gICAgICAgIDxzcGFuICpuZ1N3aXRjaERlZmF1bHQgY2xhc3M9XCJwYW5lbC10ZXh0XCJcbiAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieyd0ZXh0LWNvbHVtbi1lbGxpcHNpcyc6IHRleHRFbGxpcHNpcywgJ3RleHQtY29sdW1uLXdvcmQtd3JhcCc6ICF0ZXh0RWxsaXBzaXN9XCJcbiAgICAgICAgICAgICAgW21hdFRvb2x0aXBdPSdmZWF0dXJlZFZhbHVlLnZhbHVlJ1xuICAgICAgICAgICAgICBbbWF0VG9vbHRpcERpc2FibGVkXT0nIXRleHRFbGxpcHNpcydcbiAgICAgICAgICAgICAgW21hdFRvb2x0aXBDbGFzc109XCIncHJlLWxpbmUtZGlhbG9nJ1wiPnt7ZmVhdHVyZWRWYWx1ZS52YWx1ZX19PC9zcGFuPlxuICAgICAgICA8YnV0dG9uICpuZ1N3aXRjaENhc2U9XCInYnV0dG9uJ1wiIG1hdC1mbGF0LWJ1dHRvbiBjb2xvcj0ncHJpbWFyeSc+e3tmZWF0dXJlZFZhbHVlLnZhbHVlfX08L2J1dHRvbj5cbiAgICAgICAgPG5jLWltbWVkaWF0ZS1maWx0ZXItdGV4dCAqbmdTd2l0Y2hDYXNlPVwiJ2ZpbHRlcidcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtmaWx0ZXJNZXRhZGF0YV09J2ZlYXR1cmVkVmFsdWUuZmlsdGVyTWV0YWRhdGEnXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2VsbGlwc2lzXT0ndGV4dEVsbGlwc2lzJ1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPSd3aWR0aC0xMDAnPlxuICAgICAgICA8L25jLWltbWVkaWF0ZS1maWx0ZXItdGV4dD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvc3Bhbj5cbiJdfQ==