@openziti/ziti-console-lib 0.3.1 → 0.4.0

package/assets/html/index.htm

@@ -15,7 +15,7 @@
         <span data-i18n="Dashboard"></span> 
     </div>
 </div>
-<div class="grid dashboard">
+<div id="DashHeader" class="grid dashboard">
     <div class="grid numbers">
         <div class="dial"></div>
         <a href="./identities">
@@ -55,7 +55,14 @@
             </div>
         </a>
     </div>
-    <div class="grid split wide">
+    <div id="NavLinks" class="grid split wide">
+        <a id="NetVisualizer" href="./network-visualizer" style="display: none">
+            <div class="iconLink">
+                <div class="network-visualizer"></div>
+                <div class="label" data-i18n="Network" ></div>
+                <div class="label" data-i18n="Visualizer"></div>
+            </div>
+        </a>
         <a href="https://docs.openziti.io/docs/downloads" target="_blank">
             <div class="iconLink">
                 <div class="downloads"></div>
@@ -116,6 +123,7 @@
 
                 page.idsObject.init(true);
                 summary.get();
+                page.showVisualizer();
             }, 
             events: function() {
                 context.addListener(page.idsObject.name, page.idsLoaded);
@@ -156,6 +164,16 @@
                 $("#Host").val("localhost");
                 $("#Port").val("80");
                 $("#HowToPort").val("80");
+            },
+            showVisualizer: function(e) {
+                const urlParams = new URLSearchParams(window.location.search);
+                const feature = urlParams.get('feature');
+                if (feature === 'visualizer') {
+                    $('#NetVisualizer').show();
+                    $('.grid.split.wide').addClass('exp');
+                    $('.grid.dashboard').addClass('exp');
+                    $('.grid.numbers').addClass('exp');
+                }
             }
         }
-    </script>
+    </script>

package/assets/languages/en-us.json

@@ -14,6 +14,8 @@
     "Recipe": "Recipe",
     "Recipes": "Recipes",
     "Services": "Services",
+    "Network": "Network",
+    "Visualizer": "Visualizer",
     "Service": "Service",
     "EdgeService": "Edge Service",
     "EdgeServices": "Edge Services",
@@ -327,4 +329,4 @@
     "ServiceAttributesPlaceholder": "Add attributes to group Services",
     "ServiceAttributesHelp": "Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.",
     "Encryption": "Encryption"
-}
+}

package/assets/styles/global.scss

@@ -887,4 +887,21 @@ lib-tag-selector {
       display: none;
     }
   }
+}
+
+.attag,
+.hashtag {
+  .tag-name {
+    padding-left: 10px;
+    padding-right: 10px;
+    color: #FFF;
+    position: relative;
+    float: left;
+    line-height: 30px;
+    border-radius: 7px;
+    margin-left: 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    transition: var(--transition);
+  }
 }

package/assets/styles/tables.css

@@ -41,6 +41,12 @@
 	grid-template-columns: auto 50%;
 }
 
+.split.exp {
+	display: grid;
+	grid-gap: 5px;
+	grid-template-columns: auto 40%;
+}
+
 .grid.aside {
 	display: grid;
 	grid-gap: 10px;
@@ -146,11 +152,23 @@
 }
 
 .grid.split.wide {
-	grid-template-columns: auto 49%;  
+	grid-template-columns: auto 49%;
 	column-gap: 20px;
     z-index: 10;
 }
 
+.grid.split.wide {
+    grid-template-columns: auto 49%;
+    column-gap: 20px;
+    z-index: 10;
+}
+
+.grid.split.wide.exp {
+	grid-template-columns: auto auto auto;
+	column-gap: 10px;
+	z-index: 10;
+}
+
 .grid.fived {
 	grid-template-columns: 50px 150px 150px auto 50px;
 }
@@ -183,11 +201,18 @@
 	row-gap: 20px;
 }
 
+.grid.dashboard.exp {
+	margin-top: 20px;
+	grid-template-columns: auto 30%;
+	column-gap: 20px;
+	row-gap: 20px;
+}
+
 .grid.numbers {
     grid-template-columns: 50px 15% auto 15% 15% 15% 15%;
-    column-gap: 20px;
+	column-gap: 20px;
     border-width: 3px;
-	border-style: solid;
+    border-style: solid;
     border-color: var(--white);
     background-color: rgba(255,255,255,0.5);
     padding: 22px;

package/assets/styles/ziti.css

@@ -1082,7 +1082,13 @@ aside .icon {
     height: 56px;
     background-position: center;
 }
-
+.network-visualizer {
+    background-image: url(../svgs/v8visualizer.svg);
+    background-size: contain;
+    width: 50px;
+    height: 50px;
+    background-position: center;
+}
 .dial {
     background-image: url(../svgs/dial.svg);
     background-size: contain;
@@ -1109,13 +1115,18 @@ aside .icon {
     border-width: 3px;
     border-style: solid;
     border-color: var(--white);
-    background-color: rgba(255,255,255,0.6);
+    background-color: rgba(255, 255, 255, 0.6);
     padding: 13px;
     border-radius: 12px;
     z-index: 10;
     box-shadow: var(--shadowLarge);
     transition: var(--transition);
     cursor: pointer;
+    height: 110px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 .iconLink:hover {
@@ -2051,6 +2062,20 @@ path.green {
     padding-left: 10px;
     padding-right: 10px;
     background-color: var(--primary);
+    color: transparent;
+    position: absolute;
+    float: left;
+    line-height: 30px;
+    border-radius: 7px;
+    margin-left: 2px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    transition: var(--transition);
+}
+
+.tag-name {
+    padding-left: 10px;
+    padding-right: 10px;
     color: #FFF;
     position: relative;
     float: left;
@@ -2064,6 +2089,8 @@ path.green {
 
 .attag {
     background-color: var(--secondary);
+    filter: brightness(90%);
+    position: absolute;
 }
 
 .tagButton {

package/assets/svgs/v8visualizer.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg id='Outline_Icons' style='enable-background:new 0 0 22.3 22.2;' version='1.1'
+     viewBox='0 0 22.3 22.2'
+     x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'>
+<style type='text/css'>
+	.st0 {
+    fill: #344459;
+  }
+
+  .st1 {
+    fill: #FFFFFF;
+  }
+
+  .st2 {
+    fill: #0273FB;
+  }
+
+  .st3 {
+    fill: #FEC000;
+  }
+
+  .st4 {
+    fill: #0ADC59;
+  }
+
+  .st5 {
+    fill: #FF0E49;
+  }
+</style>
+  <g>
+	<path class='st0' d='M17.2,19.4C17.2,19.4,17.1,19.4,17.2,19.4c-3.5-0.2-6.3-3.2-6.2-6.7l0-3.2C10.9,6,13.6,3,17.1,2.8
+		c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.2,0.5-0.5,0.5c-3,0.1-5.3,2.7-5.2,5.6v3.2c-0.1,3,2.2,5.5,5.2,5.7c0.3,0,0.5,0.2,0.5,0.5
+		C17.6,19.2,17.4,19.4,17.2,19.4z'/>
+</g>
+  <g>
+	<path class='st0'
+        d='M17.2,11.6H5.8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h11.3c0.3,0,0.5,0.2,0.5,0.5S17.4,11.6,17.2,11.6z'/>
+</g>
+  <g>
+	<path class='st1' d='M3,13.2c1.2,0,2.1-0.9,2.1-2.1S4.2,9,3,9s-2.1,0.9-2.1,2.1S1.9,13.2,3,13.2z'/>
+    <path class='st2' d='M3,14.1c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3s3,1.3,3,3C6,12.8,4.7,14.1,3,14.1z M3,9.9c-0.7,0-1.2,0.6-1.2,1.2
+		s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2S3.7,9.9,3,9.9z'/>
+</g>
+  <g>
+	<path class='st1' d='M19.3,21c1.2,0,2.1-0.9,2.1-2.1s-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1S18.1,21,19.3,21z'/>
+    <path class='st3' d='M19.3,21.9c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S20.9,21.9,19.3,21.9z M19.3,17.6c-0.7,0-1.2,0.6-1.2,1.2
+		s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2S20,17.6,19.3,17.6z'/>
+</g>
+  <g>
+	<path class='st1' d='M19.3,13.2c1.2,0,2.1-0.9,2.1-2.1S20.4,9,19.3,9s-2.1,0.9-2.1,2.1S18.1,13.2,19.3,13.2z'/>
+    <path class='st4' d='M19.3,14.1c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3s3,1.3,3,3C22.3,12.8,20.9,14.1,19.3,14.1z M19.3,9.9
+		c-0.7,0-1.2,0.6-1.2,1.2s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2S20,9.9,19.3,9.9z'/>
+</g>
+  <g>
+	<path class='st1' d='M19.3,5.4c1.2,0,2.1-0.9,2.1-2.1s-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1S18.1,5.4,19.3,5.4z'/>
+    <path class='st5' d='M19.3,6.3c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S20.9,6.3,19.3,6.3z M19.3,2.1c-0.7,0-1.2,0.6-1.2,1.2
+		s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2S20,2.1,19.3,2.1z'/>
+</g>
+</svg>

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:475px;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:25px;top:15px;right:15px;width:35px;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:20px;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:0px;margin-block-start:var(--marginSmall);max-height:650px;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:5px;font-weight:600;font-size:16px;padding-top:3px;padding-bottom:3px;position:relative;cursor:pointer;border-left-width:5px;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:5px;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:300px;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:15px;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:25px;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:100px;height:40px;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:16px;height:16px;border-radius:50%;background:transparent;border-top:2px solid var(--placeholder);border-right:2px solid var(--placeholder);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:17px;height:17px;cursor:pointer;background-color:var(--navigation);margin:4px 0 0}.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:13px;left:10px;transition:var(--transition);border:2px var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:10px}.icon-clear{color:var(--red);margin-top:4px}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:18px;background-repeat:no-repeat;height:18px;width:18px;margin-left:5px}.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:375px}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:20px;line-height:20px}.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:18px;background-repeat:no-repeat;height:20px;width:20px;margin-left:7px}.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:16px;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:5px;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", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader"], 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:475px;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:25px;top:15px;right:15px;width:35px;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:20px;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:0px;margin-block-start:var(--marginSmall);max-height:650px;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:5px;font-weight:600;font-size:16px;padding-top:3px;padding-bottom:3px;position:relative;cursor:pointer;border-left-width:5px;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:5px;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:300px;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:15px;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:25px;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:100px;height:40px;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:16px;height:16px;border-radius:50%;background:transparent;border-top:2px solid var(--placeholder);border-right:2px solid var(--placeholder);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:17px;height:17px;cursor:pointer;background-color:var(--navigation);margin:4px 0 0}.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:13px;left:10px;transition:var(--transition);border:2px var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:10px}.icon-clear{color:var(--red);margin-top:4px}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:18px;background-repeat:no-repeat;height:18px;width:18px;margin-left:5px}.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:375px}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:20px;line-height:20px}.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:18px;background-repeat:no-repeat;height:20px;width:20px;margin-left:7px}.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:16px;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:5px;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", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }] }); }
 }
 export { CreationSummaryDialogComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreationSummaryDialogComponent, decorators: [{

package/esm2022/lib/features/multi-action-button/multi-action-button.component.mjs

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ng-click-outside";
+class MultiActionButtonComponent {
+    constructor() {
+        this.actionRequested = new EventEmitter();
+        this.showMoreActions = false;
+    }
+    showMoreActionsMenu() {
+        this.showMoreActions = true;
+    }
+    closeMoreActionsMenu() {
+        this.showMoreActions = false;
+    }
+    actionClicked(action) {
+        this.actionRequested.emit(action);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\n</div>\n", styles: [".multi-action-button-container{position:absolute;right:15px;top:10px;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:25px}.multi-action-button-container .form-field-action .primary-action-button{padding-left:10px;padding-right:10px;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);color:var(--white);cursor:pointer;border-top-left-radius:7px;border-bottom-left-radius:7px;border-color:var(--stroke);box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(1px)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:30px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:7px;border-bottom-right-radius:7px;border-color:var(--stroke);box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(1px)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:5px 5px 5px 10px;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+}
+export { MultiActionButtonComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multi-action-button', template: "<div class=\"multi-action-button-container\">\n    <div class=\"form-field-action\"\n         *ngIf=\"actions\"\n         (clickOutside)=\"closeMoreActionsMenu()\"\n    >\n        <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n        <div class=\"secondary-action-button\"\n             *ngIf=\"actions.length > 1\"\n             (click)=\"showMoreActionsMenu()\"\n        ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n    </div>\n    <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n        <ul>\n            <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n        </ul>\n    </div>\n</div>\n", styles: [".multi-action-button-container{position:absolute;right:15px;top:10px;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:25px}.multi-action-button-container .form-field-action .primary-action-button{padding-left:10px;padding-right:10px;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--primary);color:var(--white);cursor:pointer;border-top-left-radius:7px;border-bottom-left-radius:7px;border-color:var(--stroke);box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(1px)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:30px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:7px;border-bottom-right-radius:7px;border-color:var(--stroke);box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 2px 3px 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(1px)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:5px 5px 5px 10px;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}\n"] }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], actionRequested: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktYWN0aW9uLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy96aXRpLWNvbnNvbGUtbGliL3NyYy9saWIvZmVhdHVyZXMvbXVsdGktYWN0aW9uLWJ1dHRvbi9tdWx0aS1hY3Rpb24tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ppdGktY29uc29sZS1saWIvc3JjL2xpYi9mZWF0dXJlcy9tdWx0aS1hY3Rpb24tYnV0dG9uL211bHRpLWFjdGlvbi1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQzs7OztBQUVyRSxNQUthLDBCQUEwQjtJQUx2QztRQVFZLG9CQUFlLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7UUFFdkUsb0JBQWUsR0FBRyxLQUFLLENBQUM7S0FhekI7SUFYQyxtQkFBbUI7UUFDakIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7SUFDOUIsQ0FBQztJQUVELG9CQUFvQjtRQUNsQixJQUFJLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQztJQUMvQixDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQU07UUFDbEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQzsrR0FqQlUsMEJBQTBCO21HQUExQiwwQkFBMEIsZ0pDUHZDLCt2QkFpQkE7O1NEVmEsMEJBQTBCOzRGQUExQiwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UseUJBQXlCOzhCQU0xQixPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItbXVsdGktYWN0aW9uLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tdWx0aS1hY3Rpb24tYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbXVsdGktYWN0aW9uLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE11bHRpQWN0aW9uQnV0dG9uQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSBhY3Rpb25zOiBhbnlbXTtcbiAgQE91dHB1dCgpIGFjdGlvblJlcXVlc3RlZDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBzaG93TW9yZUFjdGlvbnMgPSBmYWxzZTtcblxuICBzaG93TW9yZUFjdGlvbnNNZW51KCkge1xuICAgIHRoaXMuc2hvd01vcmVBY3Rpb25zID0gdHJ1ZTtcbiAgfVxuXG4gIGNsb3NlTW9yZUFjdGlvbnNNZW51KCkge1xuICAgIHRoaXMuc2hvd01vcmVBY3Rpb25zID0gZmFsc2U7XG4gIH1cblxuICBhY3Rpb25DbGlja2VkKGFjdGlvbikge1xuICAgIHRoaXMuYWN0aW9uUmVxdWVzdGVkLmVtaXQoYWN0aW9uKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm11bHRpLWFjdGlvbi1idXR0b24tY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGQtYWN0aW9uXCJcbiAgICAgICAgICpuZ0lmPVwiYWN0aW9uc1wiXG4gICAgICAgICAoY2xpY2tPdXRzaWRlKT1cImNsb3NlTW9yZUFjdGlvbnNNZW51KClcIlxuICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cInByaW1hcnktYWN0aW9uLWJ1dHRvblwiIChjbGljayk9XCJhY3Rpb25DbGlja2VkKGFjdGlvbnNbMF0pXCI+e3thY3Rpb25zWzBdLmxhYmVsfX08L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNlY29uZGFyeS1hY3Rpb24tYnV0dG9uXCJcbiAgICAgICAgICAgICAqbmdJZj1cImFjdGlvbnMubGVuZ3RoID4gMVwiXG4gICAgICAgICAgICAgKGNsaWNrKT1cInNob3dNb3JlQWN0aW9uc01lbnUoKVwiXG4gICAgICAgID48ZGl2IGNsYXNzPVwic2Vjb25kYXJ5LWFjdGlvbnMtYXJyb3cgaWNvbi1wcmV2XCI+PC9kaXY+PC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIm11bHRpLWFjdGlvbi1idXR0b24tZHJvcGRvd25cIiAqbmdJZj1cInNob3dNb3JlQWN0aW9uc1wiPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGkgKm5nRm9yPVwibGV0IGFjdGlvbiBvZiBhY3Rpb25zXCIgY2xhc3M9XCJjb25maXJtLWl0ZW0tbmFtZVwiIChjbGljayk9XCJhY3Rpb25DbGlja2VkKGFjdGlvbilcIj57e2FjdGlvbi5sYWJlbH19PC9saT5cbiAgICAgICAgPC91bD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2022/lib/features/projectable-forms/configuration/configuration-form.component.mjs

@@ -198,7 +198,7 @@ class ConfigurationFormComponent extends ProjectableForm {
         this._apiData = data;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader"], outputs: ["actionRequested"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i9.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i10.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n            [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"config-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Config Name'\" [label]=\"'Required'\">\n                    <input\n                        id=\"ConfigName\"\n                        type=\"text\"\n                        maxlength=\"500\"\n                        placeholder=\"Name this config\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                    >\n                </lib-form-field-container>\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"config-title-row\">\n                        <span class=\"form-field-title\">Configuration Data</span>\n                        <div class=\"form-header-toggle-container\">\n                                        <span\n                                                class=\"toggle-option-text\"\n                                                [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                                (click)=\"svc.toggleJSONView()\"\n                                        >\n                                            FORM\n                                        </span>\n                            <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                <div\n                                        class=\"form-toggle-switch\"\n                                        [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                >\n                                    <div class=\"form-toggle-indicator\"></div>\n                                    <div class=\"form-toggle-indicator\"></div>\n                                </div>\n                            </div>\n                            <span\n                                    class=\"toggle-option-text\"\n                                    [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                    (click)=\"svc.toggleJSONView()\"\n                            >\n                                            JSON\n                                        </span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n                        </div>\n                        <select\n                                id=\"ConfigTypes\"\n                                class=\"config-type-select\"\n                                [(ngModel)]=\"formData.configTypeId\"\n                                (change)=\"getSchema()\"\n                                [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n                        >\n                            <option value=\"\">Select A Type...</option>\n                            <option *ngFor=\"let config of options\"\n                                    [value]=\"config.id\">{{config.name}}\n                            </option>\n                        </select>\n                        <lib-config-editor\n                                [hidden]=\"configTypeEmpty\"\n                                [schema]=\"selectedSchema\"\n                                [(configData)]=\"formData.data\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"errors\"\n                                #configEditor\n                        ></lib-config-editor>\n                    </div>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i9.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i10.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 export { ConfigurationFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, decorators: [{

package/esm2022/lib/features/projectable-forms/edge-router/edge-router-form.component.mjs

@@ -158,7 +158,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{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 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     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 %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader"], outputs: ["actionRequested"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i9.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i10.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i11.TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: i12.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{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 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     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 %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i7.PreviewListComponent, selector: "lib-preview-list", inputs: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i9.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i10.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i11.TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: i12.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { EdgeRouterFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{