@c8y/ngx-components 1022.4.3 → 1022.4.5

package/fesm2022/c8y-ngx-components-auth-configuration.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, Injectable, EventEmitter, NgModule, Output, ViewChild } from '@angular/core';
+import { Input, Component, Injectable, EventEmitter, NgModule, Output, inject, ChangeDetectorRef, ElementRef, Renderer2, TemplateRef, ContentChild, ViewChild } from '@angular/core';
 import * as i2$1 from '@c8y/ngx-components';
 import { Permissions, gettext, CoreModule, hookRoute, memoize, Status, NavigatorNode, hookTab, hookNavigator, hookPatternMessages } from '@c8y/ngx-components';
 import * as i1$1 from '@c8y/client';
@@ -14,14 +14,16 @@ import { map, catchError, tap, switchMap, shareReplay, publishReplay, refCount,
 import { forkJoin, from, of, BehaviorSubject, defer, throwError, Subject, EMPTY, merge } from 'rxjs';
 import { isString, omit, defaults, omitBy, isEmpty, cloneDeep, isFinite, pickBy, identity, map as map$1, pick, findKey, has, get, reduce, pull, defaultsDeep, at, head, reject, isUndefined } from 'lodash-es';
 import * as i2$2 from '@ngx-translate/core';
-import * as i4$1 from 'ngx-bootstrap/tooltip';
+import * as i4$2 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i4$3 from 'ngx-bootstrap/collapse';
+import * as i4$4 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { HttpStatusCode } from '@angular/common/http';
 import { __decorate, __metadata } from 'tslib';
+import * as i4$1 from 'ngx-bootstrap/pagination';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 import * as i1$2 from 'ngx-bootstrap/modal';
-import * as i4$2 from '@c8y/ngx-components/assets-navigator';
+import * as i4$3 from '@c8y/ngx-components/assets-navigator';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import * as i6 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -1420,6 +1422,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class PaginatedListGroupComponent {
+    constructor() {
+        this.items = [];
+        this.itemsPerPage = 5;
+        this.currentPage = 1;
+        this.currentPageItems = [];
+        this.cdr = inject(ChangeDetectorRef);
+        this.host = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+    }
+    ngOnInit() {
+        this.updateCurrentPageItems();
+    }
+    ngOnChanges() {
+        this.updateCurrentPageItems();
+    }
+    ngAfterViewInit() {
+        if (!this.itemTemplate) {
+            throw new Error('c8y-paginated-list-group requires an <ng-template> to be provided.');
+        }
+        this.updateCurrentPageItems();
+    }
+    pageChanged(event) {
+        this.currentPage = event.page;
+        this.itemsPerPage = event.itemsPerPage;
+        this.updateCurrentPageItems();
+        this.cdr.detectChanges();
+        // keep the pagination component in view after page change:
+        const pagination = this.host.nativeElement.querySelector('pagination');
+        if (pagination.scrollIntoView) {
+            pagination.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    updateCurrentPageItems() {
+        this.currentPageItems = this.items.slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage);
+    }
+    getItemIndex(item) {
+        return this.items.indexOf(item);
+    }
+    goToLastItem() {
+        const lastPage = Math.ceil(this.items.length / this.itemsPerPage) || 1;
+        this.currentPage = lastPage;
+        this.updateCurrentPageItems();
+        this.cdr.detectChanges();
+        const root = this.host.nativeElement;
+        const listItems = root.querySelectorAll('c8y-li:not(.sticky-bottom)');
+        if (listItems.length > 0) {
+            const lastItem = listItems[listItems.length - 1];
+            if (lastItem.scrollIntoView) {
+                lastItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            this.renderer.addClass(lastItem, 'highlighted');
+            setTimeout(() => this.renderer.removeClass(lastItem, 'highlighted'), 2000);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatedListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PaginatedListGroupComponent, isStandalone: true, selector: "c8y-paginated-list-group", inputs: { items: "items", itemsPerPage: "itemsPerPage" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"container-fluid\"\n  *ngIf=\"items.length > 0\"\n>\n  <c8y-list-group>\n    <c8y-li *ngFor=\"let item of currentPageItems; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: getItemIndex(item) }\"\n      ></ng-container>\n    </c8y-li>\n    <c8y-li class=\"sticky-bottom\">\n      <pagination\n        [totalItems]=\"items.length\"\n        [(ngModel)]=\"currentPage\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [itemsPerPage]=\"itemsPerPage\"\n        (pageChanged)=\"pageChanged($event)\"\n        [maxSize]=\"10\"\n        [boundaryLinks]=\"true\"\n        previousText=\"&nbsp;\"\n        nextText=\"&nbsp;\"\n        firstText=\"&laquo;\"\n        lastText=\"&raquo;\"\n      ></pagination>\n    </c8y-li>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i4$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatedListGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-paginated-list-group', standalone: true, imports: [CoreModule, PaginationModule], template: "<div\n  class=\"container-fluid\"\n  *ngIf=\"items.length > 0\"\n>\n  <c8y-list-group>\n    <c8y-li *ngFor=\"let item of currentPageItems; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: getItemIndex(item) }\"\n      ></ng-container>\n    </c8y-li>\n    <c8y-li class=\"sticky-bottom\">\n      <pagination\n        [totalItems]=\"items.length\"\n        [(ngModel)]=\"currentPage\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [itemsPerPage]=\"itemsPerPage\"\n        (pageChanged)=\"pageChanged($event)\"\n        [maxSize]=\"10\"\n        [boundaryLinks]=\"true\"\n        previousText=\"&nbsp;\"\n        nextText=\"&nbsp;\"\n        firstText=\"&laquo;\"\n        lastText=\"&raquo;\"\n      ></pagination>\n    </c8y-li>\n  </c8y-list-group>\n</div>\n" }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
 const relations = [
     {
         name: 'EQ',
@@ -1486,7 +1558,7 @@ class ChildPredicatesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChildPredicatesComponent, deps: [{ token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChildPredicatesComponent, isStandalone: false, selector: "c8y-sso-child-predicates", inputs: { childPredicates: "childPredicates", accessMappingIndex: "accessMappingIndex" }, outputs: { onRemoveAllChildPredicates: "onRemoveAllChildPredicates" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-16\">\n  <legend>{{ 'When' | translate }}</legend>\n  <div class=\"tight-grid hidden-sm hidden-xs\">\n    <div class=\"col-md-4\">\n      <label translate>Key</label>\n    </div>\n    <div class=\"col-md-2\">\n      <label translate>Operator`logical`</label>\n    </div>\n    <div class=\"col-md-4\">\n      <label translate>Value</label>\n    </div>\n  </div>\n  <div\n    class=\"tight-grid\"\n    *ngFor=\"let childPredicate of childPredicates; last as isLast; index as idx\"\n  >\n    <div class=\"col-md-4\">\n      <c8y-form-group>\n        <label\n          [for]=\"'parameterPath' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Key\n        </label>\n        <input\n          [name]=\"'parameterPath' + accessMappingIndex + idx\"\n          [id]=\"'parameterPath' + accessMappingIndex + idx\"\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"childPredicate.parameterPath\"\n          placeholder=\"{{ 'Key' | translate }}\"\n          required\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-2\">\n      <c8y-form-group>\n        <label\n          [for]=\"'operator' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Operator`logical`\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            [name]=\"'operator' + accessMappingIndex + idx\"\n            [id]=\"'operator' + accessMappingIndex + idx\"\n            [(ngModel)]=\"childPredicate.operator\"\n            required\n          >\n            <option\n              *ngFor=\"let relation of relations\"\n              [ngValue]=\"relation.value\"\n            >\n              {{ relation.label | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-4\">\n      <c8y-form-group>\n        <label\n          [for]=\"'value' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Value\n        </label>\n        <input\n          [id]=\"'value' + accessMappingIndex + idx\"\n          [name]=\"'value' + accessMappingIndex + idx\"\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"childPredicate.value\"\n          placeholder=\"{{ 'Value' | translate }}\"\n          required\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-1\">\n      <c8y-form-group>\n        <button\n          class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n          name=\"removeButton\"\n          (click)=\"removeChildPredicate(childPredicate)\"\n          tooltip=\"{{ 'Remove' | translate }}\"\n          [attr.aria-label]=\"'Remove' | translate\"\n          [delay]=\"300\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n        <button\n          name=\"removeButton\"\n          class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n          (click)=\"removeChildPredicate(childPredicate)\"\n          title=\"{{ 'Remove' | translate }}\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n          <span translate>Remove</span>\n        </button>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-1\">\n      <c8y-form-group *ngIf=\"isLast\">\n        <button\n          title=\"{{ 'and' | translate }}\"\n          class=\"btn btn-default btn-block btn-sm\"\n          (click)=\"addChildPredicate()\"\n          type=\"button\"\n          translate\n        >\n          and\n        </button>\n      </c8y-form-group>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChildPredicatesComponent, isStandalone: false, selector: "c8y-sso-child-predicates", inputs: { childPredicates: "childPredicates", accessMappingIndex: "accessMappingIndex" }, outputs: { onRemoveAllChildPredicates: "onRemoveAllChildPredicates" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-16\">\n  <legend>{{ 'When' | translate }}</legend>\n  <div class=\"tight-grid hidden-sm hidden-xs\">\n    <div class=\"col-md-4\">\n      <label translate>Key</label>\n    </div>\n    <div class=\"col-md-2\">\n      <label translate>Operator`logical`</label>\n    </div>\n    <div class=\"col-md-4\">\n      <label translate>Value</label>\n    </div>\n  </div>\n  <div\n    class=\"tight-grid\"\n    *ngFor=\"let childPredicate of childPredicates; last as isLast; index as idx\"\n  >\n    <div class=\"col-md-4\">\n      <c8y-form-group>\n        <label\n          [for]=\"'parameterPath' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Key\n        </label>\n        <input\n          [name]=\"'parameterPath' + accessMappingIndex + idx\"\n          [id]=\"'parameterPath' + accessMappingIndex + idx\"\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"childPredicate.parameterPath\"\n          placeholder=\"{{ 'Key' | translate }}\"\n          required\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-2\">\n      <c8y-form-group>\n        <label\n          [for]=\"'operator' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Operator`logical`\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            [name]=\"'operator' + accessMappingIndex + idx\"\n            [id]=\"'operator' + accessMappingIndex + idx\"\n            [(ngModel)]=\"childPredicate.operator\"\n            required\n          >\n            <option\n              *ngFor=\"let relation of relations\"\n              [ngValue]=\"relation.value\"\n            >\n              {{ relation.label | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-4\">\n      <c8y-form-group>\n        <label\n          [for]=\"'value' + accessMappingIndex + idx\"\n          class=\"visible-sm visible-xs\"\n          translate\n        >\n          Value\n        </label>\n        <input\n          [id]=\"'value' + accessMappingIndex + idx\"\n          [name]=\"'value' + accessMappingIndex + idx\"\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"childPredicate.value\"\n          placeholder=\"{{ 'Value' | translate }}\"\n          required\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-1\">\n      <c8y-form-group>\n        <button\n          class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n          name=\"removeButton\"\n          (click)=\"removeChildPredicate(childPredicate)\"\n          tooltip=\"{{ 'Remove' | translate }}\"\n          [attr.aria-label]=\"'Remove' | translate\"\n          [delay]=\"300\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n        <button\n          name=\"removeButton\"\n          class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n          (click)=\"removeChildPredicate(childPredicate)\"\n          title=\"{{ 'Remove' | translate }}\"\n          type=\"button\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n          <span translate>Remove</span>\n        </button>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-md-1\">\n      <c8y-form-group *ngIf=\"isLast\">\n        <button\n          title=\"{{ 'and' | translate }}\"\n          class=\"btn btn-default btn-block btn-sm\"\n          (click)=\"addChildPredicate()\"\n          type=\"button\"\n          translate\n        >\n          and\n        </button>\n      </c8y-form-group>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChildPredicatesComponent, decorators: [{
             type: Component,
@@ -1526,11 +1598,11 @@ class DynamicAccessMappingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicAccessMappingComponent, deps: [{ token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicAccessMappingComponent, isStandalone: false, selector: "c8y-sso-dynamic-access-mapping", inputs: { groups: "groups", apps: "apps", accessMapping: "accessMapping", accessMappingIndex: "accessMappingIndex" }, outputs: { onRemoveAccessMapping: "onRemoveAccessMapping" }, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-8\">\n  <div *ngIf=\"accessMapping.when.childPredicates.length != 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"accessMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'am' + accessMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide access to' | translate }}\n      </legend>\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div\n            title=\"{{ 'Default global roles' | translate }}\"\n            class=\"form-group\"\n          >\n            <label\n              [for]=\"'groups' + accessMappingIndex\"\n              class=\"control-label\"\n            >\n              {{ 'Default global roles' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'groups' + accessMappingIndex\"\n              [items]=\"groups\"\n              [selected]=\"selectedGroups\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"controlContainer.control.markAsDirty(); selectedGroups = $event; accessMapping.thenGroups = getIds($event)\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n        <div class=\"col-sm-6\">\n          <div\n            title=\"{{ 'Default applications' | translate }}\"\n            class=\"form-group\"\n          >\n            <label\n              [for]=\"'apps' + accessMappingIndex\"\n              class=\"control-label\"\n            >\n              {{ 'Default applications' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'apps' + accessMappingIndex\"\n              [items]=\"apps\"\n              [selected]=\"selectedApps\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"controlContainer.control.markAsDirty(); selectedApps = $event; accessMapping.thenApplications = getIds($event)\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "component", type: ChildPredicatesComponent, selector: "c8y-sso-child-predicates", inputs: ["childPredicates", "accessMappingIndex"], outputs: ["onRemoveAllChildPredicates"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicAccessMappingComponent, isStandalone: false, selector: "c8y-sso-dynamic-access-mapping", inputs: { groups: "groups", apps: "apps", accessMapping: "accessMapping", accessMappingIndex: "accessMappingIndex" }, outputs: { onRemoveAccessMapping: "onRemoveAccessMapping" }, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-8\">\n  <div *ngIf=\"accessMapping.when.childPredicates.length != 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"accessMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'am' + accessMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide access to' | translate }}\n      </legend>\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div\n            class=\"form-group\"\n            title=\"{{ 'Default global roles' | translate }}\"\n          >\n            <label\n              class=\"control-label\"\n              [for]=\"'groups' + accessMappingIndex\"\n            >\n              {{ 'Default global roles' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'groups' + accessMappingIndex\"\n              [items]=\"groups\"\n              [selected]=\"selectedGroups\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"\n                controlContainer.control.markAsDirty();\n                selectedGroups = $event;\n                accessMapping.thenGroups = getIds($event)\n              \"\n              [addDropdownContainerToBody]=\"true\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n        <div class=\"col-sm-6\">\n          <div\n            class=\"form-group\"\n            title=\"{{ 'Default applications' | translate }}\"\n          >\n            <label\n              class=\"control-label\"\n              [for]=\"'apps' + accessMappingIndex\"\n            >\n              {{ 'Default applications' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'apps' + accessMappingIndex\"\n              [items]=\"apps\"\n              [selected]=\"selectedApps\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"\n                controlContainer.control.markAsDirty();\n                selectedApps = $event;\n                accessMapping.thenApplications = getIds($event)\n              \"\n              [addDropdownContainerToBody]=\"true\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "component", type: ChildPredicatesComponent, selector: "c8y-sso-child-predicates", inputs: ["childPredicates", "accessMappingIndex"], outputs: ["onRemoveAllChildPredicates"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicAccessMappingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-sso-dynamic-access-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<fieldset class=\"c8y-fieldset p-8\">\n  <div *ngIf=\"accessMapping.when.childPredicates.length != 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"accessMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'am' + accessMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide access to' | translate }}\n      </legend>\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div\n            title=\"{{ 'Default global roles' | translate }}\"\n            class=\"form-group\"\n          >\n            <label\n              [for]=\"'groups' + accessMappingIndex\"\n              class=\"control-label\"\n            >\n              {{ 'Default global roles' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'groups' + accessMappingIndex\"\n              [items]=\"groups\"\n              [selected]=\"selectedGroups\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"controlContainer.control.markAsDirty(); selectedGroups = $event; accessMapping.thenGroups = getIds($event)\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n        <div class=\"col-sm-6\">\n          <div\n            title=\"{{ 'Default applications' | translate }}\"\n            class=\"form-group\"\n          >\n            <label\n              [for]=\"'apps' + accessMappingIndex\"\n              class=\"control-label\"\n            >\n              {{ 'Default applications' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'apps' + accessMappingIndex\"\n              [items]=\"apps\"\n              [selected]=\"selectedApps\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"controlContainer.control.markAsDirty(); selectedApps = $event; accessMapping.thenApplications = getIds($event)\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</fieldset>\n" }]
+            args: [{ selector: 'c8y-sso-dynamic-access-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<fieldset class=\"c8y-fieldset p-8\">\n  <div *ngIf=\"accessMapping.when.childPredicates.length != 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"accessMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'am' + accessMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide access to' | translate }}\n      </legend>\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div\n            class=\"form-group\"\n            title=\"{{ 'Default global roles' | translate }}\"\n          >\n            <label\n              class=\"control-label\"\n              [for]=\"'groups' + accessMappingIndex\"\n            >\n              {{ 'Default global roles' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'groups' + accessMappingIndex\"\n              [items]=\"groups\"\n              [selected]=\"selectedGroups\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"\n                controlContainer.control.markAsDirty();\n                selectedGroups = $event;\n                accessMapping.thenGroups = getIds($event)\n              \"\n              [addDropdownContainerToBody]=\"true\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n        <div class=\"col-sm-6\">\n          <div\n            class=\"form-group\"\n            title=\"{{ 'Default applications' | translate }}\"\n          >\n            <label\n              class=\"control-label\"\n              [for]=\"'apps' + accessMappingIndex\"\n            >\n              {{ 'Default applications' | translate }}\n            </label>\n            <c8y-select-legacy\n              [id]=\"'apps' + accessMappingIndex\"\n              [items]=\"apps\"\n              [selected]=\"selectedApps\"\n              [disableApplyOnNoSelection]=\"true\"\n              (onChange)=\"\n                controlContainer.control.markAsDirty();\n                selectedApps = $event;\n                accessMapping.thenApplications = getIds($event)\n              \"\n              [addDropdownContainerToBody]=\"true\"\n            ></c8y-select-legacy>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</fieldset>\n" }]
         }], ctorParameters: () => [{ type: i1.ControlContainer }], propDecorators: { groups: [{
                 type: Input
             }], apps: [{
@@ -1557,7 +1629,7 @@ class InventoryRolesModalComponent {
         this.modal.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRolesModalComponent, deps: [{ token: i1$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRolesModalComponent, isStandalone: false, selector: "c8y-sso-inventory-roles-modal", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-group-open\"></i>\n    <h4 id=\"modal-title\">{{ 'Select from inventory' | translate }}</h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      id=\"modal-body\"\n      class=\"bg-component\"\n    >\n      <c8y-asset-selector\n        class=\"d-contents\"\n        [(ngModel)]=\"selectedGroups\"\n        [config]=\"{\n          label: label,\n          showFilter: true,\n          multi: true,\n          groupsSelectable: true,\n          columnHeaders: false,\n          singleColumn: true,\n          groupsOnly: true\n        }\"\n      ></c8y-asset-selector>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"dismiss()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      title=\"{{ 'Select' | translate }}\"\n      (click)=\"select()\"\n    >\n      {{ 'Select' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "isNodeSelectable", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRolesModalComponent, isStandalone: false, selector: "c8y-sso-inventory-roles-modal", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"c8y-group-open\"></i>\n    <h4 id=\"modal-title\">{{ 'Select from inventory' | translate }}</h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      id=\"modal-body\"\n      class=\"bg-component\"\n    >\n      <c8y-asset-selector\n        class=\"d-contents\"\n        [(ngModel)]=\"selectedGroups\"\n        [config]=\"{\n          label: label,\n          showFilter: true,\n          multi: true,\n          groupsSelectable: true,\n          columnHeaders: false,\n          singleColumn: true,\n          groupsOnly: true\n        }\"\n      ></c8y-asset-selector>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"dismiss()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"button\"\n      title=\"{{ 'Select' | translate }}\"\n      (click)=\"select()\"\n    >\n      {{ 'Select' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "isNodeSelectable", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRolesModalComponent, decorators: [{
             type: Component,
@@ -1613,11 +1685,11 @@ class InventoryRolesMappingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRolesMappingComponent, deps: [{ token: i1.ControlContainer }, { token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRolesMappingComponent, isStandalone: false, selector: "c8y-sso-inventory-roles-mapping", inputs: { inventoryMapping: "inventoryMapping", inventoryMappingIndex: "inventoryMappingIndex", inventoryRoles: "inventoryRoles" }, outputs: { onRemoveInventoryMapping: "onRemoveInventoryMapping" }, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + accessMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ChildPredicatesComponent, selector: "c8y-sso-child-predicates", inputs: ["childPredicates", "accessMappingIndex"], outputs: ["onRemoveAllChildPredicates"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.MoNamePipe, name: "moName" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InventoryRolesMappingComponent, isStandalone: false, selector: "c8y-sso-inventory-roles-mapping", inputs: { inventoryMapping: "inventoryMapping", inventoryMappingIndex: "inventoryMappingIndex", inventoryRoles: "inventoryRoles" }, outputs: { onRemoveInventoryMapping: "onRemoveInventoryMapping" }, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + '_' + 'irm' + inventoryMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n                [addDropdownContainerToBody]=\"true\"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: i4$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ChildPredicatesComponent, selector: "c8y-sso-child-predicates", inputs: ["childPredicates", "accessMappingIndex"], outputs: ["onRemoveAllChildPredicates"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.MoNamePipe, name: "moName" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InventoryRolesMappingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-sso-inventory-roles-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + accessMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n" }]
+            args: [{ selector: 'c8y-sso-inventory-roles-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + '_' + 'irm' + inventoryMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n                [addDropdownContainerToBody]=\"true\"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n" }]
         }], ctorParameters: () => [{ type: i1.ControlContainer }, { type: i1$2.BsModalService }], propDecorators: { inventoryMapping: [{
                 type: Input
             }], inventoryMappingIndex: [{
@@ -1629,8 +1701,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class AccessMappingComponent {
-    constructor(controlContainer) {
+    constructor(controlContainer, cdr) {
         this.controlContainer = controlContainer;
+        this.cdr = cdr;
         this.USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP = gettext('The access mapping will be executed only once during the first login, then the administrator can edit the user roles. During the next login, these mappings will not be executed.');
         this.USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION = gettext('Use dynamic access mapping only on user creation');
         this.UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP = gettext('The access mapping will be executed only once during the first login, then the administrator can edit the user roles. During the next login only the roles listed in the access mappings will be updated.');
@@ -1654,7 +1727,10 @@ class AccessMappingComponent {
             thenGroups: [],
             thenApplications: []
         };
-        this.templateModel.onNewUser.dynamicMapping.mappings.push(emptyMapping);
+        const accessMappings = this.templateModel.onNewUser.dynamicMapping.mappings;
+        this.templateModel.onNewUser.dynamicMapping.mappings = [...accessMappings, emptyMapping];
+        this.cdr.detectChanges(); // Ensure items are updated in the pagination component before navigating
+        this.paginatedAccessMappings.goToLastItem();
     }
     addInventoryMapping() {
         const emptyInventoryMapping = {
@@ -1664,13 +1740,21 @@ class AccessMappingComponent {
             },
             thenInventoryRoles: []
         };
-        this.templateModel.onNewUser.dynamicMapping.inventoryMappings.push(emptyInventoryMapping);
+        const inventoryMappings = this.templateModel.onNewUser.dynamicMapping.inventoryMappings;
+        this.templateModel.onNewUser.dynamicMapping.inventoryMappings = [
+            ...inventoryMappings,
+            emptyInventoryMapping
+        ];
+        this.cdr.detectChanges(); // Ensure items are updated in the pagination component before navigating
+        this.paginatedInventoryMappings.goToLastItem();
     }
     onRemove(accessMapping) {
-        pull(this.templateModel.onNewUser.dynamicMapping.mappings, accessMapping);
+        const accessMappings = this.templateModel.onNewUser.dynamicMapping.mappings;
+        this.templateModel.onNewUser.dynamicMapping.mappings = accessMappings.filter(mapping => mapping !== accessMapping);
     }
     onRemoveInventoryMapping(inventoryMapping) {
-        pull(this.templateModel.onNewUser.dynamicMapping.inventoryMappings, inventoryMapping);
+        const inventoryMappings = this.templateModel.onNewUser.dynamicMapping.inventoryMappings;
+        this.templateModel.onNewUser.dynamicMapping.inventoryMappings = inventoryMappings.filter(mapping => mapping !== inventoryMapping);
     }
     setDynamicMappingConfiguration(mapRolesOnlyForNewUser, manageRolesOnlyFromAccessMapping = false) {
         this.dynamicMappingConfiguration.mapRolesOnlyForNewUser = mapRolesOnlyForNewUser;
@@ -1712,13 +1796,13 @@ class AccessMappingComponent {
                 ? mapFromIdToken
                 : mapRolesOnlyForNewUser === false && manageRolesOnlyFromAccessMapping === false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessMappingComponent, deps: [{ token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AccessMappingComponent, isStandalone: false, selector: "c8y-sso-access-mapping", inputs: { apps: "apps", groups: "groups", inventoryRoles: "inventoryRoles", templateModel: "templateModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Access mapping\n      </div>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Source of dynamic access mapping' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            title=\"{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingSource\"\n              data-cy=\"dynamic-access-mapping-from-access-token\"\n              [checked]=\"!mapFromIdToken\"\n              (change)=\"setMapFromIdToken(false)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}</span>\n          </label>\n          <label\n            title=\"{{ RETRIVE_FROM_ID_TOKEN | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingSource\"\n              data-cy=\"dynamic-access-mapping-from-id-token\"\n              [checked]=\"mapFromIdToken\"\n              (change)=\"setMapFromIdToken(true)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ID_TOKEN | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Dynamic access mapping principle' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            title=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--on-user-creation\"\n              [checked]=\"mapRolesOnlyForNewUser\"\n              (change)=\"setDynamicMappingConfiguration(true)\"\n            />\n            <span></span>\n            <span>{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}</span>\n            <button\n              class=\"btn-help\"\n              type=\"button\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n          <label\n            title=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-unchanged\"\n              [checked]=\"!mapRolesOnlyForNewUser && manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, true)\"\n            />\n            <span></span>\n            <span>\n              {{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n          <label\n            title=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-cleared\"\n              [checked]=\"!mapRolesOnlyForNewUser && !manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, false)\"\n            />\n            <span></span>\n            <span>\n              {{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              type=\"button\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>{{ 'Dynamic access mapping' | translate }}</legend>\n        <c8y-ui-empty-state\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length === 0\"\n          [icon]=\"'list'\"\n          [title]=\"'No access mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          *ngFor=\"\n            let accessMapping of templateModel.onNewUser.dynamicMapping.mappings;\n            index as idx\n          \"\n        >\n          <c8y-sso-dynamic-access-mapping\n            [accessMapping]=\"accessMapping\"\n            (onRemoveAccessMapping)=\"onRemove(accessMapping)\"\n            [apps]=\"apps\"\n            [groups]=\"groups\"\n            [accessMappingIndex]=\"idx\"\n          ></c8y-sso-dynamic-access-mapping>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            id=\"add-access-mapping-button\"\n            class=\"btn btn-default\"\n            type=\"button\"\n            title=\"{{ 'Add access mapping' | translate }}\"\n            (click)=\"addAccessMapping()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            {{ 'Add access mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>\n          {{ 'Inventory roles mapping' | translate }}\n        </legend>\n        <c8y-ui-empty-state\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length === 0\"\n          [icon]=\"'list'\"\n          [title]=\"'No inventory roles mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <ng-container\n          *ngFor=\"\n            let inventoryMapping of templateModel.onNewUser.dynamicMapping.inventoryMappings;\n            index as idx\n          \"\n        >\n          <c8y-sso-inventory-roles-mapping\n            [inventoryRoles]=\"inventoryRoles\"\n            [inventoryMapping]=\"inventoryMapping\"\n            (onRemoveInventoryMapping)=\"onRemoveInventoryMapping(inventoryMapping)\"\n            [inventoryMappingIndex]=\"idx\"\n          ></c8y-sso-inventory-roles-mapping>\n        </ng-container>\n        <div class=\"p-t-16\">\n          <button\n            id=\"add-inventory-mapping-button\"\n            class=\"btn btn-default\"\n            type=\"button\"\n            title=\"{{ 'Add inventory roles mapping' | translate }}\"\n            (click)=\"addInventoryMapping()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            {{ 'Add inventory roles mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: DynamicAccessMappingComponent, selector: "c8y-sso-dynamic-access-mapping", inputs: ["groups", "apps", "accessMapping", "accessMappingIndex"], outputs: ["onRemoveAccessMapping"] }, { kind: "component", type: InventoryRolesMappingComponent, selector: "c8y-sso-inventory-roles-mapping", inputs: ["inventoryMapping", "inventoryMappingIndex", "inventoryRoles"], outputs: ["onRemoveInventoryMapping"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessMappingComponent, deps: [{ token: i1.ControlContainer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AccessMappingComponent, isStandalone: false, selector: "c8y-sso-access-mapping", inputs: { apps: "apps", groups: "groups", inventoryRoles: "inventoryRoles", templateModel: "templateModel" }, viewQueries: [{ propertyName: "paginatedAccessMappings", first: true, predicate: ["paginatedAccessMappings"], descendants: true }, { propertyName: "paginatedInventoryMappings", first: true, predicate: ["paginatedInventoryMappings"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Access mapping\n      </div>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Source of dynamic access mapping' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingSource\"\n              type=\"radio\"\n              data-cy=\"dynamic-access-mapping-from-access-token\"\n              [checked]=\"!mapFromIdToken\"\n              (change)=\"setMapFromIdToken(false)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ RETRIVE_FROM_ID_TOKEN | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingSource\"\n              type=\"radio\"\n              data-cy=\"dynamic-access-mapping-from-id-token\"\n              [checked]=\"mapFromIdToken\"\n              (change)=\"setMapFromIdToken(true)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ID_TOKEN | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Dynamic access mapping principle' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--on-user-creation\"\n              [checked]=\"mapRolesOnlyForNewUser\"\n              (change)=\"setDynamicMappingConfiguration(true)\"\n            />\n            <span></span>\n            <span>{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}</span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-unchanged\"\n              [checked]=\"!mapRolesOnlyForNewUser && manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, true)\"\n            />\n            <span></span>\n            <span>\n              {{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-cleared\"\n              [checked]=\"!mapRolesOnlyForNewUser && !manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, false)\"\n            />\n            <span></span>\n            <span>\n              {{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>{{ 'Dynamic access mapping' | translate }}</legend>\n        <c8y-ui-empty-state\n          [icon]=\"'list'\"\n          [title]=\"'No access mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length === 0\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          class=\"container-fluid\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length > 0\"\n        >\n          <c8y-paginated-list-group\n            #paginatedAccessMappings\n            [items]=\"templateModel.onNewUser.dynamicMapping.mappings\"\n          >\n            <ng-template\n              let-accessMapping\n              let-index=\"index\"\n            >\n              <c8y-sso-dynamic-access-mapping\n                [accessMapping]=\"accessMapping\"\n                (onRemoveAccessMapping)=\"onRemove(accessMapping)\"\n                [apps]=\"apps\"\n                [groups]=\"groups\"\n                [accessMappingIndex]=\"index\"\n              ></c8y-sso-dynamic-access-mapping>\n            </ng-template>\n          </c8y-paginated-list-group>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            class=\"btn btn-default\"\n            title=\"{{ 'Add access mapping' | translate }}\"\n            id=\"add-access-mapping-button\"\n            type=\"button\"\n            (click)=\"addAccessMapping()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n            {{ 'Add access mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>\n          {{ 'Inventory roles mapping' | translate }}\n        </legend>\n        <c8y-ui-empty-state\n          [icon]=\"'list'\"\n          [title]=\"'No inventory roles mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length === 0\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          class=\"container-fluid\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length > 0\"\n        >\n          <c8y-paginated-list-group\n            #paginatedInventoryMappings\n            [items]=\"templateModel.onNewUser.dynamicMapping.inventoryMappings\"\n          >\n            <ng-template\n              let-inventoryMapping\n              let-index=\"index\"\n            >\n              <c8y-sso-inventory-roles-mapping\n                [inventoryRoles]=\"inventoryRoles\"\n                [inventoryMapping]=\"inventoryMapping\"\n                (onRemoveInventoryMapping)=\"onRemoveInventoryMapping(inventoryMapping)\"\n                [inventoryMappingIndex]=\"index\"\n              ></c8y-sso-inventory-roles-mapping>\n            </ng-template>\n          </c8y-paginated-list-group>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            class=\"btn btn-default\"\n            title=\"{{ 'Add inventory roles mapping' | translate }}\"\n            id=\"add-inventory-mapping-button\"\n            type=\"button\"\n            (click)=\"addInventoryMapping()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n            {{ 'Add inventory roles mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: PaginatedListGroupComponent, selector: "c8y-paginated-list-group", inputs: ["items", "itemsPerPage"] }, { kind: "component", type: DynamicAccessMappingComponent, selector: "c8y-sso-dynamic-access-mapping", inputs: ["groups", "apps", "accessMapping", "accessMappingIndex"], outputs: ["onRemoveAccessMapping"] }, { kind: "component", type: InventoryRolesMappingComponent, selector: "c8y-sso-inventory-roles-mapping", inputs: ["inventoryMapping", "inventoryMappingIndex", "inventoryRoles"], outputs: ["onRemoveInventoryMapping"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccessMappingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-sso-access-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Access mapping\n      </div>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Source of dynamic access mapping' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            title=\"{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingSource\"\n              data-cy=\"dynamic-access-mapping-from-access-token\"\n              [checked]=\"!mapFromIdToken\"\n              (change)=\"setMapFromIdToken(false)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}</span>\n          </label>\n          <label\n            title=\"{{ RETRIVE_FROM_ID_TOKEN | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingSource\"\n              data-cy=\"dynamic-access-mapping-from-id-token\"\n              [checked]=\"mapFromIdToken\"\n              (change)=\"setMapFromIdToken(true)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ID_TOKEN | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Dynamic access mapping principle' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            title=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--on-user-creation\"\n              [checked]=\"mapRolesOnlyForNewUser\"\n              (change)=\"setDynamicMappingConfiguration(true)\"\n            />\n            <span></span>\n            <span>{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}</span>\n            <button\n              class=\"btn-help\"\n              type=\"button\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n          <label\n            title=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-unchanged\"\n              [checked]=\"!mapRolesOnlyForNewUser && manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, true)\"\n            />\n            <span></span>\n            <span>\n              {{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n          <label\n            title=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\"\n            class=\"c8y-radio input-sm\"\n          >\n            <input\n              type=\"radio\"\n              name=\"dynamicAccessMappingConfiguration\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-cleared\"\n              [checked]=\"!mapRolesOnlyForNewUser && !manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, false)\"\n            />\n            <span></span>\n            <span>\n              {{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              type=\"button\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n            ></button>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>{{ 'Dynamic access mapping' | translate }}</legend>\n        <c8y-ui-empty-state\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length === 0\"\n          [icon]=\"'list'\"\n          [title]=\"'No access mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          *ngFor=\"\n            let accessMapping of templateModel.onNewUser.dynamicMapping.mappings;\n            index as idx\n          \"\n        >\n          <c8y-sso-dynamic-access-mapping\n            [accessMapping]=\"accessMapping\"\n            (onRemoveAccessMapping)=\"onRemove(accessMapping)\"\n            [apps]=\"apps\"\n            [groups]=\"groups\"\n            [accessMappingIndex]=\"idx\"\n          ></c8y-sso-dynamic-access-mapping>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            id=\"add-access-mapping-button\"\n            class=\"btn btn-default\"\n            type=\"button\"\n            title=\"{{ 'Add access mapping' | translate }}\"\n            (click)=\"addAccessMapping()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            {{ 'Add access mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>\n          {{ 'Inventory roles mapping' | translate }}\n        </legend>\n        <c8y-ui-empty-state\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length === 0\"\n          [icon]=\"'list'\"\n          [title]=\"'No inventory roles mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <ng-container\n          *ngFor=\"\n            let inventoryMapping of templateModel.onNewUser.dynamicMapping.inventoryMappings;\n            index as idx\n          \"\n        >\n          <c8y-sso-inventory-roles-mapping\n            [inventoryRoles]=\"inventoryRoles\"\n            [inventoryMapping]=\"inventoryMapping\"\n            (onRemoveInventoryMapping)=\"onRemoveInventoryMapping(inventoryMapping)\"\n            [inventoryMappingIndex]=\"idx\"\n          ></c8y-sso-inventory-roles-mapping>\n        </ng-container>\n        <div class=\"p-t-16\">\n          <button\n            id=\"add-inventory-mapping-button\"\n            class=\"btn btn-default\"\n            type=\"button\"\n            title=\"{{ 'Add inventory roles mapping' | translate }}\"\n            (click)=\"addInventoryMapping()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            {{ 'Add inventory roles mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ControlContainer }], propDecorators: { apps: [{
+            args: [{ selector: 'c8y-sso-access-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Access mapping\n      </div>\n    </div>\n\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Source of dynamic access mapping' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingSource\"\n              type=\"radio\"\n              data-cy=\"dynamic-access-mapping-from-access-token\"\n              [checked]=\"!mapFromIdToken\"\n              (change)=\"setMapFromIdToken(false)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ RETRIVE_FROM_ID_TOKEN | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingSource\"\n              type=\"radio\"\n              data-cy=\"dynamic-access-mapping-from-id-token\"\n              [checked]=\"mapFromIdToken\"\n              (change)=\"setMapFromIdToken(true)\"\n            />\n            <span></span>\n            <span>{{ RETRIVE_FROM_ID_TOKEN | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n\n      <fieldset class=\"c8y-fieldset p-24\">\n        <legend>{{ 'Dynamic access mapping principle' | translate }}</legend>\n        <c8y-form-group>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--on-user-creation\"\n              [checked]=\"mapRolesOnlyForNewUser\"\n              (change)=\"setDynamicMappingConfiguration(true)\"\n            />\n            <span></span>\n            <span>{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}</span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-unchanged\"\n              [checked]=\"!mapRolesOnlyForNewUser && manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, true)\"\n            />\n            <span></span>\n            <span>\n              {{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-radio input-sm\"\n            title=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\"\n          >\n            <input\n              name=\"dynamicAccessMappingConfiguration\"\n              type=\"radio\"\n              data-cy=\"c8y-inventory-roles-mapping--other-ones-will-be-cleared\"\n              [checked]=\"!mapRolesOnlyForNewUser && !manageRolesOnlyFromAccessMapping\"\n              (change)=\"setDynamicMappingConfiguration(false, false)\"\n            />\n            <span></span>\n            <span>\n              {{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}\n            </span>\n            <button\n              class=\"btn-help\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_TOOLTIP | translate }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>{{ 'Dynamic access mapping' | translate }}</legend>\n        <c8y-ui-empty-state\n          [icon]=\"'list'\"\n          [title]=\"'No access mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length === 0\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          class=\"container-fluid\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.mappings.length > 0\"\n        >\n          <c8y-paginated-list-group\n            #paginatedAccessMappings\n            [items]=\"templateModel.onNewUser.dynamicMapping.mappings\"\n          >\n            <ng-template\n              let-accessMapping\n              let-index=\"index\"\n            >\n              <c8y-sso-dynamic-access-mapping\n                [accessMapping]=\"accessMapping\"\n                (onRemoveAccessMapping)=\"onRemove(accessMapping)\"\n                [apps]=\"apps\"\n                [groups]=\"groups\"\n                [accessMappingIndex]=\"index\"\n              ></c8y-sso-dynamic-access-mapping>\n            </ng-template>\n          </c8y-paginated-list-group>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            class=\"btn btn-default\"\n            title=\"{{ 'Add access mapping' | translate }}\"\n            id=\"add-access-mapping-button\"\n            type=\"button\"\n            (click)=\"addAccessMapping()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n            {{ 'Add access mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset p-16\">\n        <legend>\n          {{ 'Inventory roles mapping' | translate }}\n        </legend>\n        <c8y-ui-empty-state\n          [icon]=\"'list'\"\n          [title]=\"'No inventory roles mapping rules defined.' | translate\"\n          [subtitle]=\"'Click below to add a new mapping.' | translate\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length === 0\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n        <div\n          class=\"container-fluid\"\n          *ngIf=\"templateModel.onNewUser.dynamicMapping.inventoryMappings.length > 0\"\n        >\n          <c8y-paginated-list-group\n            #paginatedInventoryMappings\n            [items]=\"templateModel.onNewUser.dynamicMapping.inventoryMappings\"\n          >\n            <ng-template\n              let-inventoryMapping\n              let-index=\"index\"\n            >\n              <c8y-sso-inventory-roles-mapping\n                [inventoryRoles]=\"inventoryRoles\"\n                [inventoryMapping]=\"inventoryMapping\"\n                (onRemoveInventoryMapping)=\"onRemoveInventoryMapping(inventoryMapping)\"\n                [inventoryMappingIndex]=\"index\"\n              ></c8y-sso-inventory-roles-mapping>\n            </ng-template>\n          </c8y-paginated-list-group>\n        </div>\n        <div class=\"p-t-16\">\n          <button\n            class=\"btn btn-default\"\n            title=\"{{ 'Add inventory roles mapping' | translate }}\"\n            id=\"add-inventory-mapping-button\"\n            type=\"button\"\n            (click)=\"addInventoryMapping()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n            {{ 'Add inventory roles mapping' | translate }}\n          </button>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.ControlContainer }, { type: i0.ChangeDetectorRef }], propDecorators: { apps: [{
                 type: Input
             }], groups: [{
                 type: Input
@@ -1726,6 +1810,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], templateModel: [{
                 type: Input
+            }], paginatedAccessMappings: [{
+                type: ViewChild,
+                args: ['paginatedAccessMappings']
+            }], paginatedInventoryMappings: [{
+                type: ViewChild,
+                args: ['paginatedInventoryMappings']
             }] } });
 
 class SignatureConfigurationComponent {
@@ -1748,7 +1838,7 @@ class SignatureConfigurationComponent {
         this.controlContainer.control.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SignatureConfigurationComponent, deps: [{ token: i1.ControlContainer }, { token: i2$1.DateFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SignatureConfigurationComponent, isStandalone: false, selector: "c8y-sso-signature-configuration", inputs: { templateModel: "templateModel" }, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Signature verification\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <div\n        *ngIf=\"shouldShow('certificateType')\"\n        class=\"form-group p-relative\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label\n              for=\"certificateType\"\n              class=\"control-label\"\n              translate\n            >\n              Verifier\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"certificateType\"\n                name=\"certificateType\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.certificateTypeChosen\"\n              >\n                <option\n                  *ngFor=\"let certificateType of certificateTypes | keyvalue\"\n                  [ngValue]=\"certificateType.key\"\n                >\n                  {{ certificateType.value.label | translate }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        id=\"adfs\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.ADFS\n        \"\n        class=\"row\"\n      >\n        <div class=\"col-sm-6\">\n          <c8y-form-group>\n            <label\n              for=\"adfsManifestUrl\"\n              class=\"control-label\"\n              translate\n            >\n              ADFS manifest URL\n            </label>\n            <input\n              type=\"url\"\n              class=\"form-control\"\n              required\n              [placeholder]=\"\n                'e.g. {{ example }}'\n                  | translate\n                    : {\n                        example: 'https://adfs.tenant.com/federationmetadata/federationmetadata.xml'\n                      }\n              \"\n              [(ngModel)]=\"templateModel.signatureVerificationConfig.adfsManifest.manifestUrl\"\n              name=\"adfsManifestUrl\"\n              id=\"adfsManifestUrl\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n\n      <div\n        id=\"add\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.AZURE\n        \"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label\n                for=\"publicKeyDiscoveryUrl\"\n                class=\"control-label\"\n                translate\n              >\n                Public key discovery URL\n              </label>\n              <input\n                type=\"url\"\n                id=\"publicKeyDiscoveryUrl\"\n                class=\"form-control\"\n                required\n                [placeholder]=\"\n                  'e.g. {{ example }}'\n                    | translate\n                      : { example: 'https://login.microsoftonline.de/tenant/discovery/keys' }\n                \"\n                name=\"publicKeyDiscoveryUrl\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.aad.publicKeyDiscoveryUrl\"\n              />\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"jwks\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.JWKS\n        \"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label\n                for=\"jwksPublicKeyDiscoveryUrl\"\n                class=\"control-label\"\n                translate\n              >\n                JWKS URL\n              </label>\n              <input\n                type=\"url\"\n                class=\"form-control\"\n                id=\"jwksPublicKeyDiscoveryUrl\"\n                required\n                [placeholder]=\"\n                  'e.g. {{ example }}' | translate: { example: 'http://www.example.com/' }\n                \"\n                name=\"jwksUri\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.jwks.jwksUri\"\n              />\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"manual\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.CUSTOM\n        \"\n      >\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          *ngIf=\"templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\"\n        >\n          <legend>\n            {{ 'Manual' | translate }}\n          </legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <label\n                for=\"certIdField\"\n                class=\"control-label\"\n              >\n                {{ 'Certificate ID field' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ CERTIFICATE_ID_FIELD_POPOVER | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                ></button>\n              </label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"certIdField\"\n                id=\"certIdField\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.manual.certIdField\"\n                required\n              />\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset p-24\">\n          <legend>\n            {{ 'Certificates' | translate }}\n          </legend>\n          <fieldset\n            class=\"c8y-fieldset p-16\"\n            *ngFor=\"\n              let customCertificate of templateModel.signatureVerificationConfig.manual\n                .customCertificates;\n              index as crtIndex\n            \"\n          >\n            <div class=\"row\">\n              <div\n                class=\"col-sm-6\"\n                *ngIf=\"\n                  templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\n                \"\n              >\n                <c8y-form-group>\n                  <label\n                    [for]=\"'customCertificateValue' + crtIndex\"\n                    class=\"control-label\"\n                    translate\n                  >\n                    Certificate ID value\n                  </label>\n                  <input\n                    [name]=\"'customCertificateValue' + crtIndex\"\n                    [id]=\"'customCertificateValue' + crtIndex\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"customCertificate.key\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Type' | translate }}\n                  </label>\n                  <label\n                    title=\"{{ algorithmType.value.label | translate }}\"\n                    class=\"c8y-radio input-sm\"\n                    *ngFor=\"let algorithmType of algorithmTypes | keyvalue; index as algIndex\"\n                  >\n                    <input\n                      type=\"radio\"\n                      [name]=\"'alg' + crtIndex + algIndex\"\n                      [value]=\"algorithmType.key\"\n                      [(ngModel)]=\"customCertificate.alg\"\n                    />\n                    <span></span>\n                    <span>{{ algorithmType.value.label | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n\n            <div class=\"row\">\n              <div class=\"col-md-5\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    [for]=\"'publicKey' + crtIndex\"\n                    *ngIf=\"customCertificate.alg === algorithmTypes.PCKS.value\"\n                    translate\n                  >\n                    Certificate in PEM format\n                  </label>\n                  <label\n                    class=\"control-label\"\n                    [for]=\"'publicKey' + crtIndex\"\n                    *ngIf=\"customCertificate.alg === algorithmTypes.RSA.value\"\n                    translate\n                  >\n                    Public key in PEM format\n                  </label>\n                  <input\n                    [name]=\"'publicKey' + crtIndex\"\n                    [id]=\"'publicKey' + crtIndex\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"customCertificate.publicKey\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-3\">\n                <div class=\"form-group datepicker\">\n                  <c8y-form-group>\n                    <label\n                      [for]=\"'validFromPicker' + crtIndex\"\n                      class=\"control-label\"\n                    >\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <input\n                      [name]=\"'validFromPicker' + crtIndex\"\n                      [id]=\"'validFromPicker' + crtIndex\"\n                      [(ngModel)]=\"customCertificate.validFrom\"\n                      class=\"form-control\"\n                      [attr.aria-label]=\"'Date from' | translate\"\n                      placeholder=\"{{ 'Date from' | translate }}\"\n                      [bsConfig]=\"{ customTodayClass: 'today', adaptivePosition: true, dateInputFormat: dateInputFormat }\"\n                      [maxDate]=\"customCertificate.validTill\"\n                      bsDatepicker\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-3\">\n                <div class=\"form-group datepicker\">\n                  <c8y-form-group>\n                    <label\n                      [for]=\"'validTillPicker' + crtIndex\"\n                      class=\"control-label\"\n                    >\n                      {{ 'Valid till' | translate }}\n                    </label>\n                    <input\n                      [name]=\"'validTillPicker' + crtIndex\"\n                      [id]=\"'validTillPicker' + crtIndex\"\n                      [(ngModel)]=\"customCertificate.validTill\"\n                      class=\"form-control\"\n                      placeholder=\"{{ 'Date to' | translate }}\"\n                      [attr.aria-label]=\"'Date to' | translate\"\n                      [bsConfig]=\"{ customTodayClass: 'today', adaptivePosition: true, dateInputFormat: dateInputFormat }\"\n                      bsDatepicker\n                      [minDate]=\"customCertificate.validFrom\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div\n                class=\"col-md-1\"\n                *ngIf=\"\n                  templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\n                \"\n              >\n                <label>&nbsp;</label>\n                <button\n                  class=\"btn btn-danger btn-sm visible-xs visible-sm\"\n                  type=\"button\"\n                  title=\"{{ 'Delete certificate' | translate }}\"\n                  (click)=\"removeCustomCertificate(customCertificate)\"\n                >\n                  <i\n                    c8yIcon=\"minus-circle\"\n                    class=\"m-r-4\"\n                  ></i>\n                  <span>{{ 'Delete certificate' | translate }}</span>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger visible-md visible-lg\"\n                  type=\"button\"\n                  tooltip=\"{{ 'Delete certificate' | translate }}\"\n                  placement=\"top\"\n                  [adaptivePosition]=\"false\"\n                  [attr.aria-label]=\"'Delete certificate' | translate\"\n                  [delay]=\"300\"\n                  (click)=\"removeCustomCertificate(customCertificate)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n            </div>\n          </fieldset>\n          <button\n            class=\"btn btn-default m-t-8\"\n            type=\"button\"\n            title=\"{{ 'Add certificate' | translate }}\"\n            (click)=\"templateModel.signatureVerificationConfig.manual.addCustomCertificate()\"\n            name=\"addCertificate\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            <span>{{ 'Add certificate' | translate }}</span>\n          </button>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SignatureConfigurationComponent, isStandalone: false, selector: "c8y-sso-signature-configuration", inputs: { templateModel: "templateModel" }, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        Signature verification\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\">\n      <div\n        *ngIf=\"shouldShow('certificateType')\"\n        class=\"form-group p-relative\"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label\n              for=\"certificateType\"\n              class=\"control-label\"\n              translate\n            >\n              Verifier\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                id=\"certificateType\"\n                name=\"certificateType\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.certificateTypeChosen\"\n              >\n                <option\n                  *ngFor=\"let certificateType of certificateTypes | keyvalue\"\n                  [ngValue]=\"certificateType.key\"\n                >\n                  {{ certificateType.value.label | translate }}\n                </option>\n              </select>\n              <span></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        id=\"adfs\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.ADFS\n        \"\n        class=\"row\"\n      >\n        <div class=\"col-sm-6\">\n          <c8y-form-group>\n            <label\n              for=\"adfsManifestUrl\"\n              class=\"control-label\"\n              translate\n            >\n              ADFS manifest URL\n            </label>\n            <input\n              type=\"url\"\n              class=\"form-control\"\n              required\n              [placeholder]=\"\n                'e.g. {{ example }}'\n                  | translate\n                    : {\n                        example: 'https://adfs.tenant.com/federationmetadata/federationmetadata.xml'\n                      }\n              \"\n              [(ngModel)]=\"templateModel.signatureVerificationConfig.adfsManifest.manifestUrl\"\n              name=\"adfsManifestUrl\"\n              id=\"adfsManifestUrl\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n\n      <div\n        id=\"add\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.AZURE\n        \"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label\n                for=\"publicKeyDiscoveryUrl\"\n                class=\"control-label\"\n                translate\n              >\n                Public key discovery URL\n              </label>\n              <input\n                type=\"url\"\n                id=\"publicKeyDiscoveryUrl\"\n                class=\"form-control\"\n                required\n                [placeholder]=\"\n                  'e.g. {{ example }}'\n                    | translate\n                      : { example: 'https://login.microsoftonline.de/tenant/discovery/keys' }\n                \"\n                name=\"publicKeyDiscoveryUrl\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.aad.publicKeyDiscoveryUrl\"\n              />\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"jwks\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.JWKS\n        \"\n      >\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label\n                for=\"jwksPublicKeyDiscoveryUrl\"\n                class=\"control-label\"\n                translate\n              >\n                JWKS URL\n              </label>\n              <input\n                type=\"url\"\n                class=\"form-control\"\n                id=\"jwksPublicKeyDiscoveryUrl\"\n                required\n                [placeholder]=\"\n                  'e.g. {{ example }}' | translate: { example: 'http://www.example.com/' }\n                \"\n                name=\"jwksUri\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.jwks.jwksUri\"\n              />\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"manual\"\n        *ngIf=\"\n          templateModel.signatureVerificationConfig.certificateTypeChosen === certificateType.CUSTOM\n        \"\n      >\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          *ngIf=\"templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\"\n        >\n          <legend>\n            {{ 'Manual' | translate }}\n          </legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <label\n                for=\"certIdField\"\n                class=\"control-label\"\n              >\n                {{ 'Certificate ID field' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{ CERTIFICATE_ID_FIELD_POPOVER | translate }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                ></button>\n              </label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"certIdField\"\n                id=\"certIdField\"\n                [(ngModel)]=\"templateModel.signatureVerificationConfig.manual.certIdField\"\n                required\n              />\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset p-24\">\n          <legend>\n            {{ 'Certificates' | translate }}\n          </legend>\n          <fieldset\n            class=\"c8y-fieldset p-16\"\n            *ngFor=\"\n              let customCertificate of templateModel.signatureVerificationConfig.manual\n                .customCertificates;\n              index as crtIndex\n            \"\n          >\n            <div class=\"row\">\n              <div\n                class=\"col-sm-6\"\n                *ngIf=\"\n                  templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\n                \"\n              >\n                <c8y-form-group>\n                  <label\n                    [for]=\"'customCertificateValue' + crtIndex\"\n                    class=\"control-label\"\n                    translate\n                  >\n                    Certificate ID value\n                  </label>\n                  <input\n                    [name]=\"'customCertificateValue' + crtIndex\"\n                    [id]=\"'customCertificateValue' + crtIndex\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"customCertificate.key\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"control-label\">\n                    {{ 'Type' | translate }}\n                  </label>\n                  <label\n                    title=\"{{ algorithmType.value.label | translate }}\"\n                    class=\"c8y-radio input-sm\"\n                    *ngFor=\"let algorithmType of algorithmTypes | keyvalue; index as algIndex\"\n                  >\n                    <input\n                      type=\"radio\"\n                      [name]=\"'alg' + crtIndex + algIndex\"\n                      [value]=\"algorithmType.key\"\n                      [(ngModel)]=\"customCertificate.alg\"\n                    />\n                    <span></span>\n                    <span>{{ algorithmType.value.label | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n\n            <div class=\"row\">\n              <div class=\"col-md-5\">\n                <c8y-form-group>\n                  <label\n                    class=\"control-label\"\n                    [for]=\"'publicKey' + crtIndex\"\n                    *ngIf=\"customCertificate.alg === algorithmTypes.PCKS.value\"\n                    translate\n                  >\n                    Certificate in PEM format\n                  </label>\n                  <label\n                    class=\"control-label\"\n                    [for]=\"'publicKey' + crtIndex\"\n                    *ngIf=\"customCertificate.alg === algorithmTypes.RSA.value\"\n                    translate\n                  >\n                    Public key in PEM format\n                  </label>\n                  <input\n                    [name]=\"'publicKey' + crtIndex\"\n                    [id]=\"'publicKey' + crtIndex\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"customCertificate.publicKey\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-3\">\n                <div class=\"form-group datepicker\">\n                  <c8y-form-group>\n                    <label\n                      [for]=\"'validFromPicker' + crtIndex\"\n                      class=\"control-label\"\n                    >\n                      {{ 'Valid from' | translate }}\n                    </label>\n                    <input\n                      [name]=\"'validFromPicker' + crtIndex\"\n                      [id]=\"'validFromPicker' + crtIndex\"\n                      [(ngModel)]=\"customCertificate.validFrom\"\n                      class=\"form-control\"\n                      [attr.aria-label]=\"'Date from' | translate\"\n                      placeholder=\"{{ 'Date from' | translate }}\"\n                      [bsConfig]=\"{ customTodayClass: 'today', adaptivePosition: true, dateInputFormat: dateInputFormat }\"\n                      [maxDate]=\"customCertificate.validTill\"\n                      bsDatepicker\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-3\">\n                <div class=\"form-group datepicker\">\n                  <c8y-form-group>\n                    <label\n                      [for]=\"'validTillPicker' + crtIndex\"\n                      class=\"control-label\"\n                    >\n                      {{ 'Valid till' | translate }}\n                    </label>\n                    <input\n                      [name]=\"'validTillPicker' + crtIndex\"\n                      [id]=\"'validTillPicker' + crtIndex\"\n                      [(ngModel)]=\"customCertificate.validTill\"\n                      class=\"form-control\"\n                      placeholder=\"{{ 'Date to' | translate }}\"\n                      [attr.aria-label]=\"'Date to' | translate\"\n                      [bsConfig]=\"{ customTodayClass: 'today', adaptivePosition: true, dateInputFormat: dateInputFormat }\"\n                      bsDatepicker\n                      [minDate]=\"customCertificate.validFrom\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div\n                class=\"col-md-1\"\n                *ngIf=\"\n                  templateModel.signatureVerificationConfig.manual.customCertificates.length > 1\n                \"\n              >\n                <label>&nbsp;</label>\n                <button\n                  class=\"btn btn-danger btn-sm visible-xs visible-sm\"\n                  type=\"button\"\n                  title=\"{{ 'Delete certificate' | translate }}\"\n                  (click)=\"removeCustomCertificate(customCertificate)\"\n                >\n                  <i\n                    c8yIcon=\"minus-circle\"\n                    class=\"m-r-4\"\n                  ></i>\n                  <span>{{ 'Delete certificate' | translate }}</span>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger visible-md visible-lg\"\n                  type=\"button\"\n                  tooltip=\"{{ 'Delete certificate' | translate }}\"\n                  placement=\"top\"\n                  [adaptivePosition]=\"false\"\n                  [attr.aria-label]=\"'Delete certificate' | translate\"\n                  [delay]=\"300\"\n                  (click)=\"removeCustomCertificate(customCertificate)\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              </div>\n            </div>\n          </fieldset>\n          <button\n            class=\"btn btn-default m-t-8\"\n            type=\"button\"\n            title=\"{{ 'Add certificate' | translate }}\"\n            (click)=\"templateModel.signatureVerificationConfig.manual.addCustomCertificate()\"\n            name=\"addCertificate\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              class=\"m-r-4\"\n            ></i>\n            <span>{{ 'Add certificate' | translate }}</span>\n          </button>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 __decorate([
     memoize(),
@@ -1775,7 +1865,7 @@ class ExternalTokenConfigComponent {
         this.externalTokenConfig.tokenValidationRequest = new RequestConfiguration(this.validationMethods[event].defaults);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalTokenConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ExternalTokenConfigComponent, isStandalone: false, selector: "c8y-external-token-config", inputs: { templateModel: "templateModel" }, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        External token configuration\n      </div>\n    </div>\n\n    <div\n      class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\"\n      *ngIf=\"templateModel\"\n    >\n      <label\n        class=\"c8y-switch\"\n        data-cy=\"c8y-authentication--external-token-configuration-switcher\"\n        title=\"{{ 'Allow authentication with access token from external IAM system' | translate }}\"\n      >\n        <input\n          id=\"enabled\"\n          name=\"enabled\"\n          type=\"checkbox\"\n          [(ngModel)]=\"externalTokenConfig.enabled\"\n        />\n        <span></span>\n        <span class=\"control-label\">\n          {{ 'Allow authentication with access token from external IAM system' | translate }}\n        </span>\n      </label>\n\n      <div\n        class=\"collapse\"\n        [collapse]=\"!externalTokenConfig.enabled\"\n        [isAnimated]=\"true\"\n      >\n        <ng-container *ngIf=\"externalTokenConfig.enabled\">\n          <c8y-user-id-configuration\n            [userIdConfig]=\"externalTokenConfig.userOrAppIdConfig\"\n            [withHeader]=\"false\"\n          ></c8y-user-id-configuration>\n\n          <label\n            class=\"c8y-switch\"\n            title=\"{{ 'Validate access token' | translate }}\"\n            for=\"validationRequired\"\n          >\n            <input\n              id=\"validationRequired\"\n              name=\"validationRequired\"\n              type=\"checkbox\"\n              [(ngModel)]=\"externalTokenConfig.validationRequired\"\n            />\n            <span></span>\n            <span class=\"control-label\">{{ 'Validate access token' | translate }}</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!externalTokenConfig.validationRequired\"\n            [isAnimated]=\"true\"\n          >\n            <ng-container *ngIf=\"externalTokenConfig.validationRequired\">\n              <div class=\"row\">\n                <div class=\"col-sm-6 m-t-16\">\n                  <label\n                    class=\"control-label\"\n                    for=\"validationMethod\"\n                    translate\n                  >\n                    Validation method\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control\"\n                      id=\"validationMethod\"\n                      name=\"validationMethod\"\n                      [ngModel]=\"externalTokenConfig.validationMethod\"\n                      (ngModelChange)=\"onValidationMethodChange($event)\"\n                    >\n                      <option\n                        *ngFor=\"let validationMethod of validationMethods | keyvalue\"\n                        [ngValue]=\"validationMethod.key\"\n                      >\n                        {{ validationMethod.value.label | translate }}\n                      </option>\n                    </select>\n                    <span></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <c8y-request-configuration\n                  [templateModel]=\"externalTokenConfig\"\n                  [requestName]=\"'Token validation request' | translate\"\n                  [requestType]=\"'tokenValidationRequest'\"\n                ></c8y-request-configuration>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-sm-6 m-l-8\">\n                  <c8y-form-group>\n                    <label\n                      class=\"control-label\"\n                      for=\"accessTokenValidityCheckIntervalInMinutes\"\n                      translate\n                    >\n                      Access token validation frequency\n                    </label>\n                    <div class=\"input-group\">\n                      <input\n                        class=\"form-control\"\n                        id=\"accessTokenValidityCheckIntervalInMinutes\"\n                        name=\"accessTokenValidityCheckIntervalInMinutes\"\n                        type=\"number\"\n                        required\n                        [(ngModel)]=\"externalTokenConfig.accessTokenValidityCheckIntervalInMinutes\"\n                        [placeholder]=\"'e.g. {{ example }}' | translate: { example: '1' }\"\n                        step=\"1\"\n                        [min]=\"1\"\n                      />\n                      <span\n                        class=\"input-group-addon\"\n                        translate\n                      >\n                        minutes\n                      </span>\n                    </div>\n                  </c8y-form-group>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$3.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: RequestConfigurationComponent, selector: "c8y-request-configuration", inputs: ["templateModel", "requestName", "requestType"] }, { kind: "component", type: UserIdConfigurationComponent, selector: "c8y-user-id-configuration", inputs: ["userIdConfig", "withHeader"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ExternalTokenConfigComponent, isStandalone: false, selector: "c8y-external-token-config", inputs: { templateModel: "templateModel" }, ngImport: i0, template: "<div class=\"p-24\">\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2\">\n      <div\n        class=\"h4 text-normal text-right text-left-xs\"\n        translate\n      >\n        External token configuration\n      </div>\n    </div>\n\n    <div\n      class=\"col-xs-12 col-sm-9 col-md-10 col-lg-9\"\n      *ngIf=\"templateModel\"\n    >\n      <label\n        class=\"c8y-switch\"\n        data-cy=\"c8y-authentication--external-token-configuration-switcher\"\n        title=\"{{ 'Allow authentication with access token from external IAM system' | translate }}\"\n      >\n        <input\n          id=\"enabled\"\n          name=\"enabled\"\n          type=\"checkbox\"\n          [(ngModel)]=\"externalTokenConfig.enabled\"\n        />\n        <span></span>\n        <span class=\"control-label\">\n          {{ 'Allow authentication with access token from external IAM system' | translate }}\n        </span>\n      </label>\n\n      <div\n        class=\"collapse\"\n        [collapse]=\"!externalTokenConfig.enabled\"\n        [isAnimated]=\"true\"\n      >\n        <ng-container *ngIf=\"externalTokenConfig.enabled\">\n          <c8y-user-id-configuration\n            [userIdConfig]=\"externalTokenConfig.userOrAppIdConfig\"\n            [withHeader]=\"false\"\n          ></c8y-user-id-configuration>\n\n          <label\n            class=\"c8y-switch\"\n            title=\"{{ 'Validate access token' | translate }}\"\n            for=\"validationRequired\"\n          >\n            <input\n              id=\"validationRequired\"\n              name=\"validationRequired\"\n              type=\"checkbox\"\n              [(ngModel)]=\"externalTokenConfig.validationRequired\"\n            />\n            <span></span>\n            <span class=\"control-label\">{{ 'Validate access token' | translate }}</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!externalTokenConfig.validationRequired\"\n            [isAnimated]=\"true\"\n          >\n            <ng-container *ngIf=\"externalTokenConfig.validationRequired\">\n              <div class=\"row\">\n                <div class=\"col-sm-6 m-t-16\">\n                  <label\n                    class=\"control-label\"\n                    for=\"validationMethod\"\n                    translate\n                  >\n                    Validation method\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control\"\n                      id=\"validationMethod\"\n                      name=\"validationMethod\"\n                      [ngModel]=\"externalTokenConfig.validationMethod\"\n                      (ngModelChange)=\"onValidationMethodChange($event)\"\n                    >\n                      <option\n                        *ngFor=\"let validationMethod of validationMethods | keyvalue\"\n                        [ngValue]=\"validationMethod.key\"\n                      >\n                        {{ validationMethod.value.label | translate }}\n                      </option>\n                    </select>\n                    <span></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <c8y-request-configuration\n                  [templateModel]=\"externalTokenConfig\"\n                  [requestName]=\"'Token validation request' | translate\"\n                  [requestType]=\"'tokenValidationRequest'\"\n                ></c8y-request-configuration>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-sm-6 m-l-8\">\n                  <c8y-form-group>\n                    <label\n                      class=\"control-label\"\n                      for=\"accessTokenValidityCheckIntervalInMinutes\"\n                      translate\n                    >\n                      Access token validation frequency\n                    </label>\n                    <div class=\"input-group\">\n                      <input\n                        class=\"form-control\"\n                        id=\"accessTokenValidityCheckIntervalInMinutes\"\n                        name=\"accessTokenValidityCheckIntervalInMinutes\"\n                        type=\"number\"\n                        required\n                        [(ngModel)]=\"externalTokenConfig.accessTokenValidityCheckIntervalInMinutes\"\n                        [placeholder]=\"'e.g. {{ example }}' | translate: { example: '1' }\"\n                        step=\"1\"\n                        [min]=\"1\"\n                      />\n                      <span\n                        class=\"input-group-addon\"\n                        translate\n                      >\n                        minutes\n                      </span>\n                    </div>\n                  </c8y-form-group>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4$4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: RequestConfigurationComponent, selector: "c8y-request-configuration", inputs: ["templateModel", "requestName", "requestType"] }, { kind: "component", type: UserIdConfigurationComponent, selector: "c8y-user-id-configuration", inputs: ["userIdConfig", "withHeader"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExternalTokenConfigComponent, decorators: [{
             type: Component,
@@ -2266,8 +2356,9 @@ class SsoConfigurationModule {
             InventoryRolesModalComponent,
             ExternalTokenConfigComponent], imports: [CoreModule,
             TooltipModule,
-            PopoverModule, i4$3.CollapseModule, BsDatepickerModule,
-            AssetSelectorModule], exports: [SsoConfigurationComponent] }); }
+            PopoverModule, i4$4.CollapseModule, BsDatepickerModule,
+            AssetSelectorModule,
+            PaginatedListGroupComponent], exports: [SsoConfigurationComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SsoConfigurationModule, providers: [
             SsoConfigurationGuard,
             DatePipe,
@@ -2285,7 +2376,8 @@ class SsoConfigurationModule {
             PopoverModule,
             CollapseModule.forRoot(),
             BsDatepickerModule,
-            AssetSelectorModule] }); }
+            AssetSelectorModule,
+            PaginatedListGroupComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SsoConfigurationModule, decorators: [{
             type: NgModule,
@@ -2314,7 +2406,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         PopoverModule,
                         CollapseModule.forRoot(),
                         BsDatepickerModule,
-                        AssetSelectorModule
+                        AssetSelectorModule,
+                        PaginatedListGroupComponent
                     ],
                     exports: [SsoConfigurationComponent],
                     providers: [