@openziti/ziti-console-lib 1.3.1 → 1.4.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]
|
|
@@ -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]
|
|
@@ -26329,6 +26436,16 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
26329
26436
|
break;
|
|
26330
26437
|
}
|
|
26331
26438
|
}
|
|
26439
|
+
multiActionRequested(action) {
|
|
26440
|
+
switch (action.id) {
|
|
26441
|
+
case 'save':
|
|
26442
|
+
this.save();
|
|
26443
|
+
break;
|
|
26444
|
+
case 'delete':
|
|
26445
|
+
this.deleteEntity();
|
|
26446
|
+
break;
|
|
26447
|
+
}
|
|
26448
|
+
}
|
|
26332
26449
|
checkExternalIdToggle() {
|
|
26333
26450
|
if (isEmpty(this.formData.claimsProperty)) {
|
|
26334
26451
|
this.formData.useExternalId = false;
|
|
@@ -26753,11 +26870,11 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
26753
26870
|
return !this.errors.jwksEndpoint;
|
|
26754
26871
|
}
|
|
26755
26872
|
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"] }] }); }
|
|
26873
|
+
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 <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"] }] }); }
|
|
26757
26874
|
}
|
|
26758
26875
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, decorators: [{
|
|
26759
26876
|
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"] }]
|
|
26877
|
+
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 <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"] }]
|
|
26761
26878
|
}], ctorParameters: () => [{ type: JwtSignerFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
26762
26879
|
type: Inject,
|
|
26763
26880
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -27308,6 +27425,16 @@ class AuthPolicyFormComponent extends ProjectableForm {
|
|
|
27308
27425
|
break;
|
|
27309
27426
|
}
|
|
27310
27427
|
}
|
|
27428
|
+
multiActionRequested(action) {
|
|
27429
|
+
switch (action.id) {
|
|
27430
|
+
case 'save':
|
|
27431
|
+
this.save();
|
|
27432
|
+
break;
|
|
27433
|
+
case 'delete':
|
|
27434
|
+
this.deleteEntity();
|
|
27435
|
+
break;
|
|
27436
|
+
}
|
|
27437
|
+
}
|
|
27311
27438
|
clear() {
|
|
27312
27439
|
this.formData.configTypeId = '';
|
|
27313
27440
|
this.clearForm();
|
|
@@ -27518,11 +27645,11 @@ class AuthPolicyFormComponent extends ProjectableForm {
|
|
|
27518
27645
|
});
|
|
27519
27646
|
}
|
|
27520
27647
|
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"] }] }); }
|
|
27648
|
+
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
27649
|
}
|
|
27523
27650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{
|
|
27524
27651
|
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"] }]
|
|
27652
|
+
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
27653
|
}], ctorParameters: () => [{ type: AuthPolicyFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
27527
27654
|
type: Inject,
|
|
27528
27655
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -28067,6 +28194,16 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
|
|
|
28067
28194
|
break;
|
|
28068
28195
|
}
|
|
28069
28196
|
}
|
|
28197
|
+
multiActionRequested(action) {
|
|
28198
|
+
switch (action.id) {
|
|
28199
|
+
case 'save':
|
|
28200
|
+
this.save();
|
|
28201
|
+
break;
|
|
28202
|
+
case 'delete':
|
|
28203
|
+
this.deleteEntity();
|
|
28204
|
+
break;
|
|
28205
|
+
}
|
|
28206
|
+
}
|
|
28070
28207
|
externalIdClaimChanged() {
|
|
28071
28208
|
if (this.externalIdClaim && !this.formData.externalIdClaim) {
|
|
28072
28209
|
this.formData.externalIdClaim = {
|
|
@@ -28340,11 +28477,11 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
|
|
|
28340
28477
|
this.formData.externalIdClaim.parserCriteria = parserCriteria;
|
|
28341
28478
|
}
|
|
28342
28479
|
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"] }] }); }
|
|
28480
|
+
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
28481
|
}
|
|
28345
28482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{
|
|
28346
28483
|
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"] }]
|
|
28484
|
+
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
28485
|
}], ctorParameters: () => [{ type: CertificateAuthorityFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
28349
28486
|
type: Inject,
|
|
28350
28487
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -29136,6 +29273,16 @@ class ConfigTypeFormComponent extends ProjectableForm {
|
|
|
29136
29273
|
break;
|
|
29137
29274
|
}
|
|
29138
29275
|
}
|
|
29276
|
+
multiActionRequested(action) {
|
|
29277
|
+
switch (action.id) {
|
|
29278
|
+
case 'save':
|
|
29279
|
+
this.save();
|
|
29280
|
+
break;
|
|
29281
|
+
case 'delete':
|
|
29282
|
+
this.deleteEntity();
|
|
29283
|
+
break;
|
|
29284
|
+
}
|
|
29285
|
+
}
|
|
29139
29286
|
apiActionRequested(action) {
|
|
29140
29287
|
switch (action.id) {
|
|
29141
29288
|
case 'cli':
|
|
@@ -29259,11 +29406,11 @@ class ConfigTypeFormComponent extends ProjectableForm {
|
|
|
29259
29406
|
return '';
|
|
29260
29407
|
}
|
|
29261
29408
|
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"] }] }); }
|
|
29409
|
+
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
29410
|
}
|
|
29264
29411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormComponent, decorators: [{
|
|
29265
29412
|
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"] }]
|
|
29413
|
+
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
29414
|
}], ctorParameters: () => [{ type: ConfigTypeFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
29268
29415
|
type: Inject,
|
|
29269
29416
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -29887,6 +30034,16 @@ class PostureCheckFormComponent extends ProjectableForm {
|
|
|
29887
30034
|
break;
|
|
29888
30035
|
}
|
|
29889
30036
|
}
|
|
30037
|
+
multiActionRequested(action) {
|
|
30038
|
+
switch (action.id) {
|
|
30039
|
+
case 'save':
|
|
30040
|
+
this.save();
|
|
30041
|
+
break;
|
|
30042
|
+
case 'delete':
|
|
30043
|
+
this.deleteEntity();
|
|
30044
|
+
break;
|
|
30045
|
+
}
|
|
30046
|
+
}
|
|
29890
30047
|
removeProcessItem(index) {
|
|
29891
30048
|
this.processMultiItems.splice(index, 1);
|
|
29892
30049
|
}
|
|
@@ -30067,11 +30224,11 @@ class PostureCheckFormComponent extends ProjectableForm {
|
|
|
30067
30224
|
macAddressesChange(event) {
|
|
30068
30225
|
}
|
|
30069
30226
|
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]" }] }); }
|
|
30227
|
+
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
30228
|
}
|
|
30072
30229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormComponent, decorators: [{
|
|
30073
30230
|
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"] }]
|
|
30231
|
+
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
30232
|
}], ctorParameters: () => [{ type: PostureCheckFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
30076
30233
|
type: Inject,
|
|
30077
30234
|
args: [SHAREDZ_EXTENSION]
|
|
@@ -40993,7 +41150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
40993
41150
|
}] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
|
|
40994
41151
|
|
|
40995
41152
|
const ZAC_VERSION = {
|
|
40996
|
-
"version": "4.
|
|
41153
|
+
"version": "4.4.0"
|
|
40997
41154
|
};
|
|
40998
41155
|
|
|
40999
41156
|
/*
|