@c8y/ngx-components 1017.0.377 → 1017.0.382

package/fesm2020/c8y-ngx-components.mjs

@@ -27,7 +27,7 @@ import * as i1$2 from '@c8y/client';
 import { TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, OperationStatus, InventoryService, UserService, ApplicationService, TenantService, FetchClient, Client, PasswordStrength, QueriesUtil, ApplicationAvailability, Service } from '@c8y/client';
 import { satisfies, compare, coerce } from 'semver';
 import * as i6 from 'ngx-bootstrap/datepicker';
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import { defineLocale, enGbLocale, zhCnLocale, ruLocale, ptBrLocale, plLocale, nlLocale, koLocale, jaLocale, frLocale, esLocale, deLocale } from 'ngx-bootstrap/chronos';
 import { saveAs } from 'file-saver';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -10927,160 +10927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             args: [{ selector: 'c8y-app-switcher', template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    id=\"appSwitcherDropdown\"\n    dropdownToggle\n    title=\"{{ 'Application switcher' | translate }}\"\n    type=\"button\"\n  >\n    <i c8yIcon=\"th\" class=\"icon-2x\"></i>\n  </button>\n  <div\n    *dropdownMenu\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n  >\n    <div\n      *ngIf=\"!(switcherService.finishedLoading$ | async)\"\n      class=\"d-flex a-i-center j-c-center p-4\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n    <ng-container *ngIf=\"switcherService.oneCloudApps$ | async as oneCloudApps\">\n      <div class=\"app-switcher-sagcloud\" *ngIf=\"oneCloudApps.length > 0\">\n        <a\n          title=\"{{ app.name | humanizeAppName | async }}\"\n          class=\"appLink\"\n          *ngFor=\"let app of oneCloudApps\"\n          [href]=\"app | appHref\"\n          c8yProductExperience\n          [actionName]=\"'appSwitched'\"\n          [actionData]=\"{ applicationName: app && app.name }\"\n        >\n          <c8y-app-icon\n            [app]=\"app\"\n            [name]=\"app.name\"\n            [contextPath]=\"app.contextPath\"\n          ></c8y-app-icon>\n          <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n        </a>\n      </div>\n    </ng-container>\n    <div class=\"app-switcher\" *ngIf=\"switcherService.apps$ | async as apps\">\n      <a\n        title=\"{{ app.name | humanizeAppName | async }}\"\n        class=\"appLink\"\n        [ngClass]=\"(app | isActiveApp | async) ? 'active' : ''\"\n        *ngFor=\"let app of apps\"\n        [href]=\"app | appHref\"\n        [rel]=\"app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''\"\n        c8yProductExperience\n        [actionName]=\"'appSwitched'\"\n        [actionData]=\"{ applicationName: app && app.name }\"\n      >\n        <c8y-app-icon [app]=\"app\" [name]=\"app.name\" [contextPath]=\"app.contextPath\"></c8y-app-icon>\n        <span class=\"text-truncate-wrap\">{{ app | humanizeAppName | async }}</span>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AppSwitcherService }]; } });
 
-class ConfirmModalComponent {
-    constructor(modal) {
-        this.modal = modal;
-        this.status = Status.INFO;
-        this._labels = {
-            ok: 'OK',
-            cancel: 'Cancel'
-        };
-        this.result = new Promise((resolve, reject) => {
-            this.dismiss = () => {
-                reject();
-                this.modal.hide();
-            };
-            this.close = () => {
-                resolve(isEmpty(this.confirmOptions)
-                    ? true
-                    : {
-                        confirmed: true,
-                        confirmOptions: mapValues(this.confirmOptions, option => option.checked)
-                    });
-                this.modal.hide();
-            };
-        });
-    }
-    set labels(labels) {
-        const { ok = 'OK', cancel = 'Cancel' } = labels || {};
-        this._labels = { ok, cancel };
-    }
-    get labels() {
-        return this._labels;
-    }
-    get classIcon() {
-        return `dlt-c8y-icon-${statusIcons[this.status]}`;
-    }
-    get classAlert() {
-        return statusAlert[this.status];
-    }
-    ngOnDestroy() {
-        this.dismiss();
-    }
-}
-ConfirmModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1$8.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: { title: "title", body: "body", confirmOptions: "confirmOptions", status: "status", labels: "labels" }, ngImport: i0, template: "<div class=\"c8y-prompt alert\" [ngClass]=\"[classAlert]\" data-cy=\"prompt-alert\">\n  <h3 class=\"m-b-16 d-flex a-i-center\" *ngIf=\"title\">\n    <i class=\"dlt-c8y-icon\" [ngClass]=\"[classIcon]\"></i>\n    <span *ngIf=\"title\">{{ title | translate }}</span>\n  </h3>\n  <p class=\"text-break-word m-b-16\">{{ body | translate }}</p>\n  <div\n    class=\"c8y-checkbox plain m-b-8\"\n    *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n  >\n    <label [title]=\"co.value.text | translate\" class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"co.value.checked\"\n        (change)=\"co.value.checked = !co.value.checked\"\n        [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n      />\n      <span></span>\n      <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n    </label>\n  </div>\n  <ng-content></ng-content>\n  <div class=\"alert-footer\">\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"close()\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ShowIfFilterPipe, name: "showIfFilter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ConfirmModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-confirm-modal', template: "<div class=\"c8y-prompt alert\" [ngClass]=\"[classAlert]\" data-cy=\"prompt-alert\">\n  <h3 class=\"m-b-16 d-flex a-i-center\" *ngIf=\"title\">\n    <i class=\"dlt-c8y-icon\" [ngClass]=\"[classIcon]\"></i>\n    <span *ngIf=\"title\">{{ title | translate }}</span>\n  </h3>\n  <p class=\"text-break-word m-b-16\">{{ body | translate }}</p>\n  <div\n    class=\"c8y-checkbox plain m-b-8\"\n    *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n  >\n    <label [title]=\"co.value.text | translate\" class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"co.value.checked\"\n        (change)=\"co.value.checked = !co.value.checked\"\n        [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n      />\n      <span></span>\n      <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n    </label>\n  </div>\n  <ng-content></ng-content>\n  <div class=\"alert-footer\">\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"close()\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$8.BsModalRef }]; }, propDecorators: { title: [{
-                type: Input
-            }], body: [{
-                type: Input
-            }], confirmOptions: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }] } });
-
-/**
- * Service to show a modal.
- */
-class ModalService {
-    constructor(modalService, gainsightService) {
-        this.modalService = modalService;
-        this.gainsightService = gainsightService;
-    }
-    /**
-     * Shows a quick confirm message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
-     * @param confirmOptions Selection options to display as checkbox list.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
-        const modalLabels = {
-            ok: labels.ok || gettext('Confirm'),
-            cancel: labels.cancel || gettext('Cancel')
-        };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels: modalLabels, status, confirmOptions },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick acknowledge message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param acknowledgeLabel The label to use.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
-        const labels = { ok: acknowledgeLabel, cancel: null };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels, status },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick logout confirmation modal.
-     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
-     */
-    async confirmLogout(body, status = Status.WARNING, labels = {}) {
-        const modalLabels = {
-            ok: labels.ok || gettext('Confirm and log out'),
-            cancel: labels.cancel || gettext('Cancel')
-        };
-        const modalBody = body || gettext('You must log out to apply your changes. Do you want to proceed?');
-        return await this.confirm(gettext('Logout required'), modalBody, status, modalLabels);
-    }
-    triggerEvent(result, labels, productExperienceEvent) {
-        const data = { ...productExperienceEvent.data, url: window.location.href };
-        result
-            .then(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.ok
-            });
-        })
-            .catch(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.cancel
-            });
-        });
-    }
-}
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, deps: [{ token: i1$8.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$8.BsModalService }, { type: GainsightService }]; } });
-
 /**
  * Service to manage the login.
  */
@@ -11313,7 +11159,6 @@ class LoginService {
         if (credentials) {
             credentials.tenant = tenant.name;
         }
-        await this.shouldRedirectDomain(credentials);
         if (await this.switchLoginMode(credentials)) {
             auth = this.cookieAuth;
         }
@@ -11618,20 +11463,6 @@ class LoginService {
         const managementLoginOptions = (await this.tenantLoginOptionsService.listForManagement()).data;
         return this.tenantUiService.getPreferredLoginOption(managementLoginOptions);
     }
-    async shouldRedirectDomain(credentials) {
-        const isPasswordGrantLogin = await this.isPasswordGrantLogin(credentials);
-        if (this.isSupportUser(credentials) &&
-            isPasswordGrantLogin &&
-            this.managementLoginMode.loginRedirectDomain !== window.location.hostname &&
-            !this.isLocal()) {
-            const title = gettext('Redirect required');
-            const body = gettext('Redirect to correct domain is required to log in as support user.');
-            // avoids circular dependency NG0200 error when BsModalService is injected into APP_INITIALIZER (via LoginService -> ModalService -> BsModalService)
-            const modalService = this.injector.get(ModalService);
-            await modalService.acknowledge(title, body, Status.INFO, gettext('Redirect'));
-            this.redirectToDomain(this.managementLoginMode.loginRedirectDomain);
-        }
-    }
 }
 LoginService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LoginService, deps: [{ token: i0.Injector }, { token: i1$2.FetchClient }, { token: i1$2.BasicAuth }, { token: i1$2.CookieAuth }, { token: AppStateService }, { token: i1$2.UserService }, { token: i1$2.TenantService }, { token: i1$2.Realtime }, { token: AlertService }, { token: i1$1.ApiService }, { token: TenantUiService }, { token: i1$2.TenantLoginOptionsService }, { token: i1$3.TranslateService }, { token: i2.LocationStrategy, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 LoginService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LoginService });
@@ -11641,6 +11472,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     type: Optional
                 }] }]; } });
 
+class ConfirmModalComponent {
+    constructor(modal) {
+        this.modal = modal;
+        this.status = Status.INFO;
+        this._labels = {
+            ok: 'OK',
+            cancel: 'Cancel'
+        };
+        this.result = new Promise((resolve, reject) => {
+            this.dismiss = () => {
+                reject();
+                this.modal.hide();
+            };
+            this.close = () => {
+                resolve(isEmpty(this.confirmOptions)
+                    ? true
+                    : {
+                        confirmed: true,
+                        confirmOptions: mapValues(this.confirmOptions, option => option.checked)
+                    });
+                this.modal.hide();
+            };
+        });
+    }
+    set labels(labels) {
+        const { ok = 'OK', cancel = 'Cancel' } = labels || {};
+        this._labels = { ok, cancel };
+    }
+    get labels() {
+        return this._labels;
+    }
+    get classIcon() {
+        return `dlt-c8y-icon-${statusIcons[this.status]}`;
+    }
+    get classAlert() {
+        return statusAlert[this.status];
+    }
+    ngOnDestroy() {
+        this.dismiss();
+    }
+}
+ConfirmModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1$8.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: { title: "title", body: "body", confirmOptions: "confirmOptions", status: "status", labels: "labels" }, ngImport: i0, template: "<div class=\"c8y-prompt alert\" [ngClass]=\"[classAlert]\" data-cy=\"prompt-alert\">\n  <h3 class=\"m-b-16 d-flex a-i-center\" *ngIf=\"title\">\n    <i class=\"dlt-c8y-icon\" [ngClass]=\"[classIcon]\"></i>\n    <span *ngIf=\"title\">{{ title | translate }}</span>\n  </h3>\n  <p class=\"text-break-word m-b-16\">{{ body | translate }}</p>\n  <div\n    class=\"c8y-checkbox plain m-b-8\"\n    *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n  >\n    <label [title]=\"co.value.text | translate\" class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"co.value.checked\"\n        (change)=\"co.value.checked = !co.value.checked\"\n        [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n      />\n      <span></span>\n      <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n    </label>\n  </div>\n  <ng-content></ng-content>\n  <div class=\"alert-footer\">\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"close()\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ShowIfFilterPipe, name: "showIfFilter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ConfirmModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-confirm-modal', template: "<div class=\"c8y-prompt alert\" [ngClass]=\"[classAlert]\" data-cy=\"prompt-alert\">\n  <h3 class=\"m-b-16 d-flex a-i-center\" *ngIf=\"title\">\n    <i class=\"dlt-c8y-icon\" [ngClass]=\"[classIcon]\"></i>\n    <span *ngIf=\"title\">{{ title | translate }}</span>\n  </h3>\n  <p class=\"text-break-word m-b-16\">{{ body | translate }}</p>\n  <div\n    class=\"c8y-checkbox plain m-b-8\"\n    *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n  >\n    <label [title]=\"co.value.text | translate\" class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"co.value.checked\"\n        (change)=\"co.value.checked = !co.value.checked\"\n        [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n      />\n      <span></span>\n      <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n    </label>\n  </div>\n  <ng-content></ng-content>\n  <div class=\"alert-footer\">\n    <button\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"close()\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$8.BsModalRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], body: [{
+                type: Input
+            }], confirmOptions: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }] } });
+
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
+    }
+    /**
+     * Shows a quick confirm message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
+     * @param confirmOptions Selection options to display as checkbox list.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
+        const modalLabels = {
+            ok: labels.ok || gettext('Confirm'),
+            cancel: labels.cancel || gettext('Cancel')
+        };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick logout confirmation modal.
+     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
+     */
+    async confirmLogout(body, status = Status.WARNING, labels = {}) {
+        const modalLabels = {
+            ok: labels.ok || gettext('Confirm and log out'),
+            cancel: labels.cancel || gettext('Cancel')
+        };
+        const modalBody = body || gettext('You must log out to apply your changes. Do you want to proceed?');
+        return await this.confirm(gettext('Logout required'), modalBody, status, modalLabels);
+    }
+    triggerEvent(result, labels, productExperienceEvent) {
+        const data = { ...productExperienceEvent.data, url: window.location.href };
+        result
+            .then(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.ok
+            });
+        })
+            .catch(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.cancel
+            });
+        });
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, deps: [{ token: i1$8.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$8.BsModalService }, { type: GainsightService }]; } });
+
 /**
  * C8y modal component.
  * ## Example:
@@ -20958,8 +20943,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Output
             }] } });
 
+class CloseDatePickerDirective {
+    constructor(el) {
+        this.el = el;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        const element = this.el.nativeElement.closest('.dropdown-menu');
+        const clickEvent$ = element
+            ? merge(fromEvent(element, 'click'), fromEvent(document, 'click'))
+            : fromEvent(document, 'click');
+        clickEvent$
+            .pipe(map((event) => event.target), filter(target => !this.el.nativeElement.contains(target)), // i.e. anything which is not inside this `c8y-date-time-picker`
+        takeUntil(this.destroy$))
+            .subscribe(() => this.closeDatepicker.hide());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+CloseDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CloseDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: { closeDatepicker: "closeDatepicker" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[closeDatepicker]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { closeDatepicker: [{
+                type: Input
+            }] } });
+
 class DateTimePickerComponent {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
         this.defaultPlaceholder = gettext('Select a date…');
         this.destroy$ = new Subject();
         this.form = new FormGroup({});
@@ -20986,6 +21003,9 @@ class DateTimePickerComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
     /**
      * Control Value Accessor - If form value changes by external factor, update date property and internal form with new value.
      */
@@ -21029,12 +21049,23 @@ class DateTimePickerComponent {
         }
     }
     previousDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() - 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
     }
     nextDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() + 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
+    }
+    hide() {
+        this.datepicker.hide();
     }
     /**
      * If internal form changes its value, then combine date and time into one Date and pass its ISO string value to onChange method
@@ -21062,7 +21093,7 @@ class DateTimePickerComponent {
         this.onChange(this.date.toISOString());
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: { _minDate: ["minDate", "_minDate"], _maxDate: ["maxDate", "_maxDate"], placeholder: "placeholder" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -21074,7 +21105,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: forwardRef(() => DateTimePickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: BsDatepickerDirective, descendants: true }], ngImport: i0, template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-date-time-picker', providers: [
@@ -21088,8 +21119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => DateTimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _minDate: [{
+                    ], template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _minDate: [{
                 type: Input,
                 args: ['minDate']
             }], _maxDate: [{
@@ -21097,6 +21128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 args: ['maxDate']
             }], placeholder: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: [BsDatepickerDirective]
             }] } });
 
 class FieldDateTime extends FieldType {
@@ -21156,7 +21190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 class DateTimePickerModule {
 }
 DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent], imports: [FormsModule,
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent, CloseDatePickerDirective], imports: [FormsModule,
         CommonModule$1,
         FormsModule$1,
         ReactiveFormsModule, i6.BsDatepickerModule, CommonModule,
@@ -21181,7 +21215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                         TimePickerModule
                     ],
                     exports: [DateTimePickerComponent],
-                    declarations: [DateTimePickerComponent]
+                    declarations: [DateTimePickerComponent, CloseDatePickerDirective]
                 }]
         }] });