@openziti/ziti-console-lib 0.7.1 → 0.8.1

package/esm2022/lib/features/login/login-dialog.component.mjs

@@ -0,0 +1,123 @@
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { ZAC_LOGIN_SERVICE } from "../../services/login-service.class";
+import { SETTINGS_SERVICE } from "../../services/settings.service";
+import { isEmpty } from "lodash";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/material/dialog";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "../dynamic-widgets/string/string-input.component";
+import * as i6 from "../dynamic-widgets/selector/selector-input.component";
+import * as i7 from "../dynamic-widgets/password/password-input.component";
+import * as i8 from "../../services/login-service.class";
+import * as i9 from "../../services/settings-service.class";
+class LoginDialogComponent {
+    constructor(svc, settingsService, data, router, dialogRef) {
+        this.svc = svc;
+        this.settingsService = settingsService;
+        this.data = data;
+        this.router = router;
+        this.dialogRef = dialogRef;
+        this.dataObj = {};
+        this.selectedEdgeController = '';
+        this.username = '';
+        this.password = '';
+        this.loginFailed = false;
+        this.edgeControllerList = [];
+        this.dataObj = data;
+        this.svc.loginDialogOpen = true;
+        this.selectedEdgeController = this.settingsService?.settings?.selectedEdgeController;
+    }
+    ngOnInit() {
+        this.settingsService.settingsChange.subscribe((results) => {
+            if (this.svc.originIsController) {
+                return;
+            }
+            if (results)
+                this.settingsReturned(results);
+        });
+    }
+    settingsReturned(settings) {
+        this.edgeControllerList = [];
+        if (settings.edgeControllers?.length > 0) {
+            this.edgeControllerList = [];
+            settings.edgeControllers.forEach((controller) => {
+                if (!controller.url) {
+                    return;
+                }
+                this.edgeControllerList.push({ name: controller.name + ` (${controller.url})`, value: controller.url });
+            });
+        }
+        const serviceUrl = localStorage.getItem("ziti-serviceUrl-value");
+        if (!isEmpty(serviceUrl)) {
+            const lastUrl = JSON.parse(serviceUrl).data;
+            this.selectedEdgeController = lastUrl.trim();
+        }
+        else {
+            this.selectedEdgeController = settings.selectedEdgeController;
+        }
+    }
+    edgeChanged(event) {
+        if (this.selectedEdgeController) {
+            this.settingsService.initApiVersions(this.selectedEdgeController);
+        }
+        this.settingsService.settings.selectedEdgeController = this.selectedEdgeController;
+    }
+    login() {
+        const apiVersions = this.settingsService.apiVersions;
+        const prefix = apiVersions && apiVersions["edge-management"]?.v1?.path || '';
+        this.loginFailed = false;
+        this.svc.login(prefix, this.selectedEdgeController, this.username.trim(), this.password, false).then((result) => {
+            if (result?.error) {
+                return;
+            }
+            this.svc.loginDialogOpen = false;
+            this.settingsService.set(this.settingsService.settings);
+            this.dialogRef.close({ isLoggedIn: true });
+        }).catch(() => {
+            this.loginFailed = true;
+        });
+    }
+    close() {
+        this.svc.loginDialogOpen = false;
+        this.dialogRef.close();
+    }
+    returnToLoginPage() {
+        this.svc.loginDialogOpen = false;
+        this.dialogRef.close({ returnToLogin: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginDialogComponent, deps: [{ token: ZAC_LOGIN_SERVICE }, { token: SETTINGS_SERVICE }, { token: MAT_DIALOG_DATA }, { token: i1.Router }, { token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginDialogComponent, selector: "lib-confirm", ngImport: i0, template: "<div class=\"login-modal-container\">\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n    <form id=\"login-form\" (submit)=\"login()\" autocomplete=\"on\">\n        <div class=\"login-modal-body\">\n            <div class=\"login-modal-content\">\n                <div class=\"login-title-container\">\n                    <span class=\"login-title\">Session Expired</span>\n                    <span class=\"login-subtitle\">Please login to continue.</span>\n                </div>\n                <div class=\"login-modal-main\">\n                    <lib-selector-input\n                            *ngIf=\"!svc.originIsController\"\n                            [fieldName]=\"'Edge Controller'\"\n                            [(fieldValue)]=\"selectedEdgeController\"\n                            [placeholder]=\"'Select an Edge Controller'\"\n                            [valueList]=\"edgeControllerList\"\n                            (fieldValueChange)=\"edgeChanged($event)\"\n                    >\n                    </lib-selector-input>\n                    <lib-string-input [fieldName]=\"'Username'\"\n                                      [(fieldValue)]=\"username\"\n                                      [autocomplete]=\"'username'\"\n                                      [placeholder]=\"'enter username of controller'\"></lib-string-input>\n                    <lib-password-input [fieldName]=\"'Password'\"\n                                        [(fieldValue)]=\"password\"\n                                        [autocomplete]=\"'current-password'\"\n                                        [placeholder]=\"'enter password of controller'\"></lib-password-input>\n                    <span class=\"login-error-message\" *ngIf=\"loginFailed\">Login Failed</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"login-buttons-container\">\n            <button class=\"button\" type=\"submit\">Login</button>\n            <div class=\"linkButton cancel\" (click)=\"returnToLoginPage()\">Return to login page</div>\n        </div>\n    </form>\n</div>\n", styles: [".login-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:1.5625rem;width:25rem;padding:var(--paddingXXL)}.login-modal-container .login-modal-body{display:flex;flex-direction:row;align-items:center}.login-modal-container .login-modal-body .login-modal-content{display:flex;flex-direction:column;width:100%}.login-modal-container .login-modal-body .login-modal-main{display:flex;flex-direction:column;align-items:center}.login-modal-container .login-modal-body .login-modal-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:.9375rem}.login-modal-container .login-modal-body lib-string-input,.login-modal-container .login-modal-body lib-password-input{width:100%}.login-modal-container .login-title-container{width:100%;display:flex;flex-direction:column}.login-modal-container .login-title-container .login-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:100%;background:none;text-transform:none;height:auto;font-family:Russo One;filter:brightness(50%)}.login-modal-container .login-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;align-items:flex-end;margin-top:var(--marginXXL)}.login-modal-container .login-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.login-modal-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.login-modal-container button.confirm{background-color:var(--secondary)}.login-modal-container button.cancel{background-color:var(--primary)}.login-error-message{display:flex;justify-content:flex-start;width:100%;margin-top:.325rem;color:var(--red);font-weight:600;font-size:.925rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.StringInputComponent, selector: "lib-string-input", inputs: ["fieldName", "helpText", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error", "autocomplete", "required"], outputs: ["fieldValueChange"] }, { kind: "component", type: i6.SelectorInputComponent, selector: "lib-selector-input", inputs: ["fieldName", "fieldValue", "helpText", "placeholder", "parentage", "valueList", "labelColor", "fieldClass", "error"], outputs: ["fieldValueChange"] }, { kind: "component", type: i7.PasswordInputComponent, selector: "lib-password-input", inputs: ["fieldName", "fieldValue", "placeholder", "parentage", "labelColor", "fieldClass", "error", "autocomplete", "required"], outputs: ["fieldValueChange"] }] }); }
+}
+export { LoginDialogComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-confirm', template: "<div class=\"login-modal-container\">\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n    <form id=\"login-form\" (submit)=\"login()\" autocomplete=\"on\">\n        <div class=\"login-modal-body\">\n            <div class=\"login-modal-content\">\n                <div class=\"login-title-container\">\n                    <span class=\"login-title\">Session Expired</span>\n                    <span class=\"login-subtitle\">Please login to continue.</span>\n                </div>\n                <div class=\"login-modal-main\">\n                    <lib-selector-input\n                            *ngIf=\"!svc.originIsController\"\n                            [fieldName]=\"'Edge Controller'\"\n                            [(fieldValue)]=\"selectedEdgeController\"\n                            [placeholder]=\"'Select an Edge Controller'\"\n                            [valueList]=\"edgeControllerList\"\n                            (fieldValueChange)=\"edgeChanged($event)\"\n                    >\n                    </lib-selector-input>\n                    <lib-string-input [fieldName]=\"'Username'\"\n                                      [(fieldValue)]=\"username\"\n                                      [autocomplete]=\"'username'\"\n                                      [placeholder]=\"'enter username of controller'\"></lib-string-input>\n                    <lib-password-input [fieldName]=\"'Password'\"\n                                        [(fieldValue)]=\"password\"\n                                        [autocomplete]=\"'current-password'\"\n                                        [placeholder]=\"'enter password of controller'\"></lib-password-input>\n                    <span class=\"login-error-message\" *ngIf=\"loginFailed\">Login Failed</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"login-buttons-container\">\n            <button class=\"button\" type=\"submit\">Login</button>\n            <div class=\"linkButton cancel\" (click)=\"returnToLoginPage()\">Return to login page</div>\n        </div>\n    </form>\n</div>\n", styles: [".login-modal-container{display:flex;flex-direction:column;background-color:var(--background);border-radius:1.5625rem;width:25rem;padding:var(--paddingXXL)}.login-modal-container .login-modal-body{display:flex;flex-direction:row;align-items:center}.login-modal-container .login-modal-body .login-modal-content{display:flex;flex-direction:column;width:100%}.login-modal-container .login-modal-body .login-modal-main{display:flex;flex-direction:column;align-items:center}.login-modal-container .login-modal-body .login-modal-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:.9375rem}.login-modal-container .login-modal-body lib-string-input,.login-modal-container .login-modal-body lib-password-input{width:100%}.login-modal-container .login-title-container{width:100%;display:flex;flex-direction:column}.login-modal-container .login-title-container .login-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:100%;background:none;text-transform:none;height:auto;font-family:Russo One;filter:brightness(50%)}.login-modal-container .login-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;align-items:flex-end;margin-top:var(--marginXXL)}.login-modal-container .login-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.login-modal-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.login-modal-container button.confirm{background-color:var(--secondary)}.login-modal-container button.cancel{background-color:var(--primary)}.login-error-message{display:flex;justify-content:flex-start;width:100%;margin-top:.325rem;color:var(--red);font-weight:600;font-size:.925rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i8.LoginServiceClass, decorators: [{
+                    type: Inject,
+                    args: [ZAC_LOGIN_SERVICE]
+                }] }, { type: i9.SettingsServiceClass, decorators: [{
+                    type: Inject,
+                    args: [SETTINGS_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.Router }, { type: i2.MatDialogRef }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9naW4tZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ppdGktY29uc29sZS1saWIvc3JjL2xpYi9mZWF0dXJlcy9sb2dpbi9sb2dpbi1kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMveml0aS1jb25zb2xlLWxpYi9zcmMvbGliL2ZlYXR1cmVzL2xvZ2luL2xvZ2luLWRpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUVGLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFTLE1BQU0sZUFBZSxDQUFDO0FBQ3hELE9BQU8sRUFBQyxlQUFlLEVBQWUsTUFBTSwwQkFBMEIsQ0FBQztBQUd2RSxPQUFPLEVBQW9CLGlCQUFpQixFQUFDLE1BQU0sb0NBQW9DLENBQUM7QUFDeEYsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0saUNBQWlDLENBQUM7QUFFakUsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLFFBQVEsQ0FBQzs7Ozs7Ozs7Ozs7QUFFL0IsTUFLYSxvQkFBb0I7SUFTL0IsWUFDb0MsR0FBc0IsRUFDdEIsZUFBcUMsRUFDdkMsSUFBUyxFQUNqQyxNQUFjLEVBQ2QsU0FBNkM7UUFKbkIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFDdEIsb0JBQWUsR0FBZixlQUFlLENBQXNCO1FBQ3ZDLFNBQUksR0FBSixJQUFJLENBQUs7UUFDakMsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUNkLGNBQVMsR0FBVCxTQUFTLENBQW9DO1FBWnZELFlBQU8sR0FBRyxFQUFFLENBQUE7UUFDWiwyQkFBc0IsR0FBRyxFQUFFLENBQUM7UUFDNUIsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLGFBQVEsR0FBRyxFQUFFLENBQUM7UUFDZCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQix1QkFBa0IsR0FBRyxFQUFFLENBQUM7UUFTdEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxzQkFBc0IsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLFFBQVEsRUFBRSxzQkFBc0IsQ0FBQztJQUN2RixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxlQUFlLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxDQUFDLE9BQVksRUFBRSxFQUFFO1lBQzdELElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxrQkFBa0IsRUFBRTtnQkFDL0IsT0FBTzthQUNSO1lBQ0QsSUFBSSxPQUFPO2dCQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM5QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxRQUFhO1FBQzVCLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxFQUFFLENBQUM7UUFDN0IsSUFBSSxRQUFRLENBQUMsZUFBZSxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDeEMsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEVBQUUsQ0FBQztZQUM3QixRQUFRLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFVBQVUsRUFBRSxFQUFFO2dCQUM5QyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtvQkFDbkIsT0FBTztpQkFDUjtnQkFDRCxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxFQUFDLFVBQVUsQ0FBQyxJQUFJLEdBQUcsS0FBSyxVQUFVLENBQUMsR0FBRyxHQUFHLEVBQUUsS0FBSyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUMsQ0FBQyxDQUFDO1lBQ3ZHLENBQUMsQ0FBQyxDQUFDO1NBQ0o7UUFDRCxNQUFNLFVBQVUsR0FBRyxZQUFZLENBQUMsT0FBTyxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUN4QixNQUFNLE9BQU8sR0FBUSxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQztZQUNqRCxJQUFJLENBQUMsc0JBQXNCLEdBQUcsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQzlDO2FBQU07WUFDTCxJQUFJLENBQUMsc0JBQXNCLEdBQUcsUUFBUSxDQUFDLHNCQUFzQixDQUFDO1NBQy9EO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFNO1FBQ2hCLElBQUksSUFBSSxDQUFDLHNCQUFzQixFQUFFO1lBQy9CLElBQUksQ0FBQyxlQUFlLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFBO1NBQ2xFO1FBQ0QsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUMsc0JBQXNCLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUFDO0lBQ3JGLENBQUM7SUFFRCxLQUFLO1FBQ0QsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLENBQUM7UUFDckQsTUFBTSxNQUFNLEdBQUcsV0FBVyxJQUFJLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFLEVBQUUsRUFBRSxJQUFJLElBQUksRUFBRSxDQUFDO1FBQzdFLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUNWLE1BQU0sRUFDTixJQUFJLENBQUMsc0JBQXNCLEVBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLEVBQ3BCLElBQUksQ0FBQyxRQUFRLEVBQ2IsS0FBSyxDQUNSLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDaEIsSUFBSSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQUNqQixPQUFPO2FBQ1I7WUFDRCxJQUFJLENBQUMsR0FBRyxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7WUFDakMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUN4RCxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDO1FBQzNDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztRQUMxQixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLEdBQUcsQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELGlCQUFpQjtRQUNmLElBQUksQ0FBQyxHQUFHLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQztRQUNqQyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFDLGFBQWEsRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDO0lBQzlDLENBQUM7K0dBdkZVLG9CQUFvQixrQkFVckIsaUJBQWlCLGFBQ2pCLGdCQUFnQixhQUNoQixlQUFlO21HQVpkLG9CQUFvQixtREM5QmpDLDZrRUFxQ0E7O1NEUGEsb0JBQW9COzRGQUFwQixvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsYUFBYTs7MEJBY3BCLE1BQU07MkJBQUMsaUJBQWlCOzswQkFDeEIsTUFBTTsyQkFBQyxnQkFBZ0I7OzBCQUN2QixNQUFNOzJCQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICAgIENvcHlyaWdodCBOZXRGb3VuZHJ5IEluYy5cblxuICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuXG4gICAgaHR0cHM6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuXG4gICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4qL1xuXG5pbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNQVRfRElBTE9HX0RBVEEsIE1hdERpYWxvZ1JlZn0gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL2RpYWxvZ1wiO1xuXG5pbXBvcnQge1JvdXRlcn0gZnJvbSBcIkBhbmd1bGFyL3JvdXRlclwiO1xuaW1wb3J0IHtMb2dpblNlcnZpY2VDbGFzcywgWkFDX0xPR0lOX1NFUlZJQ0V9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9sb2dpbi1zZXJ2aWNlLmNsYXNzXCI7XG5pbXBvcnQge1NFVFRJTkdTX1NFUlZJQ0V9IGZyb20gXCIuLi8uLi9zZXJ2aWNlcy9zZXR0aW5ncy5zZXJ2aWNlXCI7XG5pbXBvcnQge1NldHRpbmdzU2VydmljZUNsYXNzfSBmcm9tIFwiLi4vLi4vc2VydmljZXMvc2V0dGluZ3Mtc2VydmljZS5jbGFzc1wiO1xuaW1wb3J0IHtpc0VtcHR5fSBmcm9tIFwibG9kYXNoXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1jb25maXJtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xvZ2luLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2xvZ2luLWRpYWxvZy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIExvZ2luRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBkYXRhT2JqID0ge31cbiAgc2VsZWN0ZWRFZGdlQ29udHJvbGxlciA9ICcnO1xuICB1c2VybmFtZSA9ICcnO1xuICBwYXNzd29yZCA9ICcnO1xuICBsb2dpbkZhaWxlZCA9IGZhbHNlO1xuICBlZGdlQ29udHJvbGxlckxpc3QgPSBbXTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBASW5qZWN0KFpBQ19MT0dJTl9TRVJWSUNFKSBwdWJsaWMgc3ZjOiBMb2dpblNlcnZpY2VDbGFzcyxcbiAgICBASW5qZWN0KFNFVFRJTkdTX1NFUlZJQ0UpIHByaXZhdGUgc2V0dGluZ3NTZXJ2aWNlOiBTZXR0aW5nc1NlcnZpY2VDbGFzcyxcbiAgICBASW5qZWN0KE1BVF9ESUFMT0dfREFUQSkgcHVibGljIGRhdGE6IGFueSxcbiAgICBwcml2YXRlIHJvdXRlcjogUm91dGVyLFxuICAgIHByaXZhdGUgZGlhbG9nUmVmOiBNYXREaWFsb2dSZWY8TG9naW5EaWFsb2dDb21wb25lbnQ+XG4gICkge1xuICAgIHRoaXMuZGF0YU9iaiA9IGRhdGE7XG4gICAgdGhpcy5zdmMubG9naW5EaWFsb2dPcGVuID0gdHJ1ZTtcbiAgICB0aGlzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXIgPSB0aGlzLnNldHRpbmdzU2VydmljZT8uc2V0dGluZ3M/LnNlbGVjdGVkRWRnZUNvbnRyb2xsZXI7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNldHRpbmdzU2VydmljZS5zZXR0aW5nc0NoYW5nZS5zdWJzY3JpYmUoKHJlc3VsdHM6IGFueSkgPT4ge1xuICAgICAgaWYgKHRoaXMuc3ZjLm9yaWdpbklzQ29udHJvbGxlcikge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgICBpZiAocmVzdWx0cykgdGhpcy5zZXR0aW5nc1JldHVybmVkKHJlc3VsdHMpO1xuICAgIH0pO1xuICB9XG5cbiAgc2V0dGluZ3NSZXR1cm5lZChzZXR0aW5nczogYW55KSB7XG4gICAgdGhpcy5lZGdlQ29udHJvbGxlckxpc3QgPSBbXTtcbiAgICBpZiAoc2V0dGluZ3MuZWRnZUNvbnRyb2xsZXJzPy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLmVkZ2VDb250cm9sbGVyTGlzdCA9IFtdO1xuICAgICAgc2V0dGluZ3MuZWRnZUNvbnRyb2xsZXJzLmZvckVhY2goKGNvbnRyb2xsZXIpID0+IHtcbiAgICAgICAgaWYgKCFjb250cm9sbGVyLnVybCkge1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLmVkZ2VDb250cm9sbGVyTGlzdC5wdXNoKHtuYW1lOmNvbnRyb2xsZXIubmFtZSArIGAgKCR7Y29udHJvbGxlci51cmx9KWAsIHZhbHVlOiBjb250cm9sbGVyLnVybH0pO1xuICAgICAgfSk7XG4gICAgfVxuICAgIGNvbnN0IHNlcnZpY2VVcmwgPSBsb2NhbFN0b3JhZ2UuZ2V0SXRlbShcInppdGktc2VydmljZVVybC12YWx1ZVwiKTtcbiAgICBpZiAoIWlzRW1wdHkoc2VydmljZVVybCkpIHtcbiAgICAgIGNvbnN0IGxhc3RVcmw6IGFueSA9IEpTT04ucGFyc2Uoc2VydmljZVVybCkuZGF0YTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRFZGdlQ29udHJvbGxlciA9IGxhc3RVcmwudHJpbSgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXIgPSBzZXR0aW5ncy5zZWxlY3RlZEVkZ2VDb250cm9sbGVyO1xuICAgIH1cbiAgfVxuXG4gIGVkZ2VDaGFuZ2VkKGV2ZW50Pykge1xuICAgIGlmICh0aGlzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXIpIHtcbiAgICAgIHRoaXMuc2V0dGluZ3NTZXJ2aWNlLmluaXRBcGlWZXJzaW9ucyh0aGlzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXIpXG4gICAgfVxuICAgIHRoaXMuc2V0dGluZ3NTZXJ2aWNlLnNldHRpbmdzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXIgPSB0aGlzLnNlbGVjdGVkRWRnZUNvbnRyb2xsZXI7XG4gIH1cblxuICBsb2dpbigpIHtcbiAgICAgIGNvbnN0IGFwaVZlcnNpb25zID0gdGhpcy5zZXR0aW5nc1NlcnZpY2UuYXBpVmVyc2lvbnM7XG4gICAgICBjb25zdCBwcmVmaXggPSBhcGlWZXJzaW9ucyAmJiBhcGlWZXJzaW9uc1tcImVkZ2UtbWFuYWdlbWVudFwiXT8udjE/LnBhdGggfHwgJyc7XG4gICAgICB0aGlzLmxvZ2luRmFpbGVkID0gZmFsc2U7XG4gICAgICB0aGlzLnN2Yy5sb2dpbihcbiAgICAgICAgICBwcmVmaXgsXG4gICAgICAgICAgdGhpcy5zZWxlY3RlZEVkZ2VDb250cm9sbGVyLFxuICAgICAgICAgIHRoaXMudXNlcm5hbWUudHJpbSgpLFxuICAgICAgICAgIHRoaXMucGFzc3dvcmQsXG4gICAgICAgICAgZmFsc2VcbiAgICAgICkudGhlbigocmVzdWx0KSA9PiB7XG4gICAgICAgIGlmIChyZXN1bHQ/LmVycm9yKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuc3ZjLmxvZ2luRGlhbG9nT3BlbiA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNldHRpbmdzU2VydmljZS5zZXQodGhpcy5zZXR0aW5nc1NlcnZpY2Uuc2V0dGluZ3MpO1xuICAgICAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZSh7aXNMb2dnZWRJbjogdHJ1ZX0pO1xuICAgICAgfSkuY2F0Y2goKCkgPT4ge1xuICAgICAgICB0aGlzLmxvZ2luRmFpbGVkID0gdHJ1ZTtcbiAgICAgIH0pO1xuICB9XG5cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5zdmMubG9naW5EaWFsb2dPcGVuID0gZmFsc2U7XG4gICAgdGhpcy5kaWFsb2dSZWYuY2xvc2UoKTtcbiAgfVxuXG4gIHJldHVyblRvTG9naW5QYWdlKCkge1xuICAgIHRoaXMuc3ZjLmxvZ2luRGlhbG9nT3BlbiA9IGZhbHNlO1xuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKHtyZXR1cm5Ub0xvZ2luOiB0cnVlfSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJsb2dpbi1tb2RhbC1jb250YWluZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2xvc2UgaWNvbi1jbG9zZVwiIChjbGljayk9XCJjbG9zZSgpXCI+PC9kaXY+XG4gICAgPGZvcm0gaWQ9XCJsb2dpbi1mb3JtXCIgKHN1Ym1pdCk9XCJsb2dpbigpXCIgYXV0b2NvbXBsZXRlPVwib25cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImxvZ2luLW1vZGFsLWJvZHlcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsb2dpbi1tb2RhbC1jb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxvZ2luLXRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImxvZ2luLXRpdGxlXCI+U2Vzc2lvbiBFeHBpcmVkPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImxvZ2luLXN1YnRpdGxlXCI+UGxlYXNlIGxvZ2luIHRvIGNvbnRpbnVlLjwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibG9naW4tbW9kYWwtbWFpblwiPlxuICAgICAgICAgICAgICAgICAgICA8bGliLXNlbGVjdG9yLWlucHV0XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCIhc3ZjLm9yaWdpbklzQ29udHJvbGxlclwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ZpZWxkTmFtZV09XCInRWRnZSBDb250cm9sbGVyJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgWyhmaWVsZFZhbHVlKV09XCJzZWxlY3RlZEVkZ2VDb250cm9sbGVyXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwiJ1NlbGVjdCBhbiBFZGdlIENvbnRyb2xsZXInXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbdmFsdWVMaXN0XT1cImVkZ2VDb250cm9sbGVyTGlzdFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKGZpZWxkVmFsdWVDaGFuZ2UpPVwiZWRnZUNoYW5nZWQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPC9saWItc2VsZWN0b3ItaW5wdXQ+XG4gICAgICAgICAgICAgICAgICAgIDxsaWItc3RyaW5nLWlucHV0IFtmaWVsZE5hbWVdPVwiJ1VzZXJuYW1lJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFsoZmllbGRWYWx1ZSldPVwidXNlcm5hbWVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbYXV0b2NvbXBsZXRlXT1cIid1c2VybmFtZSdcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwiJ2VudGVyIHVzZXJuYW1lIG9mIGNvbnRyb2xsZXInXCI+PC9saWItc3RyaW5nLWlucHV0PlxuICAgICAgICAgICAgICAgICAgICA8bGliLXBhc3N3b3JkLWlucHV0IFtmaWVsZE5hbWVdPVwiJ1Bhc3N3b3JkJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgWyhmaWVsZFZhbHVlKV09XCJwYXNzd29yZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2F1dG9jb21wbGV0ZV09XCInY3VycmVudC1wYXNzd29yZCdcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCInZW50ZXIgcGFzc3dvcmQgb2YgY29udHJvbGxlcidcIj48L2xpYi1wYXNzd29yZC1pbnB1dD5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJsb2dpbi1lcnJvci1tZXNzYWdlXCIgKm5nSWY9XCJsb2dpbkZhaWxlZFwiPkxvZ2luIEZhaWxlZDwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImxvZ2luLWJ1dHRvbnMtY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnV0dG9uXCIgdHlwZT1cInN1Ym1pdFwiPkxvZ2luPC9idXR0b24+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGlua0J1dHRvbiBjYW5jZWxcIiAoY2xpY2spPVwicmV0dXJuVG9Mb2dpblBhZ2UoKVwiPlJldHVybiB0byBsb2dpbiBwYWdlPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZm9ybT5cbjwvZGl2PlxuIl19

package/esm2022/lib/features/preview-selections/preview-selections.component.mjs

@@ -99,7 +99,7 @@ class PreviewSelectionsComponent {
         this.dialogRef.close({ confirmed: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ZITI_DATA_SERVICE }, { token: i2.ServicesPageService }, { token: i3.GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 export { PreviewSelectionsComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, decorators: [{