@vendure/admin-ui 3.1.4 → 3.1.6

package/esm2022/settings/components/tax-rate-list/tax-rate-list.component.mjs

@@ -75,7 +75,7 @@ export class TaxRateListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxRateListComponent, selector: "vdr-tax-rate-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxRateListComponent, selector: "vdr-tax-rate-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateListComponent, decorators: [{
             type: Component,

package/esm2022/settings/components/zone-list/zone-list.component.mjs

@@ -132,7 +132,7 @@ export class ZoneListComponent extends TypedBaseListComponent {
         this.zoneMemberList?.refresh();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneListComponent, selector: "vdr-zone-list", viewQueries: [{ propertyName: "zoneMemberList", first: true, predicate: ZoneMemberListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: [".zone-wrapper{display:flex;height:calc(100% - 50px)}.zone-wrapper .zone-list{flex:1;overflow:auto;margin-top:0}.zone-wrapper .zone-list tr.active{background-color:var(--color-component-bg-200)}.zone-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.zone-members.expanded{width:40vw;visibility:visible;opacity:1;padding-inline-start:12px}.zone-members .close-button{margin:0;background:none;border:none;cursor:pointer}.zone-members ::ng-deep table.table{margin-top:0}.zone-members ::ng-deep table.table th{top:0}.zone-members .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneListComponent, selector: "vdr-zone-list", viewQueries: [{ propertyName: "zoneMemberList", first: true, predicate: ZoneMemberListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: [".zone-wrapper{display:flex;height:calc(100% - 50px)}.zone-wrapper .zone-list{flex:1;overflow:auto;margin-top:0}.zone-wrapper .zone-list tr.active{background-color:var(--color-component-bg-200)}.zone-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.zone-members.expanded{width:40vw;visibility:visible;opacity:1;padding-inline-start:12px}.zone-members .close-button{margin:0;background:none;border:none;cursor:pointer}.zone-members ::ng-deep table.table{margin-top:0}.zone-members ::ng-deep table.table th{top:0}.zone-members .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneListComponent, decorators: [{
             type: Component,

package/esm2022/settings/components/zone-member-list/zone-member-list.component.mjs

@@ -70,7 +70,7 @@ export class ZoneMemberListComponent {
         this.refresh$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: { locationId: "locationId", members: "members", selectedMemberIds: "selectedMemberIds", activeZone: "activeZone" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ZoneMemberListHeaderDirective, descendants: true }, { propertyName: "controlsTemplate", first: true, predicate: ZoneMemberControlsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"filteredMembers$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [currentPage]=\"currentPage\"\r\n    (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n    (pageChange)=\"currentPage = $event\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-member=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/settings/countries', member.id]\"\r\n                ><span> {{ member.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-member=\"item\">\r\n            <vdr-chip  *ngIf=\"member.enabled\" colorType=\"success\">{{ 'common.enabled' | translate }}</vdr-chip>\r\n            <vdr-chip  *ngIf=\"!member.enabled\" colorType=\"warning\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".members-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:5;border-bottom:1px solid var(--color-component-border-200)}.members-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.members-header .clr-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: { locationId: "locationId", members: "members", selectedMemberIds: "selectedMemberIds", activeZone: "activeZone" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ZoneMemberListHeaderDirective, descendants: true }, { propertyName: "controlsTemplate", first: true, predicate: ZoneMemberControlsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"filteredMembers$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [currentPage]=\"currentPage\"\r\n    (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n    (pageChange)=\"currentPage = $event\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-member=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/settings/countries', member.id]\"\r\n                ><span> {{ member.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-member=\"item\">\r\n            <vdr-chip  *ngIf=\"member.enabled\" colorType=\"success\">{{ 'common.enabled' | translate }}</vdr-chip>\r\n            <vdr-chip  *ngIf=\"!member.enabled\" colorType=\"warning\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".members-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:5;border-bottom:1px solid var(--color-component-border-200)}.members-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.members-header .clr-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListComponent, decorators: [{
             type: Component,

package/esm2022/system/components/job-list/job-list.component.mjs

@@ -63,7 +63,7 @@ export class JobListComponent extends BaseListComponent {
         this.dataService.settings.cancelJob(id).subscribe(() => this.refresh());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobListComponent, deps: [{ token: i1.DataService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: JobListComponent, selector: "vdr-job-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\r\n    <vdr-page-title></vdr-page-title>\r\n</vdr-page-header>\r\n<vdr-page-body>\r\n    <vdr-page-block>\r\n        <vdr-action-bar>\r\n            <vdr-ab-left>\r\n                <clr-checkbox-wrapper class=\"mr-2\">\r\n                    <input type=\"checkbox\" clrCheckbox [formControl]=\"liveUpdate\" name=\"live-update\" />\r\n                    <label>{{ 'common.live-update' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </vdr-ab-left>\r\n            <vdr-ab-right>\r\n                <vdr-action-bar-items locationId=\"job-list\"></vdr-action-bar-items>\r\n                <ng-select\r\n                    class=\"mr-2\"\r\n                    [addTag]=\"false\"\r\n                    [hideSelected]=\"true\"\r\n                    [multiple]=\"false\"\r\n                    [markFirst]=\"false\"\r\n                    [clearable]=\"false\"\r\n                    [searchable]=\"false\"\r\n                    [formControl]=\"stateFilter\"\r\n                    (change)=\"refresh()\"\r\n                >\r\n                    <ng-option [value]=\"''\">\r\n                        <vdr-chip>{{ 'system.job-state-all' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'PENDING'\">\r\n                        <vdr-chip>{{ 'system.job-state-pending' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'RUNNING'\">\r\n                        <vdr-chip colorType=\"warning\">{{ 'system.job-state-running' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'COMPLETED'\">\r\n                        <vdr-chip colorType=\"success\">{{ 'system.job-state-completed' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'FAILED'\">\r\n                        <vdr-chip colorType=\"error\">{{ 'system.job-state-failed' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'CANCELLED'\">\r\n                        <vdr-chip colorType=\"error\">{{ 'system.job-state-cancelled' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                </ng-select>\r\n                <ng-select\r\n                    [addTag]=\"false\"\r\n                    [items]=\"queues$ | async\"\r\n                    [hideSelected]=\"true\"\r\n                    [multiple]=\"false\"\r\n                    [markFirst]=\"false\"\r\n                    [clearable]=\"false\"\r\n                    [searchable]=\"false\"\r\n                    bindValue=\"name\"\r\n                    [formControl]=\"queueFilter\"\r\n                    (change)=\"refresh()\"\r\n                >\r\n                    <ng-template ng-label-tmp ng-option-tmp let-item=\"item\">\r\n                        <ng-container *ngIf=\"item.name === 'all'; else others\">\r\n                            <vdr-chip>{{ 'system.all-job-queues' | translate }}</vdr-chip>\r\n                        </ng-container>\r\n                        <ng-template #others>\r\n                            <vdr-chip [colorFrom]=\"item.name\">{{ item.name }}</vdr-chip>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-ab-right>\r\n        </vdr-action-bar>\r\n    </vdr-page-block>\r\n\r\n    <vdr-data-table-2\r\n        id=\"job-list\"\r\n        [items]=\"items$ | async\"\r\n        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n        [totalItems]=\"totalItems$ | async\"\r\n        [currentPage]=\"currentPage$ | async\"\r\n        (pageChange)=\"setPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.createdAt | timeAgo }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-queue-name' | translate\" id=\"job-queue-name\" [optional]=\"false\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-chip [colorFrom]=\"job.queueName\">{{ job.queueName }}</vdr-chip>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-data' | translate\" id=\"job-data\" [optional]=\"false\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-dropdown *ngIf=\"job.data\">\r\n                    <button\r\n                        class=\"button-small\"\r\n                        vdrDropdownTrigger\r\n                        [title]=\"'system.job-data' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"job.data\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-state' | translate\" id=\"job-state\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-job-state-label [job]=\"job\"></vdr-job-state-label>\r\n                <div *ngIf=\"job.state === 'FAILED'\" class=\"retry-info\">after {{ job.attempts }} attempts</div>\r\n                <div *ngIf=\"job.state === 'RUNNING' || job.state === 'RETRYING'\" class=\"retry-info\">\r\n                    attempting {{ job.attempts }} of {{ job.retries + 1 }}\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-duration' | translate\" id=\"job-duration\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.duration | duration }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-result' | translate\" id=\"job-result\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-dropdown *ngIf=\"hasResult(job)\">\r\n                    <button class=\"button-small mr-1\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                        {{ 'system.job-result' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"job.result\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <vdr-dropdown *ngIf=\"job.error\">\r\n                    <button class=\"button-small\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"exclamation-circle\"></clr-icon>\r\n                        {{ 'system.job-error' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            {{ job.error }}\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <vdr-dropdown *ngIf=\"!job.isSettled && job.state !== 'FAILED'\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"cancelJob(job.id)\"\r\n                            [disabled]=\"!(['DeleteSettings', 'DeleteSystem'] | hasPermission)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"ban\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.cancel' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</vdr-page-body>\r\n", styles: [".result-detail{margin:0 12px}.retry-info{margin-inline-start:6px;color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i6.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i7.JobStateLabelComponent, selector: "vdr-job-state-label", inputs: ["job"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.DurationPipe, name: "duration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: JobListComponent, selector: "vdr-job-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\r\n    <vdr-page-title></vdr-page-title>\r\n</vdr-page-header>\r\n<vdr-page-body>\r\n    <vdr-page-block>\r\n        <vdr-action-bar>\r\n            <vdr-ab-left>\r\n                <clr-checkbox-wrapper class=\"mr-2\">\r\n                    <input type=\"checkbox\" clrCheckbox [formControl]=\"liveUpdate\" name=\"live-update\" />\r\n                    <label>{{ 'common.live-update' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </vdr-ab-left>\r\n            <vdr-ab-right>\r\n                <vdr-action-bar-items locationId=\"job-list\"></vdr-action-bar-items>\r\n                <ng-select\r\n                    class=\"mr-2\"\r\n                    [addTag]=\"false\"\r\n                    [hideSelected]=\"true\"\r\n                    [multiple]=\"false\"\r\n                    [markFirst]=\"false\"\r\n                    [clearable]=\"false\"\r\n                    [searchable]=\"false\"\r\n                    [formControl]=\"stateFilter\"\r\n                    (change)=\"refresh()\"\r\n                >\r\n                    <ng-option [value]=\"''\">\r\n                        <vdr-chip>{{ 'system.job-state-all' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'PENDING'\">\r\n                        <vdr-chip>{{ 'system.job-state-pending' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'RUNNING'\">\r\n                        <vdr-chip colorType=\"warning\">{{ 'system.job-state-running' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'COMPLETED'\">\r\n                        <vdr-chip colorType=\"success\">{{ 'system.job-state-completed' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'FAILED'\">\r\n                        <vdr-chip colorType=\"error\">{{ 'system.job-state-failed' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                    <ng-option [value]=\"'CANCELLED'\">\r\n                        <vdr-chip colorType=\"error\">{{ 'system.job-state-cancelled' | translate }}</vdr-chip>\r\n                    </ng-option>\r\n                </ng-select>\r\n                <ng-select\r\n                    [addTag]=\"false\"\r\n                    [items]=\"queues$ | async\"\r\n                    [hideSelected]=\"true\"\r\n                    [multiple]=\"false\"\r\n                    [markFirst]=\"false\"\r\n                    [clearable]=\"false\"\r\n                    [searchable]=\"false\"\r\n                    bindValue=\"name\"\r\n                    [formControl]=\"queueFilter\"\r\n                    (change)=\"refresh()\"\r\n                >\r\n                    <ng-template ng-label-tmp ng-option-tmp let-item=\"item\">\r\n                        <ng-container *ngIf=\"item.name === 'all'; else others\">\r\n                            <vdr-chip>{{ 'system.all-job-queues' | translate }}</vdr-chip>\r\n                        </ng-container>\r\n                        <ng-template #others>\r\n                            <vdr-chip [colorFrom]=\"item.name\">{{ item.name }}</vdr-chip>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-ab-right>\r\n        </vdr-action-bar>\r\n    </vdr-page-block>\r\n\r\n    <vdr-data-table-2\r\n        id=\"job-list\"\r\n        [items]=\"items$ | async\"\r\n        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n        [totalItems]=\"totalItems$ | async\"\r\n        [currentPage]=\"currentPage$ | async\"\r\n        (pageChange)=\"setPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.createdAt | timeAgo }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-queue-name' | translate\" id=\"job-queue-name\" [optional]=\"false\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-chip [colorFrom]=\"job.queueName\">{{ job.queueName }}</vdr-chip>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-data' | translate\" id=\"job-data\" [optional]=\"false\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-dropdown *ngIf=\"job.data\">\r\n                    <button\r\n                        class=\"button-small\"\r\n                        vdrDropdownTrigger\r\n                        [title]=\"'system.job-data' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"job.data\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-state' | translate\" id=\"job-state\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-job-state-label [job]=\"job\"></vdr-job-state-label>\r\n                <div *ngIf=\"job.state === 'FAILED'\" class=\"retry-info\">after {{ job.attempts }} attempts</div>\r\n                <div *ngIf=\"job.state === 'RUNNING' || job.state === 'RETRYING'\" class=\"retry-info\">\r\n                    attempting {{ job.attempts }} of {{ job.retries + 1 }}\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-duration' | translate\" id=\"job-duration\">\r\n            <ng-template let-job=\"item\">\r\n                {{ job.duration | duration }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'system.job-result' | translate\" id=\"job-result\">\r\n            <ng-template let-job=\"item\">\r\n                <vdr-dropdown *ngIf=\"hasResult(job)\">\r\n                    <button class=\"button-small mr-1\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                        {{ 'system.job-result' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"job.result\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <vdr-dropdown *ngIf=\"job.error\">\r\n                    <button class=\"button-small\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"exclamation-circle\"></clr-icon>\r\n                        {{ 'system.job-error' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            {{ job.error }}\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <vdr-dropdown *ngIf=\"!job.isSettled && job.state !== 'FAILED'\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"cancelJob(job.id)\"\r\n                            [disabled]=\"!(['DeleteSettings', 'DeleteSystem'] | hasPermission)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"ban\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.cancel' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</vdr-page-body>\r\n", styles: [".result-detail{margin:0 12px}.retry-info{margin-inline-start:6px;color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i6.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i7.JobStateLabelComponent, selector: "vdr-job-state-label", inputs: ["job"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.DurationPipe, name: "duration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobListComponent, decorators: [{
             type: Component,