@fuentis/phoenix-ui 0.0.9-alpha.86 → 0.0.9-alpha.94
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.
|
@@ -536,7 +536,7 @@ class ShellComponent {
|
|
|
536
536
|
this.isSidebarOpen = !this.isSidebarOpen;
|
|
537
537
|
}
|
|
538
538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"bg-white pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"bg-primary-50\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "footerConfig"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"bg-white pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"bg-primary-50 overflow-auto\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "footerConfig"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
540
540
|
}
|
|
541
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ShellComponent, decorators: [{
|
|
542
542
|
type: Component,
|
|
@@ -544,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
544
544
|
SidebarComponent,
|
|
545
545
|
TopbarComponent,
|
|
546
546
|
CommonModule
|
|
547
|
-
], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"bg-white pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"bg-primary-50\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
547
|
+
], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"bg-white pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"bg-primary-50 overflow-auto\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
548
548
|
}], propDecorators: { config: [{
|
|
549
549
|
type: Input
|
|
550
550
|
}], isSidebarOpen: [{
|
|
@@ -1410,7 +1410,7 @@ class TableCaptionComponent {
|
|
|
1410
1410
|
console.log(action);
|
|
1411
1411
|
}
|
|
1412
1412
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit($event)\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\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>", 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: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], 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: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
1413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit({ action })\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\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>", 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: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], 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: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
1414
1414
|
}
|
|
1415
1415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
1416
1416
|
type: Component,
|
|
@@ -1430,7 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
1430
1430
|
ListboxModule,
|
|
1431
1431
|
TranslateModule,
|
|
1432
1432
|
IsSelectedPipe
|
|
1433
|
-
], 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit(
|
|
1433
|
+
], 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit({ action })\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\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>" }]
|
|
1434
1434
|
}], propDecorators: { tableConfiguration: [{
|
|
1435
1435
|
type: Input
|
|
1436
1436
|
}], columns: [{
|
|
@@ -1644,7 +1644,7 @@ class TableComponent {
|
|
|
1644
1644
|
this.tableDataSignal.set(filteredData);
|
|
1645
1645
|
}
|
|
1646
1646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n pResizableColumn\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ tableDataSignal().length }}\n </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n pResizableColumn\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ action, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ tableDataSignal().length }}\n </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1648
1648
|
}
|
|
1649
1649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
1650
1650
|
type: Component,
|
|
@@ -1659,7 +1659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
1659
1659
|
TooltipModule,
|
|
1660
1660
|
TableCellPipe,
|
|
1661
1661
|
SkeletonModule
|
|
1662
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n pResizableColumn\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({
|
|
1662
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n pResizableColumn\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ action, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ tableDataSignal().length }}\n </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
|
|
1663
1663
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
1664
1664
|
type: Input
|
|
1665
1665
|
}], columns: [{
|
|
@@ -4850,7 +4850,7 @@ class StatusBarComponent {
|
|
|
4850
4850
|
width: 60,
|
|
4851
4851
|
};
|
|
4852
4852
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4853
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-0 p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-2\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span\n style=\"min-width: 100px\"\n class=\"m-2 text-500 font-semibold\"\n >\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <button (click)=\"isCollapsed = !isCollapsed\">\n <i\n class=\"pi\"\n [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n ></i>\n </button>\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i5$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }] });
|
|
4853
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-0 p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-2\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span\n style=\"min-width: 100px\"\n class=\"m-2 text-500 font-semibold\"\n >\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <button (click)=\"isCollapsed = !isCollapsed\">\n <i\n class=\"pi\"\n [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n ></i>\n </button>\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i5$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }] });
|
|
4854
4854
|
}
|
|
4855
4855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
4856
4856
|
type: Component,
|
|
@@ -4865,7 +4865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
4865
4865
|
DatePipe,
|
|
4866
4866
|
TextLength,
|
|
4867
4867
|
FirstLetterPipe
|
|
4868
|
-
], template: "<div class=\"surface-0 p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-2\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span\n style=\"min-width: 100px\"\n class=\"m-2 text-500 font-semibold\"\n >\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <button (click)=\"isCollapsed = !isCollapsed\">\n <i\n class=\"pi\"\n [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n ></i>\n </button>\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
4868
|
+
], template: "<div class=\"surface-0 p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-2\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span\n style=\"min-width: 100px\"\n class=\"m-2 text-500 font-semibold\"\n >\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <button (click)=\"isCollapsed = !isCollapsed\">\n <i\n class=\"pi\"\n [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"\n ></i>\n </button>\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}.toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
4869
4869
|
}], propDecorators: { statusBarConfig: [{
|
|
4870
4870
|
type: Input
|
|
4871
4871
|
}], iconEnable: [{
|
|
@@ -4943,9 +4943,7 @@ var SimpleButtonType;
|
|
|
4943
4943
|
SimpleButtonType["SPLIT"] = "split";
|
|
4944
4944
|
})(SimpleButtonType || (SimpleButtonType = {}));
|
|
4945
4945
|
|
|
4946
|
-
|
|
4947
|
-
* Public API Surface of phoenix
|
|
4948
|
-
*/
|
|
4946
|
+
/** Public API Surface of phoenix */
|
|
4949
4947
|
|
|
4950
4948
|
/**
|
|
4951
4949
|
* Generated bundle index. Do not edit.
|