@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
360 lines • 110 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { ITabularConfig } from './tabular-config.interface';
import { ActionConfigRouteType } from './actions-config.interface';
import { TabularSortByService, SortByDirection } from './tabular-sort-by.service';
import { TabularConfig } from './tabular.config';
import { TabularSize } from './tabular-size.enum';
import { TabularColumnTypes } from './tabular-column.interface';
import { Context } from '../enums';
import * as _ from 'lodash';
import { TabularContentService } from './tabular-content.service';
import { TabularTheme } from './tabular-theme.enum';
import { ScrollDispatcher } from '@angular/cdk/scrolling';
import { BehaviorSubject, Subscription } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./tabular.config";
import * as i2 from "./tabular-sort-by.service";
import * as i3 from "./tabular-content.service";
import * as i4 from "@angular/cdk/scrolling";
import * as i5 from "../pagination/pagination.component";
import * as i6 from "@angular/common";
import * as i7 from "@angular/forms";
import * as i8 from "../tooltip/tooltip.directive";
import * as i9 from "../tooltip/tooltip-dynamic-content.directive";
import * as i10 from "@angular/router";
import * as i11 from "../dropdown/dropdown.directive";
import * as i12 from "../dropdown/dropdown-toggle.directive";
import * as i13 from "../dropdown/dropdown-menu.directive";
import * as i14 from "../dropdown/dropdown-item.directive";
export class TabularComponent {
constructor(conf, sortByService, contentService, scroll, cdr) {
this.conf = conf;
this.sortByService = sortByService;
this.contentService = contentService;
this.scroll = scroll;
this.cdr = cdr;
/**
* Event fired when refresh is called.
* Host should refresh data of input.
*/
this.refresh = new EventEmitter();
/**
* Event fired when a row is clicked.
*/
this.rowClick = new EventEmitter();
/**
* Event fired when a column is sorted
*/
this.onSort = new EventEmitter();
/**
* Event fired when selecting a checkbox on a tabular row
*/
this.onCheck = new EventEmitter();
/**
* Event fired when selecting a group checkbox on a tabular column
*/
this.onCheckAll = new EventEmitter();
this.oldRows = [];
this.pagedItems = [];
this.TabularColumnTypes = TabularColumnTypes;
this.TabularSize = TabularSize;
this.TabularTheme = TabularTheme;
this.ActionConfigRouteType = ActionConfigRouteType;
this.selectAll = false;
this.Context = Context;
this.SortByDirection = SortByDirection;
this.isStickyLeft$ = new BehaviorSubject(false);
this.isStickyRight$ = new BehaviorSubject(false);
this._isMutatingInternally = false;
this._initialLoad = true;
this.subscriptions = new Subscription();
this.selectAllValue = false;
this.selectAllDisabled = false;
this.toggleSelectAll = ($event) => {
for (let i = 0; i < this.rows.length; i++) {
if (!this.rows[i].checkboxDisabled) {
this._isMutatingInternally = true;
this.rows[i].checked = this.selectAll;
}
}
this.onCheckAll.emit(this.selectAll);
};
this.toggleIndividualSelect = ($event) => {
this.checkSelectAllState(false);
this.onCheck.emit($event);
};
Object.assign(this, conf);
}
/**
* Tabular configuration
* IPaginationInstance, ISearchConfig
*/
get config() {
return this._config;
}
set config(c) {
if (!c.sortBy) {
c.sortBy = [];
}
this._config = c;
}
/** The function to call when a action item is clicked **/
get callback() {
return this._callback;
}
set callback(Fn) {
this._callback = Fn;
}
/**
* Search term is used in the simple search pipe
* Array of objects: *ngFor="#row of rows | simpleSearch : 'the search term'"
*/
get searchTerm() {
return this._searchTerm;
}
set searchTerm(term) {
this._searchTerm = term;
}
ngOnInit() {
this.subscriptions.add(this.scroll.scrolled().subscribe((cdk) => this.scrolling()));
this.scrolling();
}
ngDoCheck() {
if (!_.isEqual(this.rows, this.oldRows)) {
this.orderByData(false);
if (this.columns.filter(c => c.dataType === TabularColumnTypes.Checkbox).length > 0) {
this.checkSelectAllState(false);
}
// this must run last so equality checking checks after the row data mutates
this.oldRows = _.cloneDeep(this.rows);
}
}
ngAfterViewChecked() {
this.scrolling();
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
/**
* Calls the parsed callback with optional arguments
*/
executeCallback(event, cb) {
if (cb.length) {
if (cb.length === 1) { // if callback has no arguments
cb[0]();
}
else { // if callback has 1 or more arguments
const args = [];
for (let i = 1; i < cb.length; i++) {
args.push(cb[i]);
}
cb[0].apply(this, args);
}
}
}
checkSelectAllState(emitEvent = true) {
let count = 0;
let valueOfDisabled = 0;
let totalRows = this.rows.length;
this.selectAllDisabled = false;
this.selectAll = false;
this.selectAllValue = false;
for (let i = 0; i < this.rows.length; i++) {
if (this.rows[i].checked && !this.rows[i].checkboxDisabled) {
count++;
}
if (this.rows[i].checkboxDisabled) {
this.rows[i].checked = false;
valueOfDisabled++;
totalRows--;
}
}
const oldSelectAll = this.selectAll;
this._isMutatingInternally = true;
this.selectAll = (this.rows.length === count);
if (oldSelectAll !== this.selectAll && emitEvent) {
this.onCheckAll.emit(this.selectAll);
}
if (totalRows === count && valueOfDisabled != this.rows.length) {
this.selectAll = true;
}
else if (this.rows.length != count && count != 0 && this.rows.length != 0) {
this.selectAllValue = true;
}
else if (this.rows.length === valueOfDisabled) {
this.selectAllDisabled = true;
this.selectAll = false;
this.selectAllValue = false;
}
else if (count === 0) {
this.selectAllValue = false;
this.selectAll = false;
}
}
setPage($event = {
page: this.config.pagination.currentPage,
itemsPerPage: this.config.pagination.itemsPerPage
}) {
this.config.pagination.currentPage = $event.page;
// calculate start and end page item indexes
const startIndex = (this.config.pagination.currentPage - 1) * this.config.pagination.itemsPerPage;
const endIndex = Math.min(startIndex + this.config.pagination.itemsPerPage - 1, this.totalItemCount - 1);
this.pagedItems = this.rows.slice(startIndex, endIndex + 1);
}
/**
* Get the action tooltip if it exists
*/
getActionTooltip(action) {
return (action && action.disabledConfig) ? action.disabledConfig.tooltip : '';
}
getActionDisabledState(action) {
return (action && action.disabledConfig) ? action.disabledConfig.disabled : false;
}
/**
* Handles the column header click event for sorting.
* Sort order is Descending, Ascending followed by None.
*/
onSortClickHandler(key, type) {
const findPropInSortList = this.config.sortBy.filter((prop) => { return (prop.property === key); });
if (findPropInSortList.length) {
const prop = findPropInSortList[0];
const index = this.config.sortBy.findIndex(x => x === prop);
if (prop.direction === SortByDirection.None) {
prop.direction = SortByDirection.Descending;
}
else if (prop.direction === SortByDirection.Descending) {
prop.direction = SortByDirection.Ascending;
}
else if (prop.direction === SortByDirection.Ascending) {
if (index > -1) {
this.config.sortBy.splice(index, 1);
}
}
}
else {
if (!this.config.multiSorting) {
this.config.sortBy = [];
}
this.config.sortBy.push({ property: key, direction: SortByDirection.Descending, type: type });
}
this.orderByData(true);
return false;
}
isColumnSorted(key, direction) {
const findPropInSortList = this.config.sortBy.filter((prop) => { return (prop.property === key && prop.direction === direction); });
return (findPropInSortList.length > 0);
}
/**
* Handles the row click event.
*/
onRowClickHandler($event, data) {
const el = $event.target;
if (this.config.clickableRows) {
if (!el.parentElement || el.parentElement.tagName === 'A' ||
el.tagName === 'A' ||
el.parentElement.classList.contains('hx-checkbox-control')) {
return;
}
this.rowClick.emit(data);
}
}
orderByData(emitSortEvent) {
if (this.config.sortBy.length > 0) {
if (!this.config.remoteSorting) {
this._isMutatingInternally = true;
this.rows = [...this.rows]; // Required as array-sort-by mutates the original array
this.sortByService.sortBy(this.rows, this.config.sortBy);
}
}
if (emitSortEvent) {
this.onSort.emit(this.config.sortBy);
}
this.setPage();
}
get totalItemCount() {
return this.rows.length;
}
/**
* Helper to determine if tabular instance is in small mode
*/
isSmall() {
return (this.config.size === TabularSize.Small);
}
hasValidBadgeTypeParams(colData) {
if (colData) {
if (typeof colData.label !== 'undefined') {
return true;
}
else {
console.error('Record for column type badge is invalid, make sure you have the right type. ITabularColumnTypeBadge', { columnValue: colData });
}
}
return false;
}
hasValidIconTypeParams(colData) {
let hasError = false;
if (colData) {
if (typeof colData.icon !== 'undefined') {
if (typeof colData.tooltip.config !== 'undefined' && typeof colData.tooltip.content !== 'undefined') {
if (typeof colData.tooltip.config.context !== 'undefined' || typeof colData.tooltip.config.placement !== 'undefined') {
return true;
}
else {
hasError = true;
}
}
else {
hasError = true;
}
}
else {
hasError = true;
}
}
if (hasError) {
console.error('Record for column type icon is invalid, make sure you have the right type. ITabularColumnTypeIcon', { columnValue: colData });
}
return false;
}
getTooltipContext(colData) {
return (!this.hasValidIconTypeParams(colData)) ? colData.tooltip.config.context : Context.None;
}
hasChildren(action) {
return (action.children && action.children.length > 0);
}
trackByFn(index, item) {
return (item.id) ? item.id : index;
}
getCellValue(cellContent) {
return this.contentService.getContent(cellContent);
}
getTooltipInfo(cellContent) {
return this.contentService.getTooltipInfo(cellContent);
}
scrolling() {
if (this.config.stickyColumns) {
const el = this.scrollable.nativeElement;
const left = el.scrollLeft;
const offset = this.table.nativeElement.clientWidth - el.clientWidth;
this.isStickyLeft$.next((offset > 0 && this.config.stickyColumns.left && left !== 0));
this.isStickyRight$.next((offset > 0 && this.config.stickyColumns.right && left !== offset));
this.cdr.detectChanges();
}
}
}
TabularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabularComponent, deps: [{ token: i1.TabularConfig }, { token: i2.TabularSortByService }, { token: i3.TabularContentService }, { token: i4.ScrollDispatcher }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TabularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabularComponent, selector: "hxa-tabular", inputs: { columns: "columns", rows: "rows", config: "config", callback: "callback", searchTerm: "searchTerm" }, outputs: { refresh: "refresh", rowClick: "rowClick", onSort: "onSort", onCheck: "onCheck", onCheckAll: "onCheckAll" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"tabular__wrapper\">\r\n <div\r\n [class.tabular__scroller]=\"config.stickyColumns\"\r\n cdkScrollable\r\n #scrollable\r\n >\r\n <table\r\n #table\r\n class=\"tabular hx-table is-striped {{ config.cssClass }}\"\r\n [class.is-hover]=\"config.clickableRows\"\r\n [class.is-narrow]=\"config.size === TabularSize.Small\"\r\n [class.has-sticky-header]=\"config.stickyHeader\"\r\n [class.is-sticky-left]=\"isStickyLeft$ | async\"\r\n [class.is-sticky-right]=\"isStickyRight$ | async\"\r\n [class.is-dark]=\"config.theme === TabularTheme.Dark\"\r\n [class.is-light]=\"config.theme === TabularTheme.Light\"\r\n >\r\n <thead>\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n *ngIf=\"!col.hidden\"\r\n class=\"{{ col.cssClass }} tabular__{{ col.label }}\"\r\n [ngClass]=\"{\r\n tabular__checkboxes:\r\n col.dataType === TabularColumnTypes.Checkbox,\r\n tabular__sortable: col.sortable\r\n }\"\r\n >\r\n <!-- sortable column -->\r\n <a\r\n class=\"tabular__sorter\"\r\n href=\"#\"\r\n *ngIf=\"\r\n col.sortable && col.dataType != TabularColumnTypes.Checkbox\r\n \"\r\n (click)=\"onSortClickHandler(col.id, col.dataType)\"\r\n >\r\n <!-- <span [innerHTML]=\"col.label\"></span> -->\r\n <span *ngIf=\"col.options && col.options.header\" [innerHTML]=\"col.options && col.options.header\"></span>\r\n <span *ngIf=\"!col.options || !(col.options && col.options.header)\">{{ col.label }}</span>\r\n <i\r\n class=\"hx-icon icon-arrow-up is-small\"\r\n [class.icon-arrow-up]=\"\r\n isColumnSorted(col.id, SortByDirection.Ascending)\r\n \"\r\n [class.icon-arrow-down]=\"\r\n isColumnSorted(col.id, SortByDirection.Descending)\r\n \"\r\n *ngIf=\"\r\n isColumnSorted(col.id, SortByDirection.Descending) ||\r\n isColumnSorted(col.id, SortByDirection.Ascending)\r\n \"\r\n ></i\r\n ></a>\r\n\r\n <!-- non sortable column -->\r\n <span *ngIf=\"!col.sortable && col.dataType !== TabularColumnTypes.Checkbox\">\r\n <span *ngIf=\"col.options && col.options.header\" [innerHTML]=\"col.options && col.options.header\"></span>\r\n <span *ngIf=\"!col.options || !(col.options && col.options.header)\">{{ col.label }}</span>\r\n </span>\r\n\r\n <!-- checkbox column -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Checkbox\"\r\n class=\"hx-checkbox-control\"\r\n >\r\n <input\r\n id=\"{{ config.id }}-selectAll\"\r\n name=\"{{ config.id }}-selectAll\"\r\n type=\"checkbox\"\r\n class=\"hx-checkbox\"\r\n [ngClass]=\"{ 'is-indeterminate': selectAllValue }\"\r\n (change)=\"toggleSelectAll($event)\"\r\n title=\"Select All\"\r\n [(ngModel)]=\"selectAll\"\r\n [disabled]=\"selectAllDisabled\"\r\n />\r\n <label for=\"{{ config.id }}-selectAll\" class=\"hx-label\"></label>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <!--<tr *ngFor=\"let row of rows | paginate: config.pagination | simpleSearch: searchTerm\">-->\r\n <tr\r\n *ngFor=\"let row of pagedItems; trackBy: trackByFn\"\r\n (click)=\"onRowClickHandler($event, row)\"\r\n [class.is-selected]=\"row.selected\"\r\n [class.is-danger]=\"row.context && row.context === Context.Danger\"\r\n [class.is-warning]=\"row.context && row.context === Context.Warning\"\r\n [class.is-info]=\"row.context && row.context === Context.Info\"\r\n [class.is-success]=\"row.context && row.context === Context.Success\"\r\n [class.has-stripe-danger]=\"\r\n row.stripeContext && row.stripeContext === Context.Danger\r\n \"\r\n [class.has-stripe-warning]=\"\r\n row.stripeContext && row.stripeContext === Context.Warning\r\n \"\r\n [class.has-stripe-info]=\"\r\n row.stripeContext && row.stripeContext === Context.Info\r\n \"\r\n [class.has-stripe-success]=\"\r\n row.stripeContext && row.stripeContext === Context.Success\r\n \"\r\n [ngClass]=\"[row.cssClass ? row.cssClass : '']\"\r\n [attr.title]=\"row.title ? row.title : ''\"\r\n >\r\n <ng-container\r\n *ngFor=\"let col of columns\"\r\n [ngTemplateOutlet]=\"column\"\r\n [ngTemplateOutletContext]=\"{\r\n col: col,\r\n tooltipInfo: getTooltipInfo(row[col.id]),\r\n cellValue: getCellValue(row[col.id])\r\n }\"\r\n >\r\n </ng-container>\r\n\r\n <ng-template\r\n #column\r\n let-col=\"col\"\r\n let-tooltipInfo=\"tooltipInfo\"\r\n let-cellValue=\"cellValue\"\r\n >\r\n <td\r\n *ngIf=\"!col.hidden\"\r\n class=\"{{ col.cssClass }} tabular__{{ col.label }}\"\r\n [ngClass]=\"{\r\n tabular__checkboxes:\r\n col.dataType === TabularColumnTypes.Checkbox,\r\n 'is-text-dotted': !tooltipInfo.config.disabled\r\n }\"\r\n hxaTooltip\r\n [placement]=\"tooltipInfo.config.placement\"\r\n [context]=\"tooltipInfo.config.context\"\r\n [maxWidth]=\"tooltipInfo.config.maxWidth\"\r\n >\r\n <!-- dynamic tooltip -->\r\n <ng-container *ngIf=\"!tooltipInfo.config.disabled\">\r\n <div\r\n *hxaTooltipDynamicContent\r\n [innerHTML]=\"tooltipInfo.content\"\r\n ></div>\r\n </ng-container>\r\n <!-- checkbox type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Checkbox\"\r\n class=\"hx-checkbox-control\"\r\n >\r\n <input\r\n id=\"{{ config.id }}-checkbox-{{ row.id }}\"\r\n name=\"{{ col.label }}-checkbox\"\r\n type=\"checkbox\"\r\n class=\"hx-checkbox\"\r\n title=\"{{ col.label }}\"\r\n (change)=\"toggleIndividualSelect(row)\"\r\n [(ngModel)]=\"row.checked\"\r\n [disabled]=\"row.checkboxDisabled\"\r\n />\r\n <label\r\n for=\"{{ config.id }}-checkbox-{{ row.id }}\"\r\n class=\"hx-label\"\r\n ></label>\r\n </div>\r\n\r\n <!-- string type | number type -->\r\n <span\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.String ||\r\n col.dataType === TabularColumnTypes.Number\r\n \"\r\n title=\"{{ cellValue }}\"\r\n >{{ cellValue }}</span\r\n >\r\n\r\n <!-- html type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Html\"\r\n [innerHTML]=\"cellValue\"\r\n ></div>\r\n\r\n <!-- icon type -->\r\n <i\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.Icon &&\r\n hasValidIconTypeParams(cellValue)\r\n \"\r\n title=\"\"\r\n class=\"hx-icon {{ cellValue.icon }}\"\r\n [hxTooltip]=\"cellValue.tooltip.content\"\r\n placement=\"{{ cellValue.tooltip.config.placement }}\"\r\n [context]=\"cellValue.tooltip.config.context\"\r\n ></i>\r\n\r\n <!-- date type -->\r\n <span *ngIf=\"col.dataType === TabularColumnTypes.Date\">{{\r\n cellValue | date: \"dd/MM/yyyy\"\r\n }}</span>\r\n\r\n <!-- status type -->\r\n <span\r\n *ngIf=\"col.dataType === TabularColumnTypes.Status\"\r\n class=\"hx-icon\"\r\n [ngClass]=\"{\r\n 'is-primary': cellValue,\r\n 'is-danger': !cellValue,\r\n 'icon-check-empty': cellValue,\r\n 'icon-close-empty': !cellValue\r\n }\"\r\n ></span>\r\n\r\n <!-- badge type -->\r\n <span\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.Badge &&\r\n hasValidBadgeTypeParams(cellValue)\r\n \"\r\n class=\"hx-badge is-small {{ cellValue.cssClass }}\"\r\n ><span class=\"hx-badge-content\">{{\r\n cellValue.label\r\n }}</span></span\r\n >\r\n\r\n <!-- date time type -->\r\n <span *ngIf=\"col.dataType === TabularColumnTypes.DateTime\">{{\r\n cellValue | date: \"dd/MM/yyyy hh:mm a\"\r\n }}</span>\r\n\r\n <!-- actions type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Actions\"\r\n class=\"hx-dropdown tabularActions\"\r\n >\r\n <div class=\"tabularActions__action\">\r\n <ng-container\r\n *ngFor=\"let action of cellValue; trackBy: trackByFn\"\r\n >\r\n <!-- single action -->\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"hx-button is-flat\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n [class.is-loading]=\"action.isLoading\"\r\n *ngIf=\"\r\n !getActionDisabledState(action) &&\r\n action.routeType === ActionConfigRouteType.Route &&\r\n !hasChildren(action)\r\n \"\r\n [routerLink]=\"action.route\"\r\n class=\"hx-button is-flat {{ action.css }}\"\r\n title=\"{{ action.label }}\"\r\n >\r\n <span\r\n *ngIf=\"!action.isLoading\"\r\n class=\"hx-icon {{ action.icon }}\"\r\n ></span>\r\n </button>\r\n </span>\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <a\r\n type=\"button\"\r\n class=\"hx-button is-flat\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n [class.is-loading]=\"action.isLoading\"\r\n *ngIf=\"\r\n !getActionDisabledState(action) &&\r\n action.routeType === ActionConfigRouteType.Callback &&\r\n !hasChildren(action)\r\n \"\r\n (click)=\"executeCallback($event, action.callback)\"\r\n class=\"hx-button is-flat {{ action.css }}\"\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n ><span\r\n *ngIf=\"!action.isLoading\"\r\n class=\"hx-icon {{ action.icon }}\"\r\n ></span\r\n ></a>\r\n </span>\r\n\r\n <!-- action with children -->\r\n <div\r\n class=\"hx-dropdown\"\r\n hxaDropdown\r\n *ngIf=\"hasChildren(action)\"\r\n [isDisabled]=\"!!row.actionDisabled\"\r\n >\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <a\r\n class=\"hx-button is-flat hx-button-dropdown\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n hxaDropdownToggle\r\n type=\"button\"\r\n >\r\n <i class=\"icon {{ action.icon }}\"></i>\r\n </a>\r\n </span>\r\n\r\n <div class=\"hx-dropdown-menu\" *hxaDropdownMenu>\r\n <ng-container\r\n *ngFor=\"\r\n let childAction of action.children;\r\n trackBy: trackByFn\r\n \"\r\n >\r\n <a\r\n *ngIf=\"\r\n !getActionDisabledState(childAction) &&\r\n childAction.routeType ===\r\n ActionConfigRouteType.Route\r\n \"\r\n [routerLink]=\"childAction.route\"\r\n hxaDropdownItem\r\n class=\"hx-dropdown-item {{ childAction.css }}\"\r\n [id]=\"childAction.id\"\r\n >{{ childAction.label }}</a\r\n >\r\n <a\r\n *ngIf=\"\r\n !getActionDisabledState(childAction) &&\r\n childAction.routeType ===\r\n ActionConfigRouteType.Callback\r\n \"\r\n (click)=\"\r\n executeCallback($event, childAction.callback)\r\n \"\r\n hxaDropdownItem\r\n class=\"hx-dropdown-item {{ childAction.css }}\"\r\n [id]=\"childAction.id\"\r\n >{{ childAction.label }}</a\r\n >\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-template>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>\r\n\r\n<hx-pagination\r\n [directionLinks]=\"true\"\r\n [boundaryLinks]=\"true\"\r\n [rotate]=\"false\"\r\n [maxSize]=\"10\"\r\n [totalItems]=\"totalItemCount\"\r\n [itemsPerPage]=\"config.pagination.itemsPerPage\"\r\n [(ngModel)]=\"config.pagination.currentPage\"\r\n (pageChanged)=\"setPage($event)\"\r\n *ngIf=\"totalItemCount > config.pagination.itemsPerPage\"\r\n></hx-pagination>\r\n", styles: [".tabular__wrapper{position:relative}\n", ".tabular__scroller{overflow-x:scroll;overflow-y:visible;width:100%;margin-bottom:1.5rem}\n", ".tabular__scroller>table.hx-table{margin-bottom:0}\n", "", ".tabular__sorter{cursor:pointer;display:flex;align-items:center}\n", ".tabular__sorter .hx-icon{margin-left:.1rem}\n", ".tabular__checkboxes{width:2%}\n", ".tabular__checkboxes .hx-checkbox-control{display:flex}\n", ".tabularActions__action button.hx-button,a.hx-button{width:1rem}\n", ".tabularActions__action{display:flex}\n"], components: [{ type: i5.PaginationComponent, selector: "hx-pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "sticky", "pageBtnClass", "disabled", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }], directives: [{ type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.TooltipDirective, selector: "[hxTooltip], [hxaTooltip]", inputs: ["hxTooltip", "disabled", "placement", "showDelay", "hideDelay", "context", "maxWidth", "autoClose"] }, { type: i9.TooltipDynamicContentDirective, selector: "[hxTooltipDynamicContent],[hxaTooltipDynamicContent]", exportAs: ["hx-tooltip-dynamic-content"] }, { type: i10.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i11.DropdownDirective, selector: "[hxaDropdown],[hxDropdown]", inputs: ["placement", "autoClose", "isDisabled", "showDelay", "hideDelay", "maxWidthRelativeTo", "minWidthRelativeTo", "offsetY", "offsetX", "createClipPathMask"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["hx-dropdown", "hxa-dropdown"] }, { type: i12.DropdownToggleDirective, selector: "[hxDropdownToggle],[hxaDropdownToggle]", exportAs: ["hx-dropdown-toggle"] }, { type: i13.DropdownMenuDirective, selector: "[hxDropdownMenu],[hxaDropdownMenu]", exportAs: ["hx-dropdown-menu"] }, { type: i10.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i14.DropdownItemDirective, selector: "[hxDropdownItem],[hxaDropdownItem]" }], pipes: { "async": i6.AsyncPipe, "date": i6.DatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabularComponent, decorators: [{
type: Component,
args: [{ selector: 'hxa-tabular', styles: [
'.tabular__wrapper { position: relative; }',
'.tabular__scroller { overflow-x: scroll; overflow-y: visible; width: 100%; margin-bottom: 1.5rem;}',
'.tabular__scroller > table.hx-table { margin-bottom: 0; }',
'.tabular__sortable {}',
'.tabular__sorter {cursor:pointer; display:flex; align-items: center;}',
'.tabular__sorter .hx-icon {margin-left:.1rem;}',
'.tabular__checkboxes{width:2%;}',
'.tabular__checkboxes .hx-checkbox-control{display:flex;}',
'.tabularActions__action button.hx-button,a.hx-button{ width: 1rem;}',
'.tabularActions__action {display:flex;}'
], template: "<div class=\"tabular__wrapper\">\r\n <div\r\n [class.tabular__scroller]=\"config.stickyColumns\"\r\n cdkScrollable\r\n #scrollable\r\n >\r\n <table\r\n #table\r\n class=\"tabular hx-table is-striped {{ config.cssClass }}\"\r\n [class.is-hover]=\"config.clickableRows\"\r\n [class.is-narrow]=\"config.size === TabularSize.Small\"\r\n [class.has-sticky-header]=\"config.stickyHeader\"\r\n [class.is-sticky-left]=\"isStickyLeft$ | async\"\r\n [class.is-sticky-right]=\"isStickyRight$ | async\"\r\n [class.is-dark]=\"config.theme === TabularTheme.Dark\"\r\n [class.is-light]=\"config.theme === TabularTheme.Light\"\r\n >\r\n <thead>\r\n <tr>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n *ngIf=\"!col.hidden\"\r\n class=\"{{ col.cssClass }} tabular__{{ col.label }}\"\r\n [ngClass]=\"{\r\n tabular__checkboxes:\r\n col.dataType === TabularColumnTypes.Checkbox,\r\n tabular__sortable: col.sortable\r\n }\"\r\n >\r\n <!-- sortable column -->\r\n <a\r\n class=\"tabular__sorter\"\r\n href=\"#\"\r\n *ngIf=\"\r\n col.sortable && col.dataType != TabularColumnTypes.Checkbox\r\n \"\r\n (click)=\"onSortClickHandler(col.id, col.dataType)\"\r\n >\r\n <!-- <span [innerHTML]=\"col.label\"></span> -->\r\n <span *ngIf=\"col.options && col.options.header\" [innerHTML]=\"col.options && col.options.header\"></span>\r\n <span *ngIf=\"!col.options || !(col.options && col.options.header)\">{{ col.label }}</span>\r\n <i\r\n class=\"hx-icon icon-arrow-up is-small\"\r\n [class.icon-arrow-up]=\"\r\n isColumnSorted(col.id, SortByDirection.Ascending)\r\n \"\r\n [class.icon-arrow-down]=\"\r\n isColumnSorted(col.id, SortByDirection.Descending)\r\n \"\r\n *ngIf=\"\r\n isColumnSorted(col.id, SortByDirection.Descending) ||\r\n isColumnSorted(col.id, SortByDirection.Ascending)\r\n \"\r\n ></i\r\n ></a>\r\n\r\n <!-- non sortable column -->\r\n <span *ngIf=\"!col.sortable && col.dataType !== TabularColumnTypes.Checkbox\">\r\n <span *ngIf=\"col.options && col.options.header\" [innerHTML]=\"col.options && col.options.header\"></span>\r\n <span *ngIf=\"!col.options || !(col.options && col.options.header)\">{{ col.label }}</span>\r\n </span>\r\n\r\n <!-- checkbox column -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Checkbox\"\r\n class=\"hx-checkbox-control\"\r\n >\r\n <input\r\n id=\"{{ config.id }}-selectAll\"\r\n name=\"{{ config.id }}-selectAll\"\r\n type=\"checkbox\"\r\n class=\"hx-checkbox\"\r\n [ngClass]=\"{ 'is-indeterminate': selectAllValue }\"\r\n (change)=\"toggleSelectAll($event)\"\r\n title=\"Select All\"\r\n [(ngModel)]=\"selectAll\"\r\n [disabled]=\"selectAllDisabled\"\r\n />\r\n <label for=\"{{ config.id }}-selectAll\" class=\"hx-label\"></label>\r\n </div>\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <!--<tr *ngFor=\"let row of rows | paginate: config.pagination | simpleSearch: searchTerm\">-->\r\n <tr\r\n *ngFor=\"let row of pagedItems; trackBy: trackByFn\"\r\n (click)=\"onRowClickHandler($event, row)\"\r\n [class.is-selected]=\"row.selected\"\r\n [class.is-danger]=\"row.context && row.context === Context.Danger\"\r\n [class.is-warning]=\"row.context && row.context === Context.Warning\"\r\n [class.is-info]=\"row.context && row.context === Context.Info\"\r\n [class.is-success]=\"row.context && row.context === Context.Success\"\r\n [class.has-stripe-danger]=\"\r\n row.stripeContext && row.stripeContext === Context.Danger\r\n \"\r\n [class.has-stripe-warning]=\"\r\n row.stripeContext && row.stripeContext === Context.Warning\r\n \"\r\n [class.has-stripe-info]=\"\r\n row.stripeContext && row.stripeContext === Context.Info\r\n \"\r\n [class.has-stripe-success]=\"\r\n row.stripeContext && row.stripeContext === Context.Success\r\n \"\r\n [ngClass]=\"[row.cssClass ? row.cssClass : '']\"\r\n [attr.title]=\"row.title ? row.title : ''\"\r\n >\r\n <ng-container\r\n *ngFor=\"let col of columns\"\r\n [ngTemplateOutlet]=\"column\"\r\n [ngTemplateOutletContext]=\"{\r\n col: col,\r\n tooltipInfo: getTooltipInfo(row[col.id]),\r\n cellValue: getCellValue(row[col.id])\r\n }\"\r\n >\r\n </ng-container>\r\n\r\n <ng-template\r\n #column\r\n let-col=\"col\"\r\n let-tooltipInfo=\"tooltipInfo\"\r\n let-cellValue=\"cellValue\"\r\n >\r\n <td\r\n *ngIf=\"!col.hidden\"\r\n class=\"{{ col.cssClass }} tabular__{{ col.label }}\"\r\n [ngClass]=\"{\r\n tabular__checkboxes:\r\n col.dataType === TabularColumnTypes.Checkbox,\r\n 'is-text-dotted': !tooltipInfo.config.disabled\r\n }\"\r\n hxaTooltip\r\n [placement]=\"tooltipInfo.config.placement\"\r\n [context]=\"tooltipInfo.config.context\"\r\n [maxWidth]=\"tooltipInfo.config.maxWidth\"\r\n >\r\n <!-- dynamic tooltip -->\r\n <ng-container *ngIf=\"!tooltipInfo.config.disabled\">\r\n <div\r\n *hxaTooltipDynamicContent\r\n [innerHTML]=\"tooltipInfo.content\"\r\n ></div>\r\n </ng-container>\r\n <!-- checkbox type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Checkbox\"\r\n class=\"hx-checkbox-control\"\r\n >\r\n <input\r\n id=\"{{ config.id }}-checkbox-{{ row.id }}\"\r\n name=\"{{ col.label }}-checkbox\"\r\n type=\"checkbox\"\r\n class=\"hx-checkbox\"\r\n title=\"{{ col.label }}\"\r\n (change)=\"toggleIndividualSelect(row)\"\r\n [(ngModel)]=\"row.checked\"\r\n [disabled]=\"row.checkboxDisabled\"\r\n />\r\n <label\r\n for=\"{{ config.id }}-checkbox-{{ row.id }}\"\r\n class=\"hx-label\"\r\n ></label>\r\n </div>\r\n\r\n <!-- string type | number type -->\r\n <span\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.String ||\r\n col.dataType === TabularColumnTypes.Number\r\n \"\r\n title=\"{{ cellValue }}\"\r\n >{{ cellValue }}</span\r\n >\r\n\r\n <!-- html type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Html\"\r\n [innerHTML]=\"cellValue\"\r\n ></div>\r\n\r\n <!-- icon type -->\r\n <i\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.Icon &&\r\n hasValidIconTypeParams(cellValue)\r\n \"\r\n title=\"\"\r\n class=\"hx-icon {{ cellValue.icon }}\"\r\n [hxTooltip]=\"cellValue.tooltip.content\"\r\n placement=\"{{ cellValue.tooltip.config.placement }}\"\r\n [context]=\"cellValue.tooltip.config.context\"\r\n ></i>\r\n\r\n <!-- date type -->\r\n <span *ngIf=\"col.dataType === TabularColumnTypes.Date\">{{\r\n cellValue | date: \"dd/MM/yyyy\"\r\n }}</span>\r\n\r\n <!-- status type -->\r\n <span\r\n *ngIf=\"col.dataType === TabularColumnTypes.Status\"\r\n class=\"hx-icon\"\r\n [ngClass]=\"{\r\n 'is-primary': cellValue,\r\n 'is-danger': !cellValue,\r\n 'icon-check-empty': cellValue,\r\n 'icon-close-empty': !cellValue\r\n }\"\r\n ></span>\r\n\r\n <!-- badge type -->\r\n <span\r\n *ngIf=\"\r\n col.dataType === TabularColumnTypes.Badge &&\r\n hasValidBadgeTypeParams(cellValue)\r\n \"\r\n class=\"hx-badge is-small {{ cellValue.cssClass }}\"\r\n ><span class=\"hx-badge-content\">{{\r\n cellValue.label\r\n }}</span></span\r\n >\r\n\r\n <!-- date time type -->\r\n <span *ngIf=\"col.dataType === TabularColumnTypes.DateTime\">{{\r\n cellValue | date: \"dd/MM/yyyy hh:mm a\"\r\n }}</span>\r\n\r\n <!-- actions type -->\r\n <div\r\n *ngIf=\"col.dataType === TabularColumnTypes.Actions\"\r\n class=\"hx-dropdown tabularActions\"\r\n >\r\n <div class=\"tabularActions__action\">\r\n <ng-container\r\n *ngFor=\"let action of cellValue; trackBy: trackByFn\"\r\n >\r\n <!-- single action -->\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"hx-button is-flat\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n [class.is-loading]=\"action.isLoading\"\r\n *ngIf=\"\r\n !getActionDisabledState(action) &&\r\n action.routeType === ActionConfigRouteType.Route &&\r\n !hasChildren(action)\r\n \"\r\n [routerLink]=\"action.route\"\r\n class=\"hx-button is-flat {{ action.css }}\"\r\n title=\"{{ action.label }}\"\r\n >\r\n <span\r\n *ngIf=\"!action.isLoading\"\r\n class=\"hx-icon {{ action.icon }}\"\r\n ></span>\r\n </button>\r\n </span>\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <a\r\n type=\"button\"\r\n class=\"hx-button is-flat\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n [class.is-loading]=\"action.isLoading\"\r\n *ngIf=\"\r\n !getActionDisabledState(action) &&\r\n action.routeType === ActionConfigRouteType.Callback &&\r\n !hasChildren(action)\r\n \"\r\n (click)=\"executeCallback($event, action.callback)\"\r\n class=\"hx-button is-flat {{ action.css }}\"\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n ><span\r\n *ngIf=\"!action.isLoading\"\r\n class=\"hx-icon {{ action.icon }}\"\r\n ></span\r\n ></a>\r\n </span>\r\n\r\n <!-- action with children -->\r\n <div\r\n class=\"hx-dropdown\"\r\n hxaDropdown\r\n *ngIf=\"hasChildren(action)\"\r\n [isDisabled]=\"!!row.actionDisabled\"\r\n >\r\n <span\r\n [hxTooltip]=\"action.tooltip?.content\"\r\n placement=\"{{ action.tooltip?.config.placement }}\"\r\n [context]=\"action.tooltip?.config.context\"\r\n [disabled]=\"action.tooltip?.config.disabled\"\r\n >\r\n <a\r\n class=\"hx-button is-flat hx-button-dropdown\"\r\n [class.is-small]=\"config.size === TabularSize.Small\"\r\n hxaDropdownToggle\r\n type=\"button\"\r\n >\r\n <i class=\"icon {{ action.icon }}\"></i>\r\n </a>\r\n </span>\r\n\r\n <div class=\"hx-dropdown-menu\" *hxaDropdownMenu>\r\n <ng-container\r\n *ngFor=\"\r\n let childAction of action.children;\r\n trackBy: trackByFn\r\n \"\r\n >\r\n <a\r\n *ngIf=\"\r\n !getActionDisabledState(childAction) &&\r\n childAction.routeType ===\r\n ActionConfigRouteType.Route\r\n \"\r\n [router