@c8y/ngx-components 1023.17.20 → 1023.22.5

package/fesm2022/c8y-ngx-components.mjs

@@ -9390,10 +9390,11 @@ const operationStatusClasses = {
 
 /** The helper UI service for tenant related methods built upon client services. */
 class TenantUiService {
-    constructor(userService, appStateService, tenantLoginOption) {
+    constructor(userService, appStateService, tenantLoginOption, options) {
         this.userService = userService;
         this.appStateService = appStateService;
         this.tenantLoginOption = tenantLoginOption;
+        this.options = options;
         this.MANAGEMENT = 'management';
         this.ROLE_TENANT_MANAGEMENT_READ = Permissions.ROLE_TENANT_MANAGEMENT_READ;
     }
@@ -9490,11 +9491,22 @@ class TenantUiService {
             return defaultFallback;
         }
         else {
-            const visibleLoginOptions = loginOptions.filter(this.isVisibleOnLoginPage);
-            return (visibleLoginOptions.find(this.isOauthInternal) ||
+            let visibleLoginOptions = loginOptions.filter(this.isVisibleOnLoginPage);
+            // should ignore the OAUTH2 option if skipSSORedirect is set
+            if (this.options.get('skipSSORedirect', false)) {
+                visibleLoginOptions = visibleLoginOptions.filter(lo => lo.type !== TenantLoginOptionType.OAUTH2);
+                // in case there is no other visible option, we fallback to all options except OAUTH2
+                if (visibleLoginOptions.length === 0) {
+                    visibleLoginOptions = loginOptions.filter(lo => lo.type !== TenantLoginOptionType.OAUTH2);
+                }
+            }
+            const preferredLoginOption = visibleLoginOptions.find(this.isOauthInternal) ||
                 visibleLoginOptions.find(this.isBasic) ||
                 visibleLoginOptions.find(this.isOauth2) ||
-                defaultFallback);
+                defaultFallback;
+            // ensure the returned login option is marked as visible on login page
+            preferredLoginOption.visibleOnLoginPage = true;
+            return preferredLoginOption;
         }
     }
     /**
@@ -9634,13 +9646,13 @@ class TenantUiService {
     isManagement(currentTenant) {
         return currentTenant.name === this.MANAGEMENT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TenantUiService, deps: [{ token: i1.UserService }, { token: AppStateService }, { token: i1.TenantLoginOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TenantUiService, deps: [{ token: i1.UserService }, { token: AppStateService }, { token: i1.TenantLoginOptionsService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TenantUiService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TenantUiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }, { type: i1.TenantLoginOptionsService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }, { type: i1.TenantLoginOptionsService }, { type: OptionsService }] });
 
 class ZipService {
     getEntries(zipFile) {
@@ -23956,25 +23968,24 @@ class FilePickerComponent {
         return !isEmpty(this.fileUrlPopover);
     }
     setProvidedOption() {
-        this.fileToSave = { url: '$PROVIDED' };
+        this.fileToSave = { url: '' };
         delete this.fileUrl;
         this.onFilesPicked.emit(this.fileToSave);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.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$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilePickerComponent, isStandalone: true, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", allowedUploadChoices: "allowedUploadChoices", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio m-l-8\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.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$8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.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: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-file-picker', standalone: true, imports: [
                         FormsModule$1,
-                        NgIf,
                         PopoverModule,
                         FormGroupComponent,
                         DropAreaComponent,
                         IconDirective,
                         RequiredInputPlaceholderDirective,
                         C8yTranslatePipe
-                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Mark as provided' | translate }}\"\n    *ngIf=\"allowedUploadChoices.includes('provided')\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"provided\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"setProvidedOption()\"\n    />\n    <span></span>\n    <span>{{ 'Provided' | translate }}</span>\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ providedPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
+                    ], template: "<div class=\"form-group\">\n  <label\n    class=\"c8y-radio\"\n    [class.m-l-8]=\"allowedUploadChoices.includes('provided')\"\n    title=\"{{ 'Upload a binary' | translate }}\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadBinary\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    class=\"c8y-radio m-l-8\"\n    title=\"{{ 'Provide a file path' | translate }}\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      name=\"uploadChoice-{{ filePickerIndex }}\"\n      type=\"radio\"\n      value=\"uploadUrl\"\n      #radio\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    @if (isPopoverUsed()) {\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ fileUrlPopover | translate }}\"\n        placement=\"top\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    }\n  </label>\n  @if (allowedUploadChoices.includes('provided')) {\n    <label\n      class=\"c8y-radio m-l-8\"\n      title=\"{{ 'Mark as provided' | translate }}\"\n    >\n      <input\n        name=\"uploadChoice-{{ filePickerIndex }}\"\n        type=\"radio\"\n        value=\"provided\"\n        #radio\n        [(ngModel)]=\"uploadChoice\"\n        (click)=\"setProvidedOption()\"\n      />\n      <span></span>\n      <span>{{ 'Provided' | translate }}</span>\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ providedPopover | translate }}\"\n        placement=\"top\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n  }\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      (dropped)=\"onFileDropped($event)\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          name=\"fileUrl\"\n          type=\"text\"\n          required\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          maxlength=\"{{ config.maxlength }}\"\n          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n" }]
         }], propDecorators: { dropArea: [{
                 type: ViewChild,
                 args: [DropAreaComponent, { static: true }]
@@ -25733,8 +25744,12 @@ class GuideDocsComponent {
      */
     ngAfterContentInit() {
         if (this.translateDirective) {
-            this.translateDirective.htmlUpdateEvent.pipe(takeUntil(this.destroyed$)).subscribe(() => {
-                this.replaceAnchorAttributes();
+            this.translateDirective.htmlUpdateEvent
+                .pipe(startWith(null), takeUntil(this.destroyed$))
+                .subscribe(() => {
+                queueMicrotask(() => {
+                    this.replaceAnchorAttributes();
+                });
             });
         }
         else {
@@ -25784,11 +25799,11 @@ class GuideDocsComponent {
         this.destroyed$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuideDocsComponent, deps: [{ token: DocsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: C8yTranslateDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GuideDocsComponent, isStandalone: true, selector: "[c8y-guide-docs]", queries: [{ propertyName: "translateDirective", first: true, predicate: C8yTranslateDirective, descendants: true, static: true }, { propertyName: "links", predicate: GuideHrefDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!!baseUrl\">\n  <ng-content></ng-content>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GuideDocsComponent, isStandalone: true, selector: "[c8y-guide-docs]", queries: [{ propertyName: "translateDirective", first: true, predicate: C8yTranslateDirective, descendants: true, static: true }, { propertyName: "links", predicate: GuideHrefDirective, descendants: true }], ngImport: i0, template: "@if (!!baseUrl) {\n  <ng-content></ng-content>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GuideDocsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[c8y-guide-docs]', standalone: true, imports: [NgIf], template: "<ng-container *ngIf=\"!!baseUrl\">\n  <ng-content></ng-content>\n</ng-container>\n" }]
+            args: [{ selector: '[c8y-guide-docs]', standalone: true, template: "@if (!!baseUrl) {\n  <ng-content></ng-content>\n}\n" }]
         }], ctorParameters: () => [{ type: DocsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: C8yTranslateDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { links: [{
@@ -39076,7 +39091,7 @@ class SplitViewListComponent {
         return !!this.parentSplitView?.hasProjectedDetails;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SplitViewListComponent, isStandalone: true, selector: "c8y-sv-list", inputs: { title: "title", loading: "loading", showEmptyState: "showEmptyState", emptyStateIcon: "emptyStateIcon", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle", docsUrl: "docsUrl", showTitle: "showTitle", listOpacity: "listOpacity" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "alertsComp", first: true, predicate: SplitViewAlertsComponent, descendants: true }], viewQueries: [{ propertyName: "innerScrollDiv", first: true, predicate: ["innerScrollDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p>\n              <small\n                c8y-guide-docs\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SplitViewListComponent, isStandalone: true, selector: "c8y-sv-list", inputs: { title: "title", loading: "loading", showEmptyState: "showEmptyState", emptyStateIcon: "emptyStateIcon", emptyStateTitle: "emptyStateTitle", emptyStateSubtitle: "emptyStateSubtitle", docsUrl: "docsUrl", showTitle: "showTitle", listOpacity: "listOpacity" }, host: { classAttribute: "d-contents" }, queries: [{ propertyName: "alertsComp", first: true, predicate: SplitViewAlertsComponent, descendants: true }], viewQueries: [{ propertyName: "innerScrollDiv", first: true, predicate: ["innerScrollDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p c8y-guide-docs>\n              <small\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SplitViewListComponent, decorators: [{
             type: Component,
@@ -39088,7 +39103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         C8yTranslateDirective,
                         GuideDocsComponent,
                         GuideHrefDirective
-                    ], template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p>\n              <small\n                c8y-guide-docs\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n" }]
+                    ], template: "<div\n  class=\"inner-scroll fit-h\"\n  [attr.aria-label]=\"title | translate\"\n  role=\"region\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }\"\n  data-cy=\"c8y-sv-list\"\n  #innerScrollDiv\n>\n  @if (title || hasAlerts) {\n    <div\n      class=\"flex-wrap flex-no-shrink sticky-top gap-8\"\n      [ngClass]=\"{\n        'card-header separator': title && shouldShowTitle\n      }\"\n    >\n      @if (title && shouldShowTitle) {\n        <h4 class=\"card-title\">\n          {{ title | translate }}\n        </h4>\n      }\n      <ng-content select=\"c8y-sv-header-actions\"></ng-content>\n      @if (hasAlerts) {\n        <ng-content select=\"c8y-sv-alerts\"></ng-content>\n      }\n    </div>\n  }\n  <div data-cy=\"c8y-sv-list--group\">\n    @if (loading && !showEmptyState) {\n      <div class=\"p-absolute fit-w overflow-hidden p-b-4\">\n        <c8y-loading\n          [layout]=\"'page'\"\n          data-cy=\"c8y-sv-list--loading\"\n        ></c8y-loading>\n      </div>\n    }\n    <ng-content></ng-content>\n\n    @if (showEmptyState) {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"emptyStateIcon\"\n          [title]=\"emptyStateTitle\"\n          [subtitle]=\"emptyStateSubtitle\"\n          data-cy=\"c8y-sv-list--empty-state\"\n        >\n          @if (docsUrl) {\n            <p c8y-guide-docs>\n              <small\n                translate\n                [translateParams]=\"{ docsUrl }\"\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"{{ docsUrl }}\">user documentation</a>\n                .\n              </small>\n            </p>\n          }\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"c8y-sv-footer\"></ng-content>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], loading: [{