@openziti/ziti-console-lib 0.12.1 → 0.12.2

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

@@ -287,7 +287,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-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]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.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 Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\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]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" 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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\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)]=\"svc.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\" [(jsonInvalid)]=\"formDataInvalid\"></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:.9375rem}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.InputText, selector: "[pInputText]" }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i12.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i13.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i14.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i15.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i16.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: i17.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i18.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-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]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.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 Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\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]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" 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                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\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)]=\"svc.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\" [(jsonInvalid)]=\"formDataInvalid\"></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:.9375rem}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.InputText, selector: "[pInputText]" }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i11.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i12.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i13.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i14.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i15.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i16.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: i17.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: i18.ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 export { ServiceFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{

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

@@ -248,7 +248,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 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 Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-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]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge router policy\"\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 Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy 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                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.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: 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 Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-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]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge router policy\"\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 Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy 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                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.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: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { ServiceEdgeRouterPolicyFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{

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

@@ -252,7 +252,7 @@ class ServicePolicyFormComponent 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 Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-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]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service policy\"\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 Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy 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                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy 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]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.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: 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 Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-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]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service policy\"\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 Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy 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                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy 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]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\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: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i8.PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: i11.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i12.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: i13.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { ServicePolicyFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{

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

@@ -185,7 +185,7 @@ class SessionFormComponent 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]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\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 [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'Click for detailed view'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\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: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "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"] }, { kind: "component", type: i9.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
+        ], 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]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\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 [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'Click for detailed view'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\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: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i6.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "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"] }, { kind: "component", type: i9.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
 }
 export { SessionFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SessionFormComponent, decorators: [{

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

@@ -223,7 +223,7 @@ class TerminatorFormComponent extends ProjectableForm {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminatorFormComponent, deps: [{ token: i1.TerminatorFormService }, { token: i2.SchemaService }, { token: i3.GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i5.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, 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 ? 'Terminator Details' : 'Create Terminator')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"terminator-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column one-half\">\n                <lib-form-field-container\n                        [title]=\"'Service'\"\n                        [contentStyle]=\"'z-index: 10003'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            [placeholder]=\"'Select a service'\"\n                            (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Router'\"\n                        [contentStyle]=\"'z-index: 10002'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n                            [placeholder]=\"'Select a router'\"\n                            (addNamedAttribute)=\"routerAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"routerAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity'\"\n                        [contentStyle]=\"'z-index: 10001'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            [placeholder]=\"'Select an identity'\"\n                            (addNamedAttribute)=\"identityAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"identityAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column one-half\">\n                <lib-form-field-container\n                        [title]=\"'Address'\"\n                        [contentStyle]=\"'z-index: 1001'\"\n                >\n                    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                        [layout]=\"'row'\"\n                        [contentStyle]=\"'z-index: 1001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Binding</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Identity Secret</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'row'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Hosting Cost</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Precedence</span>\n                        <select\n                                [(ngModel)]=\"formData.precedence\"\n                                [disabled]=\"true\"\n                                id=\"hostingPrecedence\"\n                                class=\"form-field-dropdown read-only\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </div>\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: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i8.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorFormComponent, selector: "lib-configuration", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, 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 ? 'Terminator Details' : 'Create Terminator')\"\n            [moreActions]=\"formData.moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n            [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n    ></lib-form-header>\n    <div class=\"terminator-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column one-half\">\n                <lib-form-field-container\n                        [title]=\"'Service'\"\n                        [contentStyle]=\"'z-index: 10003'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            [placeholder]=\"'Select a service'\"\n                            (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Router'\"\n                        [contentStyle]=\"'z-index: 10002'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n                            [placeholder]=\"'Select a router'\"\n                            (addNamedAttribute)=\"routerAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"routerAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Identity'\"\n                        [contentStyle]=\"'z-index: 10001'\"\n                >\n                    <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n                    <!--<lib-tag-selector\n                            [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            [placeholder]=\"'Select an identity'\"\n                            (addNamedAttribute)=\"identityAttributeChanged($event)\"\n                            (namedAttributeRemoved)=\"identityAttributeChanged()\"\n                    ></lib-tag-selector>-->\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column one-half\">\n                <lib-form-field-container\n                        [title]=\"'Address'\"\n                        [contentStyle]=\"'z-index: 1001'\"\n                >\n                    <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [showHeader]=\"false\"\n                        [layout]=\"'row'\"\n                        [contentStyle]=\"'z-index: 1001'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Binding</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Identity Secret</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [layout]=\"'row'\"\n                        [showHeader]=\"false\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Hosting Cost</span>\n                        <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <span class=\"form-field-title\">Precedence</span>\n                        <select\n                                [(ngModel)]=\"formData.precedence\"\n                                [disabled]=\"true\"\n                                id=\"hostingPrecedence\"\n                                class=\"form-field-dropdown read-only\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </div>\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: [".terminator-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}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i8.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { kind: "component", type: i9.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: i10.JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
 }
 export { TerminatorFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminatorFormComponent, decorators: [{

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

@@ -196,7 +196,7 @@ class TransitRouterFormComponent 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 Transit Router: ' : 'Create New Transit 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                    [showHeader]=\"false\"\n                    [layout]=\"'row'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Cost</span>\n                        </div>\n                        <input\n                            type=\"number\"\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router\"\n                            [ngClass]=\"{error: errors['cost']}\"\n                            [(ngModel)]=\"formData.cost\"\n                        />\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                (click)=\"toggleDisabled()\"\n                                [ngClass]=\"{ on: !formData.disabled }\"\n                                class=\"toggle\"\n                            >\n                                <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\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                <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]=\"'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                </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                        [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:.9375rem}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { 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.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i12.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 Transit Router: ' : 'Create New Transit 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                    [showHeader]=\"false\"\n                    [layout]=\"'row'\"\n                >\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Cost</span>\n                        </div>\n                        <input\n                            type=\"number\"\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router\"\n                            [ngClass]=\"{error: errors['cost']}\"\n                            [(ngModel)]=\"formData.cost\"\n                        />\n                    </div>\n                    <div class=\"config-item\">\n                        <div class=\"config-container toggle-container\">\n                            <div class=\"config-container-label\">ENABLED</div>\n                            <div\n                                (click)=\"toggleDisabled()\"\n                                [ngClass]=\"{ on: !formData.disabled }\"\n                                class=\"toggle\"\n                            >\n                                <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n                                <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n                                <div class=\"switch\"></div>\n                            </div>\n                        </div>\n                    </div>\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                <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]=\"'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                </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                        [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:.9375rem}.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 .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::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:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange"] }, { 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", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: i11.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i12.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { TransitRouterFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TransitRouterFormComponent, decorators: [{

package/esm2022/lib/models/api-session.mjs

@@ -4,4 +4,4 @@ export class APISession {
         this.tags = {};
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBpLXNlc3Npb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy96aXRpLWNvbnNvbGUtbGliL3NyYy9saWIvbW9kZWxzL2FwaS1zZXNzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sT0FBTyxVQUFVO0lBQXZCO1FBQ0ksU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLFNBQUksR0FBUSxFQUFFLENBQUM7SUFhbkIsQ0FBQztDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNsYXNzIEFQSVNlc3Npb24ge1xuICAgIG5hbWUgPSAnJztcbiAgICB0YWdzOiBhbnkgPSB7fTtcbiAgICBzZXJ2aWNlSWQ6IHN0cmluZztcbiAgICB0b2tlbjogc3RyaW5nO1xuICAgIHR5cGU6IHN0cmluZztcbiAgICBzZXJ2aWNlUG9saWNpZXM6IGFueVtdO1xuICAgIGlkZW50aXR5SWQ6IHN0cmluZztcbiAgICBzZXJ2aWNlOiBhbnk7XG4gICAgZWRnZVJvdXRlcnM6IGFueVtdO1xuICAgIGFwaVNlc3Npb25JZDogc3RyaW5nO1xuICAgIGFwaVNlc3Npb246IGFueTtcbiAgICB1cGRhdGVkQXQ6IGFueTtcbiAgICBjcmVhdGVkQXQ6IGFueTtcbiAgICBpZDogc3RyaW5nO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBpLXNlc3Npb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy96aXRpLWNvbnNvbGUtbGliL3NyYy9saWIvbW9kZWxzL2FwaS1zZXNzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sT0FBTyxVQUFVO0lBQXZCO1FBQ0ksU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLFNBQUksR0FBUSxFQUFFLENBQUM7SUFjbkIsQ0FBQztDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNsYXNzIEFQSVNlc3Npb24ge1xuICAgIG5hbWUgPSAnJztcbiAgICB0YWdzOiBhbnkgPSB7fTtcbiAgICBzZXJ2aWNlSWQ6IHN0cmluZztcbiAgICB0b2tlbjogc3RyaW5nO1xuICAgIHR5cGU6IHN0cmluZztcbiAgICBzZXJ2aWNlUG9saWNpZXM6IGFueVtdO1xuICAgIGlkZW50aXR5SWQ6IHN0cmluZztcbiAgICBzZXJ2aWNlOiBhbnk7XG4gICAgZWRnZVJvdXRlcnM6IGFueVtdO1xuICAgIGlzQ2VydEV4dGVuZGFibGU6IGJvb2xlYW47XG4gICAgaXNNZmFDb21wbGV0ZTogYm9vbGVhbjtcbiAgICBpc01mYVJlcXVpcmVkOiBib29sZWFuO1xuICAgIHVwZGF0ZWRBdDogYW55O1xuICAgIGNyZWF0ZWRBdDogYW55O1xuICAgIGlkOiBzdHJpbmc7XG59XG4iXX0=