ngx-sfc-components 0.0.21 → 0.0.22
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.
- package/esm2020/lib/components/table/table.component.mjs +6 -3
- package/esm2020/lib/components/table/table.constants.mjs +2 -1
- package/fesm2015/ngx-sfc-components.mjs +6 -3
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +6 -3
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/lib/components/table/table.component.d.ts +2 -1
- package/lib/components/table/table.constants.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1893,6 +1893,7 @@ TableConstants.SEQUENCE_COLUMN = { name: '№', field: '', type: TableColumnType
|
|
|
1893
1893
|
TableConstants.SELECTABLE_COLUMN = { name: '', field: '', type: TableColumnType.Selectable };
|
|
1894
1894
|
TableConstants.EXPANDED_COLUMN = { name: '', field: '', type: TableColumnType.Expanded };
|
|
1895
1895
|
TableConstants.NOT_FOUND_LABEL_DEFAULT = 'Not found';
|
|
1896
|
+
TableConstants.LOAD_MORE_LABEL_DEFAULT = 'Show more';
|
|
1896
1897
|
TableConstants.TOTAL_LABEL_DEFAULT = 'Total';
|
|
1897
1898
|
TableConstants.DATA_LIST_LABEL = 'List';
|
|
1898
1899
|
TableConstants.DATA_CARDS_LABEL = 'Cards';
|
|
@@ -2179,6 +2180,7 @@ class TableComponent {
|
|
|
2179
2180
|
this.sequence = false;
|
|
2180
2181
|
this.expanded = false;
|
|
2181
2182
|
this.notFoundLabel = this.Constants.NOT_FOUND_LABEL_DEFAULT;
|
|
2183
|
+
this.loadMoreLabel = this.Constants.LOAD_MORE_LABEL_DEFAULT;
|
|
2182
2184
|
this.showTotal = false;
|
|
2183
2185
|
this.totalLabel = this.Constants.TOTAL_LABEL_DEFAULT;
|
|
2184
2186
|
this.paginationCount = PaginationConstants.DEFAULT_COUNT;
|
|
@@ -2358,10 +2360,10 @@ class TableComponent {
|
|
|
2358
2360
|
}
|
|
2359
2361
|
}
|
|
2360
2362
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: ColumnsToggleService }, { token: WINDOW }, { token: TableSelectService }, { token: i3.SortingService }, { token: i0.ChangeDetectorRef }, { token: i3.ResizeService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
2361
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i3.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"] }, { kind: "component", type: i3.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
|
|
2363
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\" [loadMoreLabel]=\"loadMoreLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i3.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"] }, { kind: "component", type: i3.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
|
|
2362
2364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
2363
2365
|
type: Component,
|
|
2364
|
-
args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"] }]
|
|
2366
|
+
args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\" [loadMoreLabel]=\"loadMoreLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"] }]
|
|
2365
2367
|
}], ctorParameters: function () { return [{ type: ColumnsToggleService }, { type: Window, decorators: [{
|
|
2366
2368
|
type: Inject,
|
|
2367
2369
|
args: [WINDOW]
|
|
@@ -2388,6 +2390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
2388
2390
|
type: Input
|
|
2389
2391
|
}], notFoundLabel: [{
|
|
2390
2392
|
type: Input
|
|
2393
|
+
}], loadMoreLabel: [{
|
|
2394
|
+
type: Input
|
|
2391
2395
|
}], showTotal: [{
|
|
2392
2396
|
type: Input
|
|
2393
2397
|
}], totalLabel: [{
|
|
@@ -4248,4 +4252,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4248
4252
|
|
|
4249
4253
|
export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableColumnType, TableComponent, TableDataType, TableSelectService, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
|
|
4250
4254
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4251
|
-
//# sourceMappingURL=ngx-sfc-components.mjs.map
|