@openziti/ziti-console-lib 0.7.1 → 0.8.0

package/assets/styles/global.scss

@@ -649,6 +649,15 @@ lib-form-field-container {
     background-color: var(--navigation);
   }
 }
+
+a {
+  &.download-button {
+    &:hover {
+      color: var(--white)
+    }
+  }
+}
+
 .download-button {
   display: flex;
   flex-direction: row;
@@ -656,7 +665,7 @@ lib-form-field-container {
   justify-content: space-between;
   width: 100%;
   background-color: var(--primaryColor);
-  color: var(--background);
+  color: var(--white);
   text-transform: uppercase;
   font-size: 0.875rem;
   font-weight: 600;
@@ -670,6 +679,7 @@ lib-form-field-container {
     outline: 0;
     filter: brightness(90%);
     box-shadow: 0 0.125rem 0.1875rem 0 var(--primaryColorOpaque);
+    color: var(--white);
   }
 
   &:active {
@@ -693,8 +703,8 @@ lib-form-field-container {
     z-index: 10;
   }
 
+  .verify-certificate,
   .tap-to-download {
-    font-family: zac!important;
     speak: none;
     font-style: normal;
     font-weight: 400;
@@ -707,10 +717,21 @@ lib-form-field-container {
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     width: 2.8125rem;
-    margin-right: 0.625rem;
     background-size: contain;
     background-repeat: no-repeat;
+  }
 
+  .verify-certificate {
+    font-family: icomoon !important;
+    margin-left: var(--marginMedium);
+    &:before {
+      content: "\e958";
+    }
+  }
+
+  .tap-to-download {
+    font-family: zac !important;
+    margin-right: var(--marginMedium);
     &:before {
       content: "\e92d";
     }
@@ -1036,6 +1057,18 @@ lib-tag-selector {
       transition: 0.5s;
       left: 0;
 
+      &.form-toggle-switch-inverse {
+        .form-toggle-indicator {
+          border-color: var(--red);
+        }
+
+        &.toggle-right {
+          .form-toggle-indicator {
+            border-color: var(--green);
+          }
+        }
+      }
+
       &.toggle-right {
         left: 0.625rem;
 
@@ -1097,6 +1130,11 @@ lib-tag-selector {
   .form-field-title {
     color: var(--offWhite);
   }
+
+  &.disabled {
+    opacity: .8;
+    pointer-events: none;
+  }
 }
 
 .loginForm {
@@ -1538,3 +1576,109 @@ p-dropdown {
     border: none;
   }
 }
+
+.radio-group-container {
+  display: flex;
+  gap: var(--marginLarge);
+
+  &:focus {
+    .radio-button-container {
+      .radio-button-circle {
+        border-color: var(--primaryColor);
+      }
+    }
+  }
+
+  .radio-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--formGroup);
+    border-radius: var(--inputBorderRadius);
+    width: 100%;
+    padding-left: var(--paddingMedium);
+    padding-right: var(--paddingMedium);
+    padding-top: var(--paddingLarge);
+    padding-bottom: var(--paddingLarge);
+    cursor: pointer;
+    gap: var(--marginMedium);
+
+    .radio-button-circle {
+      display: flex;
+      width: 1.3125rem;
+      height: 1.3125rem;
+      border-radius: 1.3125rem;
+      border-width: 0.125rem;
+      border-style: solid;
+      border-color: var(--offWhite);
+      align-items: center;
+      justify-content: center;
+      background-color: var(--offWhite);
+
+      .radio-button-inner-circle {
+        display: none;
+        width: 0.9375rem;
+        height: 0.9375rem;
+        border-radius: 0.9375rem;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--primaryColor);
+      }
+    }
+
+    &.selected {
+      .radio-button-circle {
+        .radio-button-inner-circle {
+          display: flex;
+        }
+      }
+    }
+
+    &:active {
+      .radio-button-circle {
+        .radio-button-inner-circle {
+          display: flex;
+          background-color: var(--menu);
+        }
+      }
+    }
+
+    .radio-button-label {
+      color: var(--offWhite);
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+}
+
+.api-data-no-wrap{
+  .jse-text-mode {
+    width: 100%;
+    .cm-editor {
+      width: 100%;
+      .cm-scroller {
+        width: 100%;
+        .cm-content {
+          width: 100%;
+          overflow: auto;
+          .ͼr {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+
+.copy-icon {
+  background-image: url(/assets/svgs/copy.svg);
+  background-size: 1.125rem;
+  background-repeat: no-repeat;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-left: var(--marginSmall);;
+}
+
+.error-text {
+  color: var(--red);
+}

package/assets/styles/icons.css

@@ -11,6 +11,19 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?l2gtmj');
+  src:  url('../fonts/icomoon.eot?l2gtmj#iefix') format('embedded-opentype'),
+  url('../fonts/icomoon.woff2?l2gtmj') format('woff2'),
+  url('../fonts/icomoon.ttf?l2gtmj') format('truetype'),
+  url('../fonts/icomoon.woff?l2gtmj') format('woff'),
+  url('../fonts/icomoon.svg?l2gtmj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'zac' !important;

package/esm2022/lib/features/creation-summary-dialog/creation-summary-dialog.component.mjs

@@ -79,7 +79,7 @@ class CreationSummaryDialogComponent {
         this.dialogRef.close('new');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreationSummaryDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreationSummaryDialogComponent, selector: "lib-creation-summary-dialog", ngImport: i0, template: "<div class=\"creation-summary-dialog-container\">\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n    <div class=\"title-row\">\n        <span class=\"title\">Execution Summary</span>\n        <span class=\"subtitle\">The following entities were created for this service</span>\n    </div>\n    <lib-form-field-container [showHeader]=\"false\">\n        <div class=\"copy-links-container\">\n            <span class=\"copy-links-title\">\n                <span class=\"title\">Entities</span>\n                <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n            </span>\n        </div>\n        <div class=\"form-group-row exec-operations-group\">\n            <div class=\"summary-groups-container\">\n                <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n                    <div class=\"summary-group-title\">{{group.title}}</div>\n                    <ul>\n                        <li\n                                *ngFor=\"let entity of group.entities\"\n                                (click)=\"selectZitiEntity(entity.name, 'all')\"\n                                [ngClass]=\"{selected: selectedEntityType === 'all'}\"\n                                class=\"entity-item drop-target-svc\"\n                        >\n                            <span class=\"spinner\" *ngIf=\"entity.status === 'loading'\"></span>\n                            <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"entity.status === 'done'\">\n                            <div class=\"retry\" *ngIf=\"entity.status === 'error'\" (click)=\"doRetry(entity)\"></div>\n                            <div class=\"icon-clear\" *ngIf=\"entity.status === 'error'\"></div>\n                            <span class=\"entity-name\" matTooltipShowDelay=\"1000\">\n                                {{ entity.name.length > 0 ? entity.name : 'SimpleService' }}\n                            </span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </lib-form-field-container>\n    <lib-form-field-container [showHeader]=\"false\" style=\"margin-top: 10px;\">\n        <div class=\"copy-links-container\">\n            <div class=\"copy-links-title\">\n                <div class=\"title-container\">\n                    <span class=\"title\">Copy Links</span>\n                    <div class=\"copy-icon\"></div>\n                </div>\n            </div>\n            <div class=\"copy-links\">\n                <div class=\"link-button\" (click)=\"copyCliCommands()\">CLI Commands</div>\n                <div class=\"link-button\" (click)=\"copyAPIRequests()\">API Requests</div>\n            </div>\n        </div>\n    </lib-form-field-container>\n\n    <div class=\"confirm-buttons-container\">\n        <button class=\"button save alert\" (click)=\"done()\">Done</button>\n        <button class=\"button save cancel\" (click)=\"confirm()\">Create another</button>\n    </div>\n</div>", styles: [".creation-summary-dialog-container{background-color:var(--formBackground);min-width:29.6875rem;border-radius:var(--modalBorderRadius);padding:var(--paddingXXL)}.creation-summary-dialog-container .title-row{display:flex;align-items:center;flex-direction:column;margin-bottom:var(--marginLarge)}.creation-summary-dialog-container .subtitle{color:var(--text)}.creation-summary-dialog-container .close{font-size:1.5625rem;top:.9375rem;right:.9375rem;width:2.1875rem;font-weight:600}.resource-type-container{display:flex;flex-direction:column;padding-left:var(--paddingLarge);padding-right:var(--paddingLarge)}.resource-type-container.disabled{opacity:.5}.resource-type-container.disabled select{cursor:not-allowed}.resource-type-container .resource-type-content{margin-top:1.25rem;flex-wrap:wrap}.entity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.summary-group ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:40.625rem;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:.3125rem;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.summary-group .entity-item[hidden]{display:none}.summary-group .entity-item.no-results{font-weight:400}.summary-group .entity-item.no-results:hover{background-color:transparent;border-left-color:transparent;cursor:default}.summary-groups-container{overflow:auto;height:100%;width:100%;max-width:18.75rem;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.exec-operations-group{padding:0}.confirm-buttons-container{display:flex;justify-content:space-between;align-items:center;flex-direction:row;width:100%;padding-top:var(--paddingMedium)}.confirm-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center}button.confirm{background-color:var(--secondary)}button.cancel{background-color:var(--primary)}.spinner{right:1em;top:1em;display:inline-block;width:1rem;height:1rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--placeholder);border-right:.125rem solid var(--placeholder);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem}.config-check:checked,.success-check:checked{background-color:var(--green)!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC);background-size:45%;background-position:center center;background-repeat:no-repeat;border:none}.config-check:checked:disabled,.success-check:checked:disabled{opacity:1!important}.success-check{border-radius:100%;top:.8125rem;left:.625rem;transition:var(--transition);border:.125rem var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:.625rem}.icon-clear{color:var(--red);margin-top:.25rem}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.125rem;width:1.125rem;margin-left:.3125rem}.copy-links-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.copy-links-container .copy-links-title{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:23.4375rem}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:1.25rem;line-height:1.25rem}.copy-links-container .copy-links-title .subtitle{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red)}.copy-links-container .copy-links-title .copy-icon{background-image:url(/assets/svgs/copy.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.25rem;width:1.25rem;margin-left:.4375rem}.copy-links-container .copy-links{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:var(--paddingMedium);width:100%}.copy-links-container .copy-links .link-button{color:var(--subText);font-size:1rem;font-weight:600;cursor:pointer}.copy-links-container .copy-links .link-button:hover{text-decoration:underline}.visibility-config-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:flex-start;gap:.3125rem;margin-top:var(--marginMedium)}::ng-deep .creation-summary-dialog-container .form-field-content{gap:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreationSummaryDialogComponent, selector: "lib-creation-summary-dialog", ngImport: i0, template: "<div class=\"creation-summary-dialog-container\">\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n    <div class=\"title-row\">\n        <span class=\"title\">Execution Summary</span>\n        <span class=\"subtitle\">The following entities were created for this service</span>\n    </div>\n    <lib-form-field-container [showHeader]=\"false\">\n        <div class=\"copy-links-container\">\n            <span class=\"copy-links-title\">\n                <span class=\"title\">Entities</span>\n                <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n            </span>\n        </div>\n        <div class=\"form-group-row exec-operations-group\">\n            <div class=\"summary-groups-container\">\n                <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n                    <div class=\"summary-group-title\">{{group.title}}</div>\n                    <ul>\n                        <li\n                                *ngFor=\"let entity of group.entities\"\n                                (click)=\"selectZitiEntity(entity.name, 'all')\"\n                                [ngClass]=\"{selected: selectedEntityType === 'all'}\"\n                                class=\"entity-item drop-target-svc\"\n                        >\n                            <span class=\"spinner\" *ngIf=\"entity.status === 'loading'\"></span>\n                            <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"entity.status === 'done'\">\n                            <div class=\"retry\" *ngIf=\"entity.status === 'error'\" (click)=\"doRetry(entity)\"></div>\n                            <div class=\"icon-clear\" *ngIf=\"entity.status === 'error'\"></div>\n                            <span class=\"entity-name\" matTooltipShowDelay=\"1000\">\n                                {{ entity.name.length > 0 ? entity.name : 'SimpleService' }}\n                            </span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </lib-form-field-container>\n    <lib-form-field-container [showHeader]=\"false\" style=\"margin-top: 10px;\">\n        <div class=\"copy-links-container\">\n            <div class=\"copy-links-title\">\n                <div class=\"title-container\">\n                    <span class=\"title\">Copy Links</span>\n                    <div class=\"copy-icon\"></div>\n                </div>\n            </div>\n            <div class=\"copy-links\">\n                <div class=\"link-button\" (click)=\"copyCliCommands()\">CLI Commands</div>\n                <div class=\"link-button\" (click)=\"copyAPIRequests()\">API Requests</div>\n            </div>\n        </div>\n    </lib-form-field-container>\n\n    <div class=\"confirm-buttons-container\">\n        <button class=\"button save alert\" (click)=\"done()\">Done</button>\n        <button class=\"button save cancel\" (click)=\"confirm()\">Create another</button>\n    </div>\n</div>", styles: [".creation-summary-dialog-container{background-color:var(--formBackground);min-width:29.6875rem;border-radius:var(--modalBorderRadius);padding:var(--paddingXXL)}.creation-summary-dialog-container .title-row{display:flex;align-items:center;flex-direction:column;margin-bottom:var(--marginLarge)}.creation-summary-dialog-container .subtitle{color:var(--text)}.creation-summary-dialog-container .close{font-size:1.5625rem;top:.9375rem;right:.9375rem;width:2.1875rem;font-weight:600}.resource-type-container{display:flex;flex-direction:column;padding-left:var(--paddingLarge);padding-right:var(--paddingLarge)}.resource-type-container.disabled{opacity:.5}.resource-type-container.disabled select{cursor:not-allowed}.resource-type-container .resource-type-content{margin-top:1.25rem;flex-wrap:wrap}.entity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.summary-group ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:40.625rem;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:.3125rem;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.summary-group .entity-item[hidden]{display:none}.summary-group .entity-item.no-results{font-weight:400}.summary-group .entity-item.no-results:hover{background-color:transparent;border-left-color:transparent;cursor:default}.summary-groups-container{overflow:auto;height:100%;width:100%;max-width:18.75rem;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.exec-operations-group{padding:0}.confirm-buttons-container{display:flex;justify-content:space-between;align-items:center;flex-direction:row;width:100%;padding-top:var(--paddingMedium)}.confirm-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center}button.confirm{background-color:var(--secondary)}button.cancel{background-color:var(--primary)}.spinner{right:1em;top:1em;display:inline-block;width:1rem;height:1rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--placeholder);border-right:.125rem solid var(--placeholder);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem}.config-check:checked,.success-check:checked{background-color:var(--green)!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC);background-size:45%;background-position:center center;background-repeat:no-repeat;border:none}.config-check:checked:disabled,.success-check:checked:disabled{opacity:1!important}.success-check{border-radius:100%;top:.8125rem;left:.625rem;transition:var(--transition);border:.125rem var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:.625rem}.icon-clear{color:var(--red);margin-top:.25rem}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.125rem;width:1.125rem;margin-left:.3125rem}.copy-links-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.copy-links-container .copy-links-title{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:23.4375rem}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:1.25rem;line-height:1.25rem}.copy-links-container .copy-links-title .subtitle{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red)}.copy-links-container .copy-links-title .copy-icon{background-image:url(/assets/svgs/copy.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.25rem;width:1.25rem;margin-left:.4375rem}.copy-links-container .copy-links{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:var(--paddingMedium);width:100%}.copy-links-container .copy-links .link-button{color:var(--subText);font-size:1rem;font-weight:600;cursor:pointer}.copy-links-container .copy-links .link-button:hover{text-decoration:underline}.visibility-config-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:flex-start;gap:.3125rem;margin-top:var(--marginMedium)}::ng-deep .creation-summary-dialog-container .form-field-content{gap:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }] }); }
 }
 export { CreationSummaryDialogComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreationSummaryDialogComponent, decorators: [{

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: [{