@openziti/ziti-console-lib 0.4.8 → 0.4.9
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.
- package/esm2022/lib/features/projectable-forms/service/simple-service/simple-service.component.mjs +15 -3
- package/esm2022/lib/features/tag-selector/tag-selector.component.mjs +2 -2
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/openziti-ziti-console-lib.mjs +17 -5
- package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
- package/lib/features/projectable-forms/service/simple-service/simple-service.component.d.ts +1 -0
- package/lib/features/projectable-forms/service/simple-service/simple-service.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -6797,11 +6797,11 @@ class TagSelectorComponent {
|
|
|
6797
6797
|
return this._selectedRoleAttributes?.length <= 0 && this._selectedNamedAttributes?.length <= 0;
|
|
6798
6798
|
}
|
|
6799
6799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6800
|
-
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:7px;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:7px;border-width:2px;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:7px;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:100%;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:7px;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:7px;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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.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: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
6800
|
+
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:7px;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:7px;border-width:2px;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:7px;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:100%;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:7px;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:7px;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.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: "directive", type: i3$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
6801
6801
|
}
|
|
6802
6802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagSelectorComponent, decorators: [{
|
|
6803
6803
|
type: Component,
|
|
6804
|
-
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:7px;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:7px;border-width:2px;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:7px;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:100%;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:7px;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:7px;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}\n"] }]
|
|
6804
|
+
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:7px;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:7px;border-width:2px;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:7px;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:100%;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:7px;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:7px;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"] }]
|
|
6805
6805
|
}], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
|
|
6806
6806
|
type: Input
|
|
6807
6807
|
}], disableField: [{
|
|
@@ -16161,6 +16161,9 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
16161
16161
|
this.servicesPageService.getServiceRoleAttributes().then((result) => {
|
|
16162
16162
|
this.serviceRoleAttributes = result.data;
|
|
16163
16163
|
});
|
|
16164
|
+
this.servicesPageService.getIdentityRoleAttributes().then((result) => {
|
|
16165
|
+
this.identityRoleAttributes = result.data;
|
|
16166
|
+
});
|
|
16164
16167
|
}
|
|
16165
16168
|
getIdentityNamedAttributes(filter) {
|
|
16166
16169
|
const paging = {
|
|
@@ -16367,6 +16370,8 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
16367
16370
|
/// Do nothing, stay on page
|
|
16368
16371
|
}
|
|
16369
16372
|
else {
|
|
16373
|
+
this.initDataModels();
|
|
16374
|
+
this._dataChange = false;
|
|
16370
16375
|
this.router?.navigateByUrl(`${this.basePath}`);
|
|
16371
16376
|
}
|
|
16372
16377
|
});
|
|
@@ -16734,6 +16739,13 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
16734
16739
|
-H 'zt-session: ${this.zitiSessionId}' \\
|
|
16735
16740
|
--data-raw '${JSON.stringify(this.bindPolicyApiData)}' \\`;
|
|
16736
16741
|
}
|
|
16742
|
+
initDataModels() {
|
|
16743
|
+
this.serviceApiData = this.initServiceApiData;
|
|
16744
|
+
this.interceptConfigApiData.data = this.initInterceptConfigApiData.data;
|
|
16745
|
+
this.hostConfigApiData.data = this.initHostConfigApiData.data;
|
|
16746
|
+
this.dialPolicyApiData = this.initDialPolicyApiData;
|
|
16747
|
+
this.bindPolicyApiData = this.initBindPolicyApiData;
|
|
16748
|
+
}
|
|
16737
16749
|
checkDataChange() {
|
|
16738
16750
|
const serviceDataChange = !isEqual(this.initServiceApiData, this.serviceApiData);
|
|
16739
16751
|
const interceptDataChange = !isEqual(this.initInterceptConfigApiData.data, this.interceptConfigApiData.data);
|
|
@@ -16756,11 +16768,11 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
16756
16768
|
clear() {
|
|
16757
16769
|
}
|
|
16758
16770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i3$2.MatDialog }, { token: ValidationService }, { token: ServicesPageService }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16759
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:650px;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:375px}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:15px}.simple-service-wrapper .grid.addressFull{grid-template-columns:70px 95px auto 65px}.simple-service-wrapper .grid.addressPort{grid-template-columns:70px auto 65px}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:14px;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:60px;height:28px;font-size:14px;line-height:25px;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:13px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:20px;height:20px;border-radius:10px;background-color:var(--white);transition:var(--transition);position:absolute;top:4px;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:35px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:7px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:32px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:1px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:5px}.simple-service-wrapper .form-field-input-group.service-group{gap:10px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:15px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:5px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:14px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:10px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:nowrap;gap:30;max-width:1200px;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:5px;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:15px}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:10px}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:7px}.config-item .config-container .config-container-label{color:#fff}@media only screen and (max-width: 1475px){.simple-service-wrapper .form-group-row.simple-service-image-container{display:none}.simple-service-wrapper .form-group-row.simple-service-center-content{gap:30px}}@media only screen and (max-width: 2000px){.simple-service-wrapper .simple-service-center-content{max-width:650px;padding:0}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:15px}.simple-service-wrapper .simple-service-center-content .form-field-divider-container{padding-left:0;padding-right:0}}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0px;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:40px;max-height:40px}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:115px!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:650px!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0px}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
|
|
16771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:650px;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:375px}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:15px}.simple-service-wrapper .grid.addressFull{grid-template-columns:70px 95px auto 65px}.simple-service-wrapper .grid.addressPort{grid-template-columns:70px auto 65px}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:14px;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:60px;height:28px;font-size:14px;line-height:25px;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:13px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:20px;height:20px;border-radius:10px;background-color:var(--white);transition:var(--transition);position:absolute;top:4px;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:35px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:7px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:32px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:1px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:5px}.simple-service-wrapper .form-field-input-group.service-group{gap:10px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:15px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:5px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:14px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:10px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:nowrap;gap:30;max-width:1200px;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:5px;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:15px}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:10px}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:7px}.config-item .config-container .config-container-label{color:#fff}@media only screen and (max-width: 1475px){.simple-service-wrapper .form-group-row.simple-service-image-container{display:none}.simple-service-wrapper .form-group-row.simple-service-center-content{gap:30px}}@media only screen and (max-width: 2000px){.simple-service-wrapper .simple-service-center-content{max-width:650px;padding:0}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:15px}.simple-service-wrapper .simple-service-center-content .form-field-divider-container{padding-left:0;padding-right:0}}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0px;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:40px;max-height:40px}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:115px!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:650px!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0px}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
|
|
16760
16772
|
}
|
|
16761
16773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, decorators: [{
|
|
16762
16774
|
type: Component,
|
|
16763
|
-
args: [{ selector: 'lib-simple-service', template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:650px;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:375px}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:15px}.simple-service-wrapper .grid.addressFull{grid-template-columns:70px 95px auto 65px}.simple-service-wrapper .grid.addressPort{grid-template-columns:70px auto 65px}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:14px;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:60px;height:28px;font-size:14px;line-height:25px;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:13px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:20px;height:20px;border-radius:10px;background-color:var(--white);transition:var(--transition);position:absolute;top:4px;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:35px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:7px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:32px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:1px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:5px}.simple-service-wrapper .form-field-input-group.service-group{gap:10px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:15px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:5px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:14px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:10px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:nowrap;gap:30;max-width:1200px;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:5px;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:15px}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:10px}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:7px}.config-item .config-container .config-container-label{color:#fff}@media only screen and (max-width: 1475px){.simple-service-wrapper .form-group-row.simple-service-image-container{display:none}.simple-service-wrapper .form-group-row.simple-service-center-content{gap:30px}}@media only screen and (max-width: 2000px){.simple-service-wrapper .simple-service-center-content{max-width:650px;padding:0}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:15px}.simple-service-wrapper .simple-service-center-content .form-field-divider-container{padding-left:0;padding-right:0}}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0px;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:40px;max-height:40px}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:115px!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:650px!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0px}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"] }]
|
|
16775
|
+
args: [{ selector: 'lib-simple-service', template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:650px;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:375px}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:15px}.simple-service-wrapper .grid.addressFull{grid-template-columns:70px 95px auto 65px}.simple-service-wrapper .grid.addressPort{grid-template-columns:70px auto 65px}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:14px;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:60px;height:28px;font-size:14px;line-height:25px;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:13px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:20px;height:20px;border-radius:10px;background-color:var(--white);transition:var(--transition);position:absolute;top:4px;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:35px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:7px}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:32px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:1px}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:5px}.simple-service-wrapper .form-field-input-group.service-group{gap:10px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:15px;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:5px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:14px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:10px}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:nowrap;gap:30;max-width:1200px;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:5px;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:15px}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:10px}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:7px}.config-item .config-container .config-container-label{color:#fff}@media only screen and (max-width: 1475px){.simple-service-wrapper .form-group-row.simple-service-image-container{display:none}.simple-service-wrapper .form-group-row.simple-service-center-content{gap:30px}}@media only screen and (max-width: 2000px){.simple-service-wrapper .simple-service-center-content{max-width:650px;padding:0}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:15px}.simple-service-wrapper .simple-service-center-content .form-field-divider-container{padding-left:0;padding-right:0}}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0px;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:40px;max-height:40px}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:115px!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:650px!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0px}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"] }]
|
|
16764
16776
|
}], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
|
|
16765
16777
|
type: Inject,
|
|
16766
16778
|
args: [SETTINGS_SERVICE]
|
|
@@ -20004,7 +20016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
20004
20016
|
}] });
|
|
20005
20017
|
|
|
20006
20018
|
const VERSION = {
|
|
20007
|
-
"version": "3.4.
|
|
20019
|
+
"version": "3.4.7"
|
|
20008
20020
|
};
|
|
20009
20021
|
|
|
20010
20022
|
/*
|