@openziti/ziti-console-lib 1.3.1 → 1.5.0
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.
|
@@ -3906,10 +3906,12 @@ class TableCellNameComponent {
|
|
|
3906
3906
|
agInit(params) {
|
|
3907
3907
|
this.cellParams = params?.colDef?.cellRendererParams || {};
|
|
3908
3908
|
this.item = params.data;
|
|
3909
|
+
this.value = params.value;
|
|
3909
3910
|
}
|
|
3910
3911
|
refresh(params) {
|
|
3911
3912
|
this.cellParams = params?.colDef?.cellRendererParams || {};
|
|
3912
3913
|
this.item = params.data;
|
|
3914
|
+
this.value = params.value;
|
|
3913
3915
|
return true;
|
|
3914
3916
|
}
|
|
3915
3917
|
get namePrefix() {
|
|
@@ -3938,7 +3940,7 @@ class TableCellNameComponent {
|
|
|
3938
3940
|
this.router.navigateByUrl(`${this.cellParams.pathRoot}/${get(this.item, this.cellParams.itemProp, this.item.id)}`);
|
|
3939
3941
|
}
|
|
3940
3942
|
get cellText() {
|
|
3941
|
-
let val =
|
|
3943
|
+
let val = this.value;
|
|
3942
3944
|
if (isEmpty(val)) {
|
|
3943
3945
|
val = this.item.name;
|
|
3944
3946
|
}
|
|
@@ -9342,6 +9344,7 @@ class ProjectableForm extends ExtendableComponent {
|
|
|
9342
9344
|
this.isLoading = false;
|
|
9343
9345
|
this.usePreviousLocation = true;
|
|
9344
9346
|
this.moreActions = [];
|
|
9347
|
+
this.multiActions = [];
|
|
9345
9348
|
this.tagElements = [];
|
|
9346
9349
|
this.tagData = [];
|
|
9347
9350
|
this.hideTags = false;
|
|
@@ -9568,13 +9571,21 @@ class ProjectableForm extends ExtendableComponent {
|
|
|
9568
9571
|
}
|
|
9569
9572
|
entityUpdated() {
|
|
9570
9573
|
//no-op
|
|
9571
|
-
if (this.isEdit && !this.moreActions.find(action => action.name === 'delete')) {
|
|
9572
|
-
|
|
9574
|
+
if (this.isEdit && !this.moreActions.find(action => action.name === 'delete') && !this.multiActions.find(action => action.id === 'delete')) {
|
|
9575
|
+
const deleteAction = {
|
|
9573
9576
|
name: 'delete',
|
|
9577
|
+
id: 'delete',
|
|
9574
9578
|
label: 'Delete',
|
|
9575
9579
|
icon: 'icon-trash',
|
|
9576
9580
|
hidden: () => !this.managementPermissions.canDelete(this.entityType),
|
|
9577
|
-
}
|
|
9581
|
+
};
|
|
9582
|
+
if (this.extService?.useDeleteSplitButton) {
|
|
9583
|
+
deleteAction.style = 'danger';
|
|
9584
|
+
this.multiActions = [...this.multiActions, deleteAction];
|
|
9585
|
+
}
|
|
9586
|
+
else {
|
|
9587
|
+
this.moreActions.push(deleteAction);
|
|
9588
|
+
}
|
|
9578
9589
|
}
|
|
9579
9590
|
}
|
|
9580
9591
|
getRoleAttributes(type) {
|
|
@@ -9854,12 +9865,15 @@ class MultiActionButtonComponent {
|
|
|
9854
9865
|
actionClicked(action) {
|
|
9855
9866
|
this.actionRequested.emit(action);
|
|
9856
9867
|
}
|
|
9868
|
+
isActionHidden(action) {
|
|
9869
|
+
return isFunction(action.hidden) ? action.hidden() : !!action.hidden;
|
|
9870
|
+
}
|
|
9857
9871
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9858
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MultiActionButtonComponent, isStandalone: false, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n @if (actions) {\n <div class=\"form-field-action\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n @if (actions.length > 1) {\n <div class=\"secondary-action-button\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n }\n </div>\n }\n @if (showMoreActions) {\n <div class=\"multi-action-button-dropdown\">\n <ul>\n @for (action of actions; track action) {\n <li [hidden]=\"action
|
|
9872
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MultiActionButtonComponent, isStandalone: false, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n @if (actions) {\n <div class=\"form-field-action\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n @if (actions.length > 1) {\n <div class=\"secondary-action-button\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n }\n </div>\n }\n @if (showMoreActions) {\n <div class=\"multi-action-button-dropdown\">\n <ul>\n @for (action of actions; track action) {\n <li [hidden]=\"isActionHidden(action)\" class=\"confirm-item-name {{action.style}}\" (click)=\"actionClicked(action)\">\n @if (action.icon) {\n <div class=\"confirm-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}.multi-action-button-container .multi-action-button-dropdown ul li.danger{background-color:var(--redShadow);color:var(--red);display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul li.danger:hover{background-color:var(--red);color:var(--white)}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash:before{content:none}:host-context(.header-actions-container) .multi-action-button-container{position:relative;top:unset;right:unset;height:2.0625rem}:host-context(.header-actions-container) .multi-action-button-container .form-field-action{height:100%}:host-context(.header-actions-container) .multi-action-button-container .form-field-action .primary-action-button{min-width:2.1875rem;padding-left:.9375rem;padding-right:.9375rem}\n"], dependencies: [{ kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
9859
9873
|
}
|
|
9860
9874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
|
|
9861
9875
|
type: Component,
|
|
9862
|
-
args: [{ selector: 'lib-multi-action-button', standalone: false, template: "<div class=\"multi-action-button-container\">\n @if (actions) {\n <div class=\"form-field-action\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n @if (actions.length > 1) {\n <div class=\"secondary-action-button\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n }\n </div>\n }\n @if (showMoreActions) {\n <div class=\"multi-action-button-dropdown\">\n <ul>\n @for (action of actions; track action) {\n <li [hidden]=\"action
|
|
9876
|
+
args: [{ selector: 'lib-multi-action-button', standalone: false, template: "<div class=\"multi-action-button-container\">\n @if (actions) {\n <div class=\"form-field-action\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n @if (actions.length > 1) {\n <div class=\"secondary-action-button\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n }\n </div>\n }\n @if (showMoreActions) {\n <div class=\"multi-action-button-dropdown\">\n <ul>\n @for (action of actions; track action) {\n <li [hidden]=\"isActionHidden(action)\" class=\"confirm-item-name {{action.style}}\" (click)=\"actionClicked(action)\">\n @if (action.icon) {\n <div class=\"confirm-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [".multi-action-button-container{position:absolute;right:.9375rem;top:.625rem;z-index:999999}.multi-action-button-container .form-field-action{display:flex;flex-direction:row;align-items:center;padding:0;height:1.5625rem}.multi-action-button-container .form-field-action .primary-action-button{padding-left:.625rem;padding-right:.625rem;border-right-style:solid;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);color:var(--offWhite_ALWAYS);cursor:pointer;border-top-left-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .primary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button{height:100%;width:1.875rem;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;background:var(--primary);color:var(--white);cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);border-color:var(--stroke);box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}.multi-action-button-container .form-field-action .secondary-action-button:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.multi-action-button-container .form-field-action .secondary-action-button .secondary-actions-arrow{transform:rotate(270deg)}.multi-action-button-container .multi-action-button-dropdown{position:absolute;background:var(--background);width:100%}.multi-action-button-container .multi-action-button-dropdown ul{width:100%;margin:0;padding:0}.multi-action-button-container .multi-action-button-dropdown ul li{list-style-type:none;padding:.3125rem .3125rem .3125rem .625rem;cursor:pointer}.multi-action-button-container .multi-action-button-dropdown ul li[hidden]{display:none}.multi-action-button-container .multi-action-button-dropdown ul li:hover{background-color:var(--inputBorder)}.multi-action-button-container .multi-action-button-dropdown ul li.danger{background-color:var(--redShadow);color:var(--red);display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul li.danger:hover{background-color:var(--red);color:var(--white)}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.multi-action-button-container .multi-action-button-dropdown ul .confirm-item-icon.icon-trash:before{content:none}:host-context(.header-actions-container) .multi-action-button-container{position:relative;top:unset;right:unset;height:2.0625rem}:host-context(.header-actions-container) .multi-action-button-container .form-field-action{height:100%}:host-context(.header-actions-container) .multi-action-button-container .form-field-action .primary-action-button{min-width:2.1875rem;padding-left:.9375rem;padding-right:.9375rem}\n"] }]
|
|
9863
9877
|
}], propDecorators: { actions: [{
|
|
9864
9878
|
type: Input
|
|
9865
9879
|
}], actionRequested: [{
|
|
@@ -9971,11 +9985,11 @@ class FormHeaderComponent {
|
|
|
9971
9985
|
return this.data.badges || this.badges;
|
|
9972
9986
|
}
|
|
9973
9987
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormHeaderComponent, isStandalone: false, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", strictReadonlyUi: "strictReadonlyUi", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n </div>\n <div class=\"form-header-title-text\">\n <span class=\"form-title\">{{displayTitle}}</span>\n @if (data.name) {\n <span class=\"form-title title-name\">{{data.name}}</span>\n }\n </div>\n </div>\n <div class=\"header-actions-container\">\n @if (showHeaderToggle) {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n }\n @if (hasMoreActions && !strictReadonlyUi) {\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n @if (showActionsDropDown) {\n <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n @for (action of moreActions; track action) {\n <div\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n @if (action.icon) {\n <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </div>\n }\n </div>\n }\n </div>\n }\n @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n <div class=\"save-button\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveTooltip}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n }\n @if (hasMultiActions && !strictReadonlyUi) {\n <lib-multi-action-button\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n }\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n @for (badge of headerBadges; track badge) {\n <div class=\"header-badge-container {{badge.class}}\">\n @if (badge.circle) {\n <span class=\"circle {{badge.circle}}\"></span>\n }\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
|
|
9988
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormHeaderComponent, isStandalone: false, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", strictReadonlyUi: "strictReadonlyUi", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n </div>\n <div class=\"form-header-title-text\">\n <span class=\"form-title\">{{displayTitle}}</span>\n @if (data.name) {\n <span class=\"form-title title-name\">{{data.name}}</span>\n }\n </div>\n </div>\n <div class=\"header-actions-container\">\n @if (showHeaderToggle) {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n }\n @if (hasMoreActions && !strictReadonlyUi) {\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n @if (showActionsDropDown) {\n <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n @for (action of moreActions; track action) {\n <div\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n @if (action.icon) {\n <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </div>\n }\n </div>\n }\n </div>\n }\n @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n <div class=\"save-button\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveTooltip}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n }\n @if (hasMultiActions && !strictReadonlyUi) {\n <lib-multi-action-button\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n }\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n @for (badge of headerBadges; track badge) {\n <div class=\"header-badge-container {{badge.class}}\">\n @if (badge.circle) {\n <span class=\"circle {{badge.circle}}\"></span>\n }\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.header-action-button{margin-right:1.25rem}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash:before{content:none}.form-header-container .header-actions-container .save-button.danger{background:var(--red);box-shadow:0 .1875rem .5625rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:hover{background:var(--red);filter:brightness(110%);box-shadow:0 .125rem .1875rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:active{background:var(--red);filter:brightness(85%)}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
|
|
9975
9989
|
}
|
|
9976
9990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormHeaderComponent, decorators: [{
|
|
9977
9991
|
type: Component,
|
|
9978
|
-
args: [{ selector: 'lib-form-header', standalone: false, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n </div>\n <div class=\"form-header-title-text\">\n <span class=\"form-title\">{{displayTitle}}</span>\n @if (data.name) {\n <span class=\"form-title title-name\">{{data.name}}</span>\n }\n </div>\n </div>\n <div class=\"header-actions-container\">\n @if (showHeaderToggle) {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n }\n @if (hasMoreActions && !strictReadonlyUi) {\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n @if (showActionsDropDown) {\n <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n @for (action of moreActions; track action) {\n <div\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n @if (action.icon) {\n <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </div>\n }\n </div>\n }\n </div>\n }\n @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n <div class=\"save-button\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveTooltip}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n }\n @if (hasMultiActions && !strictReadonlyUi) {\n <lib-multi-action-button\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n }\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n @for (badge of headerBadges; track badge) {\n <div class=\"header-badge-container {{badge.class}}\">\n @if (badge.circle) {\n <span class=\"circle {{badge.circle}}\"></span>\n }\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
|
|
9992
|
+
args: [{ selector: 'lib-form-header', standalone: false, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n </div>\n <div class=\"form-header-title-text\">\n <span class=\"form-title\">{{displayTitle}}</span>\n @if (data.name) {\n <span class=\"form-title title-name\">{{data.name}}</span>\n }\n </div>\n </div>\n <div class=\"header-actions-container\">\n @if (showHeaderToggle) {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n }\n @if (hasMoreActions && !strictReadonlyUi) {\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n @if (showActionsDropDown) {\n <div class=\"more-actions-list\" (clickOutside)=\"closeActionsMoreActions()\">\n @for (action of moreActions; track action) {\n <div\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n @if (action.icon) {\n <div class=\"more-actions-item-icon {{action.icon}}\"></div>\n }\n {{action.label}}\n </div>\n }\n </div>\n }\n </div>\n }\n @if (!hasMultiActions && showHeaderButton && !strictReadonlyUi) {\n <div class=\"save-button\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveTooltip}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n }\n @if (hasMultiActions && !strictReadonlyUi) {\n <lib-multi-action-button\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n }\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n @for (badge of headerBadges; track badge) {\n <div class=\"header-badge-container {{badge.class}}\">\n @if (badge.circle) {\n <span class=\"circle {{badge.circle}}\"></span>\n }\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n }\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;padding-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem;z-index:100001}:host.is-scrolled{box-shadow:0 .625rem .625rem -.625rem var(--boxShadow)}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.header-action-button{margin-right:1.25rem}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.form-header-container .header-actions-container .save-button.header-action-button .header-action-button-icon.icon-trash:before{content:none}.form-header-container .header-actions-container .save-button.danger{background:var(--red);box-shadow:0 .1875rem .5625rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:hover{background:var(--red);filter:brightness(110%);box-shadow:0 .125rem .1875rem 0 var(--redShadow)}.form-header-container .header-actions-container .save-button.danger:active{background:var(--red);filter:brightness(85%)}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:10000001;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(/assets/svgs/ArrowDown.svg);background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem;z-index:10000002}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;min-height:1.5625rem;width:100%;padding:.5rem .9375rem;color:var(--tableText);cursor:pointer;font-size:1.09rem}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container .more-actions-item:has(.icon-trash){background-color:var(--redShadow);color:var(--red)}.more-actions-container .more-actions-item:has(.icon-trash):hover{background-color:var(--red);color:var(--white)}.more-actions-container .more-actions-item .more-actions-item-icon{font-family:icomoon!important;font-size:1.31rem;margin-right:.5rem;display:flex;align-items:center}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash{width:1.31rem;height:1.31rem;background-image:url(/assets/svgs/Confirm_Trash.svg);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;font-family:inherit}.more-actions-container .more-actions-item .more-actions-item-icon.icon-trash:before{content:none}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:var(--formHeaderToggleRadius);padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
|
|
9979
9993
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
9980
9994
|
type: Input
|
|
9981
9995
|
}], badges: [{
|
|
@@ -10440,6 +10454,16 @@ class TerminatorFormComponent extends ProjectableForm {
|
|
|
10440
10454
|
break;
|
|
10441
10455
|
}
|
|
10442
10456
|
}
|
|
10457
|
+
multiActionRequested(action) {
|
|
10458
|
+
switch (action.id) {
|
|
10459
|
+
case 'save':
|
|
10460
|
+
this.save();
|
|
10461
|
+
break;
|
|
10462
|
+
case 'delete':
|
|
10463
|
+
this.deleteEntity();
|
|
10464
|
+
break;
|
|
10465
|
+
}
|
|
10466
|
+
}
|
|
10443
10467
|
clear() {
|
|
10444
10468
|
this.formData.configTypeId = '';
|
|
10445
10469
|
this.clearForm();
|
|
@@ -10578,11 +10602,11 @@ class TerminatorFormComponent extends ProjectableForm {
|
|
|
10578
10602
|
});
|
|
10579
10603
|
}
|
|
10580
10604
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TerminatorFormComponent, deps: [{ token: TerminatorFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TerminatorFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Terminator Details' : 'Create Terminator')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"terminator-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Service'\"\n [contentStyle]=\"'z-index: 10003'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n [placeholder]=\"'Select a service'\"\n (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Router'\"\n [contentStyle]=\"'z-index: 10002'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n [placeholder]=\"'Select a router'\"\n (addNamedAttribute)=\"routerAttributeChanged($event)\"\n (namedAttributeRemoved)=\"routerAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity'\"\n [contentStyle]=\"'z-index: 10001'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n [placeholder]=\"'Select an identity'\"\n (addNamedAttribute)=\"identityAttributeChanged($event)\"\n (namedAttributeRemoved)=\"identityAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Address'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Binding</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Identity Secret</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'row'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Hosting Cost</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Precedence</span>\n <select\n [(ngModel)]=\"formData.precedence\"\n [disabled]=\"true\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown read-only\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </div>\n </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n}\n</div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
|
|
10605
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TerminatorFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Terminator Details' : 'Create Terminator')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"terminator-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Service'\"\n [contentStyle]=\"'z-index: 10003'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n [placeholder]=\"'Select a service'\"\n (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Router'\"\n [contentStyle]=\"'z-index: 10002'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n [placeholder]=\"'Select a router'\"\n (addNamedAttribute)=\"routerAttributeChanged($event)\"\n (namedAttributeRemoved)=\"routerAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity'\"\n [contentStyle]=\"'z-index: 10001'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n [placeholder]=\"'Select an identity'\"\n (addNamedAttribute)=\"identityAttributeChanged($event)\"\n (namedAttributeRemoved)=\"identityAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Address'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Binding</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Identity Secret</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'row'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Hosting Cost</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Precedence</span>\n <select\n [(ngModel)]=\"formData.precedence\"\n [disabled]=\"true\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown read-only\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </div>\n </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n}\n</div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
|
|
10582
10606
|
}
|
|
10583
10607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TerminatorFormComponent, decorators: [{
|
|
10584
10608
|
type: Component,
|
|
10585
|
-
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Terminator Details' : 'Create Terminator')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"terminator-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Service'\"\n [contentStyle]=\"'z-index: 10003'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n [placeholder]=\"'Select a service'\"\n (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Router'\"\n [contentStyle]=\"'z-index: 10002'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n [placeholder]=\"'Select a router'\"\n (addNamedAttribute)=\"routerAttributeChanged($event)\"\n (namedAttributeRemoved)=\"routerAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity'\"\n [contentStyle]=\"'z-index: 10001'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n [placeholder]=\"'Select an identity'\"\n (addNamedAttribute)=\"identityAttributeChanged($event)\"\n (namedAttributeRemoved)=\"identityAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Address'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Binding</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Identity Secret</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'row'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Hosting Cost</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Precedence</span>\n <select\n [(ngModel)]=\"formData.precedence\"\n [disabled]=\"true\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown read-only\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </div>\n </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n}\n</div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"] }]
|
|
10609
|
+
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Terminator Details' : 'Create Terminator')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"terminator-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Service'\"\n [contentStyle]=\"'z-index: 10003'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedServiceNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedServiceNamedAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n [placeholder]=\"'Select a service'\"\n (addNamedAttribute)=\"serviceAttributeChanged($event)\"\n (namedAttributeRemoved)=\"serviceAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Router'\"\n [contentStyle]=\"'z-index: 10002'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedRouterNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedRouterNamedAttributes\"\n [availableNamedAttributes]=\"svc.routerNamedAttributes\"\n [placeholder]=\"'Select a router'\"\n (addNamedAttribute)=\"routerAttributeChanged($event)\"\n (namedAttributeRemoved)=\"routerAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity'\"\n [contentStyle]=\"'z-index: 10001'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"selectedIdentityNamedAttribute\" [disabled]=\"true\"/>\n <!--<lib-tag-selector\n [(selectedNamedAttributes)]=\"svc.selectedIdentityNamedAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n [placeholder]=\"'Select an identity'\"\n (addNamedAttribute)=\"identityAttributeChanged($event)\"\n (namedAttributeRemoved)=\"identityAttributeChanged()\"\n ></lib-tag-selector>-->\n </lib-form-field-container>\n</div>\n<div class=\"form-group-column one-half\">\n <lib-form-field-container\n [title]=\"'Address'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <input class=\"form-field-input read-only\" [disabled]=\"true\" [(ngModel)]=\"formData.address\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n [contentStyle]=\"'z-index: 1001'\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Binding</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.binding\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Identity Secret</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.identitySecret\"/>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'row'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Hosting Cost</span>\n <input class=\"form-field-input\" [disabled]=\"true\" [(ngModel)]=\"formData.cost\" type=\"number\"/>\n </div>\n <div class=\"form-field-label-container\">\n <span class=\"form-field-title\">Precedence</span>\n <select\n [(ngModel)]=\"formData.precedence\"\n [disabled]=\"true\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown read-only\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </div>\n </lib-form-field-container>\n</div>\n</div>\n@if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n}\n</div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".terminator-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}::ng-deep .terminator-form-container select:disabled,::ng-deep .terminator-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}@media (max-width: 1524px){.terminator-form-container .projectable-form-main-column{max-width:38.75rem}}\n"] }]
|
|
10586
10610
|
}], ctorParameters: () => [{ type: TerminatorFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
10587
10611
|
type: Inject,
|
|
10588
10612
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -16080,6 +16104,16 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
16080
16104
|
break;
|
|
16081
16105
|
}
|
|
16082
16106
|
}
|
|
16107
|
+
multiActionRequested(action) {
|
|
16108
|
+
switch (action.id) {
|
|
16109
|
+
case 'save':
|
|
16110
|
+
this.save();
|
|
16111
|
+
break;
|
|
16112
|
+
case 'delete':
|
|
16113
|
+
this.deleteEntity();
|
|
16114
|
+
break;
|
|
16115
|
+
}
|
|
16116
|
+
}
|
|
16083
16117
|
updateEnrollment() {
|
|
16084
16118
|
switch (this.enrollmentType) {
|
|
16085
16119
|
case 'ott':
|
|
@@ -16295,7 +16329,7 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
16295
16329
|
provide: MatDialogRef,
|
|
16296
16330
|
useValue: {}
|
|
16297
16331
|
}
|
|
16298
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this identity\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n @if (canReadRelated('auth-policies')) {\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n >\n <select\n [(ngModel)]=\"formData.authPolicyId\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select an Authentication Policy</option>\n @for (policy of authPolicies; track policy) {\n <option\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\n }\n </select>\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External ID</span>\n </div>\n <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Optional External ID\"\n [(ngModel)]=\"formData.externalId\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </lib-form-field-container>\n }\n <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Enrollment Type'\"\n [title2]=\"enrollmentTypeTitle\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <select\n id=\"EnrollmentType\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentCA\"\n (change)=\"updateEnrollment()\"\n >\n @for (ca of cas; track ca) {\n <option [value]=\"ca.id\">{{ca.name}}</option>\n }\n </select>\n }\n @if (enrollmentType === 'updb' && !isEditing) {\n <input\n id=\"UPDBName\"\n class=\"form-field-input\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Admin'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced is-admin-container\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">IS ADMIN</div>\n <div\n (click)=\"toggleIsAdmin()\"\n [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Hosting Cost'\"\n [title2]=\"'Precedence'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.defaultHostingCost\"\n type=\"number\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </lib-form-field-container>\n @for (tagElement of tagElements; track tagElement) {\n <lib-form-field-container\n [title]=\"tagElement.label\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n }\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enrollment:</span>\n </div>\n @if (jwtExpired !== undefined && !showResetToken) {\n <span class=\"form-field-label info-text\"\n [class.expired-text]=\"jwtExpired\"\n >\n {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n </span>\n }\n </div>\n @if (!useStrictReadonlyForm) {\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"jwt\"\n [expiration]=\"enrollmentExpiration\"\n [authenticators]=\"formData.authenticators\"\n [type]=\"'identity'\"\n [canExpand]=\"true\"\n (doRefresh)=\"refreshIdentity(true)\"\n ></lib-qr-code>\n }\n </div>\n </lib-form-field-container>\n }\n @if (isEdit && !useStrictReadonlyForm) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enable / Disable:</span>\n </div>\n </div>\n @if (entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Enable Identity</button>\n </div>\n }\n @if (!entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Disable Identity</button>\n </div>\n }\n </div>\n @if (!entityDisabled) {\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Disable Until:</span>\n </div>\n </div>\n <div class=\"disable-identity-duration-container\">\n <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n <option value=\"indefinite\">Indefinite</option>\n <option value=\"pick-date\">Pick a Date & Time</option>\n </select>\n @if (disableDurationType === 'pick-date') {\n <div class=\"disable-identity-datetime-inputs\">\n <lib-date-time-picker\n class=\"disable-identity-date-time-picker\"\n [(ngModel)]=\"disableDuration\"\n [minDate]=\"minDate\"\n [closeOnDateSelect]=\"true\"\n ></lib-date-time-picker>\n </div>\n }\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('services')) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"true\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"associatedServiceNames\"\n ></lib-preview-list>\n <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('service-policies')) {\n <lib-form-field-container\n [title]=\"'Associated Service Policies'\"\n [count]=\"associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"false\"\n [isLoading]=\"servicePoliciesLoading\"\n [allNames]=\"associatedServicePolicyNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
|
|
16332
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"identity-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this identity\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n @if (canReadRelated('auth-policies')) {\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n >\n <select\n [(ngModel)]=\"formData.authPolicyId\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select an Authentication Policy</option>\n @for (policy of authPolicies; track policy) {\n <option\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\n }\n </select>\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External ID</span>\n </div>\n <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Optional External ID\"\n [(ngModel)]=\"formData.externalId\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </lib-form-field-container>\n }\n <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Enrollment Type'\"\n [title2]=\"enrollmentTypeTitle\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <select\n id=\"EnrollmentType\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentCA\"\n (change)=\"updateEnrollment()\"\n >\n @for (ca of cas; track ca) {\n <option [value]=\"ca.id\">{{ca.name}}</option>\n }\n </select>\n }\n @if (enrollmentType === 'updb' && !isEditing) {\n <input\n id=\"UPDBName\"\n class=\"form-field-input\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Admin'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced is-admin-container\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">IS ADMIN</div>\n <div\n (click)=\"toggleIsAdmin()\"\n [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Hosting Cost'\"\n [title2]=\"'Precedence'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.defaultHostingCost\"\n type=\"number\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </lib-form-field-container>\n @for (tagElement of tagElements; track tagElement) {\n <lib-form-field-container\n [title]=\"tagElement.label\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n }\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enrollment:</span>\n </div>\n @if (jwtExpired !== undefined && !showResetToken) {\n <span class=\"form-field-label info-text\"\n [class.expired-text]=\"jwtExpired\"\n >\n {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n </span>\n }\n </div>\n @if (!useStrictReadonlyForm) {\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"jwt\"\n [expiration]=\"enrollmentExpiration\"\n [authenticators]=\"formData.authenticators\"\n [type]=\"'identity'\"\n [canExpand]=\"true\"\n (doRefresh)=\"refreshIdentity(true)\"\n ></lib-qr-code>\n }\n </div>\n </lib-form-field-container>\n }\n @if (isEdit && !useStrictReadonlyForm) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enable / Disable:</span>\n </div>\n </div>\n @if (entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Enable Identity</button>\n </div>\n }\n @if (!entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Disable Identity</button>\n </div>\n }\n </div>\n @if (!entityDisabled) {\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Disable Until:</span>\n </div>\n </div>\n <div class=\"disable-identity-duration-container\">\n <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n <option value=\"indefinite\">Indefinite</option>\n <option value=\"pick-date\">Pick a Date & Time</option>\n </select>\n @if (disableDurationType === 'pick-date') {\n <div class=\"disable-identity-datetime-inputs\">\n <lib-date-time-picker\n class=\"disable-identity-date-time-picker\"\n [(ngModel)]=\"disableDuration\"\n [minDate]=\"minDate\"\n [closeOnDateSelect]=\"true\"\n ></lib-date-time-picker>\n </div>\n }\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('services')) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"true\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"associatedServiceNames\"\n ></lib-preview-list>\n <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('service-policies')) {\n <lib-form-field-container\n [title]=\"'Associated Service Policies'\"\n [count]=\"associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"false\"\n [isLoading]=\"servicePoliciesLoading\"\n [allNames]=\"associatedServicePolicyNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "lib-date-time-picker", inputs: ["minDate", "placeholder", "displayFormat", "ariaLabel", "closeOnDateSelect", "panelWidth"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
|
|
16299
16333
|
}
|
|
16300
16334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentityFormComponent, decorators: [{
|
|
16301
16335
|
type: Component,
|
|
@@ -16304,7 +16338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
16304
16338
|
provide: MatDialogRef,
|
|
16305
16339
|
useValue: {}
|
|
16306
16340
|
}
|
|
16307
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this identity\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n @if (canReadRelated('auth-policies')) {\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n >\n <select\n [(ngModel)]=\"formData.authPolicyId\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select an Authentication Policy</option>\n @for (policy of authPolicies; track policy) {\n <option\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\n }\n </select>\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External ID</span>\n </div>\n <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Optional External ID\"\n [(ngModel)]=\"formData.externalId\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </lib-form-field-container>\n }\n <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Enrollment Type'\"\n [title2]=\"enrollmentTypeTitle\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <select\n id=\"EnrollmentType\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentCA\"\n (change)=\"updateEnrollment()\"\n >\n @for (ca of cas; track ca) {\n <option [value]=\"ca.id\">{{ca.name}}</option>\n }\n </select>\n }\n @if (enrollmentType === 'updb' && !isEditing) {\n <input\n id=\"UPDBName\"\n class=\"form-field-input\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Admin'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced is-admin-container\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">IS ADMIN</div>\n <div\n (click)=\"toggleIsAdmin()\"\n [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Hosting Cost'\"\n [title2]=\"'Precedence'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.defaultHostingCost\"\n type=\"number\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </lib-form-field-container>\n @for (tagElement of tagElements; track tagElement) {\n <lib-form-field-container\n [title]=\"tagElement.label\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n }\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enrollment:</span>\n </div>\n @if (jwtExpired !== undefined && !showResetToken) {\n <span class=\"form-field-label info-text\"\n [class.expired-text]=\"jwtExpired\"\n >\n {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n </span>\n }\n </div>\n @if (!useStrictReadonlyForm) {\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"jwt\"\n [expiration]=\"enrollmentExpiration\"\n [authenticators]=\"formData.authenticators\"\n [type]=\"'identity'\"\n [canExpand]=\"true\"\n (doRefresh)=\"refreshIdentity(true)\"\n ></lib-qr-code>\n }\n </div>\n </lib-form-field-container>\n }\n @if (isEdit && !useStrictReadonlyForm) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enable / Disable:</span>\n </div>\n </div>\n @if (entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Enable Identity</button>\n </div>\n }\n @if (!entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Disable Identity</button>\n </div>\n }\n </div>\n @if (!entityDisabled) {\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Disable Until:</span>\n </div>\n </div>\n <div class=\"disable-identity-duration-container\">\n <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n <option value=\"indefinite\">Indefinite</option>\n <option value=\"pick-date\">Pick a Date & Time</option>\n </select>\n @if (disableDurationType === 'pick-date') {\n <div class=\"disable-identity-datetime-inputs\">\n <lib-date-time-picker\n class=\"disable-identity-date-time-picker\"\n [(ngModel)]=\"disableDuration\"\n [minDate]=\"minDate\"\n [closeOnDateSelect]=\"true\"\n ></lib-date-time-picker>\n </div>\n }\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('services')) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"true\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"associatedServiceNames\"\n ></lib-preview-list>\n <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('service-policies')) {\n <lib-form-field-container\n [title]=\"'Associated Service Policies'\"\n [count]=\"associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"false\"\n [isLoading]=\"servicePoliciesLoading\"\n [allNames]=\"associatedServicePolicyNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"] }]
|
|
16341
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"identity-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this identity\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n (selectedRoleAttributesChange)=\"roleAttributesChanged($event)\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n @if (canReadRelated('auth-policies')) {\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n >\n <select\n [(ngModel)]=\"formData.authPolicyId\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select an Authentication Policy</option>\n @for (policy of authPolicies; track policy) {\n <option\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\n }\n </select>\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External ID</span>\n </div>\n <span class=\"form-field-label\">{{ useStrictReadonlyForm ? '' : 'OPTIONAL' }}</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Optional External ID\"\n [(ngModel)]=\"formData.externalId\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </lib-form-field-container>\n }\n <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Enrollment Type'\"\n [title2]=\"enrollmentTypeTitle\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <select\n id=\"EnrollmentType\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\" [hidden]=\"!canReadRelated('cas')\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n @if (enrollmentType === 'CA' && canReadRelated('cas')) {\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentCA}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n [(ngModel)]=\"enrollmentCA\"\n (change)=\"updateEnrollment()\"\n >\n @for (ca of cas; track ca) {\n <option [value]=\"ca.id\">{{ca.name}}</option>\n }\n </select>\n }\n @if (enrollmentType === 'updb' && !isEditing) {\n <input\n id=\"UPDBName\"\n class=\"form-field-input\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Admin'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced is-admin-container\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">IS ADMIN</div>\n <div\n (click)=\"toggleIsAdmin()\"\n [ngClass]=\"{ on: formData.isAdmin, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Hosting Cost'\"\n [title2]=\"'Precedence'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.defaultHostingCost\"\n type=\"number\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"default\">Default</option>\n <option value=\"required\">Required</option>\n <option value=\"failed\">Failed</option>\n </select>\n </lib-form-field-container>\n @for (tagElement of tagElements; track tagElement) {\n <lib-form-field-container\n [title]=\"tagElement.label\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n }\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (isEdit && (hasEnrolmentToken || hasAuthenticator)) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enrollment:</span>\n </div>\n @if (jwtExpired !== undefined && !showResetToken) {\n <span class=\"form-field-label info-text\"\n [class.expired-text]=\"jwtExpired\"\n >\n {{jwtExpired ? 'EXPIRED' : 'EXPIRES'}} {{expirationDate}}\n </span>\n }\n </div>\n @if (!useStrictReadonlyForm) {\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"jwt\"\n [expiration]=\"enrollmentExpiration\"\n [authenticators]=\"formData.authenticators\"\n [type]=\"'identity'\"\n [canExpand]=\"true\"\n (doRefresh)=\"refreshIdentity(true)\"\n ></lib-qr-code>\n }\n </div>\n </lib-form-field-container>\n }\n @if (isEdit && !useStrictReadonlyForm) {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enable / Disable:</span>\n </div>\n </div>\n @if (entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Enable Identity</button>\n </div>\n }\n @if (!entityDisabled) {\n <div class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n <div class=\"disable-identity-background\"></div>\n <button class=\"download-button disable-identity-button\">Disable Identity</button>\n </div>\n }\n </div>\n @if (!entityDisabled) {\n <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Disable Until:</span>\n </div>\n </div>\n <div class=\"disable-identity-duration-container\">\n <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n <option value=\"indefinite\">Indefinite</option>\n <option value=\"pick-date\">Pick a Date & Time</option>\n </select>\n @if (disableDurationType === 'pick-date') {\n <div class=\"disable-identity-datetime-inputs\">\n <lib-date-time-picker\n class=\"disable-identity-date-time-picker\"\n [(ngModel)]=\"disableDuration\"\n [minDate]=\"minDate\"\n [closeOnDateSelect]=\"true\"\n ></lib-date-time-picker>\n </div>\n }\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('services')) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"true\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"associatedServiceNames\"\n ></lib-preview-list>\n <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.id && canReadRelated('service-policies')) {\n <lib-form-field-container\n [title]=\"'Associated Service Policies'\"\n [count]=\"associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n >\n <lib-preview-list\n (itemSelected)=\"serviceSelected($event)\"\n [clickable]=\"false\"\n [isLoading]=\"servicePoliciesLoading\"\n [allNames]=\"associatedServicePolicyNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium);flex-wrap:wrap;width:100%;max-width:100%}.disable-identity-duration-container .form-field-dropdown{min-width:10rem;flex:1 1 10rem;width:100%;max-width:100%}.disable-identity-datetime-inputs{display:flex;flex-direction:row;gap:var(--gapMedium);align-items:center;flex:1 1 16.5rem;min-width:0;max-width:100%}.disable-identity-date-time-picker{width:100%;max-width:100%;min-width:0;flex:1 1 16.5rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.info-text{color:var(--groupText)}.info-text.expired-text{color:var(--red)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .copy-text.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}.disable-identity-datetime-inputs{width:100%}.disable-identity-date-time-picker{flex:1 1 100%;width:100%;min-width:100%}}\n"] }]
|
|
16308
16342
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
16309
16343
|
type: Inject,
|
|
16310
16344
|
args: [SETTINGS_SERVICE]
|
|
@@ -19676,6 +19710,16 @@ class EdgeRouterFormComponent extends ProjectableForm {
|
|
|
19676
19710
|
get hasEnrolmentToken() {
|
|
19677
19711
|
return !isEmpty(this.formData.enrollmentJwt) || !isEmpty(this.formData.enrollmentToken);
|
|
19678
19712
|
}
|
|
19713
|
+
multiActionRequested(action) {
|
|
19714
|
+
switch (action.id) {
|
|
19715
|
+
case 'save':
|
|
19716
|
+
this.save();
|
|
19717
|
+
break;
|
|
19718
|
+
case 'delete':
|
|
19719
|
+
this.deleteEntity();
|
|
19720
|
+
break;
|
|
19721
|
+
}
|
|
19722
|
+
}
|
|
19679
19723
|
headerActionRequested(action) {
|
|
19680
19724
|
switch (action.name) {
|
|
19681
19725
|
case 'save':
|
|
@@ -19782,7 +19826,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
|
|
|
19782
19826
|
provide: MatDialogRef,
|
|
19783
19827
|
useValue: {}
|
|
19784
19828
|
}
|
|
19785
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <lib-form-field-container [showHeader]=\"false\">\n @if (formData?.hostname) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">Domain Name</span>\n </div>\n <div class=\"config-container domain-container\">\n <div class=\"config-container-label domain-label\">\n {{ formData?.hostname }}\n </div>\n </div>\n </div>\n }\n @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">ADVERTISE ADDRESS</span>\n </div>\n <div class=\"config-container advertise-address-container\">\n <div class=\"config-container-label advertise-address-label\">\n {{ formData?.supportedProtocols?.tls }}\n <br />\n {{ formData?.supportedProtocols?.wss }}\n </div>\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
19829
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <lib-form-field-container [showHeader]=\"false\">\n @if (formData?.hostname) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">Domain Name</span>\n </div>\n <div class=\"config-container domain-container\">\n <div class=\"config-container-label domain-label\">\n {{ formData?.hostname }}\n </div>\n </div>\n </div>\n }\n @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">ADVERTISE ADDRESS</span>\n </div>\n <div class=\"config-container advertise-address-container\">\n <div class=\"config-container-label advertise-address-label\">\n {{ formData?.supportedProtocols?.tls }}\n <br />\n {{ formData?.supportedProtocols?.wss }}\n </div>\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
19786
19830
|
}
|
|
19787
19831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
|
|
19788
19832
|
type: Component,
|
|
@@ -19791,7 +19835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
19791
19835
|
provide: MatDialogRef,
|
|
19792
19836
|
useValue: {}
|
|
19793
19837
|
}
|
|
19794
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <lib-form-field-container [showHeader]=\"false\">\n @if (formData?.hostname) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">Domain Name</span>\n </div>\n <div class=\"config-container domain-container\">\n <div class=\"config-container-label domain-label\">\n {{ formData?.hostname }}\n </div>\n </div>\n </div>\n }\n @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">ADVERTISE ADDRESS</span>\n </div>\n <div class=\"config-container advertise-address-container\">\n <div class=\"config-container-label advertise-address-label\">\n {{ formData?.supportedProtocols?.tls }}\n <br />\n {{ formData?.supportedProtocols?.wss }}\n </div>\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
|
|
19838
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <lib-form-field-container [showHeader]=\"false\">\n @if (formData?.hostname) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">Domain Name</span>\n </div>\n <div class=\"config-container domain-container\">\n <div class=\"config-container-label domain-label\">\n {{ formData?.hostname }}\n </div>\n </div>\n </div>\n }\n @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n <div class=\"config-item\">\n <div class=\"config-item-label-container\">\n <span class=\"config-title\">ADVERTISE ADDRESS</span>\n </div>\n <div class=\"config-container advertise-address-container\">\n <div class=\"config-container-label advertise-address-label\">\n {{ formData?.supportedProtocols?.tls }}\n <br />\n {{ formData?.supportedProtocols?.wss }}\n </div>\n </div>\n </div>\n }\n </lib-form-field-container>\n }\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (formData.id) {\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
|
|
19795
19839
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
19796
19840
|
type: Inject,
|
|
19797
19841
|
args: [SETTINGS_SERVICE]
|
|
@@ -20007,6 +20051,16 @@ class TransitRouterFormComponent extends ProjectableForm {
|
|
|
20007
20051
|
break;
|
|
20008
20052
|
}
|
|
20009
20053
|
}
|
|
20054
|
+
multiActionRequested(action) {
|
|
20055
|
+
switch (action.id) {
|
|
20056
|
+
case 'save':
|
|
20057
|
+
this.save();
|
|
20058
|
+
break;
|
|
20059
|
+
case 'delete':
|
|
20060
|
+
this.deleteEntity();
|
|
20061
|
+
break;
|
|
20062
|
+
}
|
|
20063
|
+
}
|
|
20010
20064
|
async save(event) {
|
|
20011
20065
|
if (!this.canSaveByPermissions()) {
|
|
20012
20066
|
return;
|
|
@@ -20095,7 +20149,7 @@ class TransitRouterFormComponent extends ProjectableForm {
|
|
|
20095
20149
|
provide: MatDialogRef,
|
|
20096
20150
|
useValue: {}
|
|
20097
20151
|
}
|
|
20098
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this transit router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Cost</span>\n </div>\n <input\n type=\"number\"\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['cost']}\"\n [(ngModel)]=\"formData.cost\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
20152
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this transit router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Cost</span>\n </div>\n <input\n type=\"number\"\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['cost']}\"\n [(ngModel)]=\"formData.cost\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
20099
20153
|
}
|
|
20100
20154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TransitRouterFormComponent, decorators: [{
|
|
20101
20155
|
type: Component,
|
|
@@ -20104,7 +20158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
20104
20158
|
provide: MatDialogRef,
|
|
20105
20159
|
useValue: {}
|
|
20106
20160
|
}
|
|
20107
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this transit router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Cost</span>\n </div>\n <input\n type=\"number\"\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['cost']}\"\n [(ngModel)]=\"formData.cost\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"] }]
|
|
20161
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Transit Router: ' : 'Create New Transit Router'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Transit Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this transit router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'row'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Cost</span>\n </div>\n <input\n type=\"number\"\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['cost']}\"\n [(ngModel)]=\"formData.cost\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.disabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.disabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}\n"] }]
|
|
20108
20162
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
20109
20163
|
type: Inject,
|
|
20110
20164
|
args: [SETTINGS_SERVICE]
|
|
@@ -20777,6 +20831,16 @@ class ServiceFormComponent extends ProjectableForm {
|
|
|
20777
20831
|
break;
|
|
20778
20832
|
}
|
|
20779
20833
|
}
|
|
20834
|
+
multiActionRequested(action) {
|
|
20835
|
+
switch (action.id) {
|
|
20836
|
+
case 'save':
|
|
20837
|
+
this.save();
|
|
20838
|
+
break;
|
|
20839
|
+
case 'delete':
|
|
20840
|
+
this.deleteEntity();
|
|
20841
|
+
break;
|
|
20842
|
+
}
|
|
20843
|
+
}
|
|
20780
20844
|
async save(event) {
|
|
20781
20845
|
if (!this.canSaveByPermissions()) {
|
|
20782
20846
|
return;
|
|
@@ -20840,7 +20904,7 @@ class ServiceFormComponent extends ProjectableForm {
|
|
|
20840
20904
|
provide: MatDialogRef,
|
|
20841
20905
|
useValue: {}
|
|
20842
20906
|
}
|
|
20843
|
-
], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n @if (!useStrictReadonlyForm && canCreateConfig) {\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select configuration type...</option>\n @for (type of svc.configTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <lib-filter-select\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.filteredConfigs\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (selectionChange)=\"configChanged($event)\"\n (filterChange)=\"configFilterChangedDebounced($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n ></lib-filter-select>\n </div>\n @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n <div class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n }\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n @if (showConfigData) {\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n >{{svc.attachLabel}}\n </div>\n }\n </div>\n }\n @if (showConfigData) {\n <input\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n }\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n }\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select a Strategy....</option>\n @for (strat of strategies; track strat) {\n <option\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n }\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'click item to view details'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n @if (canReadRelated('configs')) {\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"!useStrictReadonlyForm\"\n [clickable]=\"true\"\n [tooltip]=\"'View Config'\"\n [showfilter]=\"false\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n }\n @if (canReadRelated('service-policies')) {\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"svc.showServicePoliciesFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n ></lib-preview-list>\n }\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n [showfilter]=\"svc.showTerminatorsFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n ></lib-preview-list>\n </lib-form-field-container>\n <!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
|
|
20907
|
+
], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n @if (!useStrictReadonlyForm && canCreateConfig) {\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select configuration type...</option>\n @for (type of svc.configTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <lib-filter-select\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.filteredConfigs\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (selectionChange)=\"configChanged($event)\"\n (filterChange)=\"configFilterChangedDebounced($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n ></lib-filter-select>\n </div>\n @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n <div class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n }\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n @if (showConfigData) {\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n >{{svc.attachLabel}}\n </div>\n }\n </div>\n }\n @if (showConfigData) {\n <input\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n }\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n }\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select a Strategy....</option>\n @for (strat of strategies; track strat) {\n <option\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n }\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'click item to view details'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n @if (canReadRelated('configs')) {\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"!useStrictReadonlyForm\"\n [clickable]=\"true\"\n [tooltip]=\"'View Config'\"\n [showfilter]=\"false\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n }\n @if (canReadRelated('service-policies')) {\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"svc.showServicePoliciesFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n ></lib-preview-list>\n }\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n [showfilter]=\"svc.showTerminatorsFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n ></lib-preview-list>\n </lib-form-field-container>\n <!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
|
|
20844
20908
|
}
|
|
20845
20909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceFormComponent, decorators: [{
|
|
20846
20910
|
type: Component,
|
|
@@ -20849,7 +20913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
20849
20913
|
provide: MatDialogRef,
|
|
20850
20914
|
useValue: {}
|
|
20851
20915
|
}
|
|
20852
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n @if (!useStrictReadonlyForm && canCreateConfig) {\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select configuration type...</option>\n @for (type of svc.configTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <lib-filter-select\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.filteredConfigs\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (selectionChange)=\"configChanged($event)\"\n (filterChange)=\"configFilterChangedDebounced($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n ></lib-filter-select>\n </div>\n @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n <div class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n }\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n @if (showConfigData) {\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n >{{svc.attachLabel}}\n </div>\n }\n </div>\n }\n @if (showConfigData) {\n <input\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n }\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n }\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select a Strategy....</option>\n @for (strat of strategies; track strat) {\n <option\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n }\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'click item to view details'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n @if (canReadRelated('configs')) {\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"!useStrictReadonlyForm\"\n [clickable]=\"true\"\n [tooltip]=\"'View Config'\"\n [showfilter]=\"false\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n }\n @if (canReadRelated('service-policies')) {\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"svc.showServicePoliciesFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n ></lib-preview-list>\n }\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n [showfilter]=\"svc.showTerminatorsFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n ></lib-preview-list>\n </lib-form-field-container>\n <!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
|
|
20916
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this Service\"\n [ngClass]=\"{error: svc.errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n @if (!useStrictReadonlyForm && canCreateConfig) {\n <lib-form-field-container\n [title]=\"'Add Configurations'\"\n (actionRequested)=\"attachConfig()\"\n (keyup.enter)=\"captureConfigEnterEvent($event)\"\n [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Select a Config</span>\n </div>\n <select\n [(ngModel)]=\"svc.selectedConfigTypeId\"\n (change)=\"configTypeChanged($event)\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select configuration type...</option>\n @for (type of svc.configTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <lib-filter-select\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.filteredConfigs\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (selectionChange)=\"configChanged($event)\"\n (filterChange)=\"configFilterChangedDebounced($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n ></lib-filter-select>\n </div>\n @if (!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview') {\n <div class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n }\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n @if (showConfigData) {\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n >{{svc.attachLabel}}\n </div>\n }\n </div>\n }\n @if (showConfigData) {\n <input\n [(ngModel)]=\"svc.newConfigName\"\n class=\"form-field-input\"\n [placeholder]=\"'New Config Name'\"\n [ngClass]=\"{error: svc.configErrors['name']}\"\n style=\"margin-bottom: 20px;\"\n />\n }\n <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n @if (svc.selectedConfigId !== 'preview') {\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n }\n </div>\n <lib-config-editor\n [(configData)]=\"svc.configData\"\n [schema]=\"svc.selectedSchema\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"svc.configErrors\"\n #configEditor\n ></lib-config-editor>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore) {\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Terminator Strategy'\"\n [title2]=\"'Encryption'\"\n [layout]=\"'row'\"\n [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"formData.terminatorStrategy\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"\">Select a Strategy....</option>\n @for (strat of strategies; track strat) {\n <option\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\n }\n </select>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Require Encryption</div>\n <div\n (click)=\"toggleEncryptionRequired()\"\n [ngClass]=\"{ on: formData.encryptionRequired, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n }\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'click item to view details'\"\n [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n @if (canReadRelated('configs')) {\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configurations</span>\n </div>\n <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedConfigsLoading\"\n [allNames]=\"svc.addedConfigs\"\n [allowRemove]=\"!useStrictReadonlyForm\"\n [clickable]=\"true\"\n [tooltip]=\"'View Config'\"\n [showfilter]=\"false\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\n }\n @if (canReadRelated('service-policies')) {\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Policies</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedServicePoliciesLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewPolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"svc.associatedServicePolicies\"\n [showfilter]=\"svc.showServicePoliciesFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n ></lib-preview-list>\n }\n <div class=\"form-row space-between\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Terminators</span>\n </div>\n <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"svc.associatedTerminatorsLoading\"\n [clickable]=\"true\"\n (itemSelected)=\"svc.previewTerminator($event, router)\"\n [tooltip]=\"'View Terminator'\"\n [allNames]=\"svc.associatedTerminators\"\n [showfilter]=\"false\"\n [showfilter]=\"svc.showTerminatorsFilter\"\n [localFilter]=\"false\"\n (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n ></lib-preview-list>\n </lib-form-field-container>\n <!-- <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Service Policies'\"\n [count]=\"svc.associatedServicePolicies.length\"\n [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n >\n </lib-form-field-container>-->\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [class]=\"'api-call-container'\"\n [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n</div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:var(--formHeaderToggleRadius);border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}.dropdown-container{display:flex;flex-direction:column;position:relative}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
|
|
20853
20917
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
20854
20918
|
type: Inject,
|
|
20855
20919
|
args: [SETTINGS_SERVICE]
|
|
@@ -21400,6 +21464,9 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
21400
21464
|
case 'convert-to-advanced':
|
|
21401
21465
|
this.convertToAdvanced();
|
|
21402
21466
|
break;
|
|
21467
|
+
case 'delete':
|
|
21468
|
+
this.deleteEntity();
|
|
21469
|
+
break;
|
|
21403
21470
|
}
|
|
21404
21471
|
}
|
|
21405
21472
|
headerActionRequested(action) {
|
|
@@ -23492,6 +23559,16 @@ class ServicePolicyFormComponent extends ProjectableForm {
|
|
|
23492
23559
|
},
|
|
23493
23560
|
});
|
|
23494
23561
|
}
|
|
23562
|
+
multiActionRequested(action) {
|
|
23563
|
+
switch (action.id) {
|
|
23564
|
+
case 'save':
|
|
23565
|
+
this.save();
|
|
23566
|
+
break;
|
|
23567
|
+
case 'delete':
|
|
23568
|
+
this.deleteEntity();
|
|
23569
|
+
break;
|
|
23570
|
+
}
|
|
23571
|
+
}
|
|
23495
23572
|
headerActionRequested(action) {
|
|
23496
23573
|
switch (action.name) {
|
|
23497
23574
|
case 'save':
|
|
@@ -23618,7 +23695,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
|
|
|
23618
23695
|
provide: MatDialogRef,
|
|
23619
23696
|
useValue: {}
|
|
23620
23697
|
}
|
|
23621
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Posture Check Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100001'\"\n [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select posture check attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Type'\"\n [title2]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.type\"\n (change)=\"onPolicyTypeChanged()\"\n id=\"PolicyType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"onPolicySemanticChanged()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Posture Checks'\"\n [count]=\"svc.associatedPostureCheckNames.length\"\n [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"postureChecksLoading\"\n [allNames]=\"svc.associatedPostureCheckNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
23698
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Posture Check Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100001'\"\n [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select posture check attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Type'\"\n [title2]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.type\"\n (change)=\"onPolicyTypeChanged()\"\n id=\"PolicyType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"onPolicySemanticChanged()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Posture Checks'\"\n [count]=\"svc.associatedPostureCheckNames.length\"\n [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"postureChecksLoading\"\n [allNames]=\"svc.associatedPostureCheckNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
23622
23699
|
}
|
|
23623
23700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
|
|
23624
23701
|
type: Component,
|
|
@@ -23627,7 +23704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
23627
23704
|
provide: MatDialogRef,
|
|
23628
23705
|
useValue: {}
|
|
23629
23706
|
}
|
|
23630
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Posture Check Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100001'\"\n [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select posture check attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Type'\"\n [title2]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.type\"\n (change)=\"onPolicyTypeChanged()\"\n id=\"PolicyType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"onPolicySemanticChanged()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Posture Checks'\"\n [count]=\"svc.associatedPostureCheckNames.length\"\n [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"postureChecksLoading\"\n [allNames]=\"svc.associatedPostureCheckNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
23707
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"onServiceAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onServiceAttributesChanged()\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"onIdentityAttributesChanged()\"\n (selectedRoleAttributesChange)=\"onIdentityAttributesChanged()\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Posture Check Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100001'\"\n [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select posture check attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Type'\"\n [title2]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.type\"\n (change)=\"onPolicyTypeChanged()\"\n id=\"PolicyType\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"onPolicySemanticChanged()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Posture Checks'\"\n [count]=\"svc.associatedPostureCheckNames.length\"\n [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"postureChecksLoading\"\n [allNames]=\"svc.associatedPostureCheckNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
23631
23708
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
23632
23709
|
type: Inject,
|
|
23633
23710
|
args: [SETTINGS_SERVICE]
|
|
@@ -23950,6 +24027,16 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
|
|
|
23950
24027
|
break;
|
|
23951
24028
|
}
|
|
23952
24029
|
}
|
|
24030
|
+
multiActionRequested(action) {
|
|
24031
|
+
switch (action.id) {
|
|
24032
|
+
case 'save':
|
|
24033
|
+
this.save();
|
|
24034
|
+
break;
|
|
24035
|
+
case 'delete':
|
|
24036
|
+
this.deleteEntity();
|
|
24037
|
+
break;
|
|
24038
|
+
}
|
|
24039
|
+
}
|
|
23953
24040
|
async save(event) {
|
|
23954
24041
|
if (!this.canSaveByPermissions()) {
|
|
23955
24042
|
return;
|
|
@@ -24054,7 +24141,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
|
|
|
24054
24141
|
provide: MatDialogRef,
|
|
24055
24142
|
useValue: {}
|
|
24056
24143
|
}
|
|
24057
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
24144
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
24058
24145
|
}
|
|
24059
24146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
|
|
24060
24147
|
type: Component,
|
|
@@ -24063,7 +24150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
24063
24150
|
provide: MatDialogRef,
|
|
24064
24151
|
useValue: {}
|
|
24065
24152
|
}
|
|
24066
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
24153
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Identity Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select identity attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentityNames.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
24067
24154
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
24068
24155
|
type: Inject,
|
|
24069
24156
|
args: [SETTINGS_SERVICE]
|
|
@@ -24652,7 +24739,7 @@ class ServiceEdgeRouterPolicyFormService {
|
|
|
24652
24739
|
});
|
|
24653
24740
|
}
|
|
24654
24741
|
getServiceNamedAttributes() {
|
|
24655
|
-
return this.zitiService.get('services', {}, []).then((result) => {
|
|
24742
|
+
return this.zitiService.get('services', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
|
|
24656
24743
|
const namedAttributes = result.data.map((service) => {
|
|
24657
24744
|
this.serviceNamedAttributesMap[service.name] = service.id;
|
|
24658
24745
|
return service.name;
|
|
@@ -24662,7 +24749,7 @@ class ServiceEdgeRouterPolicyFormService {
|
|
|
24662
24749
|
});
|
|
24663
24750
|
}
|
|
24664
24751
|
getEdgeRouterNamedAttributes() {
|
|
24665
|
-
return this.zitiService.get('edge-routers', {}, []).then((result) => {
|
|
24752
|
+
return this.zitiService.get('edge-routers', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
|
|
24666
24753
|
const namedAttributes = result.data.map((router) => {
|
|
24667
24754
|
this.edgeRouterNamedAttributesMap[router.name] = router.id;
|
|
24668
24755
|
return router.name;
|
|
@@ -24848,6 +24935,16 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
|
|
|
24848
24935
|
break;
|
|
24849
24936
|
}
|
|
24850
24937
|
}
|
|
24938
|
+
multiActionRequested(action) {
|
|
24939
|
+
switch (action.id) {
|
|
24940
|
+
case 'save':
|
|
24941
|
+
this.save();
|
|
24942
|
+
break;
|
|
24943
|
+
case 'delete':
|
|
24944
|
+
this.deleteEntity();
|
|
24945
|
+
break;
|
|
24946
|
+
}
|
|
24947
|
+
}
|
|
24851
24948
|
async save(event) {
|
|
24852
24949
|
if (!this.canSaveByPermissions()) {
|
|
24853
24950
|
return;
|
|
@@ -24955,7 +25052,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
|
|
|
24955
25052
|
provide: MatDialogRef,
|
|
24956
25053
|
useValue: {}
|
|
24957
25054
|
}
|
|
24958
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
25055
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
24959
25056
|
}
|
|
24960
25057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
|
|
24961
25058
|
type: Component,
|
|
@@ -24964,7 +25061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
24964
25061
|
provide: MatDialogRef,
|
|
24965
25062
|
useValue: {}
|
|
24966
25063
|
}
|
|
24967
|
-
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
25064
|
+
], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\" #formContainer>\n @if (formView === 'simple') {\n <div class=\"projectable-form-main-column form-group-row\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service edge router policy\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Edge Router Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100003'\"\n [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select edge router attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select Service Attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 100002'\"\n [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes, formData.semantic)\"\n [placeholder]=\"'Select service attributes'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Semantic'\"\n [layout]=\"'row'\"\n >\n <select\n [(ngModel)]=\"formData.semantic\"\n (change)=\"updateAssociations()\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"AnyOf\">AnyOf</option>\n <option value=\"AllOf\">AllOf</option>\n </select>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Edge Routers'\"\n [count]=\"svc.associatedEdgeRouterNames.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"edgeRoutersLoading\"\n [allNames]=\"svc.associatedEdgeRouterNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServiceNames.length\"\n [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n }\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n" }]
|
|
24968
25065
|
}], ctorParameters: () => [{ type: SettingsService, decorators: [{
|
|
24969
25066
|
type: Inject,
|
|
24970
25067
|
args: [SETTINGS_SERVICE]
|
|
@@ -25531,6 +25628,16 @@ class ConfigurationFormComponent extends ProjectableForm {
|
|
|
25531
25628
|
break;
|
|
25532
25629
|
}
|
|
25533
25630
|
}
|
|
25631
|
+
multiActionRequested(action) {
|
|
25632
|
+
switch (action.id) {
|
|
25633
|
+
case 'save':
|
|
25634
|
+
this.save();
|
|
25635
|
+
break;
|
|
25636
|
+
case 'delete':
|
|
25637
|
+
this.deleteEntity();
|
|
25638
|
+
break;
|
|
25639
|
+
}
|
|
25640
|
+
}
|
|
25534
25641
|
apiActionRequested(action) {
|
|
25535
25642
|
switch (action.id) {
|
|
25536
25643
|
case 'cli':
|
|
@@ -25717,11 +25824,11 @@ class ConfigurationFormComponent extends ProjectableForm {
|
|
|
25717
25824
|
});
|
|
25718
25825
|
}
|
|
25719
25826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationFormComponent, deps: [{ token: ConfigurationService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25720
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigurationFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n (keyup)=\"apiData()\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n </div>\n <select\n id=\"ConfigTypes\"\n class=\"config-type-select\"\n [(ngModel)]=\"formData.configTypeId\"\n (change)=\"getSchema()\"\n [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n >\n <option value=\"\">Select A Type...</option>\n @for (config of options; track config) {\n <option\n [value]=\"config.id\">{{config.name}}\n </option>\n }\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\n [readOnly]=\"useStrictReadonlyForm\"\n (configDataChange)=\"dataChanged($event)\"\n #configEditor\n ></lib-config-editor>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
25827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigurationFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n (keyup)=\"apiData()\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n </div>\n <select\n id=\"ConfigTypes\"\n class=\"config-type-select\"\n [(ngModel)]=\"formData.configTypeId\"\n (change)=\"getSchema()\"\n [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n >\n <option value=\"\">Select A Type...</option>\n @for (config of options; track config) {\n <option\n [value]=\"config.id\">{{config.name}}\n </option>\n }\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\n [readOnly]=\"useStrictReadonlyForm\"\n (configDataChange)=\"dataChanged($event)\"\n #configEditor\n ></lib-config-editor>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}.projectable-form-main-column.center-only-column{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["readOnly", "configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
25721
25828
|
}
|
|
25722
25829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationFormComponent, decorators: [{
|
|
25723
25830
|
type: Component,
|
|
25724
|
-
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n (keyup)=\"apiData()\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n </div>\n <select\n id=\"ConfigTypes\"\n class=\"config-type-select\"\n [(ngModel)]=\"formData.configTypeId\"\n (change)=\"getSchema()\"\n [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n >\n <option value=\"\">Select A Type...</option>\n @for (config of options; track config) {\n <option\n [value]=\"config.id\">{{config.name}}\n </option>\n }\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\n [readOnly]=\"useStrictReadonlyForm\"\n (configDataChange)=\"dataChanged($event)\"\n #configEditor\n ></lib-config-editor>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}\n"] }]
|
|
25831
|
+
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n (keyup)=\"apiData()\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n (click)=\"svc.toggleJSONView()\"\n >\n JSON\n </span>\n </div>\n </div>\n <div class=\"form-field-input-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">{{isEditing ? 'Config Type' : 'Select a Config Type'}}</span>\n </div>\n <select\n id=\"ConfigTypes\"\n class=\"config-type-select\"\n [(ngModel)]=\"formData.configTypeId\"\n (change)=\"getSchema()\"\n [ngClass]=\"{disabled: isEditing, error: errors['configTypeId']}\"\n [disabled]=\"useStrictReadonlyForm || isEditing\"\n >\n <option value=\"\">Select A Type...</option>\n @for (config of options; track config) {\n <option\n [value]=\"config.id\">{{config.name}}\n </option>\n }\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\n [readOnly]=\"useStrictReadonlyForm\"\n (configDataChange)=\"dataChanged($event)\"\n #configEditor\n ></lib-config-editor>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}.projectable-form-main-column.center-only-column{justify-content:center}\n"] }]
|
|
25725
25832
|
}], ctorParameters: () => [{ type: ConfigurationService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
25726
25833
|
type: Inject,
|
|
25727
25834
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -26154,11 +26261,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
26154
26261
|
}] }, { type: GrowlerService }, { type: ValidationService }] });
|
|
26155
26262
|
|
|
26156
26263
|
class AuthService {
|
|
26157
|
-
constructor(oauthService, http, growlerService, router) {
|
|
26264
|
+
constructor(oauthService, http, growlerService, router, settingsService) {
|
|
26158
26265
|
this.oauthService = oauthService;
|
|
26159
26266
|
this.http = http;
|
|
26160
26267
|
this.growlerService = growlerService;
|
|
26161
26268
|
this.router = router;
|
|
26269
|
+
this.settingsService = settingsService;
|
|
26162
26270
|
this.basePath = '/';
|
|
26163
26271
|
router.events.subscribe((event) => {
|
|
26164
26272
|
if (event instanceof NavigationEnd) {
|
|
@@ -26178,6 +26286,7 @@ class AuthService {
|
|
|
26178
26286
|
window.history.pushState({}, '', urlWithoutHash);
|
|
26179
26287
|
localStorage.removeItem(configKey);
|
|
26180
26288
|
localStorage.removeItem(tokenTypeKey);
|
|
26289
|
+
localStorage.removeItem('oauth_callback_controller');
|
|
26181
26290
|
this.oauthService.logOut();
|
|
26182
26291
|
this.oauthService.configure({});
|
|
26183
26292
|
}
|
|
@@ -26204,6 +26313,9 @@ class AuthService {
|
|
|
26204
26313
|
if (extJwtSigner.targetToken) {
|
|
26205
26314
|
localStorage.setItem(tokenTypeKey || 'oauth_callback_target_token', extJwtSigner.targetToken);
|
|
26206
26315
|
}
|
|
26316
|
+
// Pin the controller selected when the flow was initiated. The IdP round-trip reloads state,
|
|
26317
|
+
// so the callback must exchange against this controller, not whatever is selected on return.
|
|
26318
|
+
localStorage.setItem('oauth_callback_controller', this.settingsService.settings?.selectedEdgeController || '');
|
|
26207
26319
|
this.oauthService.configure(oauthConfig);
|
|
26208
26320
|
return this.oauthService.loadDiscoveryDocumentAndTryLogin().then((initSuccess) => {
|
|
26209
26321
|
if (initSuccess) {
|
|
@@ -26231,7 +26343,7 @@ class AuthService {
|
|
|
26231
26343
|
get accessToken() {
|
|
26232
26344
|
return this.oauthService.getAccessToken();
|
|
26233
26345
|
}
|
|
26234
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, deps: [{ token: i1$6.OAuthService }, { token: i1$3.HttpClient }, { token: GrowlerService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
26346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, deps: [{ token: i1$6.OAuthService }, { token: i1$3.HttpClient }, { token: GrowlerService }, { token: i4.Router }, { token: SETTINGS_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
26235
26347
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, providedIn: 'root' }); }
|
|
26236
26348
|
}
|
|
26237
26349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthService, decorators: [{
|
|
@@ -26239,7 +26351,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
26239
26351
|
args: [{
|
|
26240
26352
|
providedIn: 'root'
|
|
26241
26353
|
}]
|
|
26242
|
-
}], ctorParameters: () => [{ type: i1$6.OAuthService }, { type: i1$3.HttpClient }, { type: GrowlerService }, { type: i4.Router }
|
|
26354
|
+
}], ctorParameters: () => [{ type: i1$6.OAuthService }, { type: i1$3.HttpClient }, { type: GrowlerService }, { type: i4.Router }, { type: SettingsServiceClass, decorators: [{
|
|
26355
|
+
type: Inject,
|
|
26356
|
+
args: [SETTINGS_SERVICE]
|
|
26357
|
+
}] }] });
|
|
26243
26358
|
|
|
26244
26359
|
/*
|
|
26245
26360
|
Copyright NetFoundry Inc.
|
|
@@ -26302,9 +26417,6 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
26302
26417
|
}
|
|
26303
26418
|
ngAfterViewInit() {
|
|
26304
26419
|
super.ngAfterViewInit(true);
|
|
26305
|
-
defer(() => {
|
|
26306
|
-
this.scrollContainer?.nativeElement.scrollTo(0, this.scrollContainer?.nativeElement.scrollHeight);
|
|
26307
|
-
});
|
|
26308
26420
|
}
|
|
26309
26421
|
entityUpdated() {
|
|
26310
26422
|
super.entityUpdated();
|
|
@@ -26329,6 +26441,16 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
26329
26441
|
break;
|
|
26330
26442
|
}
|
|
26331
26443
|
}
|
|
26444
|
+
multiActionRequested(action) {
|
|
26445
|
+
switch (action.id) {
|
|
26446
|
+
case 'save':
|
|
26447
|
+
this.save();
|
|
26448
|
+
break;
|
|
26449
|
+
case 'delete':
|
|
26450
|
+
this.deleteEntity();
|
|
26451
|
+
break;
|
|
26452
|
+
}
|
|
26453
|
+
}
|
|
26332
26454
|
checkExternalIdToggle() {
|
|
26333
26455
|
if (isEmpty(this.formData.claimsProperty)) {
|
|
26334
26456
|
this.formData.useExternalId = false;
|
|
@@ -26753,11 +26875,11 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
26753
26875
|
return !this.errors.jwksEndpoint;
|
|
26754
26876
|
}
|
|
26755
26877
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, deps: [{ token: JwtSignerFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: AuthService }, { token: i1$6.OAuthService }, { token: i1$3.HttpClient }, { token: ZAC_LOGIN_SERVICE }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'column'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Issuer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The "issuer" field on the JWT Signer must match the "iss" field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Audience</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The expected "aud" (audience) field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Claims Property</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if "Use External Id" is set to true. Defaults to "sub"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"If enabled, will match the "claimsProperty" to an identity's "externalId" field. If false, it will match to the identity's id field.\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Use External ID</div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Client ID</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The client id to use when authenticating to the IDP\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External Auth Url</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Scopes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-chips-input\n (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </lib-form-field-container>\n @if (showAutoEnrollment) {\n <lib-form-field-container\n [title]=\"'Auto Enrollment'\"\n [helpText]=\"'Click for more information'\"\n (helpClicked)=\"showAutoEnrollHelp()\"\n >\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n <div\n (click)=\"toggleEnrollToCertEnabled()\"\n [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Token</div>\n <div\n (click)=\"toggleEnrollToTokenEnabled()\"\n [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore && showTokenType) {\n <lib-form-field-container\n [title]=\"'Target Token Type'\"\n [label]=\"'Required'\"\n [helpText]=\"'The target token type. Can be either Access or ID'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"targetToken\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\n }\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Verify OIDC Authentication'\"\n class=\"form-field-advanced\"\n [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n >\n <div class=\"form-field-row\" #oidcVerification>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <div class=\"form-field-title\">Callback URL</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"copy-link-container\">\n <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n </div>\n </div>\n @if (!useStrictReadonlyForm) {\n <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n @if (oauthLoading) {\n <div class=\"spinner\"></div>\n }\n @if (oidcVerified) {\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n }\n </div>\n }\n </div>\n @if (oidcErrorMessageDetail) {\n <div class=\"oidc-error-message-container\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n @if (oidcErrorMessageDetail2) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n }\n @if (oidcErrorMessageDetail3) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n }\n </div>\n }\n @if (oidcAuthTokenClaims) {\n <div class=\"oidc-token-claims-container\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div\n class=\"radio-group-container\"\n [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n (keydown)=\"radioKeyDownHandler($event)\"\n [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n >\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">JWKS Endpoint</span>\n </div>\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">Cert PEM</span>\n </div>\n </div>\n @if (signatureMethod === 'JWKS_ENDPOINT') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWKS Endpoint</span>\n </div>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Enter endpoint URL\"\n [(ngModel)]=\"formData.jwksEndpoint\"\n [ngClass]=\"{error: errors['jwksEndpoint']}\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </div>\n }\n @if (signatureMethod === 'CERT_PEM') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">PEM</span>\n </div>\n <span\n class=\"select-file-button\"\n [class.toggle-readonly]=\"useStrictReadonlyForm\"\n (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n >\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input\n #fileSelect\n type=\"file\"\n style=\"display:none\"\n [disabled]=\"useStrictReadonlyForm\"\n (change)=\"selectPemFile($event)\"\n >\n </div>\n <textarea\n placeholder=\"Paste pem contents or select file\"\n [(ngModel)]=\"formData.certPem\"\n [ngClass]=\"{error: errors['certPem']}\"\n [disabled]=\"useStrictReadonlyForm\"\n ></textarea>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">KID</span>\n </div>\n <span class=\"form-field-label\" >Optional</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n </div>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n <div class=\"help-panel-content\">\n <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n <p class=\"help-panel-intro\">\n Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n </p>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-certificate\"></span>\n Auto-Enroll to Cert\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-key\"></span>\n Auto-Enroll to Token\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-note\">\n <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n </div>\n </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
26878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'column'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Issuer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The "issuer" field on the JWT Signer must match the "iss" field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Audience</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The expected "aud" (audience) field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Claims Property</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if "Use External Id" is set to true. Defaults to "sub"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"If enabled, will match the "claimsProperty" to an identity's "externalId" field. If false, it will match to the identity's id field.\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Use External ID</div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Client ID</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The client id to use when authenticating to the IDP\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External Auth Url</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Scopes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-chips-input\n (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </lib-form-field-container>\n @if (showAutoEnrollment) {\n <lib-form-field-container\n [title]=\"'Auto Enrollment'\"\n [helpText]=\"'Click for more information'\"\n (helpClicked)=\"showAutoEnrollHelp()\"\n >\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n <div\n (click)=\"toggleEnrollToCertEnabled()\"\n [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Token</div>\n <div\n (click)=\"toggleEnrollToTokenEnabled()\"\n [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore && showTokenType) {\n <lib-form-field-container\n [title]=\"'Target Token Type'\"\n [label]=\"'Required'\"\n [helpText]=\"'The target token type. Can be either Access or ID'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"targetToken\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\n }\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Verify OIDC Authentication'\"\n class=\"form-field-advanced\"\n [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n >\n <div class=\"form-field-row\" #oidcVerification>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <div class=\"form-field-title\">Callback URL</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"copy-link-container\">\n <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n </div>\n </div>\n @if (!useStrictReadonlyForm) {\n <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n @if (oauthLoading) {\n <div class=\"spinner\"></div>\n }\n @if (oidcVerified) {\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n }\n </div>\n }\n </div>\n @if (oidcErrorMessageDetail) {\n <div class=\"oidc-error-message-container\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n @if (oidcErrorMessageDetail2) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n }\n @if (oidcErrorMessageDetail3) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n }\n </div>\n }\n @if (oidcAuthTokenClaims) {\n <div class=\"oidc-token-claims-container\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div\n class=\"radio-group-container\"\n [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n (keydown)=\"radioKeyDownHandler($event)\"\n [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n >\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">JWKS Endpoint</span>\n </div>\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">Cert PEM</span>\n </div>\n </div>\n @if (signatureMethod === 'JWKS_ENDPOINT') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWKS Endpoint</span>\n </div>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Enter endpoint URL\"\n [(ngModel)]=\"formData.jwksEndpoint\"\n [ngClass]=\"{error: errors['jwksEndpoint']}\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </div>\n }\n @if (signatureMethod === 'CERT_PEM') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">PEM</span>\n </div>\n <span\n class=\"select-file-button\"\n [class.toggle-readonly]=\"useStrictReadonlyForm\"\n (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n >\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input\n #fileSelect\n type=\"file\"\n style=\"display:none\"\n [disabled]=\"useStrictReadonlyForm\"\n (change)=\"selectPemFile($event)\"\n >\n </div>\n <textarea\n placeholder=\"Paste pem contents or select file\"\n [(ngModel)]=\"formData.certPem\"\n [ngClass]=\"{error: errors['certPem']}\"\n [disabled]=\"useStrictReadonlyForm\"\n ></textarea>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">KID</span>\n </div>\n <span class=\"form-field-label\" >Optional</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n </div>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n <div class=\"help-panel-content\">\n <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n <p class=\"help-panel-intro\">\n Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n </p>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-certificate\"></span>\n Auto-Enroll to Cert\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-key\"></span>\n Auto-Enroll to Token\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-note\">\n <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n </div>\n </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
26757
26879
|
}
|
|
26758
26880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, decorators: [{
|
|
26759
26881
|
type: Component,
|
|
26760
|
-
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'column'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Issuer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The "issuer" field on the JWT Signer must match the "iss" field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Audience</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The expected "aud" (audience) field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Claims Property</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if "Use External Id" is set to true. Defaults to "sub"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"If enabled, will match the "claimsProperty" to an identity's "externalId" field. If false, it will match to the identity's id field.\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Use External ID</div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Client ID</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The client id to use when authenticating to the IDP\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External Auth Url</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Scopes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-chips-input\n (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </lib-form-field-container>\n @if (showAutoEnrollment) {\n <lib-form-field-container\n [title]=\"'Auto Enrollment'\"\n [helpText]=\"'Click for more information'\"\n (helpClicked)=\"showAutoEnrollHelp()\"\n >\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n <div\n (click)=\"toggleEnrollToCertEnabled()\"\n [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Token</div>\n <div\n (click)=\"toggleEnrollToTokenEnabled()\"\n [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore && showTokenType) {\n <lib-form-field-container\n [title]=\"'Target Token Type'\"\n [label]=\"'Required'\"\n [helpText]=\"'The target token type. Can be either Access or ID'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"targetToken\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\n }\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Verify OIDC Authentication'\"\n class=\"form-field-advanced\"\n [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n >\n <div class=\"form-field-row\" #oidcVerification>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <div class=\"form-field-title\">Callback URL</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"copy-link-container\">\n <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n </div>\n </div>\n @if (!useStrictReadonlyForm) {\n <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n @if (oauthLoading) {\n <div class=\"spinner\"></div>\n }\n @if (oidcVerified) {\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n }\n </div>\n }\n </div>\n @if (oidcErrorMessageDetail) {\n <div class=\"oidc-error-message-container\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n @if (oidcErrorMessageDetail2) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n }\n @if (oidcErrorMessageDetail3) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n }\n </div>\n }\n @if (oidcAuthTokenClaims) {\n <div class=\"oidc-token-claims-container\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div\n class=\"radio-group-container\"\n [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n (keydown)=\"radioKeyDownHandler($event)\"\n [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n >\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">JWKS Endpoint</span>\n </div>\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">Cert PEM</span>\n </div>\n </div>\n @if (signatureMethod === 'JWKS_ENDPOINT') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWKS Endpoint</span>\n </div>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Enter endpoint URL\"\n [(ngModel)]=\"formData.jwksEndpoint\"\n [ngClass]=\"{error: errors['jwksEndpoint']}\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </div>\n }\n @if (signatureMethod === 'CERT_PEM') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">PEM</span>\n </div>\n <span\n class=\"select-file-button\"\n [class.toggle-readonly]=\"useStrictReadonlyForm\"\n (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n >\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input\n #fileSelect\n type=\"file\"\n style=\"display:none\"\n [disabled]=\"useStrictReadonlyForm\"\n (change)=\"selectPemFile($event)\"\n >\n </div>\n <textarea\n placeholder=\"Paste pem contents or select file\"\n [(ngModel)]=\"formData.certPem\"\n [ngClass]=\"{error: errors['certPem']}\"\n [disabled]=\"useStrictReadonlyForm\"\n ></textarea>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">KID</span>\n </div>\n <span class=\"form-field-label\" >Optional</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n </div>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n <div class=\"help-panel-content\">\n <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n <p class=\"help-panel-intro\">\n Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n </p>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-certificate\"></span>\n Auto-Enroll to Cert\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-key\"></span>\n Auto-Enroll to Token\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-note\">\n <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n </div>\n </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
|
|
26882
|
+
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [layout]=\"'column'\"\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Issuer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The "issuer" field on the JWT Signer must match the "iss" field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Audience</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The expected "aud" (audience) field on the JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Claims Property</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if "Use External Id" is set to true. Defaults to "sub"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"If enabled, will match the "claimsProperty" to an identity's "externalId" field. If false, it will match to the identity's id field.\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Use External ID</div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Client ID</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The client id to use when authenticating to the IDP\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">External Auth Url</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Scopes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-chips-input\n (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </lib-form-field-container>\n @if (showAutoEnrollment) {\n <lib-form-field-container\n [title]=\"'Auto Enrollment'\"\n [helpText]=\"'Click for more information'\"\n (helpClicked)=\"showAutoEnrollHelp()\"\n >\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n <div\n (click)=\"toggleEnrollToCertEnabled()\"\n [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">Auto-Enroll to Token</div>\n <div\n (click)=\"toggleEnrollToTokenEnabled()\"\n [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n @if (showMore && showTokenType) {\n <lib-form-field-container\n [title]=\"'Target Token Type'\"\n [label]=\"'Required'\"\n [helpText]=\"'The target token type. Can be either Access or ID'\"\n class=\"form-field-advanced\"\n >\n <select\n [(ngModel)]=\"targetToken\"\n id=\"authPolicyId\"\n class=\"form-field-dropdown\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\n }\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Verify OIDC Authentication'\"\n class=\"form-field-advanced\"\n [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n >\n <div class=\"form-field-row\" #oidcVerification>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <div class=\"form-field-title\">Callback URL</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"copy-link-container\">\n <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n </div>\n </div>\n @if (!useStrictReadonlyForm) {\n <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n @if (oauthLoading) {\n <div class=\"spinner\"></div>\n }\n @if (oidcVerified) {\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n }\n </div>\n }\n </div>\n @if (oidcErrorMessageDetail) {\n <div class=\"oidc-error-message-container\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n @if (oidcErrorMessageDetail2) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n }\n @if (oidcErrorMessageDetail3) {\n <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n }\n </div>\n }\n @if (oidcAuthTokenClaims) {\n <div class=\"oidc-token-claims-container\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div\n class=\"radio-group-container\"\n [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n (keydown)=\"radioKeyDownHandler($event)\"\n [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n >\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">JWKS Endpoint</span>\n </div>\n <div\n class=\"radio-button-container\"\n [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n >\n <div class=\"radio-button-circle\">\n <div class=\"radio-button-inner-circle\"></div>\n </div>\n <span class=\"radio-button-label\">Cert PEM</span>\n </div>\n </div>\n @if (signatureMethod === 'JWKS_ENDPOINT') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWKS Endpoint</span>\n </div>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Enter endpoint URL\"\n [(ngModel)]=\"formData.jwksEndpoint\"\n [ngClass]=\"{error: errors['jwksEndpoint']}\"\n [disabled]=\"useStrictReadonlyForm\"\n />\n </div>\n </div>\n }\n @if (signatureMethod === 'CERT_PEM') {\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">PEM</span>\n </div>\n <span\n class=\"select-file-button\"\n [class.toggle-readonly]=\"useStrictReadonlyForm\"\n (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n >\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input\n #fileSelect\n type=\"file\"\n style=\"display:none\"\n [disabled]=\"useStrictReadonlyForm\"\n (change)=\"selectPemFile($event)\"\n >\n </div>\n <textarea\n placeholder=\"Paste pem contents or select file\"\n [(ngModel)]=\"formData.certPem\"\n [ngClass]=\"{error: errors['certPem']}\"\n [disabled]=\"useStrictReadonlyForm\"\n ></textarea>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">KID</span>\n </div>\n <span class=\"form-field-label\" >Optional</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n </div>\n </div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ENABLED</div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n <div class=\"help-panel-content\">\n <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n <p class=\"help-panel-intro\">\n Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n </p>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-certificate\"></span>\n Auto-Enroll to Cert\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-section\">\n <h3 class=\"help-panel-subtitle\">\n <span class=\"icon-key\"></span>\n Auto-Enroll to Token\n </h3>\n <p class=\"help-panel-text\">\n When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n </p>\n </div>\n\n <div class=\"help-panel-note\">\n <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n </div>\n </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
|
|
26761
26883
|
}], ctorParameters: () => [{ type: JwtSignerFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
26762
26884
|
type: Inject,
|
|
26763
26885
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -27308,6 +27430,16 @@ class AuthPolicyFormComponent extends ProjectableForm {
|
|
|
27308
27430
|
break;
|
|
27309
27431
|
}
|
|
27310
27432
|
}
|
|
27433
|
+
multiActionRequested(action) {
|
|
27434
|
+
switch (action.id) {
|
|
27435
|
+
case 'save':
|
|
27436
|
+
this.save();
|
|
27437
|
+
break;
|
|
27438
|
+
case 'delete':
|
|
27439
|
+
this.deleteEntity();
|
|
27440
|
+
break;
|
|
27441
|
+
}
|
|
27442
|
+
}
|
|
27311
27443
|
clear() {
|
|
27312
27444
|
this.formData.configTypeId = '';
|
|
27313
27445
|
this.clearForm();
|
|
@@ -27518,11 +27650,11 @@ class AuthPolicyFormComponent extends ProjectableForm {
|
|
|
27518
27650
|
});
|
|
27519
27651
|
}
|
|
27520
27652
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, deps: [{ token: AuthPolicyFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"'Required'\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.name\"\n [ngClass]=\"{error: errors['name']}\"\n placeholder=\"Name this Auth Policy\"\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Primary Authentication'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Cert</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow x509 certificate based authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Ext JWT</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow externally signed JWT bearer tokens\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleExtJwtAllowed()\"\n [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">UPDB</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow authentication via a traditional "Username Password Database"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbAllowed()\"\n [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData.primary.cert.allowed) {\n <lib-form-field-container\n [title]=\"'Cert Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Allow Expired Certificates</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow expired client certificates to authenticate\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleAllowExpiredCerts()\"\n [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.extJwt.allowed) {\n <lib-form-field-container\n [title]=\"'Ext JWT Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-label-container allowed-signers-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Allowed JWT Signers</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n [placeholder]=\"'Select which External JWT Signers to allow'\"\n (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n ></lib-tag-selector>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.updb.allowed) {\n <lib-form-field-container\n [title]=\"'UPDB Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-row updb-input-options\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Minimum Length</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Attempts</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Mixed Case</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require upper and lower case charachters\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbMixed()\"\n [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Numeric</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require numerical charachters 0-9\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbNumeric()\"\n [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Special</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbSpecial()\"\n [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Secondary Authentication'\"\n [label]=\"'OPTIONAL'\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 1000001'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">TOTP MFA</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require TOTP</div>\n </div>\n <div\n (click)=\"toggleRequireTotp()\"\n [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWT Signer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-filter-select\n class=\"auth-policy__jwt-signer-select\"\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.jwtSigners\"\n [showClear]=\"true\"\n [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-filter-select>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
|
|
27653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AuthPolicyFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"'Required'\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.name\"\n [ngClass]=\"{error: errors['name']}\"\n placeholder=\"Name this Auth Policy\"\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Primary Authentication'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Cert</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow x509 certificate based authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Ext JWT</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow externally signed JWT bearer tokens\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleExtJwtAllowed()\"\n [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">UPDB</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow authentication via a traditional "Username Password Database"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbAllowed()\"\n [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData.primary.cert.allowed) {\n <lib-form-field-container\n [title]=\"'Cert Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Allow Expired Certificates</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow expired client certificates to authenticate\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleAllowExpiredCerts()\"\n [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.extJwt.allowed) {\n <lib-form-field-container\n [title]=\"'Ext JWT Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-label-container allowed-signers-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Allowed JWT Signers</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n [placeholder]=\"'Select which External JWT Signers to allow'\"\n (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n ></lib-tag-selector>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.updb.allowed) {\n <lib-form-field-container\n [title]=\"'UPDB Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-row updb-input-options\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Minimum Length</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Attempts</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Mixed Case</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require upper and lower case charachters\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbMixed()\"\n [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Numeric</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require numerical charachters 0-9\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbNumeric()\"\n [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Special</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbSpecial()\"\n [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Secondary Authentication'\"\n [label]=\"'OPTIONAL'\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 1000001'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">TOTP MFA</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require TOTP</div>\n </div>\n <div\n (click)=\"toggleRequireTotp()\"\n [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWT Signer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-filter-select\n class=\"auth-policy__jwt-signer-select\"\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.jwtSigners\"\n [showClear]=\"true\"\n [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-filter-select>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }] }); }
|
|
27522
27654
|
}
|
|
27523
27655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{
|
|
27524
27656
|
type: Component,
|
|
27525
|
-
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"'Required'\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.name\"\n [ngClass]=\"{error: errors['name']}\"\n placeholder=\"Name this Auth Policy\"\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Primary Authentication'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Cert</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow x509 certificate based authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Ext JWT</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow externally signed JWT bearer tokens\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleExtJwtAllowed()\"\n [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">UPDB</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow authentication via a traditional "Username Password Database"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbAllowed()\"\n [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData.primary.cert.allowed) {\n <lib-form-field-container\n [title]=\"'Cert Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Allow Expired Certificates</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow expired client certificates to authenticate\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleAllowExpiredCerts()\"\n [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.extJwt.allowed) {\n <lib-form-field-container\n [title]=\"'Ext JWT Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-label-container allowed-signers-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Allowed JWT Signers</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n [placeholder]=\"'Select which External JWT Signers to allow'\"\n (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n ></lib-tag-selector>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.updb.allowed) {\n <lib-form-field-container\n [title]=\"'UPDB Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-row updb-input-options\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Minimum Length</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Attempts</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Mixed Case</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require upper and lower case charachters\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbMixed()\"\n [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Numeric</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require numerical charachters 0-9\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbNumeric()\"\n [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Special</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbSpecial()\"\n [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Secondary Authentication'\"\n [label]=\"'OPTIONAL'\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 1000001'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">TOTP MFA</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require TOTP</div>\n </div>\n <div\n (click)=\"toggleRequireTotp()\"\n [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWT Signer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-filter-select\n class=\"auth-policy__jwt-signer-select\"\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.jwtSigners\"\n [showClear]=\"true\"\n [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-filter-select>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"] }]
|
|
27657
|
+
args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"'Required'\"\n >\n <input\n class=\"form-field-input\"\n [(ngModel)]=\"formData.name\"\n [ngClass]=\"{error: errors['name']}\"\n placeholder=\"Name this Auth Policy\"\n #nameFieldInput\n [disabled]=\"useStrictReadonlyForm\"\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Primary Authentication'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Cert</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow x509 certificate based authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"!useStrictReadonlyForm && toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed, 'toggle-readonly': useStrictReadonlyForm }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Ext JWT</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow externally signed JWT bearer tokens\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleExtJwtAllowed()\"\n [ngClass]=\"{ on: formData.primary.extJwt.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.extJwt.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.extJwt.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">UPDB</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow authentication via a traditional "Username Password Database"\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbAllowed()\"\n [ngClass]=\"{ on: formData.primary.updb.allowed }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.allowed\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.allowed\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n @if (formData.primary.cert.allowed) {\n <lib-form-field-container\n [title]=\"'Cert Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Allow Expired Certificates</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allow expired client certificates to authenticate\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleAllowExpiredCerts()\"\n [ngClass]=\"{ on: formData.primary.cert.allowExpiredCerts }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.cert.allowExpiredCerts\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.cert.allowExpiredCerts\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.extJwt.allowed) {\n <lib-form-field-container\n [title]=\"'Ext JWT Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-label-container allowed-signers-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Allowed JWT Signers</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Choose which External JWT Signers may be used for authentication\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedNamedAttributes)]=\"allowedJwtSignerAttributes\"\n [availableNamedAttributes]=\"svc.jwtSignerNamedAttributes\"\n [placeholder]=\"'Select which External JWT Signers to allow'\"\n (selectedNamedAttributesChange)=\"allowedJwtSignersChanged($event)\"\n ></lib-tag-selector>\n </div>\n </lib-form-field-container>\n }\n @if (formData.primary.updb.allowed) {\n <lib-form-field-container\n [title]=\"'UPDB Options'\"\n [layout]=\"'column'\"\n >\n <div class=\"form-field-row updb-input-options\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Minimum Length</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.minPasswordLength\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Attempts</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a numeric value\" type=\"number\" [(ngModel)]=\"formData.primary.updb.maxAttempts\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Lockout Duration <div class=\"form-sub-text\">(min)</div></span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter time in min\" type=\"number\" [(ngModel)]=\"formData.primary.updb.lockoutDurationMinutes\"/>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Mixed Case</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require upper and lower case charachters\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbMixed()\"\n [ngClass]=\"{ on: formData.primary.updb.requireMixedCase }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireMixedCase\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireMixedCase\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Numeric</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require numerical charachters 0-9\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbNumeric()\"\n [ngClass]=\"{ on: formData.primary.updb.requireNumericChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireNumericChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireNumericChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Special</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require special (non-alpha numeric) charachters. ie. !%$@*\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleUpdbSpecial()\"\n [ngClass]=\"{ on: formData.primary.updb.requireSpecialChar }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.primary.updb.requireSpecialChar\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.primary.updb.requireSpecialChar\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Secondary Authentication'\"\n [label]=\"'OPTIONAL'\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 1000001'\"\n >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">TOTP MFA</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require authenticating clients to have TOTP MFA enabled (Time-based, One-Time Password)\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require TOTP</div>\n </div>\n <div\n (click)=\"toggleRequireTotp()\"\n [ngClass]=\"{ on: formData.secondary.requireTotp }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.secondary.requireTotp\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.secondary.requireTotp\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">JWT Signer</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Require every client request to have a JWT from the specified External JTW Signer in the HTTP Authentication header\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <lib-filter-select\n class=\"auth-policy__jwt-signer-select\"\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [options]=\"svc.jwtSigners\"\n [showClear]=\"true\"\n [panelClass]=\"'auth-policy__jwt-signer-select-panel'\"\n (selectionChange)=\"secondaryJwtSignerChanged($event)\"\n (filterChange)=\"jwtSignersFilterChangedDebounced($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-filter-select>\n </div>\n </lib-form-field-container>\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-text-field-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{height:36px!important;min-height:36px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-arrow-wrapper,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-form-field-icon-suffix{display:flex!important;align-items:center!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-trigger{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-placeholder{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-value-text,.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select .mat-mdc-select-min-line{font-size:14px!important;line-height:1.1!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option{min-height:32px!important;height:32px!important}.allowed-signers-container :host ::ng-deep .auth-policy__jwt-signer-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;line-height:1.2!important}\n"] }]
|
|
27526
27658
|
}], ctorParameters: () => [{ type: AuthPolicyFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
27527
27659
|
type: Inject,
|
|
27528
27660
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -28067,6 +28199,16 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
|
|
|
28067
28199
|
break;
|
|
28068
28200
|
}
|
|
28069
28201
|
}
|
|
28202
|
+
multiActionRequested(action) {
|
|
28203
|
+
switch (action.id) {
|
|
28204
|
+
case 'save':
|
|
28205
|
+
this.save();
|
|
28206
|
+
break;
|
|
28207
|
+
case 'delete':
|
|
28208
|
+
this.deleteEntity();
|
|
28209
|
+
break;
|
|
28210
|
+
}
|
|
28211
|
+
}
|
|
28070
28212
|
externalIdClaimChanged() {
|
|
28071
28213
|
if (this.externalIdClaim && !this.formData.externalIdClaim) {
|
|
28072
28214
|
this.formData.externalIdClaim = {
|
|
@@ -28340,11 +28482,11 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
|
|
|
28340
28482
|
this.formData.externalIdClaim.parserCriteria = parserCriteria;
|
|
28341
28483
|
}
|
|
28342
28484
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, deps: [{ token: CertificateAuthorityFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [badges]=\"badges\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.identityRoles\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Type to filter and enter to assign'\"\n [hasError]=\"errors.dialIdentities\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Enrollment Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auto Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">OTT Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auth Enabled</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAuthEnabled')\"\n [ngClass]=\"{ on: formData.isAuthEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'External ID Claim'\"\n [layout]=\"'column'\"\n [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n [showToggle]=\"true\"\n [(headerToggle)]=\"externalIdClaim\"\n (headerToggleChange)=\"externalIdClaimChanged()\"\n >\n <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Location</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n <option value=\"\">Select an option</option>\n @for (loc of locations; track loc) {\n <option [value]=\"loc\">\n {{ loc }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Matcher</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location will be filtered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n <option value=\"\">Select an option</option>\n @for (matcher of matchers; track matcher) {\n <option [value]=\"matcher\">\n {{ matcher }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n <option value=\"\">Select an option</option>\n @for (parser of parsers; track parser) {\n <option [value]=\"parser\">\n {{ parser }}\n </option>\n }\n </select>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Index</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Match Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the criteria to provide to parser\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'PEM'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enter PEM</span>\n </div>\n <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n </div>\n <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n @if (formData.id && !this.formData.isVerified) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n <div class=\"verify-certificate\"></div>\n <span>Verify Certificate</span>\n <div class=\"tap-to-download\"></div>\n </a>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
28485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: CertificateAuthorityFormComponent, isStandalone: false, selector: "lib-certificate-authority", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [badges]=\"badges\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.identityRoles\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Type to filter and enter to assign'\"\n [hasError]=\"errors.dialIdentities\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Enrollment Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auto Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">OTT Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auth Enabled</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAuthEnabled')\"\n [ngClass]=\"{ on: formData.isAuthEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'External ID Claim'\"\n [layout]=\"'column'\"\n [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n [showToggle]=\"true\"\n [(headerToggle)]=\"externalIdClaim\"\n (headerToggleChange)=\"externalIdClaimChanged()\"\n >\n <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Location</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n <option value=\"\">Select an option</option>\n @for (loc of locations; track loc) {\n <option [value]=\"loc\">\n {{ loc }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Matcher</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location will be filtered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n <option value=\"\">Select an option</option>\n @for (matcher of matchers; track matcher) {\n <option [value]=\"matcher\">\n {{ matcher }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n <option value=\"\">Select an option</option>\n @for (parser of parsers; track parser) {\n <option [value]=\"parser\">\n {{ parser }}\n </option>\n }\n </select>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Index</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Match Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the criteria to provide to parser\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'PEM'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enter PEM</span>\n </div>\n <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n </div>\n <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n @if (formData.id && !this.formData.isVerified) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n <div class=\"verify-certificate\"></div>\n <span>Verify Certificate</span>\n <div class=\"tap-to-download\"></div>\n </a>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
28344
28486
|
}
|
|
28345
28487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{
|
|
28346
28488
|
type: Component,
|
|
28347
|
-
args: [{ selector: 'lib-certificate-authority', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [badges]=\"badges\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.identityRoles\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Type to filter and enter to assign'\"\n [hasError]=\"errors.dialIdentities\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Enrollment Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auto Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">OTT Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auth Enabled</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAuthEnabled')\"\n [ngClass]=\"{ on: formData.isAuthEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'External ID Claim'\"\n [layout]=\"'column'\"\n [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n [showToggle]=\"true\"\n [(headerToggle)]=\"externalIdClaim\"\n (headerToggleChange)=\"externalIdClaimChanged()\"\n >\n <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Location</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n <option value=\"\">Select an option</option>\n @for (loc of locations; track loc) {\n <option [value]=\"loc\">\n {{ loc }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Matcher</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location will be filtered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n <option value=\"\">Select an option</option>\n @for (matcher of matchers; track matcher) {\n <option [value]=\"matcher\">\n {{ matcher }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n <option value=\"\">Select an option</option>\n @for (parser of parsers; track parser) {\n <option [value]=\"parser\">\n {{ parser }}\n </option>\n }\n </select>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Index</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Match Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the criteria to provide to parser\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'PEM'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enter PEM</span>\n </div>\n <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n </div>\n <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n @if (formData.id && !this.formData.isVerified) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n <div class=\"verify-certificate\"></div>\n <span>Verify Certificate</span>\n <div class=\"tap-to-download\"></div>\n </a>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"] }]
|
|
28489
|
+
args: [{ selector: 'lib-certificate-authority', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Certificate Authority Details' : 'Create Certificate Authority')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [badges]=\"badges\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"jwt-signer-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container\n [title]=\"'Name'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n @if (!useStrictReadonlyForm) {\n <input class=\"form-field-input\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n } @else {\n <div class=\"form-field-readonly-value\">{{ formData.identityNameFormat }}</div>\n }\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.identityRoles\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Type to filter and enter to assign'\"\n [hasError]=\"errors.dialIdentities\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Enrollment Options'\"\n [layout]=\"'row'\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auto Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to automatically enroll when encountered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAutoCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isAutoCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAutoCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAutoCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">OTT Enroll</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to enroll if an identity with an ottca enrollment was created\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isOttCaEnrollmentEnabled')\"\n [ngClass]=\"{ on: formData.isOttCaEnrollmentEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isOttCaEnrollmentEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isOttCaEnrollmentEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Auth Enabled</div>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Allows client certificates of the CA to attempt to enroll\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <div\n (click)=\"toggleSwitch('isAuthEnabled')\"\n [ngClass]=\"{ on: formData.isAuthEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isAuthEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isAuthEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'External ID Claim'\"\n [layout]=\"'column'\"\n [helpText]=\"'Configuration used to pull values out of the x509 client certificate used to match identity externalId'\"\n [showToggle]=\"true\"\n [(headerToggle)]=\"externalIdClaim\"\n (headerToggleChange)=\"externalIdClaimChanged()\"\n >\n <div class=\"form-field-input-group\" [ngClass]=\"{disabled: !externalIdClaim}\">\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Location</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines which value(s) in an x509 certificate will be processed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"claimLocation\" id=\"ClaimLocation\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['claimLocation']}\">\n <option value=\"\">Select an option</option>\n @for (loc of locations; track loc) {\n <option [value]=\"loc\">\n {{ loc }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Matcher</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location will be filtered\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"matcher\" id=\"ClaimMatcher\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['matcher']}\">\n <option value=\"\">Select an option</option>\n @for (matcher of matchers; track matcher) {\n <option [value]=\"matcher\">\n {{ matcher }}\n </option>\n }\n </select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines how values from location filtered by matcher will be parsed\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <select [(ngModel)]=\"parser\" id=\"ClaimParser\" class=\"form-field-dropdown\" [disabled]=\"!externalIdClaim\" [ngClass]=\"{error: errors['parser']}\">\n <option value=\"\">Select an option</option>\n @for (parser of parsers; track parser) {\n <option [value]=\"parser\">\n {{ parser }}\n </option>\n }\n </select>\n </div>\n </div>\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Index</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Should multiple values still be available after location, matcher, and parser processing the integer value here will be used from the set\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" type=\"number\" placeholder=\"Enter a number\" [(ngModel)]=\"index\" [ngClass]=\"{error: errors['index']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Match Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the PREFIX, SUFFIX, or SCHEME to look for based on matcher\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter matcher criteria\" [(ngModel)]=\"matcherCriteria\" [ngClass]=\"{error: errors['matcherCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Parser Criteria</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Defines the criteria to provide to parser\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter parser criteria\" [(ngModel)]=\"parserCriteria\" [ngClass]=\"{error: errors['parserCriteria']}\" [disabled]=\"!externalIdClaim\"/>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'PEM'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"form-field-input-group\">\n <div class=\"form-field-label-container select-file-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Enter PEM</span>\n </div>\n <span class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n @if (fileSelectOpening) {\n <div class=\"spinner\"></div>\n }\n </span>\n <input #fileSelect type=\"file\" style=\"display:none\" (change)=\"selectPemFile($event)\">\n </div>\n <textarea placeholder=\"Paste pem contents or select file\" [(ngModel)]=\"formData.certPem\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n @if (formData.id && !this.formData.isVerified) {\n <lib-form-field-container\n [showHeader]=\"false\"\n >\n <a class=\"download-button\" href=\"./{{this.basePath}}/{{this.formData.id}}/verify\" (click)=\"verifyCertificate($event)\">\n <div class=\"verify-certificate\"></div>\n <span>Verify Certificate</span>\n <div class=\"tap-to-download\"></div>\n </a>\n </lib-form-field-container>\n }\n @if (showApiCalls) {\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n [class]=\"'api-data-no-wrap'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading) {\n <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: ["@charset \"UTF-8\";.form-group-column.three-fifths{min-width:31.25rem}.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}.jwt-signer-form-container .updb-input-options{margin-top:var(--marginSmall);background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.jwt-signer-form-container .updb-input-options .form-field-title{color:var(--offWhite)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite);font-size:.875rem;font-weight:600}.allowed-signers-container{background-color:var(--formGroup);padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.allowed-signers-container .form-field-title{color:var(--offWhite)}.toggle-container .config-container-label{font-size:.8rem}\n"] }]
|
|
28348
28490
|
}], ctorParameters: () => [{ type: CertificateAuthorityFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
28349
28491
|
type: Inject,
|
|
28350
28492
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -29136,6 +29278,16 @@ class ConfigTypeFormComponent extends ProjectableForm {
|
|
|
29136
29278
|
break;
|
|
29137
29279
|
}
|
|
29138
29280
|
}
|
|
29281
|
+
multiActionRequested(action) {
|
|
29282
|
+
switch (action.id) {
|
|
29283
|
+
case 'save':
|
|
29284
|
+
this.save();
|
|
29285
|
+
break;
|
|
29286
|
+
case 'delete':
|
|
29287
|
+
this.deleteEntity();
|
|
29288
|
+
break;
|
|
29289
|
+
}
|
|
29290
|
+
}
|
|
29139
29291
|
apiActionRequested(action) {
|
|
29140
29292
|
switch (action.id) {
|
|
29141
29293
|
case 'cli':
|
|
@@ -29259,11 +29411,11 @@ class ConfigTypeFormComponent extends ProjectableForm {
|
|
|
29259
29411
|
return '';
|
|
29260
29412
|
}
|
|
29261
29413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormComponent, deps: [{ token: ConfigTypeFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29262
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigTypeFormComponent, isStandalone: false, selector: "lib-config-type-form", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
29414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ConfigTypeFormComponent, isStandalone: false, selector: "lib-config-type-form", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
|
|
29263
29415
|
}
|
|
29264
29416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormComponent, decorators: [{
|
|
29265
29417
|
type: Component,
|
|
29266
|
-
args: [{ selector: 'lib-config-type-form', standalone: false, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"] }]
|
|
29418
|
+
args: [{ selector: 'lib-config-type-form', standalone: false, template: "<div class=\"config-type-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled || formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveDisabled ? formPermissionSaveTooltip : saveButtonTooltip\"\n [class.is-scrolled]=\"isScrolled\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"config-form-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Config Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n class=\"form-field-input\"\n id=\"ConfigName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this config\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n </lib-form-field-container>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".config-type-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}\n"] }]
|
|
29267
29419
|
}], ctorParameters: () => [{ type: ConfigTypeFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
29268
29420
|
type: Inject,
|
|
29269
29421
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -29887,6 +30039,16 @@ class PostureCheckFormComponent extends ProjectableForm {
|
|
|
29887
30039
|
break;
|
|
29888
30040
|
}
|
|
29889
30041
|
}
|
|
30042
|
+
multiActionRequested(action) {
|
|
30043
|
+
switch (action.id) {
|
|
30044
|
+
case 'save':
|
|
30045
|
+
this.save();
|
|
30046
|
+
break;
|
|
30047
|
+
case 'delete':
|
|
30048
|
+
this.deleteEntity();
|
|
30049
|
+
break;
|
|
30050
|
+
}
|
|
30051
|
+
}
|
|
29890
30052
|
removeProcessItem(index) {
|
|
29891
30053
|
this.processMultiItems.splice(index, 1);
|
|
29892
30054
|
}
|
|
@@ -30067,11 +30229,11 @@ class PostureCheckFormComponent extends ProjectableForm {
|
|
|
30067
30229
|
macAddressesChange(event) {
|
|
30068
30230
|
}
|
|
30069
30231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, deps: [{ token: PostureCheckFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30070
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n id=\"PostureCheckName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this posture check\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"pcRoleAttributes\"\n [placeholder]=\"'Add attributes to group Posture Checks'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n @if (postureCheckTypes.length > 0) {\n <select\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id || useStrictReadonlyForm\"\n [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n matTooltipPosition=\"below\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <option value=\"\">Select posture check type...</option>\n @for (type of postureCheckTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n }\n </lib-form-field-container>\n @if (formData.typeId === 'MAC') {\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n [invalid]=\"errors['macAddresses']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'DOMAIN') {\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n [invalid]=\"errors['domains']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS') {\n <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS_MULTI') {\n <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Semantic</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n >\n <option value=\"AllOf\">AllOf</option>\n <option value=\"AnyOf\">AnyOf</option>\n </select>\n </div>\n @for (process of processMultiItems; track process; let i = $index) {\n <div class=\"process-multi-item form-field-input-group\">\n @if (processMultiItems.length > 1) {\n <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n }\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"process.signerFingerprints\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter signer fingerprints\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </div>\n }\n <div class=\"buttons process-multi-buttons\">\n <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'MFA') {\n <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Timeout (seconds)</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Wake</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnWake }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Unlock</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnUnlock }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'OS') {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('Android')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button android-os-button\"></div>\n <div class=\"config-container-label\">Android</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Min Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('iOS')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button ios-os-button\"></div>\n <div class=\"config-container-label\">iOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Linux')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button linux-os-button\"></div>\n <div class=\"config-container-label\">Linux</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('macOS')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button mac-os-button\"></div>\n <div class=\"config-container-label\">macOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Windows')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-os-button\"></div>\n <div class=\"config-container-label\">Windows</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('WindowsServer')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-server-os-button\"></div>\n <div class=\"config-container-label\">Windows Server</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
|
|
30232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureCheckFormComponent, isStandalone: false, selector: "lib-posture-check", inputs: { errors: "errors" }, outputs: { close: "close" }, usesInheritance: true, ngImport: i0, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n id=\"PostureCheckName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this posture check\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"pcRoleAttributes\"\n [placeholder]=\"'Add attributes to group Posture Checks'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n @if (postureCheckTypes.length > 0) {\n <select\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id || useStrictReadonlyForm\"\n [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n matTooltipPosition=\"below\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <option value=\"\">Select posture check type...</option>\n @for (type of postureCheckTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n }\n </lib-form-field-container>\n @if (formData.typeId === 'MAC') {\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n [invalid]=\"errors['macAddresses']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'DOMAIN') {\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n [invalid]=\"errors['domains']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS') {\n <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS_MULTI') {\n <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Semantic</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n >\n <option value=\"AllOf\">AllOf</option>\n <option value=\"AnyOf\">AnyOf</option>\n </select>\n </div>\n @for (process of processMultiItems; track process; let i = $index) {\n <div class=\"process-multi-item form-field-input-group\">\n @if (processMultiItems.length > 1) {\n <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n }\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"process.signerFingerprints\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter signer fingerprints\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </div>\n }\n <div class=\"buttons process-multi-buttons\">\n <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'MFA') {\n <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Timeout (seconds)</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Wake</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnWake }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Unlock</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnUnlock }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'OS') {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('Android')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button android-os-button\"></div>\n <div class=\"config-container-label\">Android</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Min Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('iOS')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button ios-os-button\"></div>\n <div class=\"config-container-label\">iOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Linux')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button linux-os-button\"></div>\n <div class=\"config-container-label\">Linux</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('macOS')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button mac-os-button\"></div>\n <div class=\"config-container-label\">macOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Windows')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-os-button\"></div>\n <div class=\"config-container-label\">Windows</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('WindowsServer')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-server-os-button\"></div>\n <div class=\"config-container-label\">Windows Server</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { 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"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }, { kind: "component", type: FilterSelectComponent, selector: "lib-filter-select", inputs: ["id", "placeholder", "panelClass", "options", "optionLabel", "optionValue", "searchable", "searchPlaceholder", "localFilter", "openOnFocus", "showClear", "disableControl"], outputs: ["selectionChange", "filterChange"] }, { kind: "directive", type: FilterSelectOptionTemplateDirective, selector: "ng-template[libFilterSelectOption]" }, { kind: "directive", type: FilterSelectTriggerTemplateDirective, selector: "ng-template[libFilterSelectTrigger]" }] }); }
|
|
30071
30233
|
}
|
|
30072
30234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, decorators: [{
|
|
30073
30235
|
type: Component,
|
|
30074
|
-
args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n id=\"PostureCheckName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this posture check\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"pcRoleAttributes\"\n [placeholder]=\"'Add attributes to group Posture Checks'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n @if (postureCheckTypes.length > 0) {\n <select\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id || useStrictReadonlyForm\"\n [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n matTooltipPosition=\"below\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <option value=\"\">Select posture check type...</option>\n @for (type of postureCheckTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n }\n </lib-form-field-container>\n @if (formData.typeId === 'MAC') {\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n [invalid]=\"errors['macAddresses']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'DOMAIN') {\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n [invalid]=\"errors['domains']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS') {\n <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS_MULTI') {\n <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Semantic</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n >\n <option value=\"AllOf\">AllOf</option>\n <option value=\"AnyOf\">AnyOf</option>\n </select>\n </div>\n @for (process of processMultiItems; track process; let i = $index) {\n <div class=\"process-multi-item form-field-input-group\">\n @if (processMultiItems.length > 1) {\n <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n }\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"process.signerFingerprints\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter signer fingerprints\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </div>\n }\n <div class=\"buttons process-multi-buttons\">\n <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'MFA') {\n <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Timeout (seconds)</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Wake</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnWake }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Unlock</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnUnlock }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'OS') {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('Android')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button android-os-button\"></div>\n <div class=\"config-container-label\">Android</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Min Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('iOS')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button ios-os-button\"></div>\n <div class=\"config-container-label\">iOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Linux')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button linux-os-button\"></div>\n <div class=\"config-container-label\">Linux</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('macOS')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button mac-os-button\"></div>\n <div class=\"config-container-label\">macOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Windows')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-os-button\"></div>\n <div class=\"config-container-label\">Windows</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('WindowsServer')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-server-os-button\"></div>\n <div class=\"config-container-label\">Windows Server</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
|
|
30236
|
+
args: [{ selector: 'lib-posture-check', standalone: false, template: "<div class=\"posture-check-form-container projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n [class.projectable-form-hidden]=\"!dataInit\"\n >\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"moreActions\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [class.is-scrolled]=\"isScrolled\"\n [saveDisabled]=\"formPermissionSaveDisabled\"\n [saveTooltip]=\"formPermissionSaveTooltip\"\n [strictReadonlyUi]=\"useStrictReadonlyForm\"\n ></lib-form-header>\n <div class=\"posture-checkform-container projectable-form-container\" #formContainer>\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <input\n id=\"PostureCheckName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Name this posture check\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n [disabled]=\"useStrictReadonlyForm\"\n >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"useStrictReadonlyForm ? '' : 'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Posture Checks to form a group of Posture Checks.'\"\n >\n <lib-tag-selector\n [disableField]=\"useStrictReadonlyForm\"\n [disableCreate]=\"useStrictReadonlyForm\"\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"pcRoleAttributes\"\n [placeholder]=\"'Add attributes to group Posture Checks'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Type'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" class=\"schema-json-editor\">\n @if (postureCheckTypes.length > 0) {\n <select\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id || useStrictReadonlyForm\"\n [matTooltip]=\"formData.id ? 'Type cannot be changed' : ''\"\n matTooltipPosition=\"below\"\n id=\"SelectedConfigType\"\n class=\"form-field-dropdown\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <option value=\"\">Select posture check type...</option>\n @for (type of postureCheckTypes; track type) {\n <option\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n }\n </select>\n }\n </lib-form-field-container>\n @if (formData.typeId === 'MAC') {\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n [invalid]=\"errors['macAddresses']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'DOMAIN') {\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n <lib-chips-input\n (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n [invalid]=\"errors['domains']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n ></lib-chips-input>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS') {\n <lib-form-field-container [title]=\"'Process Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" [contentClass]=\"'form-field-input-group'\">\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"formData.process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter a fingerprint\" [(ngModel)]=\"formData.process.signerFingerprint\" [ngClass]=\"{error: errors['androidOSMin']}\"/>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'PROCESS_MULTI') {\n <lib-form-field-container [title]=\"'Process Multi Details'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\" >\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Semantic</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\n >\n <option value=\"AllOf\">AllOf</option>\n <option value=\"AnyOf\">AnyOf</option>\n </select>\n </div>\n @for (process of processMultiItems; track process; let i = $index) {\n <div class=\"process-multi-item form-field-input-group\">\n @if (processMultiItems.length > 1) {\n <div class=\"icon-clear\" (click)=\"removeProcessItem(i)\"></div>\n }\n <div class=\"form-field-label-container process-os-details-header\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-filter-select\n placeholder=\"Select OS...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n [options]=\"osTypes\"\n [searchable]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template libFilterSelectTrigger let-option=\"option\" let-value=\"value\">\n @if (value && value !== '') {\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + value\"></div>\n <div>{{ value }}</div>\n </div>\n }\n </ng-template>\n <ng-template libFilterSelectOption let-os>\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\" [class]=\"'os-type-dropdown-icon-' + os.type\"></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </lib-filter-select>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Hashes</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Valid sha256 hashes of a binary\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n [invalid]=\"errors['processHashes']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Path</span>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"/path/to/process\" [(ngModel)]=\"process.path\" [ngClass]=\"{error: errors['processPath']}\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-header\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Fingerprint</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Signer fingerprints are the sha1 fingerprints (thumbprints) of valid signing certificates\"\n matTooltipPosition=\"below\"\n ></div>\n </div>\n <span class=\"form-field-label\" >Required</span>\n </div>\n <lib-chips-input (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"process.signerFingerprints\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter signer fingerprints\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['process[' + i +'].signerFingerprints'] }\"\n [invalid]=\"errors['process[' + i +'].signerFingerprints']\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n [disabled]=\"useStrictReadonlyForm\"\n ></lib-chips-input>\n </div>\n </div>\n }\n <div class=\"buttons process-multi-buttons\">\n <button class=\"button\" (click)=\"addProcessItem()\">Add Another Process</button>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'MFA') {\n <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Timeout (seconds)</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"# in seconds\" [(ngModel)]=\"formData.timeoutSeconds\" [ngClass]=\"{error: errors['timeoutSeconds']}\" type=\"number\"/>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('wake')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Wake</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnWake }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnWake\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnWake\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"config-item os-toggle-container\" (click)=\"toggleMFAPrompt('unlock')\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Require On Unlock</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"config-container-label\">Require</div>\n </div>\n <div\n [ngClass]=\"{ on: formData.promptOnUnlock }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.promptOnUnlock\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.promptOnUnlock\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n }\n @if (formData.typeId === 'OS') {\n <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n >\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Operating System</span>\n </div>\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('Android')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button android-os-button\"></div>\n <div class=\"config-container-label\">Android</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Android.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Android.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Android.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Min Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.min\" [ngClass]=\"{error: errors['androidOSMin']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Max Version</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Android.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Android.max\" [ngClass]=\"{error: errors['androidOSMax']}\" [disabled]=\"!osCheckData.Android.enabled || osCheckData.Android.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('iOS')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button ios-os-button\"></div>\n <div class=\"config-container-label\">iOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.iOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.iOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.iOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.min\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.iOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.iOS.max\" [ngClass]=\"{error: errors['iOS']}\" [disabled]=\"!osCheckData.iOS.enabled || osCheckData.iOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Linux')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button linux-os-button\"></div>\n <div class=\"config-container-label\">Linux</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Linux.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Linux.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Linux.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.min\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Linux.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Linux.max\" [ngClass]=\"{error: errors['linuxOS']}\" [disabled]=\"!osCheckData.Linux.enabled || osCheckData.Linux.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\">\n <div class=\"config-container toggle-container os-toggle-container\"\n (click)=\"toggleOS('macOS')\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button mac-os-button\"></div>\n <div class=\"config-container-label\">macOS</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.macOS.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.macOS.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.macOS.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.min\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.macOS.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.macOS.max\" [ngClass]=\"{error: errors['macOS']}\" [disabled]=\"!osCheckData.macOS.enabled || osCheckData.macOS.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('Windows')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-os-button\"></div>\n <div class=\"config-container-label\">Windows</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.Windows.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.Windows.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.Windows.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.min\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.Windows.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.Windows.max\" [ngClass]=\"{error: errors['windowsOS']}\" [disabled]=\"!osCheckData.Windows.enabled || osCheckData.Windows.isAdvanced\"/>\n </div>\n </div>\n <div class=\"form-field-row os-version-row\">\n <div class=\"config-item os-toggle-container\"\n (click)=\"toggleOS('WindowsServer')\">\n <div class=\"config-container toggle-container os-toggle-container\">\n <div class=\"form-field-title-container\">\n <div class=\"pc-os-button windows-server-os-button\"></div>\n <div class=\"config-container-label\">Windows Server</div>\n </div>\n <div\n [ngClass]=\"{ on: osCheckData.WindowsServer.enabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!osCheckData.WindowsServer.enabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"osCheckData.WindowsServer.enabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.min\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n <div class=\"form-field-label-container\">\n <input class=\"form-field-input\" placeholder=\"#.#.#\" [matTooltip]=\"osCheckData.WindowsServer.isAdvanced ? 'Use JSON view to edit' : ''\" [(ngModel)]=\"osCheckData.WindowsServer.max\" [ngClass]=\"{error: errors['windowsServerOS']}\" [disabled]=\"!osCheckData.WindowsServer.enabled || osCheckData.WindowsServer.isAdvanced\"/>\n </div>\n </div>\n </lib-form-field-container>\n }\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div [hidden]=\"!showMore\" class=\"form-group-column\">\n @if (!hideTags) {\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n </lib-form-field-container>\n }\n </div>\n </div>\n @if (showApiCalls) {\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"''\"\n [headerActions]=\"apiOptions\"\n (actionRequested)=\"apiActionRequested($event)\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n <div class=\"url-copy icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n @if (formData) {\n <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n }\n </lib-form-field-container>\n </div>\n }\n </div>\n @if (formView === 'raw') {\n <div class=\"form-group-column\">\n @if (formData) {\n <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n }\n </div>\n }\n </div>\n</div>\n@if (isLoading || !dataInit) {\n <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".posture-check-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.config-type-select.disabled{opacity:.7;pointer-events:none}.form-group-column.three-fifths{width:calc(60% - .9375rem);min-width:34.375rem;max-width:43.75rem}.form-group-column.two-fifths{max-width:43.75rem}::ng-deep #jsoneditor{max-height:32rem;overflow:hidden}.os-toggle-container{gap:var(--gapSmall)}.os-toggle-container .config-container-label{text-transform:unset}.os-toggle-container{height:var(--defaultInputHeight);cursor:pointer}.os-toggle-container:hover .pc-os-button{transform:scale(1.05)}.os-version-row input:disabled{color:transparent!important}.os-version-row input:disabled::placeholder{color:transparent!important}.process-os-details-header{margin-top:var(--marginSmall)}input:disabled,select:disabled,textarea:disabled{opacity:.3!important;cursor:not-allowed}.process-multi-buttons{display:flex;flex-direction:row;justify-content:flex-end;margin:0}.process-multi-buttons button{background-color:var(--primaryColor);box-shadow:none;font-size:.75rem}.process-multi-buttons button:hover{filter:brightness(.8)}.process-multi-buttons button:active{transform:translateY(.0625rem)}.process-multi-item{display:flex;flex-direction:column;position:relative;gap:var(--gapMedium);border-width:.125rem;border-color:var(--menu);border-style:solid;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius)}.process-multi-item .icon-clear{position:absolute;top:0;right:0;color:var(--red);margin-top:-.5rem;margin-right:-.5rem;background:var(--background);font-size:1.5rem;border-radius:2rem;cursor:pointer}.process-multi-item .icon-clear:hover{filter:brightness(.8)}.process-multi-item .icon-clear:active{transform:translateY(.0625rem)}.os-type-dropdown-item{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.os-type-dropdown-item div{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText)}.os-type-dropdown-item .os-type-dropdown-icon{background-size:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;background-position-x:center;background-position-y:center}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Android{background-image:url(/assets/images/android-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-iOS{background-image:url(/assets/images/ios-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Linux{background-image:url(/assets/images/linux-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-macOS{background-image:url(/assets/images/mac-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-Windows{background-image:url(/assets/images/windows-os.png)}.os-type-dropdown-item .os-type-dropdown-icon.os-type-dropdown-icon-WindowsServer{background-image:url(/assets/images/windows-server-os.png)}.pc-os-button{background-size:2rem;height:2rem;width:2rem;display:inline-block;background-position-x:center;background-position-y:center;margin-right:.5rem}.pc-os-button.android-os-button{background-image:url(/assets/images/android-os.png)}.pc-os-button.ios-os-button{background-image:url(/assets/images/ios-os.png)}.pc-os-button.linux-os-button{background-image:url(/assets/images/linux-os.png)}.pc-os-button.mac-os-button{background-image:url(/assets/images/mac-os.png)}.pc-os-button.windows-os-button{background-image:url(/assets/images/windows-os.png)}.pc-os-button.windows-server-os-button{background-color:var(--offWhite_ALWAYS);border-radius:2rem;width:2rem;height:2rem;min-width:2rem;background-size:1.625rem;background-image:url(/assets/images/windows-server-os.png)}::ng-deep .posture-check-form-container .p-dropdown-panel .p-dropdown-items .p-dropdown-item{font-size:.875rem!important;font-family:Open Sans,Arial,sans-serif;color:var(--tableText);padding:.25rem var(--paddingMedium)}::ng-deep .posture-check-form-container p-dropdown .p-dropdown.p-component .p-inputtext.p-dropdown-label{padding:0 var(--paddingMedium)}::ng-deep p-chips input[type=text]{width:100%}::ng-deep p-chips ul{padding:0}\n"] }]
|
|
30075
30237
|
}], ctorParameters: () => [{ type: PostureCheckFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
30076
30238
|
type: Inject,
|
|
30077
30239
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -31288,7 +31450,11 @@ class CallbackComponent {
|
|
|
31288
31450
|
token = this.oauthService.getAccessToken();
|
|
31289
31451
|
}
|
|
31290
31452
|
const prefix = '/edge/client/v1';
|
|
31291
|
-
|
|
31453
|
+
// Use the controller pinned when the flow was initiated, not the currently
|
|
31454
|
+
// selected one (which may have changed across the IdP redirect).
|
|
31455
|
+
const url = localStorage.getItem('oauth_callback_controller') || this.settingsService.settings.selectedEdgeController;
|
|
31456
|
+
localStorage.removeItem('oauth_callback_controller');
|
|
31457
|
+
this.settingsService.settings.selectedEdgeController = url;
|
|
31292
31458
|
let doNav = true;
|
|
31293
31459
|
let isTest = false;
|
|
31294
31460
|
if (!isEmpty(redirectRoute)) {
|
|
@@ -31593,15 +31759,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
31593
31759
|
}], ctorParameters: () => [] });
|
|
31594
31760
|
|
|
31595
31761
|
class ProfileComponent {
|
|
31596
|
-
constructor(zitiService, growlerService) {
|
|
31762
|
+
constructor(zitiService, settingsService, growlerService) {
|
|
31597
31763
|
this.zitiService = zitiService;
|
|
31764
|
+
this.settingsService = settingsService;
|
|
31598
31765
|
this.growlerService = growlerService;
|
|
31599
31766
|
this.pageTitle = 'Profile';
|
|
31600
31767
|
this.currentPassword = '';
|
|
31601
31768
|
this.newPassword = '';
|
|
31602
31769
|
this.confirmPassword = '';
|
|
31770
|
+
this.passwordChangeDisabled = false;
|
|
31771
|
+
this.passwordChangeMessage = '';
|
|
31772
|
+
this.updatePasswordChangeState();
|
|
31773
|
+
this.settingsSubscription = this.settingsService.settingsChange.subscribe(() => {
|
|
31774
|
+
this.updatePasswordChangeState();
|
|
31775
|
+
});
|
|
31776
|
+
}
|
|
31777
|
+
ngOnDestroy() {
|
|
31778
|
+
this.settingsSubscription?.unsubscribe();
|
|
31779
|
+
}
|
|
31780
|
+
updatePasswordChangeState() {
|
|
31781
|
+
const authMode = this.settingsService?.settings?.session?.authMode;
|
|
31782
|
+
this.passwordChangeDisabled = authMode === 'oidc';
|
|
31783
|
+
this.passwordChangeMessage = this.passwordChangeDisabled
|
|
31784
|
+
? 'Your password is managed by your identity provider and cannot be changed here.'
|
|
31785
|
+
: '';
|
|
31603
31786
|
}
|
|
31604
31787
|
resetPassword() {
|
|
31788
|
+
if (this.passwordChangeDisabled) {
|
|
31789
|
+
const growlerData = new GrowlerModel('error', 'Error', 'Password Change Not Allowed', 'Your password is managed by your identity provider and cannot be changed here.');
|
|
31790
|
+
this.growlerService.show(growlerData);
|
|
31791
|
+
return;
|
|
31792
|
+
}
|
|
31605
31793
|
if (!this.validate()) {
|
|
31606
31794
|
return;
|
|
31607
31795
|
}
|
|
@@ -31618,7 +31806,7 @@ class ProfileComponent {
|
|
|
31618
31806
|
});
|
|
31619
31807
|
}
|
|
31620
31808
|
validate() {
|
|
31621
|
-
if (isEmpty(this.
|
|
31809
|
+
if (isEmpty(this.currentPassword) || isEmpty(this.newPassword) || isEmpty(this.confirmPassword)) {
|
|
31622
31810
|
const growlerData = new GrowlerModel('error', 'Error', `Password Missing`, `You have missing fields in your submission. Check your input and try again.`);
|
|
31623
31811
|
this.growlerService.show(growlerData);
|
|
31624
31812
|
return false;
|
|
@@ -31630,15 +31818,18 @@ class ProfileComponent {
|
|
|
31630
31818
|
}
|
|
31631
31819
|
return true;
|
|
31632
31820
|
}
|
|
31633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProfileComponent, deps: [{ token: ZITI_DATA_SERVICE }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
31821
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProfileComponent, deps: [{ token: ZITI_DATA_SERVICE }, { token: SETTINGS_SERVICE }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ProfileComponent, isStandalone: false, selector: "lib-profile", ngImport: i0, template: "<div class=\"projectable-form-wrapper\">\n <div class=\"header\">\n <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n <div class=\"line\"></div>\n <div class=\"tabs\">\n <div class=\"tab\" routerLink=\"/settings\">Manage Settings</div>\n <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n </div>\n <div class=\"constrained\">\n @if (passwordChangeDisabled) {\n <div class=\"password-change-message\">{{passwordChangeMessage}}</div>\n } @else {\n <div class=\"grid split\">\n <div>\n <label>Current Password</label>\n <input [(ngModel)]=\"currentPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div></div>\n <div>\n <label>New Password</label>\n <input [(ngModel)]=\"newPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div>\n <label>Confirm Password</label>\n <input [(ngModel)]=\"confirmPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div></div>\n <div>\n <div class=\"button\" (click)=\"resetPassword()\">Save</div>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}.password-change-message{padding:1rem;border:.0625rem solid var(--stroke);border-radius:var(--inputBorderRadius);background:var(--light);color:var(--dark);line-height:1.5}.button{font-size:.6875rem;font-weight:400;font-family:Open Sans;font-weight:600;display:inline-block;min-width:9.375rem;padding-left:1.25rem;clear:both;overflow:hidden;padding-right:1.25rem;height:2.5rem;padding:.4375rem;width:fit-content;text-transform:uppercase;text-align:center;border-radius:var(--inputBorderRadius);line-height:1.5625rem;position:relative;border:0;background:var(--secondary);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:var(--shadow)}label{color:var(--dark);text-transform:uppercase;margin-top:.625rem;position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
31635
31823
|
}
|
|
31636
31824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ProfileComponent, decorators: [{
|
|
31637
31825
|
type: Component,
|
|
31638
|
-
args: [{ selector: 'lib-profile', standalone: false, template: "<div class=\"projectable-form-wrapper\">\n <div class=\"header\">\n <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n <div class=\"line\"></div>\n <div class=\"tabs\">\n <div class=\"tab\" routerLink=\"/settings\">Manage Settings</div>\n <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n </div>\n <div class=\"constrained\">\n <div class=\"grid split\">\n
|
|
31826
|
+
args: [{ selector: 'lib-profile', standalone: false, template: "<div class=\"projectable-form-wrapper\">\n <div class=\"header\">\n <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n <div class=\"line\"></div>\n <div class=\"tabs\">\n <div class=\"tab\" routerLink=\"/settings\">Manage Settings</div>\n <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n </div>\n <div class=\"constrained\">\n @if (passwordChangeDisabled) {\n <div class=\"password-change-message\">{{passwordChangeMessage}}</div>\n } @else {\n <div class=\"grid split\">\n <div>\n <label>Current Password</label>\n <input [(ngModel)]=\"currentPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div></div>\n <div>\n <label>New Password</label>\n <input [(ngModel)]=\"newPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div>\n <label>Confirm Password</label>\n <input [(ngModel)]=\"confirmPassword\" type=\"password\" autocomplete=\"new-password\"/>\n </div>\n <div></div>\n <div>\n <div class=\"button\" (click)=\"resetPassword()\">Save</div>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}.password-change-message{padding:1rem;border:.0625rem solid var(--stroke);border-radius:var(--inputBorderRadius);background:var(--light);color:var(--dark);line-height:1.5}.button{font-size:.6875rem;font-weight:400;font-family:Open Sans;font-weight:600;display:inline-block;min-width:9.375rem;padding-left:1.25rem;clear:both;overflow:hidden;padding-right:1.25rem;height:2.5rem;padding:.4375rem;width:fit-content;text-transform:uppercase;text-align:center;border-radius:var(--inputBorderRadius);line-height:1.5625rem;position:relative;border:0;background:var(--secondary);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:var(--shadow)}label{color:var(--dark);text-transform:uppercase;margin-top:.625rem;position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"] }]
|
|
31639
31827
|
}], ctorParameters: () => [{ type: ZitiDataService, decorators: [{
|
|
31640
31828
|
type: Inject,
|
|
31641
31829
|
args: [ZITI_DATA_SERVICE]
|
|
31830
|
+
}] }, { type: SettingsServiceClass, decorators: [{
|
|
31831
|
+
type: Inject,
|
|
31832
|
+
args: [SETTINGS_SERVICE]
|
|
31642
31833
|
}] }, { type: GrowlerService }] });
|
|
31643
31834
|
|
|
31644
31835
|
class GeolocationService {
|
|
@@ -39678,12 +39869,18 @@ class NodeDataService extends ZitiDataService {
|
|
|
39678
39869
|
return results;
|
|
39679
39870
|
})));
|
|
39680
39871
|
}
|
|
39681
|
-
doGet(type, paging, filters = [], url) {
|
|
39872
|
+
doGet(type, paging, filters = [], url, useClient) {
|
|
39682
39873
|
const nodeServerURL = window.location.origin;
|
|
39683
39874
|
const serviceUrl = nodeServerURL + '/api/data';
|
|
39684
39875
|
const urlFilter = this.getUrlFilter(paging, filters);
|
|
39685
39876
|
paging.filter = urlFilter;
|
|
39686
39877
|
const body = { paging: paging, type: type, url: url };
|
|
39878
|
+
if (useClient) {
|
|
39879
|
+
// Fetch the public client API unauthenticated (pre-login) via the selected
|
|
39880
|
+
// controller, not the session-scoped mgmt API. See openziti/ziti-console#915.
|
|
39881
|
+
body.useClient = true;
|
|
39882
|
+
body.controllerUrl = this.settingsService?.settings?.selectedEdgeController;
|
|
39883
|
+
}
|
|
39687
39884
|
return firstValueFrom(this.httpClient.post(serviceUrl, body, {}).pipe(catchError((err) => {
|
|
39688
39885
|
const error = "Server Not Accessible";
|
|
39689
39886
|
if (err.code != "ECONNREFUSED")
|
|
@@ -40865,6 +41062,11 @@ class SessionRefreshService {
|
|
|
40865
41062
|
};
|
|
40866
41063
|
}
|
|
40867
41064
|
start() {
|
|
41065
|
+
// Skip the monitor on /callback so a stale expired session can't redirect to /login
|
|
41066
|
+
// before the code exchange completes. See openziti/ziti-console#915.
|
|
41067
|
+
if (window.location.pathname.endsWith('/callback')) {
|
|
41068
|
+
return;
|
|
41069
|
+
}
|
|
40868
41070
|
if (!this.hasOidcSession()) {
|
|
40869
41071
|
return;
|
|
40870
41072
|
}
|
|
@@ -40993,7 +41195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
40993
41195
|
}] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
|
|
40994
41196
|
|
|
40995
41197
|
const ZAC_VERSION = {
|
|
40996
|
-
"version": "4.
|
|
41198
|
+
"version": "4.5.0"
|
|
40997
41199
|
};
|
|
40998
41200
|
|
|
40999
41201
|
/*
|