@circe/table
Version:
Circe Components for Angular :: Table Component
1 lines • 41.2 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"npa-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":25,"character":19},"member":"OnPush"},"template":"<div class=\"npa-table\" #table [id]=\"'npa-table-' + internalId\" [style.height]=\"tableConfiguration?.tableHeight$ | async\">\n <div\n class=\"npa-table__header\"\n #tableHeader\n *ngIf=\"tableConfiguration?.showHeader\"\n [ngStyle]=\"{ 'min-width': table?.offsetWidth < tableConfiguration.minRowWidth ? tableConfiguration.minRowWidth + 'px' : 'unset'}\"\n [style]=\"{'grid-template-columns': tableConfiguration.columnsWidth}\">\n <div\n class=\"npa-table__header-cell npa-table__header-cell--checkbox\"\n *ngFor=\"let column of tableConfiguration.columns; trackBy: tools.identifier;\"\n [ngClass]=\"{'sort': tableConfiguration.sortTable && column.sortable && column.columnName}\">\n <ng-container *ngIf=\"column.type === 'checkbox' && column.typeConfig.checkboxInHeader\">\n <input\n class=\"npa-selection--vertical\"\n type=\"checkbox\"\n [id]=\"column.id + '-check-all'\"\n [name]=\"column.id + '-check-all'\"\n [ngClass]=\"{\n 'npa-checkbox--indeterminate': (!checkboxColumnsModel[column.id]?.checkAll) && !checkboxColumnsModel[column.id]?.checkNone\n }\"\n [checked]=\"(checkboxColumnsModel[column.id]?.checkAll && !checkboxColumnsModel[column.id]?.checkNone) || checkboxColumnsModel[column.id]?.model\"\n [ngModel]=\"checkboxColumnsModel[column.id]?.model\"\n (ngModelChange)=\"setColumnCheckboxes(column.id)\">\n <label [for]=\"column.id + '-check-all'\"></label>\n </ng-container>\n <span\n class=\"npa-tooltip\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.columnName\"\n (click)=\"sortTableRows(column)\">\n {{column.columnName}}\n </span>\n <i\n class=\"npa-icon\"\n *ngIf=\"tableConfiguration.sortTable && column.sortable && sort$.value?.sortType && sort$.value?.columnId === column.id\"\n [ngClass]=\"sort$.value.sortType === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down'\"\n (click)=\"sortTableRows(column)\">\n </i>\n </div>\n <div class=\"npa-table__header-cell npa-table__header-cell--checkbox\" *ngIf=\"tableActionsConfiguration && !tableActionsConfiguration.hideColumn\"></div>\n </div>\n <div class=\"npa-table__body--overlay\" *ngIf=\"showSpinner || (showInternalSpinner$ | async)\">\n <div class=\"npa-table__spinner-container\">\n <npa-spinner></npa-spinner>\n </div>\n </div>\n <div\n class=\"npa-table__body\"\n #tableBody\n [ngClass]=\"{'hide': showSpinner || (showInternalSpinner$ | async)}\"\n (mouseleave)=\"tableMouseLeave()\">\n <cdk-virtual-scroll-viewport\n class=\"npa-table__viewport\"\n [ngStyle]=\"{ 'min-width': (table?.offsetWidth < tableConfiguration.minRowWidth) ? tableConfiguration.minRowWidth + 'px' : 'unset'}\"\n [ngClass]=\"{'hide': (rows$ | async)?.length < 1}\"\n [itemSize]=\"41\">\n <div\n class=\"npa-table__row\"\n #tableRow\n *cdkVirtualFor=\"let row of (rows$ | async); trackBy: tools.identifier; let rowIndex = index\"\n [ngClass]=\"{'hover': tableConfiguration.hoverRows}\"\n [style]=\"{'grid-template-columns': tableConfiguration.columnsWidth}\"\n (mouseenter)=\"rowHover(rowIndex)\"\n (mouseleave)=\"rowMouseLeave(rowIndex)\">\n <div\n class=\"npa-table__cell\"\n *ngFor=\"let column of row; trackBy: tools.identifier;\" [id]=\"column.id\">\n <ng-container *ngIf=\"!column.type\">\n <span\n class=\"npa-table__cell-value npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"(!rowsHoverState[rowIndex] || rowsHoverState && column.id !== tableConfiguration.defaultActionColumnId) || !defaultAction\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.value\">\n <ng-container *ngIf=\"!!column.param && (!!column.value || column.value === 0)\">{{column.value}}</ng-container>\n <ng-container *ngIf=\"!!column.param && !column.value && column.value !== 0\">{{'-'}}</ng-container>\n </span>\n <a\n class=\"npa-table__cell-value npa-link npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"rowsHoverState[rowIndex] && column.id === tableConfiguration.defaultActionColumnId && defaultAction\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [title]=\"tableConfiguration.truncateTexts ? column.value : defaultAction.label\"\n [showWhenTruncated]=\"true\"\n (click)=\"defaultAction.callback(getRowValue(row, rowIndex))\">\n <ng-container *ngIf=\"!!column.param && (!!column.value || column.value === 0)\">{{column.value}}</ng-container>\n <ng-container *ngIf=\"!!column.param && !column.value && column.value !== 0\">{{'-'}}</ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'date'\">\n <span\n class=\"npa-table__cell-value npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"(!rowsHoverState[rowIndex] || rowsHoverState && column.id !== tableConfiguration.defaultActionColumnId) || !defaultAction\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.value | date:(column.typeConfig?.dateMask || 'MM/dd/yyyy')\">\n {{column.value ? (column.value | date:(column.typeConfig?.dateMask || 'MM/dd/yyyy')) : '-'}}\n </span>\n <a\n class=\"npa-table__cell-value npa-link npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"rowsHoverState[rowIndex] && column.id === tableConfiguration.defaultActionColumnId && defaultAction\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [title]=\"tableConfiguration.truncateTexts ? (column.value | date:'MM/dd/yyyy') : defaultAction.label\"\n [showWhenTruncated]=\"true\"\n (click)=\"defaultAction.callback(getRowValue(row, rowIndex))\">\n {{column.value ? (column.value | date:'MM/dd/yyyy') : '-'}}\n </a>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'checkbox'\">\n <input\n class=\"npa-selection--vertical npa-selection--no-label\"\n type=\"checkbox\"\n [id]=\"column.id + '-' + rowIndex\"\n [name]=\"column.id + '-' + rowIndex\"\n [ngModel]=\"column.value || checkboxColumnsModel[column.id]?.checkAll\"\n (ngModelChange)=\"updateCheckboxColumn(column, row, rowIndex, $event)\">\n <label [for]=\"column.id + '-' + rowIndex\">{{column.typeConfig?.label}}</label>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'radio'\">\n <input\n type=\"radio\"\n class=\"npa-selection--no-label\"\n [attr.id]=\"column.id + '-' + rowIndex\"\n [name]=\"column.id\"\n [value]=\"column.rowId\"\n [ngModel]=\"column.value\"\n (ngModelChange)=\"updateRadioColumn(column.id, column.rowId)\">\n <label [attr.for]=\"column.id + '-' + rowIndex\">{{column.typeConfig?.label}}</label>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'icon'\">\n <span\n class=\"npa-table__cell-value npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"!column.onlyIcon && ((!rowsHoverState[rowIndex] || rowsHoverState && column.id !== tableConfiguration.defaultActionColumnId) || !defaultAction)\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.value\">\n <i *ngIf=\"column.icon\" [ngClass]=\"column.icon\"></i>\n <ng-container *ngIf=\"column.param && column.value\">{{column.value}}</ng-container>\n <ng-container *ngIf=\"column.param && !column.value\">{{'-'}}</ng-container>\n </span>\n <a\n class=\"npa-table__cell-value npa-link npa-tooltip npa-tooltip--small npa-tooltip--light\"\n *ngIf=\"rowsHoverState[rowIndex] && column.id === tableConfiguration.defaultActionColumnId && defaultAction\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [title]=\"tableConfiguration.truncateTexts ? column.value : defaultAction.label\"\n [showWhenTruncated]=\"true\"\n (click)=\"defaultAction.callback(getRowValue(row, rowIndex))\">\n <i *ngIf=\"column.icon\" [ngClass]=\"column.icon\"></i>\n <ng-container *ngIf=\"column.param && column.value\">{{column.value}}</ng-container>\n <ng-container *ngIf=\"column.param && !column.value\">{{'-'}}</ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'badge'\">\n <div class=\"npa-badge npa-badge--alone npa-badge--x-small\" [ngClass]=\"'npa-badge--' + column.badgeType\">\n <div class=\"npa-badge__box\"></div>\n </div>\n <span\n class=\"npa-table__cell-value npa-tooltip npa-tooltip--small npa-tooltip--light npa-color--critical\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.value\">\n <ng-container *ngIf=\"column.param && column.value\">{{column.value}}</ng-container>\n <ng-container *ngIf=\"column.param && !column.value\">{{'-'}}</ng-container>\n </span>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'link'\">\n <a\n class=\"npa-table__cell-value npa-link\"\n *ngIf=\"!!column.value\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n (click)=\"linkAction(column, row, rowIndex)\">\n {{column.typeConfig?.label ? column.typeConfig.label : column.value}}\n </a>\n <span\n class=\"npa-table__cell-value npa-tooltip npa-tooltip--small npa-tooltip--light npa-color--critical\"\n *ngIf=\"!column.value\"\n [ngClass]=\"{ 'truncate-text': tableConfiguration.truncateTexts }\"\n [showWhenTruncated]=\"true\"\n [title]=\"column.value\">-</span>\n </ng-container>\n <ng-container *ngIf=\"column.type === 'select'\">\n <label class=\"npa-label\" [for]=\"column.id + '-' + rowIndex\"></label>\n <npa-select\n [id]=\"column.id + '-' + rowIndex\"\n [config]=\"column.selectConfig\"\n [options]=\"column.typeConfig.options\"\n [ngModel]=\"column.value\"\n (ngModelChange)=\"updateColumnValue(column, row, rowIndex, $event)\">\n </npa-select>\n </ng-container>\n </div>\n <div\n class=\"npa-table__cell\" [class.hide]=\"tableActionsConfiguration.hideColumn\">\n <npa-table-actions\n #tableActions\n *ngIf=\"tableActionsConfiguration?.actions\"\n [class.hide]=\"tableActionsConfiguration.showOnHover && !rowsHoverState[rowIndex]\"\n [hotRender]=\"true\"\n [manualHideDropdown]=\"manualActionsHide$\"\n [isHoveringRow]=\"rowsHoverState[rowIndex]\"\n [tableRow]=\"row\"\n [rowData]=\"getRowValue(row, rowIndex)\"\n [group]=\"(groupActions$ | async)\"\n [actions]=\"tableActionsConfiguration.actions\"\n [setDropdownParentTo]=\"{ type: 'id', name: 'npa-table-' + internalId }\"\n [dropdownConfig]=\"tableActionsConfiguration.dropdownConfig\"\n [actionsType]=\"tableActionsConfiguration.actionsType\"\n [defaultActionId]=\"tableActionsConfiguration.defaultActionId\"\n (defaultAction)=\"defaultAction = $event\"\n (selectedOption)=\"$event.callback(getRowValue(row, rowIndex))\">\n </npa-table-actions>\n </div>\n </div>\n <div class=\"npa-table__row--spinner\" *ngIf=\"showLoadOnScrollSpinner\">\n <npa-spinner class=\"npa-spinner--20\"></npa-spinner>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <div\n class=\"npa-table__body--overlay\"\n *ngIf=\"!((rows$ | async)?.length) && !showSpinner && (showInternalSpinner$ | async) === false\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n","styles":[":host{--npa-table-default-height:fit-content;--npa-table-default-column-gap:24px;--npa-table-default-column-padding:0 12px;--npa-table-header-default-height:40px;--npa-table-header-default-border-width:0 0 1px 0;--npa-table-header-default-border-style:solid;--npa-table-header-default-border-color:gray;--npa-table-header-cell-default-align:center;--npa-table-header-cell-default-justify:normal;--npa-table-header-cell-default-icon-size:12px;--npa-table-header-cell-default-icon-spacing:8px;--npa-table-header-cell-default-text-transform:uppercase;--npa-table-header-cell-default-color:gray;--npa-table-header-cell-default-icon-color:gray;--npa-table-body-default-height:calc(100% - var(--npa-table-header-default-height) - 1px);--npa-table-body-spinner-top-spacing:40px;--npa-table-row-default-height:40px;--npa-table-row-default-background-color:#fff;--npa-table-row-default-border-width:0 0 1px 0;--npa-table-row-default-border-style:solid;--npa-table-row-default-border-color:#d3d3d3;--npa-table-row-default-hover-background-color:#add8e6;--npa-table-row-default-hover-border-width:0 0 1px 0;--npa-table-row-default-hover-border-style:solid;--npa-table-row-default-hover-border-color:#d3d3d3;--npa-table-row-default-spinner-container-height:40px;--npa-table-row-default-spinner-padding:12px;--npa-table-row-cell-default-align:center;--npa-table-row-cell-default-justify:normal;--npa-table-row-cell-default-icon-spacing:8px;--npa-table-row-cell-default-color:#000}:host .npa-table{height:var(--npa-table-default-height);overflow-x:auto}:host .npa-table .npa-table__header{display:grid;grid-column-gap:var(--npa-table-default-column-gap);padding:var(--npa-table-default-column-padding);border:var(--npa-table-header-default-border-style) var(--npa-table-header-default-border-color);border-width:var(--npa-table-header-default-border-width);box-sizing:border-box}:host .npa-table .npa-table__header .npa-table__header-cell{display:flex;align-items:var(--npa-table-header-cell-default-align);justify-content:var(--npa-table-header-cell-default-justify);flex-wrap:nowrap;height:var(--npa-table-header-default-height);min-width:0;padding-right:calc(var(--npa-table-header-cell-default-icon-size) + var(--npa-table-header-cell-default-icon-spacing))}:host .npa-table .npa-table__header .npa-table__header-cell.npa-table__header-cell--checkbox INPUT[type=checkbox]:not(.npa-switch)+LABEL{margin-right:0}:host .npa-table .npa-table__header .npa-table__header-cell.sort I,:host .npa-table .npa-table__header .npa-table__header-cell.sort SPAN{cursor:pointer}:host .npa-table .npa-table__header .npa-table__header-cell.sort I{margin-left:var(--npa-table-header-cell-default-icon-spacing);font-size:var(--npa-table-header-cell-default-icon-size);line-height:1;color:var(--npa-table-header-cell-default-icon-color)}:host .npa-table .npa-table__header .npa-table__header-cell SPAN{white-space:nowrap;text-overflow:ellipsis;text-transform:var(--npa-table-header-cell-default-text-transform);color:var(--npa-table-header-cell-default-color);overflow:hidden}:host .npa-table .npa-table__body--overlay .npa-table__spinner-container{padding-top:var(--npa-table-body-spinner-top-spacing)}:host .npa-table .npa-table__body{height:var(--npa-table-body-default-height)}:host .npa-table .npa-table__body.hide{display:none}:host .npa-table .npa-table__body .npa-table__viewport{width:100%;height:100%;overflow:unset;overflow-y:overlay}:host .npa-table .npa-table__body .npa-table__viewport.hide{display:none}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row{display:grid;grid-column-gap:var(--npa-table-default-column-gap);padding:var(--npa-table-default-column-padding);background-color:var(--npa-table-row-default-background-color);border:var(--npa-table-row-default-border-style) var(--npa-table-row-default-border-color);border-width:var(--npa-table-row-default-border-width)}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row.hover:hover{background-color:var(--npa-table-row-default-hover-background-color);border:var(--npa-table-row-default-hover-border-style) var(--npa-table-row-default-hover-border-color);border-width:var(--npa-table-row-default-hover-border-width)}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell{display:flex;align-items:var(--npa-table-row-cell-default-align);justify-content:var(--npa-table-row-cell-default-justify);flex-wrap:nowrap;min-height:var(--npa-table-row-default-height)}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell.hide{display:none}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell .npa-table__cell-value{white-space:nowrap}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell .npa-table__cell-value:not(.npa-link):not(.npa-icon){color:var(--npa-table-row-cell-default-color)}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell .npa-table__cell-value.truncate-text{text-overflow:ellipsis;overflow:hidden}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell DIV.npa-badge,:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell I.npa-icon{margin-right:var(--npa-table-row-cell-default-icon-spacing)}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell npa-select{--npa-component-width:100%}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row .npa-table__cell npa-table-actions.hide{display:none}:host .npa-table .npa-table__body .npa-table__viewport .npa-table__row--spinner{height:var(--npa-table-row-default-spinner-container-height);padding:var(--npa-table-row-default-spinner-padding);box-sizing:border-box}"]}]}],"members":{"_table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":["table"]}]}],"_tableBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":["tableBody"]}]}],"_tableRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["tableRow"]}]}],"_tableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["tableHeader"]}]}],"_viewPort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":32,"character":13}]}]}],"tableActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":33,"character":3},"arguments":["tableActions"]}]}],"selects":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":34,"character":3},"arguments":[{"__symbolic":"reference","module":"@circe/select","name":"SelectComponent","line":34,"character":16}]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"showSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"showLoadOnScrollSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"hotRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"internalUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"sortChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"scrolledToBottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":77,"character":3},"arguments":["window:resize"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@circe/core","name":"EventsService","line":82,"character":15},{"__symbolic":"reference","module":"@circe/core","name":"ToolService","line":83,"character":18},{"__symbolic":"reference","name":"TableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":85,"character":23}]}],"_setDataStream":[{"__symbolic":"method"}],"_processRows":[{"__symbolic":"method"}],"_processColumn":[{"__symbolic":"method"}],"_processCheckboxColumn":[{"__symbolic":"method"}],"_processRadioColumn":[{"__symbolic":"method"}],"_processSelectColumn":[{"__symbolic":"method"}],"_processIconColumn":[{"__symbolic":"method"}],"_processBadgeColumn":[{"__symbolic":"method"}],"_processDateColumn":[{"__symbolic":"method"}],"_getBadgeType":[{"__symbolic":"method"}],"_getIcon":[{"__symbolic":"method"}],"_getTableValue":[{"__symbolic":"method"}],"_hideAllDropdowns":[{"__symbolic":"method"}],"_setScrollListener":[{"__symbolic":"method"}],"_setResizeListener":[{"__symbolic":"method"}],"_processConfiguration":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"checkColumnCheckboxes":[{"__symbolic":"method"}],"sortTableRows":[{"__symbolic":"method"}],"updateRadioColumn":[{"__symbolic":"method"}],"updateCheckboxColumn":[{"__symbolic":"method"}],"updateColumnValue":[{"__symbolic":"method"}],"linkAction":[{"__symbolic":"method"}],"setColumnCheckboxes":[{"__symbolic":"method"}],"rowHover":[{"__symbolic":"method"}],"tableMouseLeave":[{"__symbolic":"method"}],"rowMouseLeave":[{"__symbolic":"method"}],"checkScroll":[{"__symbolic":"method"}],"getRowValue":[{"__symbolic":"method"}],"_checkBiggerTableActions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TableComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","name":"TableActionsModule"},{"__symbolic":"reference","module":"@circe/form-behavior","name":"FormBehaviorModule","line":21,"character":4},{"__symbolic":"reference","module":"@circe/tooltip","name":"TooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@circe/select","name":"SelectModule","line":23,"character":4},{"__symbolic":"reference","module":"@circe/badge","name":"BadgeModule","line":24,"character":4},{"__symbolic":"reference","module":"@circe/spinner","name":"SpinnerModule","line":25,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@circe/core","name":"EventsModule","line":26,"character":4},"member":"forChild"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@circe/core","name":"ToolModule","line":27,"character":4},"member":"forChild"}}],"providers":[{"__symbolic":"reference","name":"TableService"}],"exports":[{"__symbolic":"reference","name":"TableComponent"}]}]}],"members":{}},"TableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"_checkExists":[{"__symbolic":"method"}],"addCheckboxData":[{"__symbolic":"method"}],"setRadioData":[{"__symbolic":"method"}],"setSelectData":[{"__symbolic":"method"}],"deleteCheckboxData":[{"__symbolic":"method"}],"getColumnData":[{"__symbolic":"method"}]}},"NpaTableColumnType":{"__symbolic":"interface"},"NpaTableRowValue":{"__symbolic":"interface"},"NpaTableLinkAction":{"__symbolic":"interface"},"NpaActionConfigSource":{"__symbolic":"interface"},"NpaTableIconSource":{"__symbolic":"interface"},"NpaTableStatusSource":{"__symbolic":"interface"},"NpaTableSortSource":{"__symbolic":"interface"},"NpaTableSortType":{"__symbolic":"interface"},"NpaTableActionType":{"__symbolic":"interface"},"NpaTableConfigModel":{"__symbolic":"interface"},"NpaTableActionsConfigurationModel":{"__symbolic":"interface"},"NpaTableColumnConfigurationModel":{"__symbolic":"interface"},"NpaRadioColumnConfig":{"__symbolic":"interface"},"NpaCheckboxColumnConfig":{"__symbolic":"interface"},"NpaSelectColumnConfig":{"__symbolic":"interface"},"NpaLinkColumnConfig":{"__symbolic":"interface"},"NpaIconColumnConfig":{"__symbolic":"interface"},"NpaBadgeColumnConfig":{"__symbolic":"interface"},"NpaDateColumnConfig":{"__symbolic":"interface"},"NpaTableColumn":{"__symbolic":"interface"},"NpaTableSort":{"__symbolic":"interface"},"NpaTableFilter":{"__symbolic":"interface"},"NpaTableCheckboxSelection":{"__symbolic":"interface"},"TableSource":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":83,"character":10,"context":{"typeName":"T"},"module":"./lib/table-source"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"NpaTableFilter"}]},{"__symbolic":"reference","module":"@circe/pagination","name":"Paginate","line":85,"character":17},{"__symbolic":"reference","name":"NpaTableSort"}]}],"_getDataObservable":[{"__symbolic":"method"}],"_filterRows":[{"__symbolic":"method"}],"_orderRows":[{"__symbolic":"method"}],"_pageRows":[{"__symbolic":"method"}],"_isPaginationComponent":[{"__symbolic":"method"}],"connect":[{"__symbolic":"method"}]}},"_isTableSource":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"reference","name":"obj"}}},"right":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"instanceof","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"TableSource"}},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":208,"character":50,"module":"./lib/table-source"},"right":"function"}}}},"TableActionsComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"npa-table-actions","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"template":"<div class=\"npa-table-actions\" #actionsContainer [class.hide]=\"group\">\n <ng-container *ngFor=\"let action of viewActions; trackBy: tools.identifier; \">\n <ng-container *ngIf=\"actionsType === 'button'\">\n <button\n class=\"npa-button npa-button--small\"\n [attr.data-action-id]=\"action.value\"\n #actionElement\n [ngClass]=\"{\n 'npa-button--icon-left': !!action.iconLeft,\n 'npa-button--icon-right': !!action.iconRight\n }\"\n (click)=\"selectedOption.emit(action)\">\n <i\n class=\"npa-icon npa-icon--left\"\n *ngIf=\"!!action.iconLeft\"\n [ngClass]=\"action.iconLeft\"></i>\n <ng-container *ngIf=\"!!action.label\">{{action.label}}</ng-container>\n <i\n class=\"npa-icon npa-icon--right\"\n *ngIf=\"!!action.iconRight\"\n [ngClass]=\"action.iconRight\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"actionsType === 'iconButton'\">\n <i\n class=\"npa-icon npa-icon--left\"\n #actionElement\n *ngIf=\"!!action.iconLeft\"\n [attr.data-action-id]=\"action.value\"\n [ngClass]=\"action.iconLeft\"\n (click)=\"selectedOption.emit(action)\"></i>\n </ng-container>\n <ng-container *ngIf=\"actionsType === 'link'\">\n <a\n class=\"npa-link npa-link-small npa-icon-text\"\n #actionElement\n [attr.data-action-id]=\"action.value\"\n [ngClass]=\"action.iconLeft\"\n (click)=\"selectedOption.emit(action)\">{{action.label}}</a>\n </ng-container>\n </ng-container>\n</div>\n<i\n class=\"npa-icon npa-icon--left icon-waiting npa-table-actions__dropdown-trigger\"\n #dropdownTrigger\n *ngIf=\"group\"\n [id]=\"'npa-table-actions__dropdown-trigger-' + internalId\"\n [ngClass]=\"{'hover': isHoveringRow}\"\n npaDropdownEvents [eventToTrigger]=\"'click'\" (event)=\"onDropdownShow()\"\n npaKeyboardEmitter (keyboardEmitter)=\"dropdownKeyboard$.next($event)\">\n</i>\n<npa-dropdown\n *ngIf=\"group && processedDropdownConfig\"\n [(showDropdown)]=\"showDropdown\"\n [options]=\"dropdownItems\"\n [config]=\"processedDropdownConfig\"\n [keyboardControl]=\"dropdownKeyboard$\"\n (optionSelected)=\"dropdownSelected($event)\">\n</npa-dropdown>\n","styles":[":host{--npa-table-actions-default-align:center;--npa-table-actions-default-justify:normal;--npa-table-actions-default-spacing:12px;--npa-table-actions-trigger-dropdown-default-color:gray;--npa-table-actions-trigger-dropdown-default-hover-color:#000}:host .npa-table-actions{display:flex;align-items:var(--npa-table-actions-default-align);justify-content:var(--npa-table-actions-default-justify);flex-wrap:nowrap}:host .npa-table-actions.hide{opacity:0;pointer-events:none;position:absolute;z-index:-1}:host .npa-table-actions A,:host .npa-table-actions BUTTON,:host .npa-table-actions I{white-space:nowrap}:host .npa-table-actions A:not(:last-child),:host .npa-table-actions BUTTON:not(:last-child),:host .npa-table-actions I:not(:last-child){margin-right:var(--npa-table-actions-default-spacing)}:host .npa-table-actions .npa-table-actions__dropdown-trigger{color:var(--npa-table-actions-trigger-dropdown-default-color)}:host .npa-table-actions .npa-table-actions__dropdown-trigger.hover{color:var(--npa-table-actions-trigger-dropdown-default-hover-color)}:host I{cursor:pointer}"]}]}],"members":{"actionsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":18,"character":3},"arguments":["actionsContainer"]}]}],"dropdownTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["dropdownTrigger"]}]}],"actionElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":20,"character":3},"arguments":["actionElement"]}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"actionsType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"setDropdownParentTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"dropdownConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"tableRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"rowData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"isHoveringRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"hotRender":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"defaultActionId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"actionsDropdownRelativeElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"manualHideDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"defaultAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":49,"character":26,"context":{"typeName":"HTMLElement"},"module":"./lib/table-actions/table-actions.component"}]},{"__symbolic":"reference","module":"@circe/core","name":"ToolService","line":50,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":51,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":52,"character":23},{"__symbolic":"reference","module":"@circe/core","name":"BoxModelService","line":53,"character":17}]}],"_processConfigurations":[{"__symbolic":"method"}],"_mapActionConfigToAction":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"dropdownSelected":[{"__symbolic":"method"}],"onDropdownShow":[{"__symbolic":"method"}]}},"TableActionsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TableActionsComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@circe/dropdown","name":"DropdownModule","line":12,"character":4},{"__symbolic":"reference","module":"@circe/event-controls","name":"KeyboardEmitterModule","line":13,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@circe/core","name":"BoxModelModule","line":14,"character":4},"member":"forChild"}}],"exports":[{"__symbolic":"reference","name":"TableActionsComponent"}]}]}],"members":{}},"NpaActionConfig":{"__symbolic":"interface"},"NpaAction":{"__symbolic":"interface"},"NpaTableConfiguration":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"BehaviorSubject","module":"rxjs","arguments":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"NpaTableColumn"}]}]}]},{"__symbolic":"reference","name":"NpaTableConfigModel"}]}],"_processConfiguration":[{"__symbolic":"method"}],"_processColumnsConfig":[{"__symbolic":"method"}],"_calculateColumnsWidth":[{"__symbolic":"method"}]}},"NpaTableActionsConfiguration":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NpaTableActionsConfigurationModel"}]}],"_processConfiguration":[{"__symbolic":"method"}]}}},"origins":{"TableComponent":"./lib/table.component","TableModule":"./lib/table.module","TableService":"./lib/table.service","NpaTableColumnType":"./lib/table.types","NpaTableRowValue":"./lib/table.types","NpaTableLinkAction":"./lib/table.types","NpaActionConfigSource":"./lib/table.types","NpaTableIconSource":"./lib/table.types","NpaTableStatusSource":"./lib/table.types","NpaTableSortSource":"./lib/table.types","NpaTableSortType":"./lib/table.types","NpaTableActionType":"./lib/table.types","NpaTableConfigModel":"./lib/table.types","NpaTableActionsConfigurationModel":"./lib/table.types","NpaTableColumnConfigurationModel":"./lib/table.types","NpaRadioColumnConfig":"./lib/table.types","NpaCheckboxColumnConfig":"./lib/table.types","NpaSelectColumnConfig":"./lib/table.types","NpaLinkColumnConfig":"./lib/table.types","NpaIconColumnConfig":"./lib/table.types","NpaBadgeColumnConfig":"./lib/table.types","NpaDateColumnConfig":"./lib/table.types","NpaTableColumn":"./lib/table.types","NpaTableSort":"./lib/table.types","NpaTableFilter":"./lib/table.types","NpaTableCheckboxSelection":"./lib/table.types","TableSource":"./lib/table-source","_isTableSource":"./lib/table-source","TableActionsComponent":"./lib/table-actions/table-actions.component","TableActionsModule":"./lib/table-actions/table-actions.module","NpaActionConfig":"./lib/table-actions/table-actions.types","NpaAction":"./lib/table-actions/table-actions.types","NpaTableConfiguration":"./lib/configurations/table.configuration","NpaTableActionsConfiguration":"./lib/configurations/table-actions.configuration"},"importAs":"@circe/table"}