@firestitch/list 18.0.34 → 18.0.36
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/esm2022/app/components/list/list.component.mjs +2 -2
- package/esm2022/app/directives/cell/cell.directive.mjs +1 -1
- package/esm2022/app/directives/group-header/group-header.directive.mjs +2 -2
- package/fesm2022/firestitch-list.mjs +3 -3
- package/fesm2022/firestitch-list.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.scss +1 -0
|
@@ -350,7 +350,7 @@ export class FsListComponent {
|
|
|
350
350
|
GroupExpandNotifierService,
|
|
351
351
|
PersistanceController,
|
|
352
352
|
ReorderController,
|
|
353
|
-
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i8.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: i9.FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "component", type: i10.FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: i11.FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: i12.FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: i13.FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: i14.FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: i15.FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i16.FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: i17.FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
353
|
+
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i8.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: i9.FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "component", type: i10.FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: i11.FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: i12.FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: i13.FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: i14.FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: i15.FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i16.FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: i17.FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
354
354
|
}
|
|
355
355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
|
|
356
356
|
type: Component,
|
|
@@ -358,7 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
358
358
|
GroupExpandNotifierService,
|
|
359
359
|
PersistanceController,
|
|
360
360
|
ReorderController,
|
|
361
|
-
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
361
|
+
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
362
362
|
}], ctorParameters: () => [{ type: i1.ReorderController }, { type: undefined, decorators: [{
|
|
363
363
|
type: Optional
|
|
364
364
|
}, {
|
|
@@ -21,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
21
21
|
type: Input,
|
|
22
22
|
args: ['class']
|
|
23
23
|
}] } });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2VsbC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2RpcmVjdGl2ZXMvY2VsbC9jZWxsLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFJakQsTUFBTSxPQUFPLG1CQUFtQjtJQUVkLE9BQU8sQ0FBQztJQUNSLEtBQUssQ0FBUztJQUNQLFNBQVMsQ0FBb0I7SUFFN0MsTUFBTSxDQUFDLHNCQUFzQixDQUNsQyxTQUE4QixFQUM5QixPQUFnQjtRQVdoQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7dUdBcEJVLG1CQUFtQjsyRkFBbkIsbUJBQW1COzsyRkFBbkIsbUJBQW1CO2tCQUQvQixTQUFTO21CQUFDLEVBQUUsUUFBUSxFQUFFLGdCQUFnQixFQUFFOzhCQUd2QixPQUFPO3NCQUF0QixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ2lCLFNBQVM7c0JBQS9CLEtBQUs7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuXG5ARGlyZWN0aXZlKHsgc2VsZWN0b3I6ICdbZnMtbGlzdC1jZWxsXScgfSlcbmV4cG9ydCBjbGFzcyBGc0xpc3RDZWxsRGlyZWN0aXZlIHtcblxuICBASW5wdXQoKSBwdWJsaWMgY29sc3BhbjtcbiAgQElucHV0KCkgcHVibGljIGFsaWduOiBzdHJpbmc7XG4gIEBJbnB1dCgnY2xhc3MnKSBwdWJsaWMgY2xhc3NOYW1lOiBzdHJpbmcgfCBzdHJpbmdbXTtcblxuICBwdWJsaWMgc3RhdGljIG5nVGVtcGxhdGVDb250ZXh0R3VhcmQoXG4gICAgZGlyZWN0aXZlOiBGc0xpc3RDZWxsRGlyZWN0aXZlLFxuICAgIGNvbnRleHQ6IHVua25vd24sXG4gICk6IGNvbnRleHQgaXMge1xuICAgICRpbXBsaWNpdDogYW55LFxuICAgIHJvdzogYW55LFxuICAgIGluZGV4OiBudW1iZXIsXG4gICAgZ3JvdXA6IGFueSxcbiAgICBncm91cFJvdzogYW55LFxuICAgIGdyb3VwSW5kZXg6IG51bWJlcixcbiAgICBncm91cENoaWxkcmVuOiBhbnlbXSxcbiAgICBleHBhbmRlZDogYm9vbGVhbixcbiAgfSB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -8,7 +8,7 @@ export class FsListGroupHeaderDirective extends FsListCellDirective {
|
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupHeaderDirective, decorators: [{
|
|
9
9
|
type: Directive,
|
|
10
10
|
args: [{
|
|
11
|
-
selector: '[fs-list-group-cell],[fs-list-group-header]'
|
|
11
|
+
selector: '[fs-list-group-cell],[fs-list-group-header]',
|
|
12
12
|
}]
|
|
13
13
|
}] });
|
|
14
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
14
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAtaGVhZGVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvZGlyZWN0aXZlcy9ncm91cC1oZWFkZXIvZ3JvdXAtaGVhZGVyLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQU03RCxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsbUJBQW1CO3VHQUF0RCwwQkFBMEI7MkZBQTFCLDBCQUEwQjs7MkZBQTFCLDBCQUEwQjtrQkFIdEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsNkNBQTZDO2lCQUN4RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBGc0xpc3RDZWxsRGlyZWN0aXZlIH0gZnJvbSAnLi4vY2VsbC9jZWxsLmRpcmVjdGl2ZSc7XG5cblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2ZzLWxpc3QtZ3JvdXAtY2VsbF0sW2ZzLWxpc3QtZ3JvdXAtaGVhZGVyXScsXG59KVxuZXhwb3J0IGNsYXNzIEZzTGlzdEdyb3VwSGVhZGVyRGlyZWN0aXZlIGV4dGVuZHMgRnNMaXN0Q2VsbERpcmVjdGl2ZSB7fVxuIl19
|
|
@@ -5205,7 +5205,7 @@ class FsListGroupHeaderDirective extends FsListCellDirective {
|
|
|
5205
5205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListGroupHeaderDirective, decorators: [{
|
|
5206
5206
|
type: Directive,
|
|
5207
5207
|
args: [{
|
|
5208
|
-
selector: '[fs-list-group-cell],[fs-list-group-header]'
|
|
5208
|
+
selector: '[fs-list-group-cell],[fs-list-group-header]',
|
|
5209
5209
|
}]
|
|
5210
5210
|
}] });
|
|
5211
5211
|
|
|
@@ -5879,7 +5879,7 @@ class FsListComponent {
|
|
|
5879
5879
|
GroupExpandNotifierService,
|
|
5880
5880
|
PersistanceController,
|
|
5881
5881
|
ReorderController,
|
|
5882
|
-
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5882
|
+
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5883
5883
|
}
|
|
5884
5884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
|
|
5885
5885
|
type: Component,
|
|
@@ -5887,7 +5887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
5887
5887
|
GroupExpandNotifierService,
|
|
5888
5888
|
PersistanceController,
|
|
5889
5889
|
ReorderController,
|
|
5890
|
-
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
5890
|
+
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow-x:auto;overflow-y:hidden}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
5891
5891
|
}], ctorParameters: () => [{ type: ReorderController }, { type: undefined, decorators: [{
|
|
5892
5892
|
type: Optional
|
|
5893
5893
|
}, {
|