@openziti/ziti-console-lib 0.5.1 → 0.6.1

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

@@ -0,0 +1,127 @@
+import { Injectable, Inject } from '@angular/core';
+import { ZITI_DATA_SERVICE } from "../../../services/ziti-data.service";
+import { cloneDeep, isEmpty, keys } from "lodash";
+import { GrowlerModel } from "../../messaging/growler.model";
+import { SHAREDZ_EXTENSION } from "../../extendable/extensions-noop.service";
+import { AuthPolicy } from "../../../models/auth-policy";
+import * as i0 from "@angular/core";
+import * as i1 from "../../messaging/growler.service";
+import * as i2 from "../../../services/validation.service";
+import * as i3 from "../../../services/ziti-data.service";
+class AuthPolicyFormService {
+    constructor(dataService, extService, growlerService, validationService) {
+        this.dataService = dataService;
+        this.extService = extService;
+        this.growlerService = growlerService;
+        this.validationService = validationService;
+        this.items = [];
+        this.errors = [];
+        this.saveDisabled = false;
+        this.jwtSigners = [];
+        this.jwtSignerNamedAttributes = [];
+        this.jwtSignerNamedAttributesMap = {};
+        this.jwtSignersLoading = false;
+        this.paging = {
+            filter: "",
+            noSearch: true,
+            order: "asc",
+            page: 1,
+            searchOn: "name",
+            sort: "name",
+            total: 100
+        };
+    }
+    getJwtSignerNamedAttributes() {
+        return this.dataService.get('external-jwt-signers', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
+            const namedAttributes = result.data.map((identity) => {
+                this.jwtSignerNamedAttributesMap[identity.name] = identity.id;
+                return identity.name;
+            });
+            this.jwtSignerNamedAttributes = namedAttributes;
+            return namedAttributes;
+        });
+    }
+    getJwtSigners(filters = [], page = 1) {
+        this.jwtSignersLoading = true;
+        const paging = cloneDeep(this.paging);
+        if (filters.length > 0) {
+            paging.noSearch = false;
+        }
+        return this.dataService.get('external-jwt-signers', paging, filters).then((result) => {
+            this.jwtSigners = result.data;
+        }).finally(() => {
+            this.jwtSignersLoading = false;
+        });
+    }
+    save(formData) {
+        const isUpdate = !isEmpty(formData.id);
+        const data = this.getAuthPolicyDataModel(formData, isUpdate);
+        let prom;
+        if (isUpdate) {
+            prom = this.dataService.put('auth-policies', data, formData.id, true);
+        }
+        else {
+            prom = this.dataService.post('auth-policies', data, true);
+        }
+        return prom.then(async (result) => {
+            const id = isUpdate ? formData.id : (result?.data?.id || result?.id);
+            let config = await this.dataService.getSubdata('auth-policies', id, '').then((svcData) => {
+                return svcData.data;
+            });
+            return this.extService.formDataSaved(config).then((formSavedResult) => {
+                if (!formSavedResult) {
+                    return config;
+                }
+                const growlerData = new GrowlerModel('success', 'Success', `Auth Policy ${isUpdate ? 'Updated' : 'Created'}`, `Successfully ${isUpdate ? 'updated' : 'created'} Auth Policy: ${formData.name}`);
+                this.growlerService.show(growlerData);
+                return config;
+            }).catch((result) => {
+                return false;
+            });
+        }).catch((resp) => {
+            let errorMessage;
+            if (resp?.error?.error?.cause?.message) {
+                errorMessage = resp?.error?.error?.cause?.message;
+            }
+            else if (resp?.error?.error?.cause?.reason) {
+                errorMessage = resp?.error?.error?.cause?.reason;
+            }
+            else if (resp?.error?.message) {
+                errorMessage = resp?.error?.message;
+            }
+            else {
+                errorMessage = 'An unknown error occurred';
+            }
+            const growlerData = new GrowlerModel('error', 'Error', `Error Creating Auth Policy`, errorMessage);
+            this.growlerService.show(growlerData);
+            throw resp;
+        });
+    }
+    getAuthPolicyDataModel(formData, isUpdate) {
+        const saveModel = new AuthPolicy();
+        const modelProperties = keys(saveModel);
+        modelProperties.forEach((prop) => {
+            switch (prop) {
+                default:
+                    saveModel[prop] = formData[prop];
+            }
+        });
+        return saveModel;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: i1.GrowlerService }, { token: i2.ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, providedIn: 'root' }); }
+}
+export { AuthPolicyFormService };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.ZitiDataService, decorators: [{
+                    type: Inject,
+                    args: [ZITI_DATA_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }, { type: i1.GrowlerService }, { type: i2.ValidationService }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0aC1wb2xpY3ktZm9ybS5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMveml0aS1jb25zb2xlLWxpYi9zcmMvbGliL2ZlYXR1cmVzL3Byb2plY3RhYmxlLWZvcm1zL2F1dGgtcG9saWN5L2F1dGgtcG9saWN5LWZvcm0uc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsVUFBVSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUMsaUJBQWlCLEVBQWtCLE1BQU0scUNBQXFDLENBQUM7QUFDdkYsT0FBTyxFQUFDLFNBQVMsRUFBNEIsT0FBTyxFQUFTLElBQUksRUFBQyxNQUFNLFFBQVEsQ0FBQztBQUNqRixPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFFM0QsT0FBTyxFQUFtQixpQkFBaUIsRUFBQyxNQUFNLDBDQUEwQyxDQUFDO0FBRTdGLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQzs7Ozs7QUFFdkQsTUFHYSxxQkFBcUI7SUF3QjlCLFlBQ3VDLFdBQTRCLEVBQzdCLFVBQTRCLEVBQ3RELGNBQThCLEVBQzlCLGlCQUFvQztRQUhULGdCQUFXLEdBQVgsV0FBVyxDQUFpQjtRQUM3QixlQUFVLEdBQVYsVUFBVSxDQUFrQjtRQUN0RCxtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFDOUIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQTFCaEQsVUFBSyxHQUFVLEVBQUUsQ0FBQztRQUNsQixXQUFNLEdBQVUsRUFBRSxDQUFDO1FBQ25CLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRXJCLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDaEIsNkJBQXdCLEdBQUcsRUFBRSxDQUFDO1FBQzlCLGdDQUEyQixHQUFHLEVBQUUsQ0FBQztRQUNqQyxzQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFLMUIsV0FBTSxHQUFHO1lBQ0wsTUFBTSxFQUFFLEVBQUU7WUFDVixRQUFRLEVBQUUsSUFBSTtZQUNkLEtBQUssRUFBRSxLQUFLO1lBQ1osSUFBSSxFQUFFLENBQUM7WUFDUCxRQUFRLEVBQUUsTUFBTTtZQUNoQixJQUFJLEVBQUUsTUFBTTtZQUNaLEtBQUssRUFBRSxHQUFHO1NBQ2IsQ0FBQTtJQVFELENBQUM7SUFFTSwyQkFBMkI7UUFDOUIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxzQkFBc0IsRUFBRSxFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUNuSixNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFO2dCQUNqRCxJQUFJLENBQUMsMkJBQTJCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLFFBQVEsQ0FBQyxFQUFFLENBQUM7Z0JBQzlELE9BQU8sUUFBUSxDQUFDLElBQUksQ0FBQztZQUN6QixDQUFDLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyx3QkFBd0IsR0FBRyxlQUFlLENBQUM7WUFDaEQsT0FBTyxlQUFlLENBQUM7UUFDM0IsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsYUFBYSxDQUFDLE9BQU8sR0FBRyxFQUFFLEVBQUUsSUFBSSxHQUFHLENBQUM7UUFDaEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztRQUM5QixNQUFNLE1BQU0sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3RDLElBQUksT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDcEIsTUFBTSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDM0I7UUFDRCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLHNCQUFzQixFQUFFLE1BQU0sRUFBRSxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxNQUFXLEVBQUUsRUFBRTtZQUN0RixJQUFJLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUM7UUFDbEMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFDbkMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsSUFBSSxDQUFDLFFBQVE7UUFDVCxNQUFNLFFBQVEsR0FBRyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdkMsTUFBTSxJQUFJLEdBQVEsSUFBSSxDQUFDLHNCQUFzQixDQUFDLFFBQVEsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUNsRSxJQUFJLElBQUksQ0FBQztRQUNULElBQUksUUFBUSxFQUFFO1lBQ1YsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLGVBQWUsRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsQ0FBQztTQUN6RTthQUFNO1lBQ0gsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7U0FDN0Q7UUFFRCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQVcsRUFBRSxFQUFFO1lBQ25DLE1BQU0sRUFBRSxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLEVBQUUsSUFBSSxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDckUsSUFBSSxNQUFNLEdBQUcsTUFBTSxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQyxlQUFlLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUNyRixPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDeEIsQ0FBQyxDQUFDLENBQUM7WUFDSCxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLGVBQW9CLEVBQUUsRUFBRTtnQkFDdkUsSUFBSSxDQUFDLGVBQWUsRUFBRTtvQkFDbEIsT0FBTyxNQUFNLENBQUM7aUJBQ2pCO2dCQUNELE1BQU0sV0FBVyxHQUFHLElBQUksWUFBWSxDQUNoQyxTQUFTLEVBQ1QsU0FBUyxFQUNULGVBQWUsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFBRSxFQUNqRCxnQkFBZ0IsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsaUJBQWlCLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FDbkYsQ0FBQztnQkFDRixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDdEMsT0FBTyxNQUFNLENBQUM7WUFDbEIsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7Z0JBQ2hCLE9BQU8sS0FBSyxDQUFDO1lBQ2pCLENBQUMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDZCxJQUFJLFlBQVksQ0FBQztZQUNqQixJQUFJLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7Z0JBQ3BDLFlBQVksR0FBRyxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDO2FBQ3JEO2lCQUFNLElBQUksSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRTtnQkFDMUMsWUFBWSxHQUFHLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUM7YUFDcEQ7aUJBQUssSUFBSSxJQUFJLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtnQkFDNUIsWUFBWSxHQUFHLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDO2FBQ3ZDO2lCQUFNO2dCQUNILFlBQVksR0FBRywyQkFBMkIsQ0FBQzthQUM5QztZQUNELE1BQU0sV0FBVyxHQUFHLElBQUksWUFBWSxDQUNoQyxPQUFPLEVBQ1AsT0FBTyxFQUNQLDRCQUE0QixFQUM1QixZQUFZLENBQ2YsQ0FBQztZQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ3RDLE1BQU0sSUFBSSxDQUFDO1FBQ2YsQ0FBQyxDQUFDLENBQUE7SUFDTixDQUFDO0lBRUQsc0JBQXNCLENBQUMsUUFBUSxFQUFFLFFBQVE7UUFDckMsTUFBTSxTQUFTLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztRQUNuQyxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDeEMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQzdCLFFBQU8sSUFBSSxFQUFFO2dCQUNUO29CQUNJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDeEM7UUFDTCxDQUFDLENBQUMsQ0FBQztRQUNILE9BQU8sU0FBUyxDQUFDO0lBQ3JCLENBQUM7K0dBdEhRLHFCQUFxQixrQkF5QmxCLGlCQUFpQixhQUNqQixpQkFBaUI7bUhBMUJwQixxQkFBcUIsY0FGbEIsTUFBTTs7U0FFVCxxQkFBcUI7NEZBQXJCLHFCQUFxQjtrQkFIakMsVUFBVTttQkFBQztvQkFDUixVQUFVLEVBQUUsTUFBTTtpQkFDckI7OzBCQTBCUSxNQUFNOzJCQUFDLGlCQUFpQjs7MEJBQ3hCLE1BQU07MkJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJbmplY3RhYmxlLCBJbmplY3R9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtaSVRJX0RBVEFfU0VSVklDRSwgWml0aURhdGFTZXJ2aWNlfSBmcm9tIFwiLi4vLi4vLi4vc2VydmljZXMveml0aS1kYXRhLnNlcnZpY2VcIjtcbmltcG9ydCB7Y2xvbmVEZWVwLCBkZWZlciwgaW52ZXJ0LCBpc0Jvb2xlYW4sIGlzRW1wdHksIGlzTmlsLCBrZXlzfSBmcm9tIFwibG9kYXNoXCI7XG5pbXBvcnQge0dyb3dsZXJNb2RlbH0gZnJvbSBcIi4uLy4uL21lc3NhZ2luZy9ncm93bGVyLm1vZGVsXCI7XG5pbXBvcnQge0dyb3dsZXJTZXJ2aWNlfSBmcm9tIFwiLi4vLi4vbWVzc2FnaW5nL2dyb3dsZXIuc2VydmljZVwiO1xuaW1wb3J0IHtFeHRlbnNpb25TZXJ2aWNlLCBTSEFSRURaX0VYVEVOU0lPTn0gZnJvbSBcIi4uLy4uL2V4dGVuZGFibGUvZXh0ZW5zaW9ucy1ub29wLnNlcnZpY2VcIjtcbmltcG9ydCB7VmFsaWRhdGlvblNlcnZpY2V9IGZyb20gXCIuLi8uLi8uLi9zZXJ2aWNlcy92YWxpZGF0aW9uLnNlcnZpY2VcIjtcbmltcG9ydCB7QXV0aFBvbGljeX0gZnJvbSBcIi4uLy4uLy4uL21vZGVscy9hdXRoLXBvbGljeVwiO1xuXG5ASW5qZWN0YWJsZSh7XG4gICAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIEF1dGhQb2xpY3lGb3JtU2VydmljZSB7XG5cbiAgICBpdGVtczogYW55W10gPSBbXTtcbiAgICBlcnJvcnM6IGFueVtdID0gW107XG4gICAgc2F2ZURpc2FibGVkID0gZmFsc2U7XG5cbiAgICBqd3RTaWduZXJzID0gW107XG4gICAgand0U2lnbmVyTmFtZWRBdHRyaWJ1dGVzID0gW107XG4gICAgand0U2lnbmVyTmFtZWRBdHRyaWJ1dGVzTWFwID0ge307XG4gICAgand0U2lnbmVyc0xvYWRpbmcgPSBmYWxzZTtcblxuICAgIHNlbGVjdGVkU2Vjb25kYXJ5Snd0U2lnbmVyO1xuICAgIGZpbHRlcmVkSnd0U2lnbmVycztcblxuICAgIHBhZ2luZyA9IHtcbiAgICAgICAgZmlsdGVyOiBcIlwiLFxuICAgICAgICBub1NlYXJjaDogdHJ1ZSxcbiAgICAgICAgb3JkZXI6IFwiYXNjXCIsXG4gICAgICAgIHBhZ2U6IDEsXG4gICAgICAgIHNlYXJjaE9uOiBcIm5hbWVcIixcbiAgICAgICAgc29ydDogXCJuYW1lXCIsXG4gICAgICAgIHRvdGFsOiAxMDBcbiAgICB9XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChaSVRJX0RBVEFfU0VSVklDRSkgcHJpdmF0ZSBkYXRhU2VydmljZTogWml0aURhdGFTZXJ2aWNlLFxuICAgICAgICBASW5qZWN0KFNIQVJFRFpfRVhURU5TSU9OKXByaXZhdGUgZXh0U2VydmljZTogRXh0ZW5zaW9uU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBncm93bGVyU2VydmljZTogR3Jvd2xlclNlcnZpY2UsXG4gICAgICAgIHByaXZhdGUgdmFsaWRhdGlvblNlcnZpY2U6IFZhbGlkYXRpb25TZXJ2aWNlXG4gICAgKSB7XG4gICAgfVxuXG4gICAgcHVibGljIGdldEp3dFNpZ25lck5hbWVkQXR0cmlidXRlcygpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZGF0YVNlcnZpY2UuZ2V0KCdleHRlcm5hbC1qd3Qtc2lnbmVycycsIHtyYXdGaWx0ZXI6IHRydWUsIGZpbHRlcjogJycsIHNvcnQ6ICduYW1lJywgb3JkZXI6ICdhc2MnLCB0b3RhbDogLTEsIHBhZ2U6IDF9LCBbXSkudGhlbigocmVzdWx0KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBuYW1lZEF0dHJpYnV0ZXMgPSByZXN1bHQuZGF0YS5tYXAoKGlkZW50aXR5KSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5qd3RTaWduZXJOYW1lZEF0dHJpYnV0ZXNNYXBbaWRlbnRpdHkubmFtZV0gPSBpZGVudGl0eS5pZDtcbiAgICAgICAgICAgICAgICByZXR1cm4gaWRlbnRpdHkubmFtZTtcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgdGhpcy5qd3RTaWduZXJOYW1lZEF0dHJpYnV0ZXMgPSBuYW1lZEF0dHJpYnV0ZXM7XG4gICAgICAgICAgICByZXR1cm4gbmFtZWRBdHRyaWJ1dGVzO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBnZXRKd3RTaWduZXJzKGZpbHRlcnMgPSBbXSwgcGFnZSA9IDEpIHtcbiAgICAgICAgdGhpcy5qd3RTaWduZXJzTG9hZGluZyA9IHRydWU7XG4gICAgICAgIGNvbnN0IHBhZ2luZyA9IGNsb25lRGVlcCh0aGlzLnBhZ2luZyk7XG4gICAgICAgIGlmIChmaWx0ZXJzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgIHBhZ2luZy5ub1NlYXJjaCA9IGZhbHNlO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiB0aGlzLmRhdGFTZXJ2aWNlLmdldCgnZXh0ZXJuYWwtand0LXNpZ25lcnMnLCBwYWdpbmcsIGZpbHRlcnMpLnRoZW4oKHJlc3VsdDogYW55KSA9PiB7XG4gICAgICAgICAgICB0aGlzLmp3dFNpZ25lcnMgPSByZXN1bHQuZGF0YTtcbiAgICAgICAgfSkuZmluYWxseSgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLmp3dFNpZ25lcnNMb2FkaW5nID0gZmFsc2U7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHNhdmUoZm9ybURhdGEpIHtcbiAgICAgICAgY29uc3QgaXNVcGRhdGUgPSAhaXNFbXB0eShmb3JtRGF0YS5pZCk7XG4gICAgICAgIGNvbnN0IGRhdGE6IGFueSA9IHRoaXMuZ2V0QXV0aFBvbGljeURhdGFNb2RlbChmb3JtRGF0YSwgaXNVcGRhdGUpO1xuICAgICAgICBsZXQgcHJvbTtcbiAgICAgICAgaWYgKGlzVXBkYXRlKSB7XG4gICAgICAgICAgICBwcm9tID0gdGhpcy5kYXRhU2VydmljZS5wdXQoJ2F1dGgtcG9saWNpZXMnLCBkYXRhLCBmb3JtRGF0YS5pZCwgdHJ1ZSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBwcm9tID0gdGhpcy5kYXRhU2VydmljZS5wb3N0KCdhdXRoLXBvbGljaWVzJywgZGF0YSwgdHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gcHJvbS50aGVuKGFzeW5jIChyZXN1bHQ6IGFueSkgPT4ge1xuICAgICAgICAgICAgY29uc3QgaWQgPSBpc1VwZGF0ZSA/IGZvcm1EYXRhLmlkIDogKHJlc3VsdD8uZGF0YT8uaWQgfHwgcmVzdWx0Py5pZCk7XG4gICAgICAgICAgICBsZXQgY29uZmlnID0gYXdhaXQgdGhpcy5kYXRhU2VydmljZS5nZXRTdWJkYXRhKCdhdXRoLXBvbGljaWVzJywgaWQsICcnKS50aGVuKChzdmNEYXRhKSA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIHN2Y0RhdGEuZGF0YTtcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgcmV0dXJuIHRoaXMuZXh0U2VydmljZS5mb3JtRGF0YVNhdmVkKGNvbmZpZykudGhlbigoZm9ybVNhdmVkUmVzdWx0OiBhbnkpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIWZvcm1TYXZlZFJlc3VsdCkge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gY29uZmlnO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBjb25zdCBncm93bGVyRGF0YSA9IG5ldyBHcm93bGVyTW9kZWwoXG4gICAgICAgICAgICAgICAgICAgICdzdWNjZXNzJyxcbiAgICAgICAgICAgICAgICAgICAgJ1N1Y2Nlc3MnLFxuICAgICAgICAgICAgICAgICAgICBgQXV0aCBQb2xpY3kgJHtpc1VwZGF0ZSA/ICdVcGRhdGVkJyA6ICdDcmVhdGVkJ31gLFxuICAgICAgICAgICAgICAgICAgICBgU3VjY2Vzc2Z1bGx5ICR7aXNVcGRhdGUgPyAndXBkYXRlZCcgOiAnY3JlYXRlZCd9IEF1dGggUG9saWN5OiAke2Zvcm1EYXRhLm5hbWV9YCxcbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgIHRoaXMuZ3Jvd2xlclNlcnZpY2Uuc2hvdyhncm93bGVyRGF0YSk7XG4gICAgICAgICAgICAgICAgcmV0dXJuIGNvbmZpZztcbiAgICAgICAgICAgIH0pLmNhdGNoKChyZXN1bHQpID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSkuY2F0Y2goKHJlc3ApID0+IHtcbiAgICAgICAgICAgIGxldCBlcnJvck1lc3NhZ2U7XG4gICAgICAgICAgICBpZiAocmVzcD8uZXJyb3I/LmVycm9yPy5jYXVzZT8ubWVzc2FnZSkge1xuICAgICAgICAgICAgICAgIGVycm9yTWVzc2FnZSA9IHJlc3A/LmVycm9yPy5lcnJvcj8uY2F1c2U/Lm1lc3NhZ2U7XG4gICAgICAgICAgICB9IGVsc2UgaWYgKHJlc3A/LmVycm9yPy5lcnJvcj8uY2F1c2U/LnJlYXNvbikge1xuICAgICAgICAgICAgICAgIGVycm9yTWVzc2FnZSA9IHJlc3A/LmVycm9yPy5lcnJvcj8uY2F1c2U/LnJlYXNvbjtcbiAgICAgICAgICAgIH1lbHNlIGlmIChyZXNwPy5lcnJvcj8ubWVzc2FnZSkge1xuICAgICAgICAgICAgICAgIGVycm9yTWVzc2FnZSA9IHJlc3A/LmVycm9yPy5tZXNzYWdlO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICBlcnJvck1lc3NhZ2UgPSAnQW4gdW5rbm93biBlcnJvciBvY2N1cnJlZCc7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBjb25zdCBncm93bGVyRGF0YSA9IG5ldyBHcm93bGVyTW9kZWwoXG4gICAgICAgICAgICAgICAgJ2Vycm9yJyxcbiAgICAgICAgICAgICAgICAnRXJyb3InLFxuICAgICAgICAgICAgICAgIGBFcnJvciBDcmVhdGluZyBBdXRoIFBvbGljeWAsXG4gICAgICAgICAgICAgICAgZXJyb3JNZXNzYWdlLFxuICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIHRoaXMuZ3Jvd2xlclNlcnZpY2Uuc2hvdyhncm93bGVyRGF0YSk7XG4gICAgICAgICAgICB0aHJvdyByZXNwO1xuICAgICAgICB9KVxuICAgIH1cblxuICAgIGdldEF1dGhQb2xpY3lEYXRhTW9kZWwoZm9ybURhdGEsIGlzVXBkYXRlKSB7XG4gICAgICAgIGNvbnN0IHNhdmVNb2RlbCA9IG5ldyBBdXRoUG9saWN5KCk7XG4gICAgICAgIGNvbnN0IG1vZGVsUHJvcGVydGllcyA9IGtleXMoc2F2ZU1vZGVsKTtcbiAgICAgICAgbW9kZWxQcm9wZXJ0aWVzLmZvckVhY2goKHByb3ApID0+IHtcbiAgICAgICAgICAgIHN3aXRjaChwcm9wKSB7XG4gICAgICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICAgICAgc2F2ZU1vZGVsW3Byb3BdID0gZm9ybURhdGFbcHJvcF07XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgICAgICByZXR1cm4gc2F2ZU1vZGVsO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -192,7 +192,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"], dependencies: [{ kind: "directive", type: 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.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", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i8.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.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i14.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width: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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\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.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", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: i7.FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: i8.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.QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: i14.CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 export { EdgeRouterFormComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
@@ -202,7 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-style:none}.svc-test-result.test-result-open{height:-moz-fit-content;height:fit-content;box-shadow:0 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:2px}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"] }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this edge router\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Edge Router attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Edge Routers'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'TUNNELER'\"\n                        [title2]=\"'TRAVERSAL'\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                                <div\n                                        (click)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'App Data'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                            [identity]=\"formData\"\n                            [jwt]=\"formData.enrollmentJwt\"\n                            [token]=\"formData.enrollmentToken\"\n                            [expiration]=\"formData.enrollmentExpiresAt\"\n                            (doRefresh)=\"refreshEdgeRouter()\"\n                            [type]=\"'router'\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentities.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n                >\n                    <lib-preview-list\n                        [clickable]=\"false\"\n                        [isLoading]=\"identitiesLoading\"\n                        [allNames]=\"svc.associatedIdentityNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"'OPTIONAL'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:15px}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right 10px;background-repeat:no-repeat;background-size:18px;padding-right:28px}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:10px;padding-right:10px;border-color:var(--inputBorder);border-style:solid;border-width: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 -2px 11px 0 var(--boxShadow);padding-bottom:15px;padding-top:15px}.svc-test-result .close.icon-close{top:10px;right:10px;font-size:18px;height:18px;width:18px;line-height:18px}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:1px}\n"] }]
         }], ctorParameters: function () { return [{ type: i15.SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]

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

@@ -37,12 +37,12 @@ class FormFieldContainerComponent {
         this.actionRequested.emit(action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: { title: "title", title2: "title2", layout: "layout", helpText: "helpText", helpText2: "helpText2", label: "label", count: "count", action: "action", actionLabel: "actionLabel", class: "class", contentStyle: "contentStyle", showHeader: "showHeader", headerActions: "headerActions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n    <div class=\"form-field-header\" *ngIf=\"showHeader\">\n        <div class=\"form-field-title-container\">\n            <span class=\"form-field-title\">{{title}}</span>\n            <div\n                *ngIf=\"helpText\"\n                class=\"form-field-info infoicon\"\n                matTooltip=\"{{helpText}}\"\n                matTooltipPosition=\"above\"\n            ></div>\n        </div>\n        <span class=\"form-field-label\" *ngIf=\"label\">{{label}}</span>\n        <span class=\"form-field-count\" *ngIf=\"count || count === 0\">{{count}}</span>\n        <div class=\"form-field-title-container title-container-2\" *ngIf=\"title2\">\n            <span class=\"form-field-title title2\">{{title2}}</span>\n            <div\n                    *ngIf=\"helpText2\"\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"{{helpText2}}\"\n                    matTooltipPosition=\"below\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"form-field-content\" [style]=\"contentStyle\">\n        <ng-content></ng-content>\n    </div>\n    <lib-multi-action-button\n        *ngIf=\"headerActions\"\n        [actions]=\"headerActions\"\n        (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n</div>\n", styles: [":host{height:-moz-fit-content;height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:15px;border-radius:10px;gap:15px;height:100%;position:relative}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:15px;z-index:99999;position:relative;border-radius:7px}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:14px;z-index:9999}.form-field-container .form-field-title{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--tableText);text-transform:uppercase;height:14px}.form-field-container .form-field-label{font-size:14px;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:14px;height:24px;padding-left:13px;padding-right:13px;font-size:13px}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:25px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: { title: "title", title2: "title2", layout: "layout", helpText: "helpText", helpText2: "helpText2", label: "label", count: "count", action: "action", actionLabel: "actionLabel", class: "class", contentStyle: "contentStyle", showHeader: "showHeader", headerActions: "headerActions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n    <div class=\"form-field-header\" *ngIf=\"showHeader\">\n        <div class=\"form-field-title-container\">\n            <span class=\"form-field-title\">{{title}}</span>\n            <div\n                *ngIf=\"helpText\"\n                class=\"form-field-info infoicon\"\n                matTooltip=\"{{helpText}}\"\n                matTooltipPosition=\"above\"\n            ></div>\n        </div>\n        <span class=\"form-field-label\" *ngIf=\"label\">{{label}}</span>\n        <span class=\"form-field-count\" *ngIf=\"count || count === 0\">{{count}}</span>\n        <div class=\"form-field-title-container title-container-2\" *ngIf=\"title2\">\n            <span class=\"form-field-title title2\">{{title2}}</span>\n            <div\n                    *ngIf=\"helpText2\"\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"{{helpText2}}\"\n                    matTooltipPosition=\"below\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"form-field-content\" [style]=\"contentStyle\">\n        <ng-content></ng-content>\n    </div>\n    <lib-multi-action-button\n        *ngIf=\"headerActions\"\n        [actions]=\"headerActions\"\n        (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n</div>\n", styles: [":host{height:-moz-fit-content;height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:15px;border-radius:10px;gap:var(--marginMedium);height:100%;position:relative}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:15px;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:14px;z-index:9999}.form-field-container .form-field-title{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--tableText);text-transform:uppercase;height:14px}.form-field-container .form-field-label{font-size:14px;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:14px;height:24px;padding-left:13px;padding-right:13px;font-size:13px}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:25px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3.MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
 }
 export { FormFieldContainerComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field-container', template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n    <div class=\"form-field-header\" *ngIf=\"showHeader\">\n        <div class=\"form-field-title-container\">\n            <span class=\"form-field-title\">{{title}}</span>\n            <div\n                *ngIf=\"helpText\"\n                class=\"form-field-info infoicon\"\n                matTooltip=\"{{helpText}}\"\n                matTooltipPosition=\"above\"\n            ></div>\n        </div>\n        <span class=\"form-field-label\" *ngIf=\"label\">{{label}}</span>\n        <span class=\"form-field-count\" *ngIf=\"count || count === 0\">{{count}}</span>\n        <div class=\"form-field-title-container title-container-2\" *ngIf=\"title2\">\n            <span class=\"form-field-title title2\">{{title2}}</span>\n            <div\n                    *ngIf=\"helpText2\"\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"{{helpText2}}\"\n                    matTooltipPosition=\"below\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"form-field-content\" [style]=\"contentStyle\">\n        <ng-content></ng-content>\n    </div>\n    <lib-multi-action-button\n        *ngIf=\"headerActions\"\n        [actions]=\"headerActions\"\n        (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n</div>\n", styles: [":host{height:-moz-fit-content;height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:15px;border-radius:10px;gap:15px;height:100%;position:relative}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:15px;z-index:99999;position:relative;border-radius:7px}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:14px;z-index:9999}.form-field-container .form-field-title{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--tableText);text-transform:uppercase;height:14px}.form-field-container .form-field-label{font-size:14px;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:14px;height:24px;padding-left:13px;padding-right:13px;font-size:13px}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:25px}\n"] }]
+            args: [{ selector: 'lib-form-field-container', template: "<div class=\"form-field-container\" class=\"{{class}}\" [ngClass]=\"{'form-field-row': layout === 'row'}\">\n    <div class=\"form-field-header\" *ngIf=\"showHeader\">\n        <div class=\"form-field-title-container\">\n            <span class=\"form-field-title\">{{title}}</span>\n            <div\n                *ngIf=\"helpText\"\n                class=\"form-field-info infoicon\"\n                matTooltip=\"{{helpText}}\"\n                matTooltipPosition=\"above\"\n            ></div>\n        </div>\n        <span class=\"form-field-label\" *ngIf=\"label\">{{label}}</span>\n        <span class=\"form-field-count\" *ngIf=\"count || count === 0\">{{count}}</span>\n        <div class=\"form-field-title-container title-container-2\" *ngIf=\"title2\">\n            <span class=\"form-field-title title2\">{{title2}}</span>\n            <div\n                    *ngIf=\"helpText2\"\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"{{helpText2}}\"\n                    matTooltipPosition=\"below\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"form-field-content\" [style]=\"contentStyle\">\n        <ng-content></ng-content>\n    </div>\n    <lib-multi-action-button\n        *ngIf=\"headerActions\"\n        [actions]=\"headerActions\"\n        (actionRequested)=\"actionClicked($event)\"\n    ></lib-multi-action-button>\n</div>\n", styles: [":host{height:-moz-fit-content;height:fit-content;display:flex;width:100%;flex-direction:column;position:relative}.form-field-container{display:flex;flex-direction:column;background-color:var(--navigation);padding:15px;border-radius:10px;gap:var(--marginMedium);height:100%;position:relative}.form-field-container.hide-overflow .form-field-content{overflow:hidden}.form-field-container.no-gap .form-field-content{gap:0}.form-field-container .form-field-content{display:flex;flex-direction:column;width:100%;gap:15px;z-index:99999;position:relative;border-radius:var(--inputBorderRadius)}.form-field-container.form-field-row .form-field-content{flex-direction:row;width:100%}.form-field-container .form-field-title-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 auto;width:100%}.form-field-container .form-field-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:14px;z-index:9999}.form-field-container .form-field-title{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--tableText);text-transform:uppercase;height:14px}.form-field-container .form-field-label{font-size:14px;font-weight:600;color:var(--placeholder)}.form-field-container .form-field-count{background-color:#4c5566;color:var(--white);display:flex;align-items:center;font-weight:700;border-radius:14px;height:24px;padding-left:13px;padding-right:13px;font-size:13px}.form-field-container .form-field-input::placeholder{font-weight:600}.form-field-container .save-button{text-wrap:nowrap;height:25px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], title2: [{

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

@@ -70,12 +70,12 @@ class FormHeaderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, selector: "lib-form-header", inputs: { data: "data", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div class=\"form-header-toggle-container\">\n                        <span\n                                class=\"toggle-option-text\"\n                                [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                                (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                        >\n                            FORM\n                        </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:7px;filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:7px;filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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-size:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:15px;margin-right:10px}.more-actions-container .more-actions-label .more-actions-arrow{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-size:20px 10px;width:20px;height:10px;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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}.header-badge-container{height:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:5px}.header-badge-container .circle.false{background-color:var(--white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, selector: "lib-form-header", inputs: { data: "data", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div class=\"form-header-toggle-container\">\n                        <span\n                                class=\"toggle-option-text\"\n                                [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                                (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                        >\n                            FORM\n                        </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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-size:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:15px;margin-right:10px}.more-actions-container .more-actions-label .more-actions-arrow{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-size:20px 10px;width:20px;height:10px;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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}.header-badge-container{height:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:5px}.header-badge-container .circle.false{background-color:var(--white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 export { FormHeaderComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div class=\"form-header-toggle-container\">\n                        <span\n                                class=\"toggle-option-text\"\n                                [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                                (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                        >\n                            FORM\n                        </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:7px;filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:7px;filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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-size:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:15px;margin-right:10px}.more-actions-container .more-actions-label .more-actions-arrow{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-size:20px 10px;width:20px;height:10px;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:2px;margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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}.header-badge-container{height:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:5px}.header-badge-container .circle.false{background-color:var(--white)}\n"] }]
+            args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-button\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-button-image\"></div>\n                <div class=\"form-title-back-button-line\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div class=\"form-header-toggle-container\">\n                        <span\n                                class=\"toggle-option-text\"\n                                [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                                (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                        >\n                            FORM\n                        </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\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': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of data.badges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>", styles: [":host{position:relative;width:100%;max-width:1100px;margin-bottom:10px}.form-header-container{display:flex;flex-direction:column;width:100%}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 375px)}.form-header-container.show-more-actions .header-actions-container{min-width:375px}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:30px;margin-top:5px;gap:10px}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 200px)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:22px;color:var(--tableText);margin-left:7px;min-width:130px;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:5px}.form-header-container .form-title-container .form-title-back-button{display:flex;align-items:center;justify-content:center;position:relative;transform:scaleY(.8);cursor:pointer;padding-right:6px;margin-top:2px;margin-left:4px;transition:.3s}.form-header-container .form-title-container .form-title-back-button:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-button:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-image{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 %23434c5e%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-size:20px 14px;width:20px;height:14px;transform:rotate(90deg)}.form-header-container .form-title-container .form-title-back-button .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:1px;border-right-width:1px;width:14px;position:absolute;left:8px}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:180px;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:65px;height:33px;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;pointer:not-allowed}.more-actions-container{width:150px;height:33px;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer;z-index:999999;margin-right:20px}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:5px;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:15px;margin-right:10px}.more-actions-container .more-actions-label .more-actions-arrow{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-size:20px 10px;width:20px;height:10px;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:33px;width:100%;box-shadow:0 3px 5px 1px var(--boxShadow);border-radius:5px}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:25px;width:100%;padding-left:15px;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:20px}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:30px;height:18px;border-radius:10px;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:5px;cursor:pointer;position:relative;margin-right:5px}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(1px);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:3px;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:10px}.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:10px;border-color:var(--green);border-style:solid;border-left-width:1px;border-right-width:1px;position:relative;margin-left:2px}.form-header-toggle-container .toggle-option-text{font-size:13px;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}.header-badge-container{height:30px;display:flex;flex-direction:row;align-items:center;border-radius:30px;padding:0 12px;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:5px}.header-badge-container .circle.false{background-color:var(--white)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], title: [{