@wertzui/ngx-restworld-client 3.1.0 → 3.3.0

package/fesm2020/wertzui-ngx-restworld-client.mjs

@@ -56,9 +56,11 @@ import * as i11 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i12$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i4$3 from 'primeng/table';
+import * as i5$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i5$2 from 'primeng/avatar';
+import * as i6$1 from 'primeng/splitbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i7$3 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MessagesModule } from 'primeng/messages';
@@ -334,14 +336,18 @@ class RESTworldClient {
     async getList(rel, parameters, headers, curie) {
         const link = this.getLinkFromHome(rel, LinkNames.getList, curie);
         const uri = link.fillTemplate(parameters);
-        const response = await this.halClient.get(uri, PagedListResource, ProblemDetails, headers);
+        const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
+        const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+        const response = await this.halClient.get(uri, PagedListResource, ProblemDetails, combinedHeaders);
         return response;
     }
     async getListByUri(uri, parameters, headers) {
         const link = new Link();
         link.href = uri;
         const filledUri = link.fillTemplate(parameters);
-        const response = await this.halClient.get(filledUri, PagedListResource, ProblemDetails, headers);
+        const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
+        const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+        const response = await this.halClient.get(filledUri, PagedListResource, ProblemDetails, combinedHeaders);
         return response;
     }
     async getSingle(relOrUri, id, headers, curie) {
@@ -359,7 +365,9 @@ class RESTworldClient {
             const link = this.getLinkFromHome(relOrUri, LinkNames.get, curie);
             uri = link.fillTemplate({ id: id.toString() });
         }
-        const response = await this.halClient.get(uri, Resource, ProblemDetails, headers);
+        const defaultHeaders = RESTworldClient.createHeaders('application/hal+json', this._options.Version);
+        const combinedHeaders = RESTworldClient.combineHeaders(headers, defaultHeaders, false);
+        const response = await this.halClient.get(uri, Resource, ProblemDetails, combinedHeaders);
         return response;
     }
     async save(resource) {
@@ -451,9 +459,27 @@ class RESTworldClient {
     }
     static createHeaders(mediaType, version) {
         if (version)
-            return new HttpHeaders({ 'Accept': `${mediaType || 'application/hal+json'}; v=${version}` });
+            return new HttpHeaders({
+                'Accept': `${mediaType || 'application/hal+json'}; v=${version}`,
+                'Content-Type': `${mediaType || 'application/hal+json'}; v=${version}`
+            });
         return new HttpHeaders();
     }
+    static combineHeaders(originalHeaders, headersToAdd, overwriteExisting) {
+        if (!headersToAdd)
+            return originalHeaders;
+        if (!originalHeaders)
+            return headersToAdd;
+        let combinedHeaders = originalHeaders;
+        for (const key in headersToAdd.keys) {
+            if (!combinedHeaders.has(key) || overwriteExisting) {
+                const headerValuesToAdd = headersToAdd.getAll(key);
+                if (headerValuesToAdd)
+                    combinedHeaders = combinedHeaders.set(key, headerValuesToAdd);
+            }
+        }
+        return combinedHeaders;
+    }
 }
 
 class RESTworldClientCollection {
@@ -1160,17 +1186,23 @@ var ColumnType;
     ColumnType["numeric"] = "numeric";
     ColumnType["boolean"] = "boolean";
     ColumnType["date"] = "date";
+    ColumnType["array"] = "array";
+    ColumnType["object"] = "object";
 })(ColumnType || (ColumnType = {}));
 class RESTworldListViewComponent {
-    constructor(_clients, _confirmationService, _messageService, avatarGenerator) {
+    constructor(_clients, _confirmationService, _messageService, avatarGenerator, _router) {
         this._clients = _clients;
         this._confirmationService = _confirmationService;
         this._messageService = _messageService;
         this.avatarGenerator = avatarGenerator;
+        this._router = _router;
         this._columns = [];
         this._editLink = '/edit';
+        this._sortField = '';
+        this._sortOrder = 1;
         this.isLoading = false;
         this._totalRecords = 0;
+        this.load = _.debounce(this.load2, 100);
         this.rowsPerPage = [10, 25, 50];
         this._lastEvent = {
             rows: this.rowsPerPage[0]
@@ -1188,20 +1220,34 @@ class RESTworldListViewComponent {
     }
     set apiName(value) {
         this._apiName = value;
-        if (this.apiName && this.rel && this._lastEvent)
-            this.load(this._lastEvent);
+        this.load(this._lastEvent);
     }
     get apiName() {
         return this._apiName;
     }
     set rel(value) {
         this._rel = value;
-        if (this.apiName && this.rel && this._lastEvent)
-            this.load(this._lastEvent);
+        this.load(this._lastEvent);
     }
     get rel() {
         return this._rel;
     }
+    set sortField(value) {
+        this._sortField = value ?? '';
+        this._lastEvent.sortField = value;
+        this.load(this._lastEvent);
+    }
+    get sortField() {
+        return this._sortField;
+    }
+    set sortOrder(value) {
+        this._sortOrder = value ?? 1;
+        this._lastEvent.sortOrder = value;
+        this.load(this._lastEvent);
+    }
+    get sortOrder() {
+        return this._sortOrder;
+    }
     get value() {
         return this.resource?._embedded?.items || [];
     }
@@ -1214,21 +1260,31 @@ class RESTworldListViewComponent {
     set totalRecords(value) {
         this._totalRecords = value || 0;
     }
-    get sortOrder() {
-        return this._lastEvent.sortOrder || 0;
-    }
     get newHref() {
         return this.resource?.findLink('new')?.href;
     }
     get dateFormat() {
         return RESTworldListViewComponent._dateFormat;
     }
+    ngOnChanges(changes) {
+        console.log("ngOnChanges " + changes);
+    }
+    ngOnInit() {
+        console.log("ngOnInit");
+    }
+    async ngAfterViewInit() {
+        console.log("ngAfterViewInit");
+        //await this.load(this._lastEvent);
+    }
+    createNew() {
+        return this._router.navigate([this.editLink, this.apiName, this.newHref]);
+    }
     getClient() {
         if (!this.apiName)
             throw new Error('Cannot get a client, because the apiName is not set.');
         return this._clients.getClient(this.apiName);
     }
-    async load(event) {
+    async load2(event) {
         if (!this.apiName || !this.rel)
             return;
         this.isLoading = true;
@@ -1320,6 +1376,10 @@ class RESTworldListViewComponent {
             return ColumnType.text;
         if (_.isBoolean(value))
             return ColumnType.boolean;
+        if (_.isArrayLike(value))
+            return ColumnType.array;
+        if (_.isObjectLike(value))
+            return ColumnType.object;
         return ColumnType.text;
     }
     static toTitleCase(anyCase) {
@@ -1462,19 +1522,25 @@ RESTworldListViewComponent._dateFormat = new Date(3333, 10, 22)
     .replace("11", "MM")
     .replace("3333", "y")
     .replace("33", "yy");
-RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }], target: i0.ɵɵFactoryTarget.Component });
-RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: RESTworldListViewComponent, selector: "rw-list", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", rowsPerPage: "rowsPerPage" }, ngImport: i0, template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\">\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n      <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n        <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n          {{col.header}}\r\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n          <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n        </div>\r\n      </th>\r\n      <th>\r\n        <div class=\"flex justify-content-end\">\r\n          <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n            <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n          </div>\r\n        </div>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n    <tr>\r\n      <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n          <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n        </ng-container>\r\n        <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n        <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n        <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n      </td>\r\n      <td>\r\n        <div class=\"flex justify-content-end\">\r\n          <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n          <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td colspan=\"8\">No entries found.</td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], components: [{ type: i4$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i4$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: i4$3.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i5$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass"] }, { type: i9$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i4$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3$1.DatePipe } });
+RESTworldListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTworldListViewComponent, deps: [{ token: RESTworldClientCollection }, { token: i2$1.ConfirmationService }, { token: i2$1.MessageService }, { token: AvatarGenerator }, { token: i4$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+RESTworldListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: RESTworldListViewComponent, selector: "rw-list", inputs: { editLink: "editLink", apiName: "apiName", rel: "rel", sortField: "sortField", sortOrder: "sortOrder", rowsPerPage: "rowsPerPage", createButtonMenu: "createButtonMenu" }, usesOnChanges: true, ngImport: i0, template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\"\r\n         [sortField]=\"sortField\"\r\n         [sortOrder]=\"sortOrder\">\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n                    {{col.header}}\r\n                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                    <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n                </div>\r\n            </th>\r\n            <th>\r\n                <div class=\"flex justify-content-end\">\r\n                    <div class=\"mx-2\">\r\n                        <a *ngIf=\"!createButtonMenu\" class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"[editLink, apiName, newHref]\" pTooltip=\"Create new\" tooltipPosition=\"left\"></a>\r\n                        <p-splitButton *ngIf=\"createButtonMenu\" styleClass=\"p-button-success\" icon=\"fas fa-plus\" pTooltip=\"Create new\" tooltipPosition=\"left\" (onClick)=\"createNew()\" [model]=\"createButtonMenu\" appendTo=\"body\"></p-splitButton>\r\n                    </div>\r\n                </div>\r\n            </th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n        <tr>\r\n            <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                    <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n                    <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n                <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n                <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"'array'\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.field]\">{{arrayElement | json}}</p></span>\r\n                <span *ngSwitchCase=\"'object'\" class=\"flex justify-content-end\">{{entity[col.field] | json}}</span>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex justify-content-end\">\r\n                    <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n                    <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td colspan=\"8\">No entries found.</td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"], components: [{ type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollDelay", "virtualRowHeight", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "minBufferPx", "maxBufferPx", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { type: i5$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { type: i5$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i6$1.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { type: i7$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass"] }, { type: i9$1.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { type: i12$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }], directives: [{ type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3$1.DatePipe, "json": i3$1.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RESTworldListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rw-list', template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\">\r\n\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr>\r\n      <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n        <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n          {{col.header}}\r\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n          <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n        </div>\r\n      </th>\r\n      <th>\r\n        <div class=\"flex justify-content-end\">\r\n          <div class=\"mx-2\" pTooltip=\"Create new\" tooltipPosition=\"left\">\r\n            <a class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"['/edit', apiName, newHref]\"></a>\r\n          </div>\r\n        </div>\r\n      </th>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n    <tr>\r\n      <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n          <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n        </ng-container>\r\n        <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n        <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n        <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n      </td>\r\n      <td>\r\n        <div class=\"flex justify-content-end\">\r\n          <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n          <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td colspan=\"8\">No entries found.</td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }]; }, propDecorators: { editLink: [{
+            args: [{ selector: 'rw-list', template: "<p-table [value]=\"value\"\r\n         [lazy]=\"true\"\r\n         [lazyLoadOnInit]=\"false\"\r\n         (onLazyLoad)=\"load($event)\"\r\n         responsiveLayout=\"scroll\"\r\n         [paginator]=\"true\"\r\n         [rows]=\"rows\"\r\n         [rowsPerPageOptions]=\"rowsPerPage\"\r\n         [totalRecords]=\"totalRecords\"\r\n         [loading]=\"isLoading\"\r\n         [showInitialSortBadge]=\"true\"\r\n         [columns]=\"columns\"\r\n         [sortField]=\"sortField\"\r\n         [sortOrder]=\"sortOrder\">\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n            <th *ngFor=\"let col of columns\" [pSortableColumn]=\"col.field\">\r\n                <div class=\"p-d-flex p-jc-between p-ai-center\">\r\n                    {{col.header}}\r\n                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                    <p-columnFilter [type]=\"col.type\" [field]=\"col.field\" display=\"menu\"></p-columnFilter>\r\n                </div>\r\n            </th>\r\n            <th>\r\n                <div class=\"flex justify-content-end\">\r\n                    <div class=\"mx-2\">\r\n                        <a *ngIf=\"!createButtonMenu\" class=\"p-button-success\" icon=\"fas fa-plus\" pButton [routerLink]=\"[editLink, apiName, newHref]\" pTooltip=\"Create new\" tooltipPosition=\"left\"></a>\r\n                        <p-splitButton *ngIf=\"createButtonMenu\" styleClass=\"p-button-success\" icon=\"fas fa-plus\" pTooltip=\"Create new\" tooltipPosition=\"left\" (onClick)=\"createNew()\" [model]=\"createButtonMenu\" appendTo=\"body\"></p-splitButton>\r\n                    </div>\r\n                </div>\r\n            </th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"body\" let-entity let-columns=\"columns\">\r\n        <tr>\r\n            <td [ngSwitch]=\"col.type\" *ngFor=\"let col of columns\">\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                    <p-avatar *ngIf=\"col.field === 'createdBy' || col.field === 'lastChangedBy'\" [pTooltip]=\"entity[col.field]\" tooltipPosition=\"top\" [image]=\"avatarGenerator.getImage(entity[col.field])\" [label]=\"avatarGenerator.getLabel(entity[col.field])\" [style]=\"avatarGenerator.getStyle(entity[col.field])\" shape=\"circle\"></p-avatar>\r\n                    <span *ngIf=\"col.field !== 'createdBy' && col.field !== 'lastChangedBy'\">{{entity[col.field]}}</span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'numeric'\" class=\"flex justify-content-end\">{{entity[col.field]}}</span>\r\n                <span *ngSwitchCase=\"'boolean'\" class=\"flex justify-content-center\"><p-triStateCheckbox [(ngModel)]=\"entity[col.field]\" [readonly]=\"true\"></p-triStateCheckbox></span>\r\n                <span *ngSwitchCase=\"'date'\" [pTooltip]=\"entity[col.field]\">{{entity[col.field] | date:dateFormat}}</span>\r\n                <span *ngSwitchCase=\"'array'\" class=\"flex justify-content-end\"><p *ngFor=\"let arrayElement of entity[col.field]\">{{arrayElement | json}}</p></span>\r\n                <span *ngSwitchCase=\"'object'\" class=\"flex justify-content-end\">{{entity[col.field] | json}}</span>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex justify-content-end\">\r\n                    <a pButton pTooltip=\"View/Edit\" tooltipPosition=\"left\" [routerLink]=\"[editLink, apiName, entity._links?.self[0].href]\" icon=\"fas fa-edit\"></a>\r\n                    <button pTooltip=\"Delete\" tooltipPosition=\"left\" pButton *ngIf=\"entity._links.delete\" (click)=\"showDeleteConfirmatioModal(entity)\" icon=\"fas fa-trash-alt\" type=\"button\" class=\"mx-2 p-button-danger\"></button>\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td colspan=\"8\">No entries found.</td>\r\n        </tr>\r\n    </ng-template>\r\n\r\n</p-table>\r\n\r\n<p-toast></p-toast>\r\n<p-confirmDialog></p-confirmDialog>\r\n", styles: [".p-tooltip{max-width:-moz-fit-content;max-width:fit-content}a.p-button{text-decoration:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: RESTworldClientCollection }, { type: i2$1.ConfirmationService }, { type: i2$1.MessageService }, { type: AvatarGenerator }, { type: i4$2.Router }]; }, propDecorators: { editLink: [{
                 type: Input
             }], apiName: [{
                 type: Input
             }], rel: [{
                 type: Input
+            }], sortField: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
             }], rowsPerPage: [{
                 type: Input
+            }], createButtonMenu: [{
+                type: Input
             }] } });
 
 function initializeSettings(settingsService) {
@@ -1518,7 +1584,8 @@ RestworldClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         DialogModule,
         ButtonModule,
         ColorPickerModule,
-        DragDropModule], exports: [RESTworldListViewComponent,
+        DragDropModule,
+        SplitButtonModule], exports: [RESTworldListViewComponent,
         RESTworldEditViewComponent,
         RESTWorldImageViewComponent,
         RESTWorldFileViewComponent,
@@ -1565,7 +1632,8 @@ RestworldClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
             DialogModule,
             ButtonModule,
             ColorPickerModule,
-            DragDropModule
+            DragDropModule,
+            SplitButtonModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: RestworldClientModule, decorators: [{
             type: NgModule,
@@ -1609,7 +1677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         DialogModule,
                         ButtonModule,
                         ColorPickerModule,
-                        DragDropModule
+                        DragDropModule,
+                        SplitButtonModule,
                     ],
                     exports: [
                         RESTworldListViewComponent,