npm - @openziti/ziti-console-lib - Versions diffs - 0.6.8 → 0.7.1 - Mend

@openziti/ziti-console-lib 0.6.8 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/esm2022/lib/features/tag-selector/tag-selector.component.mjs CHANGED Viewed

@@ -238,12 +238,12 @@ class TagSelectorComponent {
         return this._selectedRoleAttributes?.length <= 0 && this._selectedNamedAttributes?.length <= 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: { placeholder: "placeholder", disableField: "disableField", disableCreate: "disableCreate", hideOption: "hideOption", isLoading: "isLoading", errorMessage: "errorMessage", focusOnInit: "focusOnInit", selectedRoleAttributes: "selectedRoleAttributes", selectedNamedAttributes: "selectedNamedAttributes", hasError: "hasError", availableRoleAttributes: "availableRoleAttributes", availableNamedAttributes: "availableNamedAttributes" }, outputs: { addRoleAttribute: "addRoleAttribute", addNamedAttribute: "addNamedAttribute", roleAttributeRemoved: "roleAttributeRemoved", namedAttributeRemoved: "namedAttributeRemoved", selectedRoleAttributesChange: "selectedRoleAttributesChange", selectedNamedAttributesChange: "selectedNamedAttributesChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], ngImport: i0, template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0rem;margin-top:0rem;font-size:1rem;font-weight:600;line-height:unset;padding:.3125rem .625rem;float:left;border-radius:var(--inputBorderRadius);margin-left:.125rem;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0rem}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:1.75rem;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:.5rem;padding-right:1.25rem;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:.5rem;padding-left:1.25rem}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:2rem;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:.125rem solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:.5rem;padding-right:.5rem;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:.3125rem;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:.625rem;padding:.625rem}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:.3125rem}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;font-size:1rem;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:.25rem}.select2-search--dropdown .select2-search__field{padding:.25rem;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:.0625rem!important;margin:-.0625rem!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:.0625rem!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 .25rem .3125rem .25rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:.3125rem;border-top-right-radius:0;border-top-left-radius:0;display:flex;flex-wrap:wrap;gap:.3125rem;padding:0rem .3125rem .3125rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:.3125rem;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:.3125rem;margin-right:.625rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:.25rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:.3125rem;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:.125rem;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0rem!important;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:0rem;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:.125rem solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-.1875rem;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:.625rem;font-size:1.625rem;cursor:pointer;display:inline-block;font-weight:400;margin-right:.125rem;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0rem;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:12.5rem;overflow:auto;font-weight:600;margin-top:.0625rem;box-shadow:0 0 0 .0625rem var(--shadow),0 .5rem 1rem var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0rem;width:100%}.select2-container input{padding-top:.125rem;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:31.4375rem}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:26.0625rem}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:.875rem}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--placeholder);border-right:.3125rem solid var(--placeholder);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 export { TagSelectorComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tag-selector', template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0;margin-top:0;font-size:16px;font-weight:600;line-height:unset;padding:5px 10px;float:left;border-radius:var(--inputBorderRadius);margin-left:2px;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:32px;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:2px solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:8px;padding-right:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:10px;padding:10px}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:5px}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:10px;padding-top:2px;padding-bottom:2px;font-size:16px;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:0 0 5px 5px;display:flex;flex-wrap:wrap;gap:5px;padding:0 5px 5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0px!important;width:100%;padding-left:10px;padding-right:10px;margin-bottom:0;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:50px}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:2px solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-3px;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:10px;font-size:26px;cursor:pointer;display:inline-block;font-weight:400;margin-right:2px;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0px;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:200px;overflow:auto;font-weight:600;margin-top:1px;box-shadow:0 0 0 1px var(--shadow),0 8px 16px var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0px;width:100%}.select2-container input{padding-top:2px;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:503px}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:417px}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:14px}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
+            args: [{ selector: 'lib-tag-selector', template: "<span (clickOutside)=\"hide()\" [ngClass]=\"{ readOnly: disableField }\" class=\"clickOutside fullWidth tagsSelector\" >\n    <span\n            class=\"select2 select2-container select2-container--default select2-container--below select2-container--focus\"\n            dir=\"ltr\"\n    >\n        <span class=\"selection\">\n            <span\n                    [ngClass]=\"{ 'select2-selection-focus': !hideSelect, tagError: _hasError }\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"true\"\n                    class=\"select2-selection select2-selection--multiple\"\n                    role=\"combobox\"\n                    tabindex=\"-1\"\n            >\n                <input\n                        (focus)=\"inputFocus()\"\n                        (keydown)=\"handleKeyDown($event);\"\n                        (keyup)=\"handleKeyUp($event, filterString);\"\n                        (mouseup)=\"applyFilterMouseUp()\"\n                        [(ngModel)]=\"filterString\"\n                        [disabled]=\"disableField\"\n                        [ngClass]=\"{ empty: isNothingSelected, tagError: _hasError }\"\n                        aria-autocomplete=\"list\"\n                        autocapitalize=\"off\"\n                        autocomplete=\"off\"\n                        autocorrect=\"off\"\n                        class=\"select2-search__field\"\n                        placeholder=\"{{disableField ? (isNothingSelected ? 'Nothing selected' : '') : placeholder}}\"\n                        role=\"textbox\"\n                        spellcheck=\"false\"\n                        tabindex=\"0\"\n                        type=\"search\"\n                        #search\n                />\n                <span *ngIf=\"isLoading\" class=\"spinner\"></span>\n\n                <ul\n                        (click)=\"openSelect()\"\n                        [ngClass]=\"{ error: _hasError, readOnly: disableField, empty: isNothingSelected }\"\n                        class=\"select2-selection__rendered\"\n                >\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedRoleAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"hashtag select2-selection__choice\"\n                        title=\"#{{ item }}\"\n                    >\n                        <span\n                            (click)=\"removeRoleAttribute(item); $event.stopPropagation()\"\n                            class=\"select2-selection__choice__remove\"\n                            role=\"presentation\"\n                        >\u00D7</span\n                        ><span class=\"select2-selection__choice__text\">#{{ item }}</span>\n                    </li>\n                    <li\n                        (click)=\"$event.stopPropagation()\"\n                        *ngFor=\"let item of _selectedNamedAttributes\"\n                        [hidden]=\"item === this.hideOption\"\n                        class=\"select2-selection_choice_item\"\n                    >\n                        <div class=\"attag select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                        <div class=\"tag-name select2-selection__choice\" title=\"@{{ item }}\">\n                            <span\n                                    (click)=\"removeNamedAttribute(item); $event.stopPropagation()\"\n                                    class=\"select2-selection__choice__remove\"\n                                    role=\"presentation\"\n                            >\u00D7</span\n                            ><span class=\"select2-selection__choice__text\">@{{ item }}</span>\n                        </div>\n                    </li>\n                </ul>\n            </span>\n        </span>\n        <span aria-hidden=\"true\" class=\"dropdown-wrapper\" tabindex=\"-1\" #dropdownWrapper></span>\n    </span>\n    <span *ngIf=\"_hasError\" class=\"err\">\n        {{ errorMessage }}\n    </span>\n\n    <span\n            *ngIf=\"!hideSelect\"\n            [ngClass]=\"{ withBorder: !hideSelect }\"\n            class=\"nf-select2-dropdown select2-dropdown--below\"\n            dir=\"ltr\"\n    >\n        <span class=\"select2-results\">\n            <ul\n                    aria-expanded=\"true\"\n                    aria-hidden=\"false\"\n                    aria-multiselectable=\"true\"\n                    class=\"select2-results__options\"\n                    role=\"tree\"\n            >\n                <li\n                    (click)=\"addNewAttribute(filterString)\"\n                    [hidden]=\"filterString === '' || isAttributeSelected(filterString)\"\n                    aria-selected=\"false\"\n                    class=\"select2-results__option hashtag\"\n                    role=\"treeitem\"\n                    title=\"{{ filterString }} (New Attribute)\"\n                >\n                    {{ filterString }} (New Attribute)\n                </li>\n                <li\n                    (click)=\"addSelectedRoleAttribute(option)\"\n                    *ngFor=\"let option of displayedRoleOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                    class=\"hashtag select2-results__option\"\n                    role=\"treeitem\"\n                >\n                    #{{ option }}\n                </li>\n                <li\n                    (click)=\"addSelectedNamedAttribute(option)\"\n                    *ngFor=\"let option of displayedNamedOptions\"\n                    [hidden]=\"option === this.hideOption || isSelected(option)\"\n                    aria-selected=\"false\"\n                >\n                    <div class=\"attag select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                    <div class=\"tag-name select2-results__option\" title=\"@{{ option }}\" role=\"treeitem\">\n                        @{{ option }}\n                    </div>\n                </li>\n            </ul>\n        </span>\n    </span>\n</span>\n", styles: [".searchSelector .tagButton{cursor:pointer;transition:.5s}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container.select2-container--focus .select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container.select2-container--focus .select2-selection .select2-selection__choice__text{cursor:text;user-select:text;-webkit-user-select:text}.select2-container--default .select2-selection--multiple .select2-selection__choice{overflow:hidden;text-wrap:wrap;display:flex}.select2-container--default .select2-selection--multiple .select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-container--default .select2-selection--multiple .select2-selection__choice.tag-name{background-color:transparent}.select2-results__options li{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.select2-results__options li[hidden]{display:none}.select2-results__option.tag-name,.select2-results__option.attag,.select2-results__option.hashtag,.select2-selection__choice.tag-name,.select2-selection__choice.attag,.select2-selection__choice.hashtag{margin-bottom:0rem;margin-top:0rem;font-size:1rem;font-weight:600;line-height:unset;padding:.3125rem .625rem;float:left;border-radius:var(--inputBorderRadius);margin-left:.125rem;transition:var(--transition);overflow:hidden;text-wrap:wrap;display:flex}.select2-results__option.hashtag,.select2-selection__choice.hashtag{background-color:var(--primary);position:relative;color:var(--white)}.select2-results__option.attag,.select2-selection__choice.attag{background-color:var(--secondary);color:transparent;position:absolute}.select2-results__option.tag-name,.select2-selection__choice.tag-name{background-color:transparent;position:relative;color:var(--white)}.err{color:var(--red)!important}.select2-selection{border-radius:var(--inputBorderRadius);border-width:var(--inputBorderWidth);border-color:var(--inputBorder);border-style:solid;color:var(--white);padding-left:0rem}.select2-selection.select2-selection-focus{border-color:var(--primaryColor)}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:1.75rem;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:.5rem;padding-right:1.25rem;overflow-y:auto;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:.5rem;padding-left:1.25rem}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;min-height:2rem;user-select:none;-webkit-user-select:none;border-radius:var(--inputBorderRadius);border:.125rem solid var(--stroke);color:var(--white);padding-left:0;background-color:var(--table);overflow:hidden}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection_choice_item{width:-moz-fit-content;width:fit-content;overflow:hidden;position:relative}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow-y:auto;overflow-x:hidden;padding-left:.5rem;padding-right:.5rem;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:.3125rem;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-results{display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;width:100%;gap:.625rem;padding:.625rem}.select2-results__options{list-style:none;margin:0;padding:0;display:flex;flex-flow:wrap;width:100%;gap:.3125rem}.select2-results__option{display:flex;height:-moz-fit-content;height:fit-content;padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;font-size:1rem;font-weight:600;user-select:none;-webkit-user-select:none;margin:0}.select2-results__option[hidden]{display:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:.25rem}.select2-search--dropdown .select2-search__field{padding:.25rem;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:.0625rem!important;margin:-.0625rem!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:.0625rem!important}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 .25rem .3125rem .25rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;width:100%;background-color:var(--background);border-radius:.3125rem;border-top-right-radius:0;border-top-left-radius:0;display:flex;flex-wrap:wrap;gap:.3125rem;padding:0rem .3125rem .3125rem}.select2-container--default .select2-selection--multiple .select2-selection__rendered.empty{padding:0;margin:0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:var(--placeholder);margin-top:.3125rem;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:400;margin-top:.3125rem;margin-right:.625rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--white);cursor:pointer;display:inline-block;font-weight:400;margin-right:.25rem}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--white);filter:brightness(90%);transition:.3s}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:.3125rem;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:.125rem;margin-right:auto}.readOnly{opacity:.75;cursor:default}.readOnly .select2-container .select2-selection__rendered:not(.empty){min-height:var(--defaultInputHeight)}.readOnly .select2-container input:disabled{font-weight:600;font-family:Open Sans,Arial,sans-serif;height:0rem!important;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:0rem;border:none;outline:none;box-sizing:border-box;box-shadow:none;cursor:text;text-align:left;background-color:var(--background)!important;color:var(--tableText);text-transform:none}.readOnly .select2-container input:disabled:hover{box-shadow:none;filter:none}.readOnly .select2-container input:disabled.empty{height:3.125rem}.fullModal .select2-container--default.select2-container--focus .select2-selection--multiple{border-radius:var(--inputBorderRadius);border:.125rem solid var(--inputBorder);color:var(--white);padding-left:0}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-bottom:-.1875rem;border-color:var(--primaryColor)}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{position:absolute;left:.625rem;font-size:1.625rem;cursor:pointer;display:inline-block;font-weight:400;margin-right:.125rem;color:var(--white)}.fullModal .select2-container--default .select2-selection--multiple{background-color:unset}.fullModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--primaryColor)}.select2-container .select2-dropdown{background-color:var(--background)}.select2-container.select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--primaryColor)}.nf-select2-dropdown{background-color:var(--menu);border-top:0rem;border-radius:var(--inputBorderRadius);color:var(--white);box-sizing:border-box;display:flex;flex-grow:1;height:-moz-fit-content;height:fit-content;position:absolute;width:100%;z-index:99999;max-height:12.5rem;overflow:auto;font-weight:600;margin-top:.0625rem;box-shadow:0 0 0 .0625rem var(--shadow),0 .5rem 1rem var(--shadow)!important}.select2-results__option:hover{background-color:var(--icon)!important;color:var(--white);cursor:pointer}.select2-search__field{border-width:0rem;width:100%}.select2-container input{padding-top:.125rem;border-radius:0}.select2-container--below.select2-container--focus{width:75%}.nf-select2-dropdown.select2-dropdown--below{width:31.4375rem}.roleForm .select2-container--below.select2-container--focus,.roleForm .nf-select2-dropdown.select2-dropdown--below{width:26.0625rem}.fullWidth .select2-container--below.select2-container--focus,.fullWidth .nf-select2-dropdown.select2-dropdown--below{width:100%}.nf-select2-dropdown.select2-dropdown--below.withBorder{border:none}input{box-shadow:none;font-size:.875rem}.tagError{border-color:var(--red)!important}::ng-deep .select2-container ::placeholder{color:var(--placeholder)}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--placeholder);border-right:.3125rem solid var(--placeholder);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear}.tagsSelector.clickOutside{position:relative}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], disableField: [{

package/esm2022/lib/features/visualizer/identity-service-path/identity-service-path.component.mjs CHANGED Viewed

@@ -567,12 +567,12 @@ class IdentityServicePathComponent {
         this.refreshRotate = false;
     } // end of initTopoView
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityServicePathComponent, deps: [{ token: i1.IdentityServicePathHelper }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i2.Router }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentityServicePathComponent, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-close\"\n                    id=\"ClearSearchFilter\"\n                ></div>\n                <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n                    <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:25px;z-index:1001;margin:auto;inset:0;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:20px;right:20px;font-size:23px;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:23px;font-weight:600;position:absolute;top:15px;right:40px;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:20px;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:20px;width:23px;height:23px;right:55px;background-image:url(/assets/svgs/Resize.svg);background-size:23px 23px;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-5px;margin-top:10px;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 2px,transparent 0),linear-gradient(90deg,#ecd3e6 2px,transparent 0),linear-gradient(#ecd3e6 1px,transparent 0),linear-gradient(90deg,#ecd3e6 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}#IdentityVisualizerDataModal .tp-data-header{height:40px;font-size:25px;font-weight:600;margin-left:20px;margin-top:10px;margin-bottom:5px;font-family:Russo One;color:var(--primaryColor);font-size:30px;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:12px Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:6px;padding-left:5px}#IdentityVisualizerDataModal .modalbuttons{padding-right:20px}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:35px;line-height:40px;left:35%;top:17%;width:40px;height:40px;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0px solid black;height:1200px;font-size:12px;font-weight:400;margin-left:12px;margin-top:3px;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:400px;flex-shrink:0;border-radius:27px;height:51px;margin-left:22px;margin-top:10px;background-color:#fff;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 15px;background-repeat:no-repeat;background-size:18px;padding-right:47px}#IdentityVisualizerDataModal .topology-filter-input{height:50px;width:95%;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px 0;font-size:17px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:450px}#IdentityVisualizerDataModal .topology-legendA{border:0px solid blue;width:200px;border-radius:12px;margin-bottom:10px;margin-right:10px;position:absolute;display:inline-block;top:75px;right:0;background:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding:0 10px 5px;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:200px;border:0px solid blue;border-radius:12px;margin-bottom:10px;margin-right:10px;position:absolute;top:200px;right:0;background:var(--navigation);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:0 10px 5px;margin-left:10px}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0px solid blue;left:-3px}#IdentityVisualizerDataModal .legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:1px solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:10px;padding-top:2px;padding-bottom:2px;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:10px;font-weight:400;color:var(--tableText);padding-left:2px;padding-bottom:4px}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:10px}#IdentityVisualizerDataModal .dateTimeField input{height:40px;vertical-align:middle;margin-right:1px}#IdentityVisualizerDataModal .p-datepicker table td{padding:0}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0}#IdentityVisualizerDataModal .p-timepicker{padding:1px}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:15px}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:15px}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:15px;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0}#IdentityVisualizerDataModal .reset-button{height:50px;width:50px;margin-top:-7%;margin-left:70%;border-radius:50px;margin-right:10px;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:43px;width:122px;margin-top:-85px;margin-left:65%;border-radius:10px;margin-right:10px;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentityServicePathComponent, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-close\"\n                    id=\"ClearSearchFilter\"\n                ></div>\n                <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n                    <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:absolute;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}#IdentityVisualizerDataModal .tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:.75rem Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:.375rem;padding-left:.3125rem}#IdentityVisualizerDataModal .modalbuttons{padding-right:1.25rem}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}#IdentityVisualizerDataModal .topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:28.125rem}#IdentityVisualizerDataModal .topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}#IdentityVisualizerDataModal .legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:.625rem}#IdentityVisualizerDataModal .dateTimeField input{height:2.5rem;vertical-align:middle;margin-right:.0625rem}#IdentityVisualizerDataModal .p-datepicker table td{padding:0rem}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0rem}#IdentityVisualizerDataModal .p-timepicker{padding:.0625rem}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:.9375rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:.9375rem}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:.9375rem;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0rem}#IdentityVisualizerDataModal .reset-button{height:3.125rem;width:3.125rem;margin-top:-7%;margin-left:70%;border-radius:3.125rem;margin-right:.625rem;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:2.6875rem;width:7.625rem;margin-top:-5.3125rem;margin-left:65%;border-radius:.625rem;margin-right:.625rem;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:.625rem;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:1.5625rem;align-items:center;padding:0 .625rem}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 export { IdentityServicePathComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityServicePathComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-identity-visualizer', encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-close\"\n                    id=\"ClearSearchFilter\"\n                ></div>\n                <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n                    <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:25px;z-index:1001;margin:auto;inset:0;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:20px;right:20px;font-size:23px;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:23px;font-weight:600;position:absolute;top:15px;right:40px;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:20px;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:20px;width:23px;height:23px;right:55px;background-image:url(/assets/svgs/Resize.svg);background-size:23px 23px;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-5px;margin-top:10px;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 2px,transparent 0),linear-gradient(90deg,#ecd3e6 2px,transparent 0),linear-gradient(#ecd3e6 1px,transparent 0),linear-gradient(90deg,#ecd3e6 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}#IdentityVisualizerDataModal .tp-data-header{height:40px;font-size:25px;font-weight:600;margin-left:20px;margin-top:10px;margin-bottom:5px;font-family:Russo One;color:var(--primaryColor);font-size:30px;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:12px Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:6px;padding-left:5px}#IdentityVisualizerDataModal .modalbuttons{padding-right:20px}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:35px;line-height:40px;left:35%;top:17%;width:40px;height:40px;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0px solid black;height:1200px;font-size:12px;font-weight:400;margin-left:12px;margin-top:3px;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:400px;flex-shrink:0;border-radius:27px;height:51px;margin-left:22px;margin-top:10px;background-color:#fff;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 15px;background-repeat:no-repeat;background-size:18px;padding-right:47px}#IdentityVisualizerDataModal .topology-filter-input{height:50px;width:95%;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px 0;font-size:17px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:450px}#IdentityVisualizerDataModal .topology-legendA{border:0px solid blue;width:200px;border-radius:12px;margin-bottom:10px;margin-right:10px;position:absolute;display:inline-block;top:75px;right:0;background:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding:0 10px 5px;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:200px;border:0px solid blue;border-radius:12px;margin-bottom:10px;margin-right:10px;position:absolute;top:200px;right:0;background:var(--navigation);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:0 10px 5px;margin-left:10px}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0px solid blue;left:-3px}#IdentityVisualizerDataModal .legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:1px solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:10px;padding-top:2px;padding-bottom:2px;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:10px;font-weight:400;color:var(--tableText);padding-left:2px;padding-bottom:4px}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:10px}#IdentityVisualizerDataModal .dateTimeField input{height:40px;vertical-align:middle;margin-right:1px}#IdentityVisualizerDataModal .p-datepicker table td{padding:0}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0}#IdentityVisualizerDataModal .p-timepicker{padding:1px}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:15px}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:15px}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:15px;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0}#IdentityVisualizerDataModal .reset-button{height:50px;width:50px;margin-top:-7%;margin-left:70%;border-radius:50px;margin-right:10px;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:43px;width:122px;margin-top:-85px;margin-left:65%;border-radius:10px;margin-right:10px;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal}\n"] }]
+            args: [{ selector: 'app-identity-visualizer', encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-close\"\n                    id=\"ClearSearchFilter\"\n                ></div>\n                <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n                    <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:absolute;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}#IdentityVisualizerDataModal .tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:.75rem Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:.375rem;padding-left:.3125rem}#IdentityVisualizerDataModal .modalbuttons{padding-right:1.25rem}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}#IdentityVisualizerDataModal .topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:28.125rem}#IdentityVisualizerDataModal .topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}#IdentityVisualizerDataModal .legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:.625rem}#IdentityVisualizerDataModal .dateTimeField input{height:2.5rem;vertical-align:middle;margin-right:.0625rem}#IdentityVisualizerDataModal .p-datepicker table td{padding:0rem}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0rem}#IdentityVisualizerDataModal .p-timepicker{padding:.0625rem}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:.9375rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:.9375rem}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:.9375rem;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0rem}#IdentityVisualizerDataModal .reset-button{height:3.125rem;width:3.125rem;margin-top:-7%;margin-left:70%;border-radius:3.125rem;margin-right:.625rem;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:2.6875rem;width:7.625rem;margin-top:-5.3125rem;margin-left:65%;border-radius:.625rem;margin-right:.625rem;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:.625rem;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:1.5625rem;align-items:center;padding:0 .625rem}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.IdentityServicePathHelper }, { type: i9.SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]