@fuentis/phoenix-ui 0.0.9-alpha.481 → 0.0.9-alpha.482
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.
|
@@ -2625,7 +2625,7 @@ class TableCaptionComponent {
|
|
|
2625
2625
|
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
2626
2626
|
}
|
|
2627
2627
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key ){ @switch(control.type) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n }} }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Caption Filters (shown outside popover) -->\n @for(control of filters; track control.key) { @if(control.isInCaption) {\n @switch(control.type) { @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } } } }\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key) { @if(!control.isInCaption) {\n @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n } } } }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2629
2629
|
}
|
|
2630
2630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
2631
2631
|
type: Component,
|
|
@@ -2650,7 +2650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2650
2650
|
OverlayBadgeModule,
|
|
2651
2651
|
RippleModule,
|
|
2652
2652
|
FloatLabelModule,
|
|
2653
|
-
], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key
|
|
2653
|
+
], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Caption Filters (shown outside popover) -->\n @for(control of filters; track control.key) { @if(control.isInCaption) {\n @switch(control.type) { @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } } } }\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key) { @if(!control.isInCaption) {\n @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n } } } }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n" }]
|
|
2654
2654
|
}], propDecorators: { columnsPopover: [{
|
|
2655
2655
|
type: ViewChild,
|
|
2656
2656
|
args: ['columnsPopover']
|