@openziti/ziti-console-lib 0.12.7 → 0.12.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/components/tabIdentities.html +0 -1
- package/assets/components/tabServices.html +1 -0
- package/assets/fonts/icomoon.eot +0 -0
- package/assets/fonts/icomoon.svg +3 -0
- package/assets/fonts/icomoon.ttf +0 -0
- package/assets/fonts/icomoon.woff +0 -0
- package/assets/fonts/icomoon.woff2 +0 -0
- package/assets/styles/global.scss +101 -0
- package/assets/styles/icons.css +4 -1
- package/esm2022/lib/features/card-list/card-list.component.mjs +6 -3
- package/esm2022/lib/features/creation-summary-dialog/creation-summary-dialog.component.mjs +5 -3
- package/esm2022/lib/features/custom-tags/custom-tags.component.mjs +56 -24
- package/esm2022/lib/features/multi-action-button/multi-action-button.component.mjs +3 -3
- package/esm2022/lib/features/progress-wizard/progress-wizard.component.mjs +3 -3
- package/esm2022/lib/features/projectable-forms/api-session/api-session-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/auth-policy/auth-policy-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/certificate-authority/certificate-authority-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/certificate-authority/verify-certificate/verify-certificate.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/config-type/config-type-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/configuration/configuration-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/edge-router/edge-router-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/edge-router-policy/edge-router-policy-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/form-header/form-header.component.mjs +25 -4
- package/esm2022/lib/features/projectable-forms/identity/identity-form.component.mjs +106 -21
- package/esm2022/lib/features/projectable-forms/jwt-signer/jwt-signer-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/posture-check/posture-check-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/projectable-form.class.mjs +4 -1
- package/esm2022/lib/features/projectable-forms/service/service-form.component.mjs +17 -4
- package/esm2022/lib/features/projectable-forms/service/service-form.service.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/service/simple-service/simple-service.component.mjs +310 -112
- package/esm2022/lib/features/projectable-forms/service-edge-router-policy/service-edge-router-policy-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/service-policy/service-policy-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/session/session-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/terminator/terminator-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/transit-router/transit-router-form.component.mjs +1 -1
- package/esm2022/lib/features/reset-enrollment/reset-enrollment.component.mjs +3 -3
- package/esm2022/lib/urls.mjs +34 -0
- package/esm2022/lib/version.mjs +2 -2
- package/esm2022/lib/ziti-console-lib.module.mjs +5 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/openziti-ziti-console-lib.mjs +574 -191
- package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
- package/lib/features/card-list/card-list.component.d.ts +1 -0
- package/lib/features/card-list/card-list.component.d.ts.map +1 -1
- package/lib/features/creation-summary-dialog/creation-summary-dialog.component.d.ts +1 -0
- package/lib/features/creation-summary-dialog/creation-summary-dialog.component.d.ts.map +1 -1
- package/lib/features/custom-tags/custom-tags.component.d.ts +19 -3
- package/lib/features/custom-tags/custom-tags.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/form-header/form-header.component.d.ts +14 -3
- package/lib/features/projectable-forms/form-header/form-header.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/identity/identity-form.component.d.ts +14 -1
- package/lib/features/projectable-forms/identity/identity-form.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/projectable-form.class.d.ts +1 -0
- package/lib/features/projectable-forms/projectable-form.class.d.ts.map +1 -1
- package/lib/features/projectable-forms/service/service-form.component.d.ts +1 -0
- package/lib/features/projectable-forms/service/service-form.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/service/service-form.service.d.ts.map +1 -1
- package/lib/features/projectable-forms/service/simple-service/simple-service.component.d.ts +29 -6
- package/lib/features/projectable-forms/service/simple-service/simple-service.component.d.ts.map +1 -1
- package/lib/urls.d.ts +34 -0
- package/lib/urls.d.ts.map +1 -0
- package/lib/ziti-console-lib.module.d.ts +1 -1
- package/lib/ziti-console-lib.module.d.ts.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/public-api.d.ts.map +1 -1
|
@@ -5492,11 +5492,11 @@ class ResetEnrollmentComponent {
|
|
|
5492
5492
|
});
|
|
5493
5493
|
}
|
|
5494
5494
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetEnrollmentComponent, deps: [{ token: ResetEnrollmentService }, { token: i5$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ZITI_DATA_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResetEnrollmentComponent, selector: "lib-reset-enrollment", viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n <div class=\"reset-title-container\">\n <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n </div>\n <div class=\"reset-content-container\">\n <label>Date Enrollment Expires</label>\n <p-calendar\n [(ngModel)]=\"dateValue\"\n dateFormat=\"mm/dd/yy\"\n selectionMode=\"single\"\n [showIcon]=\"showIcon\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select
|
|
5495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResetEnrollmentComponent, selector: "lib-reset-enrollment", viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n <div class=\"reset-title-container\">\n <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n </div>\n <div class=\"reset-content-container\">\n <label>Date Enrollment Expires</label>\n <p-calendar\n [(ngModel)]=\"dateValue\"\n dateFormat=\"mm/dd/yy\"\n selectionMode=\"single\"\n [showIcon]=\"showIcon\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select Expiration Date\"\n #calendar\n ></p-calendar>\n </div>\n <div class=\"reset-buttons-container\">\n <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n </div>\n</div>\n", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:37.5rem;padding:1.25rem;gap:.9375rem;background-color:var(--background);border-radius:.625rem;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:var(--inputBorderRadius);line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"], dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
|
|
5496
5496
|
}
|
|
5497
5497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetEnrollmentComponent, decorators: [{
|
|
5498
5498
|
type: Component,
|
|
5499
|
-
args: [{ selector: 'lib-reset-enrollment', template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n <div class=\"reset-title-container\">\n <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n </div>\n <div class=\"reset-content-container\">\n <label>Date Enrollment Expires</label>\n <p-calendar\n [(ngModel)]=\"dateValue\"\n dateFormat=\"mm/dd/yy\"\n selectionMode=\"single\"\n [showIcon]=\"showIcon\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select
|
|
5499
|
+
args: [{ selector: 'lib-reset-enrollment', template: "<div id=\"ResetModal\" class=\"reset-enrollment-container modal\" style=\"height: fit-content;\">\n <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n <div class=\"reset-title-container\">\n <div class=\"title\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n <div class=\"subtitle\">Select a date to {{type === 'reset' ? 'reset' : 'reissue'}} the enrollment token</div>\n </div>\n <div class=\"reset-content-container\">\n <label>Date Enrollment Expires</label>\n <p-calendar\n [(ngModel)]=\"dateValue\"\n dateFormat=\"mm/dd/yy\"\n selectionMode=\"single\"\n [showIcon]=\"showIcon\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select Expiration Date\"\n #calendar\n ></p-calendar>\n </div>\n <div class=\"reset-buttons-container\">\n <div id=\"ResetEnrollButton\" class=\"button\" (click)=\"handleAction()\">{{type === 'reset' ? 'Reset' : 'Reissue'}} Enrollment</div>\n </div>\n</div>\n", styles: [".reset-enrollment-container{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;width:37.5rem;padding:1.25rem;gap:.9375rem;background-color:var(--background);border-radius:.625rem;overflow:visible}.reset-title-container{display:flex;flex-direction:column;justify-content:flex-start}.reset-title-container .title,.reset-title-container .subtitle{padding:0;height:inherit;line-height:initial}.reset-content-container{display:flex;flex-direction:column}.reset-buttons-container{display:flex;flex-direction:row;width:100%;justify-content:flex-start}.reset-buttons-container .button{border-radius:var(--inputBorderRadius);line-height:initial;margin-top:0;display:flex;align-items:center}::ng-deep .reset-enroll-dialog-container .mat-mdc-dialog-surface{overflow:visible}::ng-deep .p-component.p-datepicker{background:var(--background)!important}::ng-deep .p-datepicker .p-timepicker button.p-element{background-color:var(--primaryColor)}::ng-deep .p-datepicker .p-datepicker-header button.p-element.p-ripple{background-color:var(--primaryColor)}\n"] }]
|
|
5500
5500
|
}], ctorParameters: function () { return [{ type: ResetEnrollmentService }, { type: i5$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
5501
5501
|
type: Inject,
|
|
5502
5502
|
args: [MAT_DIALOG_DATA]
|
|
@@ -8475,6 +8475,9 @@ class ProjectableForm extends ExtendableComponent {
|
|
|
8475
8475
|
}));
|
|
8476
8476
|
this.initBaseHref();
|
|
8477
8477
|
}
|
|
8478
|
+
get isEdit() {
|
|
8479
|
+
return !isEmpty(this.formData.id);
|
|
8480
|
+
}
|
|
8478
8481
|
ngAfterViewInit(skipFocus = false) {
|
|
8479
8482
|
super.ngAfterViewInit();
|
|
8480
8483
|
this.errors = {};
|
|
@@ -8855,6 +8858,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8855
8858
|
args: [SHAREDZ_EXTENSION]
|
|
8856
8859
|
}] }, { type: GrowlerService }, { type: ValidationService }]; } });
|
|
8857
8860
|
|
|
8861
|
+
class MultiActionButtonComponent {
|
|
8862
|
+
constructor() {
|
|
8863
|
+
this.actionRequested = new EventEmitter();
|
|
8864
|
+
this.showMoreActions = false;
|
|
8865
|
+
}
|
|
8866
|
+
showMoreActionsMenu() {
|
|
8867
|
+
this.showMoreActions = true;
|
|
8868
|
+
}
|
|
8869
|
+
closeMoreActionsMenu() {
|
|
8870
|
+
this.showMoreActions = false;
|
|
8871
|
+
}
|
|
8872
|
+
actionClicked(action) {
|
|
8873
|
+
this.actionRequested.emit(action);
|
|
8874
|
+
}
|
|
8875
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n <div class=\"form-field-action\"\n *ngIf=\"actions\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n <div class=\"secondary-action-button\"\n *ngIf=\"actions.length > 1\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n </div>\n <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n <ul>\n <li *ngFor=\"let action of actions\" [hidden]=\"action.hidden\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n </ul>\n </div>\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)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
8877
|
+
}
|
|
8878
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
|
|
8879
|
+
type: Component,
|
|
8880
|
+
args: [{ selector: 'lib-multi-action-button', template: "<div class=\"multi-action-button-container\">\n <div class=\"form-field-action\"\n *ngIf=\"actions\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n <div class=\"secondary-action-button\"\n *ngIf=\"actions.length > 1\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n </div>\n <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n <ul>\n <li *ngFor=\"let action of actions\" [hidden]=\"action.hidden\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n </ul>\n </div>\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)}\n"] }]
|
|
8881
|
+
}], propDecorators: { actions: [{
|
|
8882
|
+
type: Input
|
|
8883
|
+
}], actionRequested: [{
|
|
8884
|
+
type: Output
|
|
8885
|
+
}] } });
|
|
8886
|
+
|
|
8858
8887
|
/*
|
|
8859
8888
|
Copyright NetFoundry Inc.
|
|
8860
8889
|
|
|
@@ -8883,10 +8912,17 @@ class FormHeaderComponent {
|
|
|
8883
8912
|
this.moreActionsText = 'More Actions';
|
|
8884
8913
|
this.showHeaderToggle = true;
|
|
8885
8914
|
this.showHeaderButton = true;
|
|
8915
|
+
this.multiActions = [];
|
|
8886
8916
|
this.formViewChange = new EventEmitter();
|
|
8887
8917
|
this.actionRequested = new EventEmitter();
|
|
8918
|
+
this.multiActionRequested = new EventEmitter();
|
|
8919
|
+
this._saveActions = [{ id: 'save', label: 'Save', hidden: true }];
|
|
8920
|
+
this.saveActions = [];
|
|
8888
8921
|
this.showActionsDropDown = false;
|
|
8889
8922
|
}
|
|
8923
|
+
ngOnChanges(changes) {
|
|
8924
|
+
this.saveActions = [...this._saveActions, ...this.multiActions];
|
|
8925
|
+
}
|
|
8890
8926
|
get hasMoreActions() {
|
|
8891
8927
|
let hasMoreActions = false;
|
|
8892
8928
|
this.moreActions?.forEach(action => {
|
|
@@ -8896,6 +8932,12 @@ class FormHeaderComponent {
|
|
|
8896
8932
|
});
|
|
8897
8933
|
return hasMoreActions;
|
|
8898
8934
|
}
|
|
8935
|
+
actionClicked(event) {
|
|
8936
|
+
if (event?.id === 'save' && this.saveDisabled) {
|
|
8937
|
+
return;
|
|
8938
|
+
}
|
|
8939
|
+
this.multiActionRequested.emit({ id: event?.id });
|
|
8940
|
+
}
|
|
8899
8941
|
requestAction(action) {
|
|
8900
8942
|
if (action?.name === 'save' && this.saveDisabled) {
|
|
8901
8943
|
return;
|
|
@@ -8926,15 +8968,18 @@ class FormHeaderComponent {
|
|
|
8926
8968
|
this.showActionsDropDown = false;
|
|
8927
8969
|
});
|
|
8928
8970
|
}
|
|
8971
|
+
get hasMultiActions() {
|
|
8972
|
+
return !isEmpty(this.multiActions);
|
|
8973
|
+
}
|
|
8929
8974
|
get headerBadges() {
|
|
8930
8975
|
return this.data.badges || this.badges;
|
|
8931
8976
|
}
|
|
8932
8977
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, 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" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-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\">{{title}}</span>\n <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n </div>\n </div>\n <div class=\"header-actions-container\">\n <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n <div\n *ngFor=\"let action of moreActions\"\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n {{action.label}}\n </div>\n </div>\n </div>\n <div class=\"save-button\"\n *ngIf=\"showHeaderButton\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n </div>\n</div>", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.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:999999;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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size: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}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;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:1.875rem;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\"}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
8978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, 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", 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\">{{title}}</span>\n <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n </div>\n </div>\n <div class=\"header-actions-container\">\n <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n <div\n *ngFor=\"let action of moreActions\"\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n {{action.label}}\n </div>\n </div>\n </div>\n <div class=\"save-button\"\n *ngIf=\"!hasMultiActions && showHeaderButton\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n <lib-multi-action-button\n *ngIf=\"hasMultiActions\"\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.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:999999;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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size: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}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;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:1.875rem;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\"}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
|
|
8934
8979
|
}
|
|
8935
8980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, decorators: [{
|
|
8936
8981
|
type: Component,
|
|
8937
|
-
args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-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\">{{title}}</span>\n <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n </div>\n </div>\n <div class=\"header-actions-container\">\n <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n <div\n *ngFor=\"let action of moreActions\"\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n {{action.label}}\n </div>\n </div>\n </div>\n <div class=\"save-button\"\n *ngIf=\"showHeaderButton\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n </div>\n</div>", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.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:999999;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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size: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}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;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:1.875rem;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\"}\n"] }]
|
|
8982
|
+
args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n <div class=\"form-header-group\">\n <div class=\"form-title-container\">\n <div class=\"form-title-back-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\">{{title}}</span>\n <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n </div>\n </div>\n <div class=\"header-actions-container\">\n <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n >\n FORM\n </span>\n <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n <div\n class=\"form-toggle-switch\"\n [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n >\n <div class=\"form-toggle-indicator\"></div>\n <div class=\"form-toggle-indicator\"></div>\n </div>\n </div>\n <span\n class=\"toggle-option-text\"\n [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n >\n JSON\n </span>\n </div>\n <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\" *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n <div class=\"more-actions-button\">\n <div class=\"more-actions-label\">\n <div class=\"more-actions-text\">{{moreActionsText}}</div>\n <div class=\"more-actions-arrow\"></div>\n </div>\n </div>\n <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n <div\n *ngFor=\"let action of moreActions\"\n class=\"more-actions-item\"\n (click)=\"requestAction(action)\"\n >\n {{action.label}}\n </div>\n </div>\n </div>\n <div class=\"save-button\"\n *ngIf=\"!hasMultiActions && showHeaderButton\"\n (click)=\"requestAction({name: 'save'})\"\n [ngClass]=\"{'save-disabled': saveDisabled}\"\n matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n matTooltipPosition=\"below\"\n >{{actionButtonText}}</div>\n <lib-multi-action-button\n *ngIf=\"hasMultiActions\"\n [actions]=\"saveActions\"\n (actionRequested)=\"actionClicked($event)\"\n ></lib-multi-action-button>\n </div>\n </div>\n <div class=\"form-header-group badges-container\">\n <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n <span class=\"badge-label\">{{badge.label}}</span>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.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:999999;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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size: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}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;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:1.875rem;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\"}\n"] }]
|
|
8938
8983
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
8939
8984
|
type: Input
|
|
8940
8985
|
}], badges: [{
|
|
@@ -8957,35 +9002,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8957
9002
|
type: Input
|
|
8958
9003
|
}], showHeaderButton: [{
|
|
8959
9004
|
type: Input
|
|
9005
|
+
}], multiActions: [{
|
|
9006
|
+
type: Input
|
|
8960
9007
|
}], formViewChange: [{
|
|
8961
9008
|
type: Output
|
|
8962
9009
|
}], actionRequested: [{
|
|
8963
9010
|
type: Output
|
|
8964
|
-
}]
|
|
8965
|
-
|
|
8966
|
-
class MultiActionButtonComponent {
|
|
8967
|
-
constructor() {
|
|
8968
|
-
this.actionRequested = new EventEmitter();
|
|
8969
|
-
this.showMoreActions = false;
|
|
8970
|
-
}
|
|
8971
|
-
showMoreActionsMenu() {
|
|
8972
|
-
this.showMoreActions = true;
|
|
8973
|
-
}
|
|
8974
|
-
closeMoreActionsMenu() {
|
|
8975
|
-
this.showMoreActions = false;
|
|
8976
|
-
}
|
|
8977
|
-
actionClicked(action) {
|
|
8978
|
-
this.actionRequested.emit(action);
|
|
8979
|
-
}
|
|
8980
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: { actions: "actions" }, outputs: { actionRequested: "actionRequested" }, ngImport: i0, template: "<div class=\"multi-action-button-container\">\n <div class=\"form-field-action\"\n *ngIf=\"actions\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n <div class=\"secondary-action-button\"\n *ngIf=\"actions.length > 1\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n </div>\n <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n <ul>\n <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n </ul>\n </div>\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:hover{background-color:var(--inputBorder)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
8982
|
-
}
|
|
8983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiActionButtonComponent, decorators: [{
|
|
8984
|
-
type: Component,
|
|
8985
|
-
args: [{ selector: 'lib-multi-action-button', template: "<div class=\"multi-action-button-container\">\n <div class=\"form-field-action\"\n *ngIf=\"actions\"\n (clickOutside)=\"closeMoreActionsMenu()\"\n >\n <div class=\"primary-action-button\" (click)=\"actionClicked(actions[0])\">{{actions[0].label}}</div>\n <div class=\"secondary-action-button\"\n *ngIf=\"actions.length > 1\"\n (click)=\"showMoreActionsMenu()\"\n ><div class=\"secondary-actions-arrow icon-prev\"></div></div>\n </div>\n <div class=\"multi-action-button-dropdown\" *ngIf=\"showMoreActions\">\n <ul>\n <li *ngFor=\"let action of actions\" class=\"confirm-item-name\" (click)=\"actionClicked(action)\">{{action.label}}</li>\n </ul>\n </div>\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:hover{background-color:var(--inputBorder)}\n"] }]
|
|
8986
|
-
}], propDecorators: { actions: [{
|
|
8987
|
-
type: Input
|
|
8988
|
-
}], actionRequested: [{
|
|
9011
|
+
}], multiActionRequested: [{
|
|
8989
9012
|
type: Output
|
|
8990
9013
|
}] } });
|
|
8991
9014
|
|
|
@@ -9495,7 +9518,7 @@ class TerminatorFormComponent extends ProjectableForm {
|
|
|
9495
9518
|
});
|
|
9496
9519
|
}
|
|
9497
9520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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 <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"] }] }); }
|
|
9521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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 <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "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"] }, { 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"] }] }); }
|
|
9499
9522
|
}
|
|
9500
9523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminatorFormComponent, decorators: [{
|
|
9501
9524
|
type: Component,
|
|
@@ -13185,50 +13208,81 @@ class CustomTagsComponent {
|
|
|
13185
13208
|
this.newTagValue = '';
|
|
13186
13209
|
this.errors = {};
|
|
13187
13210
|
this.object = Object;
|
|
13211
|
+
this.newTag = { name: '', value: '', initName: '', initVal: '', showNewTag: true, errors: {} };
|
|
13212
|
+
this.tagNameChangedDebounced = debounce(this.tagNameChanged, 350);
|
|
13213
|
+
this.tagValueChangedDebounced = debounce(this.tagValueChanged, 350);
|
|
13214
|
+
this.updateTagsArrayDebounced = debounce(this.updateTagsArray, 350);
|
|
13215
|
+
this.updateTagsObjectDebounced = debounce(this.updateTagsObject, 350);
|
|
13188
13216
|
}
|
|
13189
13217
|
ngOnInit() {
|
|
13190
|
-
this.updateTagsArray();
|
|
13218
|
+
this.updateTagsArray({});
|
|
13191
13219
|
}
|
|
13192
13220
|
ngOnChanges(changes) {
|
|
13193
|
-
this.updateTagsArray();
|
|
13221
|
+
this.updateTagsArray({});
|
|
13194
13222
|
}
|
|
13195
|
-
updateTagsArray() {
|
|
13223
|
+
updateTagsArray(event) {
|
|
13196
13224
|
this.tagsArray = map$1(this.tags, (value, key) => {
|
|
13197
|
-
return { name: key, value: value };
|
|
13225
|
+
return { name: key, value: value, initName: key, initVal: value, errors: {} };
|
|
13198
13226
|
});
|
|
13199
13227
|
this.tagsChange.emit(this.tags);
|
|
13228
|
+
event?.srcElement?.focus();
|
|
13200
13229
|
}
|
|
13201
|
-
|
|
13202
|
-
this.
|
|
13203
|
-
|
|
13204
|
-
|
|
13205
|
-
|
|
13206
|
-
|
|
13207
|
-
|
|
13208
|
-
|
|
13209
|
-
|
|
13210
|
-
|
|
13211
|
-
}
|
|
13212
|
-
this.
|
|
13213
|
-
|
|
13214
|
-
|
|
13215
|
-
this.
|
|
13230
|
+
updateTagsObject(event) {
|
|
13231
|
+
this.tagsArray.forEach((tag) => {
|
|
13232
|
+
if (tag.initName !== tag.name) {
|
|
13233
|
+
unset(this.tags, tag.initName);
|
|
13234
|
+
tag.initName = tag.name;
|
|
13235
|
+
}
|
|
13236
|
+
if (isEmpty(tag.name) && isEmpty(tag.value)) {
|
|
13237
|
+
unset(this.tags, tag.name);
|
|
13238
|
+
}
|
|
13239
|
+
this.tags[tag.name] = tag.value;
|
|
13240
|
+
});
|
|
13241
|
+
this.tagsChange.emit(this.tags);
|
|
13242
|
+
}
|
|
13243
|
+
addTag(event) {
|
|
13244
|
+
this.validate();
|
|
13245
|
+
set(this.tagsArray, `[${this.tagsArray.length - 1}].showNewTag`, false);
|
|
13246
|
+
const newTag = cloneDeep(this.newTag);
|
|
13247
|
+
this.tagsArray = [...this.tagsArray, newTag];
|
|
13248
|
+
this.updateTagsObject();
|
|
13249
|
+
event?.stopPropagation();
|
|
13250
|
+
event?.preventDefault();
|
|
13216
13251
|
}
|
|
13217
13252
|
removeTag(tagName) {
|
|
13218
13253
|
unset(this.tags, tagName);
|
|
13219
|
-
this.updateTagsArray();
|
|
13254
|
+
this.updateTagsArray({});
|
|
13255
|
+
set(this.tagsArray, `[${this.tagsArray.length - 1}].showNewTag`, true);
|
|
13220
13256
|
}
|
|
13221
13257
|
enterKeyPressed(event) {
|
|
13222
13258
|
this.addTag();
|
|
13223
13259
|
event.stopPropagation();
|
|
13224
13260
|
event.preventDefault();
|
|
13225
13261
|
}
|
|
13262
|
+
tagNameChanged(tag, event) {
|
|
13263
|
+
this.updateTagsObjectDebounced(event);
|
|
13264
|
+
}
|
|
13265
|
+
tagValueChanged(tag, event) {
|
|
13266
|
+
this.updateTagsObjectDebounced(event);
|
|
13267
|
+
}
|
|
13268
|
+
validate(event) {
|
|
13269
|
+
this.tagsArray.forEach((tag) => {
|
|
13270
|
+
const errors = {};
|
|
13271
|
+
if (isEmpty(tag.name)) {
|
|
13272
|
+
errors['name'] = true;
|
|
13273
|
+
}
|
|
13274
|
+
if (isEmpty(tag.value)) {
|
|
13275
|
+
errors['value'] = true;
|
|
13276
|
+
}
|
|
13277
|
+
tag.errors = errors;
|
|
13278
|
+
});
|
|
13279
|
+
}
|
|
13226
13280
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: { tags: "tags" }, outputs: { tagsChange: "tagsChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"TagExtended\">\n <div class=\"grid tags\">\n <label>Name</label><label>Value</label>\n </div>\n <div id=\"NewTags\" >\n <div class=\"grid tags\" *ngFor=\"let tag of tagsArray\">\n <input\n
|
|
13281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: { tags: "tags" }, outputs: { tagsChange: "tagsChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"TagExtended\" (clickOutside)=\"validate($event)\">\n <div class=\"add-button-container add-vlan-button add-config-open\" (click)=\"addTag($event)\">\n <div class=\"icon-add addIcon\"></div>\n <span class=\"add-icon-label\">New Tag</span>\n </div>\n <div *ngIf=\"tagsArray.length >= 1\" class=\"grid tags\">\n <label>Name</label><label>Value</label>\n </div>\n <div id=\"NewTags\" >\n <div *ngIf=\"tagsArray.length <= 0\" class=\"no-tags-container\">\n No tags to display...\n </div>\n <div class=\"grid tags\" *ngFor=\"let tag of tagsArray\">\n <input\n maxlength=\"100\"\n placeholder=\"enter tag name...\"\n [(ngModel)]=\"tag['name']\"\n [ngClass]=\"{invalid: tag.errors.name}\"\n (keyup.enter)=\"enterKeyPressed($event)\"\n (keyup)=\"tagNameChanged(tag, $event)\"\n (change)=\"validate($event)\"\n >\n <input\n placeholder=\"enter tag value...\"\n type=\"text\"\n maxlength=\"100\"\n [(ngModel)]=\"tag['value']\"\n (keyup.enter)=\"enterKeyPressed($event)\"\n (keyup)=\"tagValueChanged(tag, $event)\"\n (change)=\"validate($event)\"\n >\n <div class=\"tag-actions\">\n <div class=\"removeIcon icon-clear\" (click)=\"removeTag(tag.name)\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".grid.tags .invalid{border-color:var(--red)}.no-tags-container{height:2rem;display:flex;align-items:center;color:var(--tableText);opacity:.65;font-weight:600}.add-button-container{position:absolute;right:0;top:-1.5rem;display:flex;flex-direction:row;height:1.75rem;align-items:center;margin-right:0;border-radius:var(--inputBorderRadius);padding:var(--paddingSmall);background:var(--mainBackground);cursor:pointer;transition:.3s;background-color:var(--primaryColor)!important;width:-moz-fit-content;width:fit-content;margin-top:-.25rem;color:var(--offWhite_ALWAYS);gap:var(--gapSmall)}.add-button-container .icon-add{font-size:1rem;position:relative;top:unset;left:unset;right:unset;color:var(--background)}.add-button-container:active{transform:translateY(1px)}.add-button-container:hover{filter:brightness(.93)}.tag-actions{position:absolute;top:0;right:0rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:100%;margin-right:.5rem;gap:var(--gapSmall)}.tag-actions .addIcon{position:relative;font-size:1.125rem;color:var(--primary);cursor:pointer;transition:var(--transition);top:unset;right:unset}.tag-actions .removeIcon{position:relative;font-size:1.125rem;color:var(--primary);cursor:pointer;font-weight:400;transition:var(--transition);top:unset;right:unset}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
13228
13282
|
}
|
|
13229
13283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomTagsComponent, decorators: [{
|
|
13230
13284
|
type: Component,
|
|
13231
|
-
args: [{ selector: 'lib-custom-tags', template: "<div id=\"TagExtended\">\n <div class=\"grid tags\">\n <label>Name</label><label>Value</label>\n </div>\n <div id=\"NewTags\" >\n <div class=\"grid tags\" *ngFor=\"let tag of tagsArray\">\n <input\n
|
|
13285
|
+
args: [{ selector: 'lib-custom-tags', template: "<div id=\"TagExtended\" (clickOutside)=\"validate($event)\">\n <div class=\"add-button-container add-vlan-button add-config-open\" (click)=\"addTag($event)\">\n <div class=\"icon-add addIcon\"></div>\n <span class=\"add-icon-label\">New Tag</span>\n </div>\n <div *ngIf=\"tagsArray.length >= 1\" class=\"grid tags\">\n <label>Name</label><label>Value</label>\n </div>\n <div id=\"NewTags\" >\n <div *ngIf=\"tagsArray.length <= 0\" class=\"no-tags-container\">\n No tags to display...\n </div>\n <div class=\"grid tags\" *ngFor=\"let tag of tagsArray\">\n <input\n maxlength=\"100\"\n placeholder=\"enter tag name...\"\n [(ngModel)]=\"tag['name']\"\n [ngClass]=\"{invalid: tag.errors.name}\"\n (keyup.enter)=\"enterKeyPressed($event)\"\n (keyup)=\"tagNameChanged(tag, $event)\"\n (change)=\"validate($event)\"\n >\n <input\n placeholder=\"enter tag value...\"\n type=\"text\"\n maxlength=\"100\"\n [(ngModel)]=\"tag['value']\"\n (keyup.enter)=\"enterKeyPressed($event)\"\n (keyup)=\"tagValueChanged(tag, $event)\"\n (change)=\"validate($event)\"\n >\n <div class=\"tag-actions\">\n <div class=\"removeIcon icon-clear\" (click)=\"removeTag(tag.name)\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".grid.tags .invalid{border-color:var(--red)}.no-tags-container{height:2rem;display:flex;align-items:center;color:var(--tableText);opacity:.65;font-weight:600}.add-button-container{position:absolute;right:0;top:-1.5rem;display:flex;flex-direction:row;height:1.75rem;align-items:center;margin-right:0;border-radius:var(--inputBorderRadius);padding:var(--paddingSmall);background:var(--mainBackground);cursor:pointer;transition:.3s;background-color:var(--primaryColor)!important;width:-moz-fit-content;width:fit-content;margin-top:-.25rem;color:var(--offWhite_ALWAYS);gap:var(--gapSmall)}.add-button-container .icon-add{font-size:1rem;position:relative;top:unset;left:unset;right:unset;color:var(--background)}.add-button-container:active{transform:translateY(1px)}.add-button-container:hover{filter:brightness(.93)}.tag-actions{position:absolute;top:0;right:0rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:100%;margin-right:.5rem;gap:var(--gapSmall)}.tag-actions .addIcon{position:relative;font-size:1.125rem;color:var(--primary);cursor:pointer;transition:var(--transition);top:unset;right:unset}.tag-actions .removeIcon{position:relative;font-size:1.125rem;color:var(--primary);cursor:pointer;font-weight:400;transition:var(--transition);top:unset;right:unset}\n"] }]
|
|
13232
13286
|
}], ctorParameters: function () { return []; }, propDecorators: { tags: [{
|
|
13233
13287
|
type: Input
|
|
13234
13288
|
}], tagsChange: [{
|
|
@@ -13251,7 +13305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13251
13305
|
limitations under the License.
|
|
13252
13306
|
*/
|
|
13253
13307
|
class IdentityFormComponent extends ProjectableForm {
|
|
13254
|
-
constructor(settingsService, svc, identitiesService, zitiService, growlerService, extService, router, route, location) {
|
|
13308
|
+
constructor(settingsService, svc, identitiesService, zitiService, growlerService, extService, router, route, location, dialogForm) {
|
|
13255
13309
|
super(growlerService, extService, zitiService, router, route, location, settingsService);
|
|
13256
13310
|
this.settingsService = settingsService;
|
|
13257
13311
|
this.svc = svc;
|
|
@@ -13259,6 +13313,7 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
13259
13313
|
this.zitiService = zitiService;
|
|
13260
13314
|
this.router = router;
|
|
13261
13315
|
this.route = route;
|
|
13316
|
+
this.dialogForm = dialogForm;
|
|
13262
13317
|
this.formData = {};
|
|
13263
13318
|
this.identityRoleAttributes = [];
|
|
13264
13319
|
this.close = new EventEmitter();
|
|
@@ -13280,6 +13335,10 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
13280
13335
|
this.testResultOpen = false;
|
|
13281
13336
|
this.cas = [];
|
|
13282
13337
|
this._apiData = {};
|
|
13338
|
+
this.disableDurationType = 'indefinite';
|
|
13339
|
+
this.identityDisabled = false;
|
|
13340
|
+
this.disableDuration = new Date();
|
|
13341
|
+
this.minDate = new Date();
|
|
13283
13342
|
this.identityRoleAttributes = [];
|
|
13284
13343
|
this.getAuthPolicies();
|
|
13285
13344
|
}
|
|
@@ -13309,6 +13368,9 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
13309
13368
|
if (this.formData.enrollment?.ott) {
|
|
13310
13369
|
this.formData.badges.push({ label: 'Unregistered', class: 'unreg' });
|
|
13311
13370
|
}
|
|
13371
|
+
if (this.formData.disabled) {
|
|
13372
|
+
this.formData.badges.push({ label: 'Disabled', class: 'unreg' });
|
|
13373
|
+
}
|
|
13312
13374
|
this.jwt = this.identitiesService.getJWT(this.formData);
|
|
13313
13375
|
this.enrollmentExpiration = this.identitiesService.getEnrollmentExpiration(this.formData);
|
|
13314
13376
|
}
|
|
@@ -13515,9 +13577,18 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
13515
13577
|
this.testResultOpen = true;
|
|
13516
13578
|
});
|
|
13517
13579
|
}
|
|
13580
|
+
toggleDisableIdentity() {
|
|
13581
|
+
this.identityDisabled = !this.identityDisabled;
|
|
13582
|
+
}
|
|
13518
13583
|
toggleIsAdmin() {
|
|
13519
13584
|
this.formData.isAdmin = !this.formData.isAdmin;
|
|
13520
13585
|
}
|
|
13586
|
+
setDisabledDate(range) {
|
|
13587
|
+
let label;
|
|
13588
|
+
let date = moment();
|
|
13589
|
+
let closeCalendar = true;
|
|
13590
|
+
const dateEncoded = encodeURIComponent(date.toISOString());
|
|
13591
|
+
}
|
|
13521
13592
|
get identityType() {
|
|
13522
13593
|
return this.isEditing ? this.formData.type.name : this.formData.type;
|
|
13523
13594
|
}
|
|
@@ -13529,18 +13600,81 @@ class IdentityFormComponent extends ProjectableForm {
|
|
|
13529
13600
|
set(this.formData, 'type', type);
|
|
13530
13601
|
}
|
|
13531
13602
|
}
|
|
13603
|
+
get entityDisabled() {
|
|
13604
|
+
return this.formData?.disabled;
|
|
13605
|
+
}
|
|
13606
|
+
disableIdentity() {
|
|
13607
|
+
const localDate = moment(this.disableDuration).local();
|
|
13608
|
+
const minutesDifference = localDate.diff(moment(), 'minutes');
|
|
13609
|
+
const confirmData = {
|
|
13610
|
+
appendId: 'DisableIdentity',
|
|
13611
|
+
title: 'Disable Identity',
|
|
13612
|
+
message: `Are you sure you would like to disable this identity ${this.disableDurationType === 'indefinite' ? 'indefinitely' : `until: <br>${localDate}`}?`,
|
|
13613
|
+
confirmLabel: 'Yes',
|
|
13614
|
+
cancelLabel: 'Oops, no get me out of here',
|
|
13615
|
+
showCancelLink: true,
|
|
13616
|
+
imageUrl: '../../assets/svgs/Growl_Warning.svg',
|
|
13617
|
+
};
|
|
13618
|
+
this.dialogRef = this.dialogForm.open(ConfirmComponent, {
|
|
13619
|
+
data: confirmData,
|
|
13620
|
+
autoFocus: false,
|
|
13621
|
+
});
|
|
13622
|
+
this.dialogRef.afterClosed().subscribe({
|
|
13623
|
+
next: (result) => {
|
|
13624
|
+
this.zitiService.post(`/identities/${this.formData.id}/disable`, { durationMinutes: minutesDifference }).then((result) => {
|
|
13625
|
+
const growlerData = new GrowlerModel('success', 'Success', `Identity Disabled`, `Successfully disabled identity`);
|
|
13626
|
+
this.growlerService.show(growlerData);
|
|
13627
|
+
this.refreshIdentity();
|
|
13628
|
+
}).catch((error) => {
|
|
13629
|
+
const errorMessage = this.zitiService.getErrorMessage(error);
|
|
13630
|
+
const growlerData = new GrowlerModel('error', 'Error', `Failed to Disabled`, `Unable to disable identity: "${errorMessage}"`);
|
|
13631
|
+
this.growlerService.show(growlerData);
|
|
13632
|
+
this.refreshIdentity();
|
|
13633
|
+
});
|
|
13634
|
+
},
|
|
13635
|
+
});
|
|
13636
|
+
}
|
|
13637
|
+
enableIdentity() {
|
|
13638
|
+
const confirmData = {
|
|
13639
|
+
appendId: 'EnableIdentity',
|
|
13640
|
+
title: 'Enable Identity',
|
|
13641
|
+
message: `Are you sure you would like to enable this identity?`,
|
|
13642
|
+
confirmLabel: 'Yes',
|
|
13643
|
+
cancelLabel: 'Oops, no get me out of here',
|
|
13644
|
+
showCancelLink: true,
|
|
13645
|
+
imageUrl: '../../assets/svgs/Growl_Warning.svg',
|
|
13646
|
+
};
|
|
13647
|
+
this.dialogRef = this.dialogForm.open(ConfirmComponent, {
|
|
13648
|
+
data: confirmData,
|
|
13649
|
+
autoFocus: false,
|
|
13650
|
+
});
|
|
13651
|
+
this.dialogRef.afterClosed().subscribe({
|
|
13652
|
+
next: (result) => {
|
|
13653
|
+
this.zitiService.post(`/identities/${this.formData.id}/enable`, { durationMinutes: 0 }).then((result) => {
|
|
13654
|
+
const growlerData = new GrowlerModel('success', 'Success', `Identity Enabled`, `Successfully enabled identity`);
|
|
13655
|
+
this.growlerService.show(growlerData);
|
|
13656
|
+
this.refreshIdentity();
|
|
13657
|
+
}).catch((error) => {
|
|
13658
|
+
const errorMessage = this.zitiService.getErrorMessage(error);
|
|
13659
|
+
const growlerData = new GrowlerModel('error', 'Error', `Failed to Enable`, `Unable to enable identity: "${errorMessage}"`);
|
|
13660
|
+
this.growlerService.show(growlerData);
|
|
13661
|
+
this.refreshIdentity();
|
|
13662
|
+
});
|
|
13663
|
+
},
|
|
13664
|
+
});
|
|
13665
|
+
}
|
|
13532
13666
|
closeTestResult() {
|
|
13533
13667
|
this.testResultOpen = false;
|
|
13534
13668
|
}
|
|
13535
13669
|
clear() {
|
|
13536
13670
|
}
|
|
13537
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: IdentityFormService }, { token: IdentitiesPageService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: IDENTITY_EXTENSION_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13671
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: IdentityFormService }, { token: IdentitiesPageService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: IDENTITY_EXTENSION_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }, { token: i5$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13538
13672
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentityFormComponent, selector: "lib-identity-form", inputs: { formData: "formData", identityRoleAttributes: "identityRoleAttributes" }, outputs: { close: "close" }, providers: [
|
|
13539
13673
|
{
|
|
13540
13674
|
provide: MatDialogRef,
|
|
13541
13675
|
useValue: {}
|
|
13542
13676
|
}
|
|
13543
|
-
], 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 Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"'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 [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"'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 >\n <option value=\"\">Select an Authentication Policy</option>\n <option\n *ngFor=\"let policy of authPolicies\"\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\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\">OPTIONAL</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n </div>\n </lib-form-field-container>\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 [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n *ngIf=\"enrollmentType === 'CA'\"\n [ngClass]=\"{disabled: isEditing}\"\n [(ngModel)]=\"enrollmentCA\"\n [ngClass]=\"{error: errors.enrollmentCA}\"\n (change)=\"updateEnrollment()\"\n >\n <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n </select>\n <input\n *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n class=\"form-field-input\"\n id=\"UPDBName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\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 }\"\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 class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n [title]=\"tagElement.label\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n [showHeader]=\"false\"\n >\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()\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\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 <lib-form-field-container\n *ngIf=\"formData.id\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
|
|
13677
|
+
], 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 Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"'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 [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"'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 >\n <option value=\"\">Select an Authentication Policy</option>\n <option\n *ngFor=\"let policy of authPolicies\"\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\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\">OPTIONAL</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n </div>\n </lib-form-field-container>\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 [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n *ngIf=\"enrollmentType === 'CA'\"\n [ngClass]=\"{disabled: isEditing}\"\n [(ngModel)]=\"enrollmentCA\"\n [ngClass]=\"{error: errors.enrollmentCA}\"\n (change)=\"updateEnrollment()\"\n >\n <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n </select>\n <input\n *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n class=\"form-field-input\"\n id=\"UPDBName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\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 }\"\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 class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n [title]=\"tagElement.label\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n [showHeader]=\"false\"\n >\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()\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"isEdit\"\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div *ngIf=\"entityDisabled\" 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 <div *ngIf=\"!entityDisabled\" 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 <div *ngIf=\"!entityDisabled\" 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 <p-calendar\n *ngIf=\"disableDurationType === 'pick-date'\"\n [(ngModel)]=\"disableDuration\"\n (onSelect)=\"setDisabledDate($event)\"\n [showIcon]=\"true\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select a date\"\n selectionMode=\"single\"\n #calendar\n >\n </p-calendar>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\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 <lib-form-field-container\n *ngIf=\"formData.id\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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)}.disable-identity-duration-container .form-field-dropdown{min-width:10rem}.disable-identity-duration-container p-calendar{min-width:12rem}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
|
|
13544
13678
|
}
|
|
13545
13679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, decorators: [{
|
|
13546
13680
|
type: Component,
|
|
@@ -13549,7 +13683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13549
13683
|
provide: MatDialogRef,
|
|
13550
13684
|
useValue: {}
|
|
13551
13685
|
}
|
|
13552
|
-
], 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 Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"'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 [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"'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 >\n <option value=\"\">Select an Authentication Policy</option>\n <option\n *ngFor=\"let policy of authPolicies\"\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\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\">OPTIONAL</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n </div>\n </lib-form-field-container>\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 [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n *ngIf=\"enrollmentType === 'CA'\"\n [ngClass]=\"{disabled: isEditing}\"\n [(ngModel)]=\"enrollmentCA\"\n [ngClass]=\"{error: errors.enrollmentCA}\"\n (change)=\"updateEnrollment()\"\n >\n <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n </select>\n <input\n *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n class=\"form-field-input\"\n id=\"UPDBName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\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 }\"\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 class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n [title]=\"tagElement.label\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n [showHeader]=\"false\"\n >\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()\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\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 <lib-form-field-container\n *ngIf=\"formData.id\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}\n"] }]
|
|
13686
|
+
], 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 Identity: ' : 'Create New Identity'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"identity-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Identity attributes'\"\n [label]=\"'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 [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Add attributes to group Identities'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-container\n [title]=\"'Auth Policy'\"\n [label]=\"'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 >\n <option value=\"\">Select an Authentication Policy</option>\n <option\n *ngFor=\"let policy of authPolicies\"\n [value]=\"policy.id\"\n >\n {{ policy.name }}\n </option>\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\">OPTIONAL</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n </div>\n </lib-form-field-container>\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 [(ngModel)]=\"enrollmentType\"\n (change)=\"updateEnrollment()\"\n >\n <option value=\"ott\">One Time Token</option>\n <option value=\"CA\">Certificate Authority</option>\n <option value=\"updb\">UPDB</option>\n <option value=\"none\">None</option>\n </select>\n <select\n id=\"CertAuthorities\"\n class=\"form-field-dropdown\"\n *ngIf=\"enrollmentType === 'CA'\"\n [ngClass]=\"{disabled: isEditing}\"\n [(ngModel)]=\"enrollmentCA\"\n [ngClass]=\"{error: errors.enrollmentCA}\"\n (change)=\"updateEnrollment()\"\n >\n <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n </select>\n <input\n *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n [(ngModel)]=\"enrollmentUPDB\"\n (keyup)=\"updateEnrollment()\"\n class=\"form-field-input\"\n id=\"UPDBName\"\n type=\"text\"\n maxlength=\"500\"\n placeholder=\"Enter a name\"\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 }\"\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 class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n <select\n [(ngModel)]=\"formData.defaultHostingPrecedence\"\n id=\"hostingPrecedence\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n [title]=\"tagElement.label\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <div [innerHTML]=\"tagElement.content | safe\"></div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n [showHeader]=\"false\"\n >\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()\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"isEdit\"\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n [contentStyle]=\"'z-index: 99999999'\"\n >\n <div *ngIf=\"entityDisabled\" 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 <div *ngIf=\"!entityDisabled\" 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 <div *ngIf=\"!entityDisabled\" 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 <p-calendar\n *ngIf=\"disableDurationType === 'pick-date'\"\n [(ngModel)]=\"disableDuration\"\n (onSelect)=\"setDisabledDate($event)\"\n [showIcon]=\"true\"\n [showTime]=\"true\"\n [minDate]=\"minDate\"\n placeholder=\"Select a date\"\n selectionMode=\"single\"\n #calendar\n >\n </p-calendar>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\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 <lib-form-field-container\n *ngIf=\"formData.id\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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)}.disable-identity-duration-container .form-field-dropdown{min-width:10rem}.disable-identity-duration-container p-calendar{min-width:12rem}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}}\n"] }]
|
|
13553
13687
|
}], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
|
|
13554
13688
|
type: Inject,
|
|
13555
13689
|
args: [SETTINGS_SERVICE]
|
|
@@ -13559,7 +13693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13559
13693
|
}] }, { type: GrowlerService }, { type: undefined, decorators: [{
|
|
13560
13694
|
type: Inject,
|
|
13561
13695
|
args: [IDENTITY_EXTENSION_SERVICE]
|
|
13562
|
-
}] }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i1$4.Location }]; }, propDecorators: { formData: [{
|
|
13696
|
+
}] }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i1$4.Location }, { type: i5$1.MatDialog }]; }, propDecorators: { formData: [{
|
|
13563
13697
|
type: Input
|
|
13564
13698
|
}], identityRoleAttributes: [{
|
|
13565
13699
|
type: Input
|
|
@@ -17008,7 +17142,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
|
|
|
17008
17142
|
provide: MatDialogRef,
|
|
17009
17143
|
useValue: {}
|
|
17010
17144
|
}
|
|
17011
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div\n (click)=\"toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
17145
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Edge Router attributes'\"\n [label]=\"'OPTIONAL'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n >\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n [placeholder]=\"'Add attributes to group Edge Routers'\"\n ></lib-tag-selector>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'TUNNELER'\"\n [title2]=\"'TRAVERSAL'\"\n [layout]=\"'row'\"\n class=\"form-field-advanced\"\n >\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">TUNNELER ENABLED</div>\n <div\n (click)=\"toggleTunnelerEnabled()\"\n [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"config-item\">\n <div class=\"config-container toggle-container\">\n <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n <div\n (click)=\"toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'App Data'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-json-view [(data)]=\"formData.appData\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Services'\"\n [count]=\"svc.associatedServices.length\"\n [class]=\"'hide-overflow'\"\n [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"servicesLoading\"\n [allNames]=\"svc.associatedServiceNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n *ngIf=\"formData.id\"\n [title]=\"'Associated Identities'\"\n [count]=\"svc.associatedIdentities.length\"\n [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n >\n <lib-preview-list\n [clickable]=\"false\"\n [isLoading]=\"identitiesLoading\"\n [allNames]=\"svc.associatedIdentityNames\"\n ></lib-preview-list>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
17012
17146
|
}
|
|
17013
17147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
|
|
17014
17148
|
type: Component,
|
|
@@ -17317,7 +17451,7 @@ class TransitRouterFormComponent extends ProjectableForm {
|
|
|
17317
17451
|
provide: MatDialogRef,
|
|
17318
17452
|
useValue: {}
|
|
17319
17453
|
}
|
|
17320
|
-
], 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 ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [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 />\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)=\"toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled }\"\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)=\"toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
17454
|
+
], 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 ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'REQUIRED'\">\n <input\n class=\"form-field-input\"\n placeholder=\"Name this edge router\"\n [ngClass]=\"{error: errors['name']}\"\n [(ngModel)]=\"formData.name\"\n autofocus\n #nameFieldInput\n />\n </lib-form-field-container>\n <lib-form-field-container\n [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 />\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)=\"toggleDisabled()\"\n [ngClass]=\"{ on: !formData.disabled }\"\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)=\"toggleNoTraversal()\"\n [ngClass]=\"{ on: !formData.noTraversal }\"\n class=\"toggle\"\n >\n <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n <lib-form-field-container\n *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\n [showHeader]=\"false\"\n >\n <lib-qr-code\n [identity]=\"formData\"\n [jwt]=\"formData.enrollmentJwt\"\n [token]=\"formData.enrollmentToken\"\n [expiration]=\"formData.enrollmentExpiresAt\"\n (doRefresh)=\"refreshEdgeRouter()\"\n [type]=\"'router'\"\n ></lib-qr-code>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'API Calls'\"\n [label]=\"'OPTIONAL'\"\n >\n <div class=\"form-row\">\n <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
17321
17455
|
}
|
|
17322
17456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TransitRouterFormComponent, decorators: [{
|
|
17323
17457
|
type: Component,
|
|
@@ -17671,6 +17805,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
17671
17805
|
args: [JsonEditorComponent, { static: false }]
|
|
17672
17806
|
}] } });
|
|
17673
17807
|
|
|
17808
|
+
const URLS = {
|
|
17809
|
+
ZITI_ATTRIBUTES: '/attributes',
|
|
17810
|
+
ZITI_DASHBOARD: '/dashboard',
|
|
17811
|
+
ZITI_IDENTITIES: '/identities',
|
|
17812
|
+
ZITI_JWT_SIGNERS: '/jwt-signers',
|
|
17813
|
+
ZITI_SERVICES: '/services',
|
|
17814
|
+
ZITI_SERVICE_SELECT: '/services/select',
|
|
17815
|
+
ZITI_SIMPLE_SERVICE: 'services/simple',
|
|
17816
|
+
ZITI_ADVANCED_SERVICE: 'services/advanced',
|
|
17817
|
+
ZITI_ROUTERS: '/routers',
|
|
17818
|
+
ZITI_TRANSIT_ROUTERS: '/transit-routers',
|
|
17819
|
+
ZITI_CONFIGS: '/configs',
|
|
17820
|
+
ZITI_CONFIG_TYPES: '/config-types',
|
|
17821
|
+
ZITI_RECIPES: '/recipes',
|
|
17822
|
+
ZITI_TERMINATORS: '/terminators',
|
|
17823
|
+
ZITI_AUTH_POLICIES: '/auth-policies',
|
|
17824
|
+
ZITI_SERVICE_POLICIES: '/service-policies',
|
|
17825
|
+
ZITI_ROUTER_POLICIES: '/router-policies',
|
|
17826
|
+
ZITI_SERVICE_ROUTER_POLICIES: '/service-router-policies',
|
|
17827
|
+
ZITI_POSTURE_CHECKS: '/posture-checks',
|
|
17828
|
+
ZITI_BROWZER_CAS: '/browzer-cert-auth',
|
|
17829
|
+
ZITI_CERT_AUTHORITIES: '/certificate-authorities',
|
|
17830
|
+
ZITI_SESSIONS: '/sessions',
|
|
17831
|
+
ZITI_API_SESSIONS: '/api-sessions',
|
|
17832
|
+
ZITI_LOGIN: '/login',
|
|
17833
|
+
ZITI_ORGANIZATION: '/organization',
|
|
17834
|
+
ZITI_PROFILE: '/profile',
|
|
17835
|
+
ZITI_SERVERS: '/servers',
|
|
17836
|
+
ZITI_SETTINGS: '/settings',
|
|
17837
|
+
ZITI_CUSTOM_FIELDS: '/custom-fields',
|
|
17838
|
+
ZAC_LOGIN: '/login',
|
|
17839
|
+
NETWORK_VISUALIZER: '/network-visualizer',
|
|
17840
|
+
};
|
|
17841
|
+
|
|
17674
17842
|
/*
|
|
17675
17843
|
Copyright NetFoundry Inc.
|
|
17676
17844
|
|
|
@@ -17692,6 +17860,17 @@ class ServiceFormComponent extends ProjectableForm {
|
|
|
17692
17860
|
data.configs = [];
|
|
17693
17861
|
}
|
|
17694
17862
|
this.svc.formData = data;
|
|
17863
|
+
if (!isEmpty(data?.id)) {
|
|
17864
|
+
if (get(data, 'tags["service-type"]') === 'simple') {
|
|
17865
|
+
this.router.navigate([URLS.ZITI_SIMPLE_SERVICE + '/' + data?.id]);
|
|
17866
|
+
}
|
|
17867
|
+
else {
|
|
17868
|
+
this.dataInit = true;
|
|
17869
|
+
}
|
|
17870
|
+
}
|
|
17871
|
+
else if (this.entityId === 'create') {
|
|
17872
|
+
this.dataInit = true;
|
|
17873
|
+
}
|
|
17695
17874
|
}
|
|
17696
17875
|
get formData() {
|
|
17697
17876
|
return this.svc?.formData;
|
|
@@ -17705,6 +17884,7 @@ class ServiceFormComponent extends ProjectableForm {
|
|
|
17705
17884
|
this.route = route;
|
|
17706
17885
|
this.serviceRoleAttributes = [];
|
|
17707
17886
|
this.close = new EventEmitter();
|
|
17887
|
+
this.dataInit = false;
|
|
17708
17888
|
this.isEditing = false;
|
|
17709
17889
|
this.strategies = [
|
|
17710
17890
|
{ id: 'smartrouting', label: 'Smart Routing' },
|
|
@@ -17929,7 +18109,7 @@ class ServiceFormComponent extends ProjectableForm {
|
|
|
17929
18109
|
provide: MatDialogRef,
|
|
17930
18110
|
useValue: {}
|
|
17931
18111
|
}
|
|
17932
|
-
], 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>\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\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-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 [title]=\"'Service Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'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 [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\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 >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\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 <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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 <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 <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'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 >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\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 }\"\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\"></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]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\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 <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]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\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]=\"false\"\n ></lib-preview-list>\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.associatedTerminators ? svc.associatedTerminators.length : 0}}</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 ></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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:.625rem;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:-moz-fit-content;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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
18112
|
+
], 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 *ngIf=\"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\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-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 [title]=\"'Service Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'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 [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\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 >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\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 <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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 <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 <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'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 >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\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 }\"\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\"></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]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\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 <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]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\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]=\"false\"\n ></lib-preview-list>\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.associatedTerminators ? svc.associatedTerminators.length : 0}}</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 ></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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:.625rem;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:-moz-fit-content;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:-moz-fit-content;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
17933
18113
|
}
|
|
17934
18114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{
|
|
17935
18115
|
type: Component,
|
|
@@ -17938,7 +18118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
17938
18118
|
provide: MatDialogRef,
|
|
17939
18119
|
useValue: {}
|
|
17940
18120
|
}
|
|
17941
|
-
], template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\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\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-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 [title]=\"'Service Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'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 [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\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 >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\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 <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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 <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 <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'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 >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\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 }\"\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\"></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]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\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 <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]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\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]=\"false\"\n ></lib-preview-list>\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.associatedTerminators ? svc.associatedTerminators.length : 0}}</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 ></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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:.625rem;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:-moz-fit-content;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:-moz-fit-content;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"] }]
|
|
18121
|
+
], template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"returnToListPage()\"\n tabindex=\"0\"\n *ngIf=\"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\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"edge-router-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 [title]=\"'Service Name'\" [label]=\"'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 />\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Service attributes'\"\n [label]=\"'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 [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group Services'\"\n ></lib-tag-selector>\n </lib-form-field-container>\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 >\n <option value=\"\">Select configuration type...</option>\n <option\n *ngFor=\"let type of svc.configTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.filteredConfigs\"\n [filter]=\"true\"\n [showClear]=\"true\"\n [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n (onChange)=\"configChanged($event)\"\n [(ngModel)]=\"svc.selectedConfigId\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"configFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n (click)=\"clearConfigFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n {{svc.attachLabel}}\n </div>\n </div>\n <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Config Name</span>\n <div\n class=\"save-button\"\n (click)=\"attachConfig()\"\n *ngIf=\"svc.selectedConfigId !== 'preview'\"\n >{{svc.attachLabel}}\n </div>\n </div>\n <input\n *ngIf=\"showConfigData\"\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 <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n <span class=\"form-field-title\">Configuration Data</span>\n <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\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 <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 <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n <div *ngIf=\"showMore\" class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'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 >\n <option value=\"\">Select a Strategy....</option>\n <option\n *ngFor=\"let strat of strategies\"\n [value]=\"strat.id\"\n >\n {{ strat.label }}\n </option>\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 }\"\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\"></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]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\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 <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]=\"true\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Config'\"\n (itemRemoved)=\"svc.removeConfig($event)\"\n (itemSelected)=\"svc.previewConfig($event, router)\"\n ></lib-preview-list>\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]=\"false\"\n ></lib-preview-list>\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.associatedTerminators ? svc.associatedTerminators.length : 0}}</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 ></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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:.625rem;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:-moz-fit-content;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:-moz-fit-content;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"] }]
|
|
17942
18122
|
}], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
|
|
17943
18123
|
type: Inject,
|
|
17944
18124
|
args: [SETTINGS_SERVICE]
|
|
@@ -18007,15 +18187,18 @@ class CardListComponent extends ProjectableForm {
|
|
|
18007
18187
|
}
|
|
18008
18188
|
save() {
|
|
18009
18189
|
}
|
|
18190
|
+
back() {
|
|
18191
|
+
this.router?.navigateByUrl(`${this.basePath}`);
|
|
18192
|
+
}
|
|
18010
18193
|
cardSelected(type) {
|
|
18011
18194
|
this.router.navigateByUrl(`/services/${type}`);
|
|
18012
18195
|
}
|
|
18013
18196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardListComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18014
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardListComponent, selector: "lib-card-list", outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card-list-wrapper ziti-page-container fullModal opened\">\n <div class=\"title\" style=\"filter: brightness(50%)\">Create a service</div>\n
|
|
18197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardListComponent, selector: "lib-card-list", outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card-list-wrapper ziti-page-container fullModal opened\">\n <div class=\"card-list-content\">\n <div class=\"card-list-title-container\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\" (click)=\"back()\"></div>\n <div class=\"title\" style=\"filter: brightness(50%)\">Create a service</div>\n </div>\n <div class=\"subtitle\">Choose a service type</div>\n <div class=\"card-list-container\">\n <lib-card\n (click)=\"cardSelected('simple')\"\n [imageUrl]=\"'/assets/svgs/Simple.svg'\"\n [title]=\"'Simple'\"\n [content]=\"'Simple services required fewer details, only asking for the most commonly used fields.'\"\n [buttonText]=\"'Create Simple Service'\"\n [id]=\"'SimpleServiceCard'\"\n [href]=\"'services/simple'\"\n ></lib-card>\n <lib-card\n (click)=\"cardSelected('advanced')\"\n [imageUrl]=\"'/assets/svgs/Advanced.svg'\"\n [title]=\"'Advanced'\"\n [content]=\"'Advanced services allow you to configure any option supported by the controller but are subsequently a bit more complex.'\"\n [buttonText]=\"'Create Advanced Service'\"\n [id]=\"'AdvancedServiceCard'\"\n [href]=\"'services/advanced'\"\n ></lib-card>\n </div>\n <div (click)=\"returnToListPage()\" class=\"buttonBall close\" id=\"EscZitiAWClose\">\n <div class=\"buttonLabel\">ESC</div>\n </div>\n </div>\n</div>\n", styles: [":host{--shadow: rgba(0, 0, 0, .08)}.card-list-wrapper{align-items:center}.card-list-wrapper .card-list-content{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.card-list-wrapper .card-list-title-container{width:100%;position:relative}.card-list-wrapper .card-list-title-container .icon-back-arrow{position:absolute;left:0;height:2rem;width:1.325rem;top:2.25rem;display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:1.25rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer;font-family:icomoon!important;font-size:1.25rem;font-weight:600;margin-top:.05rem;color:var(--tableText);z-index:9999999}.card-list-wrapper .card-list-title-container .icon-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.card-list-wrapper .card-list-title-container>.title{font-size:1.625rem;filter:brightness(50%);padding-top:2.1875rem;text-align:center;width:100%;color:var(--primaryColor);font-family:Russo One;text-transform:uppercase;position:relative;font-weight:400}.card-list-wrapper>.subtitle{text-align:center;width:100%;color:var(--tableText);position:relative;margin-bottom:0rem;font-size:2rem;font-weight:300;font-family:Open Sans;float:left}.card-list-wrapper .card-list-container{display:flex;flex-direction:row;width:100%;justify-content:center}.card-list-wrapper .buttonBall.close{font-style:normal;font-weight:600;-webkit-font-smoothing:antialiased;cursor:pointer;position:absolute;width:3.9375rem;height:3.9375rem;font-size:1.875rem;top:1.25rem;right:1.25rem;left:unset;z-index:20;color:var(--stroke);text-transform:uppercase;text-align:center;line-height:2.5rem;font-family:zac!important;font-variant:normal;border-radius:2.0625rem;transition:all .3s ease 0s}.card-list-wrapper .buttonBall.close:before{content:\"\\e91b\";font-size:1.875rem}.card-list-wrapper .buttonBall:hover{background-color:var(--primaryColor);color:var(--white);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque);transition:all .2s ease 0s}.card-list-wrapper .buttonBall:hover:before{color:var(--white)}.card-list-wrapper .buttonBall .buttonLabel{font-weight:600;font-family:Open Sans,Arial,sans-serif;position:absolute;bottom:-.125rem;width:100%;text-align:center;font-size:.75rem;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "lib-card", inputs: ["imageUrl", "title", "content", "buttonText", "id", "href"] }] }); }
|
|
18015
18198
|
}
|
|
18016
18199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardListComponent, decorators: [{
|
|
18017
18200
|
type: Component,
|
|
18018
|
-
args: [{ selector: 'lib-card-list', template: "<div class=\"card-list-wrapper ziti-page-container fullModal opened\">\n <div class=\"title\" style=\"filter: brightness(50%)\">Create a service</div>\n
|
|
18201
|
+
args: [{ selector: 'lib-card-list', template: "<div class=\"card-list-wrapper ziti-page-container fullModal opened\">\n <div class=\"card-list-content\">\n <div class=\"card-list-title-container\">\n <div class=\"form-title-back-arrow-icon icon-back-arrow\" (click)=\"back()\"></div>\n <div class=\"title\" style=\"filter: brightness(50%)\">Create a service</div>\n </div>\n <div class=\"subtitle\">Choose a service type</div>\n <div class=\"card-list-container\">\n <lib-card\n (click)=\"cardSelected('simple')\"\n [imageUrl]=\"'/assets/svgs/Simple.svg'\"\n [title]=\"'Simple'\"\n [content]=\"'Simple services required fewer details, only asking for the most commonly used fields.'\"\n [buttonText]=\"'Create Simple Service'\"\n [id]=\"'SimpleServiceCard'\"\n [href]=\"'services/simple'\"\n ></lib-card>\n <lib-card\n (click)=\"cardSelected('advanced')\"\n [imageUrl]=\"'/assets/svgs/Advanced.svg'\"\n [title]=\"'Advanced'\"\n [content]=\"'Advanced services allow you to configure any option supported by the controller but are subsequently a bit more complex.'\"\n [buttonText]=\"'Create Advanced Service'\"\n [id]=\"'AdvancedServiceCard'\"\n [href]=\"'services/advanced'\"\n ></lib-card>\n </div>\n <div (click)=\"returnToListPage()\" class=\"buttonBall close\" id=\"EscZitiAWClose\">\n <div class=\"buttonLabel\">ESC</div>\n </div>\n </div>\n</div>\n", styles: [":host{--shadow: rgba(0, 0, 0, .08)}.card-list-wrapper{align-items:center}.card-list-wrapper .card-list-content{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.card-list-wrapper .card-list-title-container{width:100%;position:relative}.card-list-wrapper .card-list-title-container .icon-back-arrow{position:absolute;left:0;height:2rem;width:1.325rem;top:2.25rem;display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:1.25rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer;font-family:icomoon!important;font-size:1.25rem;font-weight:600;margin-top:.05rem;color:var(--tableText);z-index:9999999}.card-list-wrapper .card-list-title-container .icon-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.card-list-wrapper .card-list-title-container>.title{font-size:1.625rem;filter:brightness(50%);padding-top:2.1875rem;text-align:center;width:100%;color:var(--primaryColor);font-family:Russo One;text-transform:uppercase;position:relative;font-weight:400}.card-list-wrapper>.subtitle{text-align:center;width:100%;color:var(--tableText);position:relative;margin-bottom:0rem;font-size:2rem;font-weight:300;font-family:Open Sans;float:left}.card-list-wrapper .card-list-container{display:flex;flex-direction:row;width:100%;justify-content:center}.card-list-wrapper .buttonBall.close{font-style:normal;font-weight:600;-webkit-font-smoothing:antialiased;cursor:pointer;position:absolute;width:3.9375rem;height:3.9375rem;font-size:1.875rem;top:1.25rem;right:1.25rem;left:unset;z-index:20;color:var(--stroke);text-transform:uppercase;text-align:center;line-height:2.5rem;font-family:zac!important;font-variant:normal;border-radius:2.0625rem;transition:all .3s ease 0s}.card-list-wrapper .buttonBall.close:before{content:\"\\e91b\";font-size:1.875rem}.card-list-wrapper .buttonBall:hover{background-color:var(--primaryColor);color:var(--white);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque);transition:all .2s ease 0s}.card-list-wrapper .buttonBall:hover:before{color:var(--white)}.card-list-wrapper .buttonBall .buttonLabel{font-weight:600;font-family:Open Sans,Arial,sans-serif;position:absolute;bottom:-.125rem;width:100%;text-align:center;font-size:.75rem;text-transform:uppercase}\n"] }]
|
|
18019
18202
|
}], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
|
|
18020
18203
|
type: Inject,
|
|
18021
18204
|
args: [SETTINGS_SERVICE]
|
|
@@ -18041,11 +18224,13 @@ class CreationSummaryDialogComponent {
|
|
|
18041
18224
|
this.selectedCliCommand = '';
|
|
18042
18225
|
this.selectedEntityType = 'service';
|
|
18043
18226
|
this.selectedEntityName = '';
|
|
18227
|
+
this.isEdit = false;
|
|
18044
18228
|
this.summaryData = [];
|
|
18045
18229
|
this.showAPI = false;
|
|
18046
18230
|
this.hasError = false;
|
|
18047
18231
|
this.hideSummaryNextTime = false;
|
|
18048
18232
|
this.summaryData = data.summaryData;
|
|
18233
|
+
this.isEdit = data.isEdit === true;
|
|
18049
18234
|
}
|
|
18050
18235
|
get hasCreationError() {
|
|
18051
18236
|
let hasError = false;
|
|
@@ -18104,11 +18289,11 @@ class CreationSummaryDialogComponent {
|
|
|
18104
18289
|
this.dialogRef.close('new');
|
|
18105
18290
|
}
|
|
18106
18291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreationSummaryDialogComponent, deps: [{ token: i5$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreationSummaryDialogComponent, selector: "lib-creation-summary-dialog", ngImport: i0, template: "<div class=\"creation-summary-dialog-container\">\n <div class=\"close icon-close\" (click)=\"close()\"></div>\n <div class=\"title-row\">\n <span class=\"title\">Execution Summary</span>\n <span class=\"subtitle\">The following entities were created for this service</span>\n </div>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"copy-links-container\">\n <span class=\"copy-links-title\">\n <span class=\"title\">Entities</span>\n <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n </span>\n </div>\n <div class=\"form-group-row exec-operations-group\">\n <div class=\"summary-groups-container\">\n <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n <div class=\"summary-group-title\">{{group.title}}</div>\n <ul>\n <li\n
|
|
18292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreationSummaryDialogComponent, selector: "lib-creation-summary-dialog", ngImport: i0, template: "<div class=\"creation-summary-dialog-container\">\n <div class=\"close icon-close\" (click)=\"close()\"></div>\n <div class=\"title-row\">\n <span class=\"title\">Execution Summary</span>\n <span class=\"subtitle\">The following entities were {{isEdit ? 'updated' : 'created'}} for this service</span>\n </div>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"copy-links-container\">\n <span class=\"copy-links-title\">\n <span class=\"title\">Entities</span>\n <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n </span>\n </div>\n <div class=\"form-group-row exec-operations-group\">\n <div class=\"summary-groups-container\">\n <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n <div class=\"summary-group-title\">{{group.title}}</div>\n <ul>\n <li\n *ngFor=\"let entity of group.entities\"\n (click)=\"selectZitiEntity(entity.name, 'all')\"\n [ngClass]=\"{selected: selectedEntityType === 'all'}\"\n class=\"entity-item drop-target-svc\"\n >\n <span class=\"spinner\" *ngIf=\"entity.status === 'loading'\"></span>\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"entity.status === 'done'\">\n <div class=\"retry\" *ngIf=\"entity.status === 'error'\" (click)=\"doRetry(entity)\"></div>\n <div class=\"icon-clear\" *ngIf=\"entity.status === 'error'\"></div>\n <span class=\"entity-name\" matTooltipShowDelay=\"1000\">\n {{ entity.name.length > 0 ? entity.name : 'SimpleService' }}\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\" style=\"margin-top: 10px;\">\n <div class=\"copy-links-container\">\n <div class=\"copy-links-title\">\n <div class=\"title-container\">\n <span class=\"title\">Copy Links</span>\n <div class=\"copy-icon\"></div>\n </div>\n </div>\n <div class=\"copy-links\">\n <div class=\"link-button\" (click)=\"copyCliCommands()\">CLI Commands</div>\n <div class=\"link-button\" (click)=\"copyAPIRequests()\">API Requests</div>\n </div>\n </div>\n </lib-form-field-container>\n\n <div class=\"confirm-buttons-container\">\n <button class=\"button save alert\" (click)=\"done()\">Done</button>\n <button class=\"button save cancel\" (click)=\"confirm()\" *ngIf=\"!isEdit\">Create another</button>\n </div>\n</div>\n", styles: [".creation-summary-dialog-container{background-color:var(--formBackground);min-width:29.6875rem;border-radius:var(--modalBorderRadius);padding:var(--paddingXXL)}.creation-summary-dialog-container .title-row{display:flex;align-items:center;flex-direction:column;margin-bottom:var(--marginLarge)}.creation-summary-dialog-container .subtitle{color:var(--text)}.creation-summary-dialog-container .close{font-size:1.5625rem;top:.9375rem;right:.9375rem;width:2.1875rem;font-weight:600}.resource-type-container{display:flex;flex-direction:column;padding-left:var(--paddingLarge);padding-right:var(--paddingLarge)}.resource-type-container.disabled{opacity:.5}.resource-type-container.disabled select{cursor:not-allowed}.resource-type-container .resource-type-content{margin-top:1.25rem;flex-wrap:wrap}.entity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.summary-group ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:40.625rem;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:.3125rem;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.summary-group .entity-item[hidden]{display:none}.summary-group .entity-item.no-results{font-weight:400}.summary-group .entity-item.no-results:hover{background-color:transparent;border-left-color:transparent;cursor:default}.summary-groups-container{overflow:auto;height:100%;width:100%;max-width:18.75rem;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.exec-operations-group{padding:0}.confirm-buttons-container{display:flex;justify-content:space-between;align-items:center;flex-direction:row;width:100%;padding-top:var(--paddingMedium);margin-left:auto}.confirm-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center}button.confirm{background-color:var(--secondary)}button.cancel{background-color:var(--primary)}.spinner{right:1em;top:1em;display:inline-block;width:1rem;height:1rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--placeholder);border-right:.125rem solid var(--placeholder);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem}.config-check:checked,.success-check:checked{background-color:var(--green)!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC);background-size:45%;background-position:center center;background-repeat:no-repeat;border:none}.config-check:checked:disabled,.success-check:checked:disabled{opacity:1!important}.success-check{border-radius:100%;top:.8125rem;left:.625rem;transition:var(--transition);border:.125rem var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:.625rem}.icon-clear{color:var(--red);margin-top:.25rem}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.125rem;width:1.125rem;margin-left:.3125rem}.copy-links-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.copy-links-container .copy-links-title{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:23.4375rem}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:1.25rem;line-height:1.25rem}.copy-links-container .copy-links-title .subtitle{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red)}.copy-links-container .copy-links-title .copy-icon{background-image:url(/assets/svgs/copy.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.25rem;width:1.25rem;margin-left:.4375rem}.copy-links-container .copy-links{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:var(--paddingMedium);width:100%}.copy-links-container .copy-links .link-button{color:var(--subText);font-size:1rem;font-weight:600;cursor:pointer}.copy-links-container .copy-links .link-button:hover{text-decoration:underline}.visibility-config-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:flex-start;gap:.3125rem;margin-top:var(--marginMedium)}::ng-deep .creation-summary-dialog-container .form-field-content{gap:0!important}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
18108
18293
|
}
|
|
18109
18294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreationSummaryDialogComponent, decorators: [{
|
|
18110
18295
|
type: Component,
|
|
18111
|
-
args: [{ selector: 'lib-creation-summary-dialog', template: "<div class=\"creation-summary-dialog-container\">\n <div class=\"close icon-close\" (click)=\"close()\"></div>\n <div class=\"title-row\">\n <span class=\"title\">Execution Summary</span>\n <span class=\"subtitle\">The following entities were created for this service</span>\n </div>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"copy-links-container\">\n <span class=\"copy-links-title\">\n <span class=\"title\">Entities</span>\n <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n </span>\n </div>\n <div class=\"form-group-row exec-operations-group\">\n <div class=\"summary-groups-container\">\n <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n <div class=\"summary-group-title\">{{group.title}}</div>\n <ul>\n <li\n
|
|
18296
|
+
args: [{ selector: 'lib-creation-summary-dialog', template: "<div class=\"creation-summary-dialog-container\">\n <div class=\"close icon-close\" (click)=\"close()\"></div>\n <div class=\"title-row\">\n <span class=\"title\">Execution Summary</span>\n <span class=\"subtitle\">The following entities were {{isEdit ? 'updated' : 'created'}} for this service</span>\n </div>\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"copy-links-container\">\n <span class=\"copy-links-title\">\n <span class=\"title\">Entities</span>\n <span class=\"subtitle\" *ngIf=\"hasCreationError\">One or more of the following resources failed to create. See below for more details and/or retry.</span>\n </span>\n </div>\n <div class=\"form-group-row exec-operations-group\">\n <div class=\"summary-groups-container\">\n <div class=\"summary-group\" *ngFor=\"let group of summaryData\">\n <div class=\"summary-group-title\">{{group.title}}</div>\n <ul>\n <li\n *ngFor=\"let entity of group.entities\"\n (click)=\"selectZitiEntity(entity.name, 'all')\"\n [ngClass]=\"{selected: selectedEntityType === 'all'}\"\n class=\"entity-item drop-target-svc\"\n >\n <span class=\"spinner\" *ngIf=\"entity.status === 'loading'\"></span>\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"entity.status === 'done'\">\n <div class=\"retry\" *ngIf=\"entity.status === 'error'\" (click)=\"doRetry(entity)\"></div>\n <div class=\"icon-clear\" *ngIf=\"entity.status === 'error'\"></div>\n <span class=\"entity-name\" matTooltipShowDelay=\"1000\">\n {{ entity.name.length > 0 ? entity.name : 'SimpleService' }}\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container [showHeader]=\"false\" style=\"margin-top: 10px;\">\n <div class=\"copy-links-container\">\n <div class=\"copy-links-title\">\n <div class=\"title-container\">\n <span class=\"title\">Copy Links</span>\n <div class=\"copy-icon\"></div>\n </div>\n </div>\n <div class=\"copy-links\">\n <div class=\"link-button\" (click)=\"copyCliCommands()\">CLI Commands</div>\n <div class=\"link-button\" (click)=\"copyAPIRequests()\">API Requests</div>\n </div>\n </div>\n </lib-form-field-container>\n\n <div class=\"confirm-buttons-container\">\n <button class=\"button save alert\" (click)=\"done()\">Done</button>\n <button class=\"button save cancel\" (click)=\"confirm()\" *ngIf=\"!isEdit\">Create another</button>\n </div>\n</div>\n", styles: [".creation-summary-dialog-container{background-color:var(--formBackground);min-width:29.6875rem;border-radius:var(--modalBorderRadius);padding:var(--paddingXXL)}.creation-summary-dialog-container .title-row{display:flex;align-items:center;flex-direction:column;margin-bottom:var(--marginLarge)}.creation-summary-dialog-container .subtitle{color:var(--text)}.creation-summary-dialog-container .close{font-size:1.5625rem;top:.9375rem;right:.9375rem;width:2.1875rem;font-weight:600}.resource-type-container{display:flex;flex-direction:column;padding-left:var(--paddingLarge);padding-right:var(--paddingLarge)}.resource-type-container.disabled{opacity:.5}.resource-type-container.disabled select{cursor:not-allowed}.resource-type-container .resource-type-content{margin-top:1.25rem;flex-wrap:wrap}.entity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.summary-group ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:40.625rem;overflow:auto;overflow-x:hidden}.summary-group .entity-item{display:flex;align-items:center;gap:.3125rem;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.summary-group .entity-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.summary-group .entity-item[hidden]{display:none}.summary-group .entity-item.no-results{font-weight:400}.summary-group .entity-item.no-results:hover{background-color:transparent;border-left-color:transparent;cursor:default}.summary-groups-container{overflow:auto;height:100%;width:100%;max-width:18.75rem;display:flex;position:relative;flex-direction:column}.summary-group-title{margin-left:0;color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.exec-operations-group{padding:0}.confirm-buttons-container{display:flex;justify-content:space-between;align-items:center;flex-direction:row;width:100%;padding-top:var(--paddingMedium);margin-left:auto}.confirm-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.confirm-buttons-container .button{text-align:center;line-height:normal}button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center}button.confirm{background-color:var(--secondary)}button.cancel{background-color:var(--primary)}.spinner{right:1em;top:1em;display:inline-block;width:1rem;height:1rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--placeholder);border-right:.125rem solid var(--placeholder);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear}.config-check,.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem}.config-check:checked,.success-check:checked{background-color:var(--green)!important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC);background-size:45%;background-position:center center;background-repeat:no-repeat;border:none}.config-check:checked:disabled,.success-check:checked:disabled{opacity:1!important}.success-check{border-radius:100%;top:.8125rem;left:.625rem;transition:var(--transition);border:.125rem var(--offWhite) solid}.config-check{border-radius:0}.config-check:checked{background-size:.625rem}.icon-clear{color:var(--red);margin-top:.25rem}.retry{background-image:url(/assets/svgs/refresh.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.125rem;width:1.125rem;margin-left:.3125rem}.copy-links-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--gapMedium)}.copy-links-container .copy-links-title{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:23.4375rem}.copy-links-container .copy-links-title .title-container{display:flex}.copy-links-container .copy-links-title .title{font-size:1.25rem;line-height:1.25rem}.copy-links-container .copy-links-title .subtitle{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red)}.copy-links-container .copy-links-title .copy-icon{background-image:url(/assets/svgs/copy.svg);background-size:1.125rem;background-repeat:no-repeat;height:1.25rem;width:1.25rem;margin-left:.4375rem}.copy-links-container .copy-links{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:var(--paddingMedium);width:100%}.copy-links-container .copy-links .link-button{color:var(--subText);font-size:1rem;font-weight:600;cursor:pointer}.copy-links-container .copy-links .link-button:hover{text-decoration:underline}.visibility-config-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:flex-start;gap:.3125rem;margin-top:var(--marginMedium)}::ng-deep .creation-summary-dialog-container .form-field-content{gap:0!important}\n"] }]
|
|
18112
18297
|
}], ctorParameters: function () { return [{ type: i5$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
18113
18298
|
type: Inject,
|
|
18114
18299
|
args: [MAT_DIALOG_DATA]
|
|
@@ -18130,6 +18315,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18130
18315
|
this.serviceRoleAttributes = [];
|
|
18131
18316
|
this.identityRoleAttributes = [];
|
|
18132
18317
|
this.identityNamedAttributes = [];
|
|
18318
|
+
this.dataInit = false;
|
|
18133
18319
|
this.showForm = true;
|
|
18134
18320
|
this.formView = 'simple';
|
|
18135
18321
|
this.controllerDomain = '';
|
|
@@ -18188,9 +18374,9 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18188
18374
|
this.bindPolicyNamedAttributes = [];
|
|
18189
18375
|
this.bindPolicyRoleAttributes = [];
|
|
18190
18376
|
this.identitiesNameIdMap = {};
|
|
18377
|
+
this.identitiesIdNameMap = {};
|
|
18191
18378
|
this.sdkOnlyDial = false;
|
|
18192
18379
|
this.sdkOnlyBind = false;
|
|
18193
|
-
this.formData = {};
|
|
18194
18380
|
this.interceptIncrement = -1;
|
|
18195
18381
|
this.hostIncrement = -1;
|
|
18196
18382
|
this.serviceIncrement = -1;
|
|
@@ -18201,8 +18387,27 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18201
18387
|
this.hostDataChange = false;
|
|
18202
18388
|
this.dialDataChange = false;
|
|
18203
18389
|
this.bindDataChange = false;
|
|
18390
|
+
this.identitiesInit = new BehaviorSubject(false);
|
|
18391
|
+
this.entitiesInit = false;
|
|
18392
|
+
this.multiActions = [
|
|
18393
|
+
{ id: 'convert-to-advanced', label: 'Convert to Advanced', hidden: false },
|
|
18394
|
+
];
|
|
18395
|
+
this.entityType = 'services';
|
|
18204
18396
|
this.close = new EventEmitter();
|
|
18205
18397
|
this.selected = new EventEmitter();
|
|
18398
|
+
this.formData = {};
|
|
18399
|
+
}
|
|
18400
|
+
set formData(data) {
|
|
18401
|
+
if (!data?.configs) {
|
|
18402
|
+
data.configs = [];
|
|
18403
|
+
}
|
|
18404
|
+
this.svc.formData = data;
|
|
18405
|
+
if (!isEmpty(data?.id)) {
|
|
18406
|
+
this.initAssociatedData();
|
|
18407
|
+
}
|
|
18408
|
+
}
|
|
18409
|
+
get formData() {
|
|
18410
|
+
return this.svc?.formData;
|
|
18206
18411
|
}
|
|
18207
18412
|
ngOnInit() {
|
|
18208
18413
|
super.ngOnInit();
|
|
@@ -18244,6 +18449,74 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18244
18449
|
this.identityRoleAttributes = result.data;
|
|
18245
18450
|
});
|
|
18246
18451
|
}
|
|
18452
|
+
initAssociatedData() {
|
|
18453
|
+
if (this.entitiesInit) {
|
|
18454
|
+
return;
|
|
18455
|
+
}
|
|
18456
|
+
this.entitiesInit = true;
|
|
18457
|
+
this.serviceApiData = this.svc.formData;
|
|
18458
|
+
this.identitiesInit.subscribe((val) => {
|
|
18459
|
+
if (val === true) {
|
|
18460
|
+
const configsPromise = this.getAssociatedConfigs();
|
|
18461
|
+
const policiesPromise = this.getAssocaitedPolicies();
|
|
18462
|
+
Promise.all([configsPromise, policiesPromise]).finally(() => {
|
|
18463
|
+
this.dataInit = true;
|
|
18464
|
+
});
|
|
18465
|
+
}
|
|
18466
|
+
});
|
|
18467
|
+
}
|
|
18468
|
+
getAssociatedConfigs() {
|
|
18469
|
+
return this.zitiService.getSubdata('services', this.formData.id, 'configs').then((result) => {
|
|
18470
|
+
const associatedConfigs = result.data;
|
|
18471
|
+
associatedConfigs.forEach((config) => {
|
|
18472
|
+
if (config.configTypeId == this.initInterceptConfigApiData.configTypeId) {
|
|
18473
|
+
this.interceptConfigApiData = config;
|
|
18474
|
+
const portRange = this.interceptConfigApiData.data.portRanges[0];
|
|
18475
|
+
this.interceptPort = portRange?.high;
|
|
18476
|
+
}
|
|
18477
|
+
else if (config.configTypeId == this.initHostConfigApiData.configTypeId) {
|
|
18478
|
+
this.hostConfigApiData = config;
|
|
18479
|
+
}
|
|
18480
|
+
});
|
|
18481
|
+
});
|
|
18482
|
+
}
|
|
18483
|
+
getAssocaitedPolicies() {
|
|
18484
|
+
return this.zitiService.getSubdata('services', this.formData.id, 'service-policies').then((result) => {
|
|
18485
|
+
const associatedServicePolicies = result.data;
|
|
18486
|
+
associatedServicePolicies.forEach((policy) => {
|
|
18487
|
+
if (policy.type?.toLowerCase() == 'dial') {
|
|
18488
|
+
this.dialPolicyApiData = policy;
|
|
18489
|
+
const roleAttributes = [];
|
|
18490
|
+
const namedAttributes = [];
|
|
18491
|
+
policy.identityRoles.forEach((attr) => {
|
|
18492
|
+
if (attr.charAt(0) === '#') {
|
|
18493
|
+
roleAttributes.push(attr.slice(1));
|
|
18494
|
+
}
|
|
18495
|
+
else if (attr.charAt(0) === '@') {
|
|
18496
|
+
namedAttributes.push(this.identitiesIdNameMap[attr.slice(1)]);
|
|
18497
|
+
}
|
|
18498
|
+
});
|
|
18499
|
+
this.dialPolicyRoleAttributes = roleAttributes;
|
|
18500
|
+
this.dialPolicyNamedAttributes = namedAttributes;
|
|
18501
|
+
}
|
|
18502
|
+
else if (policy.type?.toLowerCase() == 'bind') {
|
|
18503
|
+
const roleAttributes = [];
|
|
18504
|
+
const namedAttributes = [];
|
|
18505
|
+
policy.identityRoles.forEach((attr) => {
|
|
18506
|
+
if (attr.charAt(0) === '#') {
|
|
18507
|
+
roleAttributes.push(attr.slice(1));
|
|
18508
|
+
}
|
|
18509
|
+
else if (attr.charAt(0) === '@') {
|
|
18510
|
+
namedAttributes.push(this.identitiesIdNameMap[attr.slice(1)]);
|
|
18511
|
+
}
|
|
18512
|
+
});
|
|
18513
|
+
this.bindPolicyRoleAttributes = roleAttributes;
|
|
18514
|
+
this.bindPolicyNamedAttributes = namedAttributes;
|
|
18515
|
+
this.bindPolicyApiData = policy;
|
|
18516
|
+
}
|
|
18517
|
+
});
|
|
18518
|
+
});
|
|
18519
|
+
}
|
|
18247
18520
|
getIdentityNamedAttributes(filter) {
|
|
18248
18521
|
const paging = {
|
|
18249
18522
|
searchOn: 'name',
|
|
@@ -18266,18 +18539,35 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18266
18539
|
this.zitiService.get('identities', paging, filters).then((result) => {
|
|
18267
18540
|
const namedAttributes = result.data.map((identity) => {
|
|
18268
18541
|
this.identitiesNameIdMap[identity.name] = identity.id;
|
|
18542
|
+
this.identitiesIdNameMap[identity.id] = identity.name;
|
|
18543
|
+
this.identitiesInit.next(true);
|
|
18269
18544
|
return identity.name;
|
|
18270
18545
|
});
|
|
18271
18546
|
this.identityNamedAttributes = namedAttributes;
|
|
18272
18547
|
});
|
|
18273
18548
|
}
|
|
18549
|
+
multiActionRequested(action) {
|
|
18550
|
+
switch (action.id) {
|
|
18551
|
+
case 'save':
|
|
18552
|
+
this.save();
|
|
18553
|
+
break;
|
|
18554
|
+
case 'convert-to-advanced':
|
|
18555
|
+
this.convertToAdvanced();
|
|
18556
|
+
break;
|
|
18557
|
+
}
|
|
18558
|
+
}
|
|
18274
18559
|
headerActionRequested(action) {
|
|
18275
18560
|
switch (action.name) {
|
|
18276
18561
|
case 'save':
|
|
18277
18562
|
this.save();
|
|
18278
18563
|
break;
|
|
18279
18564
|
case 'close':
|
|
18280
|
-
this.
|
|
18565
|
+
if (this.isEdit) {
|
|
18566
|
+
this.router?.navigateByUrl(URLS.ZITI_SERVICES);
|
|
18567
|
+
}
|
|
18568
|
+
else {
|
|
18569
|
+
this.router?.navigateByUrl(URLS.ZITI_SERVICE_SELECT);
|
|
18570
|
+
}
|
|
18281
18571
|
break;
|
|
18282
18572
|
case 'toggle-view':
|
|
18283
18573
|
this.formView = action.data;
|
|
@@ -18321,19 +18611,20 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18321
18611
|
if (!this.validate()) {
|
|
18322
18612
|
return;
|
|
18323
18613
|
}
|
|
18324
|
-
const
|
|
18325
|
-
if (
|
|
18326
|
-
|
|
18614
|
+
const isNewService = isEmpty(this.serviceApiData?.id);
|
|
18615
|
+
if (isNewService) {
|
|
18616
|
+
const hasConflicts = await this.checkNameConflicts();
|
|
18617
|
+
if (hasConflicts) {
|
|
18618
|
+
return;
|
|
18619
|
+
}
|
|
18327
18620
|
}
|
|
18328
18621
|
const summaryData = this.showSummary();
|
|
18329
18622
|
this.serviceApiData.configs = [];
|
|
18330
|
-
await this.
|
|
18331
|
-
await this.
|
|
18332
|
-
await this.
|
|
18333
|
-
await this.
|
|
18334
|
-
await this.
|
|
18335
|
-
const growlerData = new GrowlerModel('success', 'Success', `Simple Service ${this.serviceApiData.name} Created`, `Successfully created entities for simple service ${this.serviceApiData.name}`);
|
|
18336
|
-
this.growlerService.show(growlerData);
|
|
18623
|
+
const interceptCfgPromise = await this.saveInterceptConfig(summaryData);
|
|
18624
|
+
const hostCfgPromise = await this.saveHostConfig(summaryData);
|
|
18625
|
+
const servicePromise = await this.saveService(summaryData);
|
|
18626
|
+
const dialPolicyPromise = await this.savePolicy(summaryData, 'Dial');
|
|
18627
|
+
const bindPolicyPromise = await this.savePolicy(summaryData, 'Bind');
|
|
18337
18628
|
summaryData?.forEach((entityType) => {
|
|
18338
18629
|
entityType.entities?.forEach((entity) => {
|
|
18339
18630
|
if (entity.type === 'services') {
|
|
@@ -18369,7 +18660,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18369
18660
|
apiRequest: '',
|
|
18370
18661
|
apiUrl: this.interceptConfigApiUrl,
|
|
18371
18662
|
status: 'loading',
|
|
18372
|
-
retry: this.
|
|
18663
|
+
retry: this.saveInterceptConfig.bind(this),
|
|
18373
18664
|
};
|
|
18374
18665
|
const hostSummary = {
|
|
18375
18666
|
name: this.hostConfigApiData.name,
|
|
@@ -18380,7 +18671,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18380
18671
|
apiRequest: '',
|
|
18381
18672
|
apiUrl: this.hostConfigApiUrl,
|
|
18382
18673
|
status: 'loading',
|
|
18383
|
-
retry: this.
|
|
18674
|
+
retry: this.saveHostConfig.bind(this)
|
|
18384
18675
|
};
|
|
18385
18676
|
const summaryData = [
|
|
18386
18677
|
{
|
|
@@ -18394,7 +18685,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18394
18685
|
apiRequest: '',
|
|
18395
18686
|
apiUrl: this.serviceApiUrl,
|
|
18396
18687
|
status: 'loading',
|
|
18397
|
-
retry: this.
|
|
18688
|
+
retry: this.saveService.bind(this)
|
|
18398
18689
|
}
|
|
18399
18690
|
]
|
|
18400
18691
|
},
|
|
@@ -18410,7 +18701,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18410
18701
|
apiRequest: '',
|
|
18411
18702
|
apiUrl: this.dialPolicyApiUrl,
|
|
18412
18703
|
status: 'loading',
|
|
18413
|
-
retry: (summaryData) => { this.
|
|
18704
|
+
retry: (summaryData) => { this.savePolicy(summaryData, 'Dial'); }
|
|
18414
18705
|
},
|
|
18415
18706
|
{
|
|
18416
18707
|
name: this.bindPolicyApiData.name,
|
|
@@ -18421,7 +18712,7 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18421
18712
|
apiRequest: '',
|
|
18422
18713
|
apiUrl: this.bindPolicyApiUrl,
|
|
18423
18714
|
status: 'loading',
|
|
18424
|
-
retry: (summaryData) => { this.
|
|
18715
|
+
retry: (summaryData) => { this.savePolicy(summaryData, 'Bind'); }
|
|
18425
18716
|
}
|
|
18426
18717
|
]
|
|
18427
18718
|
}
|
|
@@ -18445,7 +18736,8 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18445
18736
|
});
|
|
18446
18737
|
}
|
|
18447
18738
|
const data = {
|
|
18448
|
-
summaryData: summaryData
|
|
18739
|
+
summaryData: summaryData,
|
|
18740
|
+
isEdit: this.isEdit
|
|
18449
18741
|
};
|
|
18450
18742
|
this.dialogRef = this.dialogForm.open(CreationSummaryDialogComponent, {
|
|
18451
18743
|
data: data,
|
|
@@ -18548,81 +18840,103 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18548
18840
|
this.nameFieldInput.nativeElement.focus();
|
|
18549
18841
|
});
|
|
18550
18842
|
}
|
|
18551
|
-
async
|
|
18552
|
-
|
|
18843
|
+
async saveInterceptConfig(summaryData) {
|
|
18844
|
+
const isNewConfig = isEmpty(this.interceptConfigApiData?.id);
|
|
18845
|
+
// Conditional Deletion (Identical Logic)
|
|
18846
|
+
if (this.sdkOnlyDial && !isNewConfig) {
|
|
18847
|
+
return this.zitiService.delete('configs', this.interceptConfigApiData.id);
|
|
18848
|
+
}
|
|
18849
|
+
else if (this.sdkOnlyDial && isNewConfig) {
|
|
18553
18850
|
return;
|
|
18554
18851
|
}
|
|
18555
|
-
|
|
18556
|
-
this.interceptIncrement
|
|
18557
|
-
|
|
18558
|
-
|
|
18559
|
-
|
|
18852
|
+
// Use the Helper Function
|
|
18853
|
+
const { status } = await this.saveConfig(this.interceptConfigApiData, 'interceptIncrement', 'interceptConfigId', 'interceptConfigCliCommand');
|
|
18854
|
+
// Apply final status logic
|
|
18855
|
+
summaryData[0].entities[0].status = status;
|
|
18856
|
+
}
|
|
18857
|
+
async saveHostConfig(summaryData) {
|
|
18858
|
+
const isNewConfig = isEmpty(this.hostConfigApiData?.id);
|
|
18859
|
+
// Conditional Deletion (Identical Logic)
|
|
18860
|
+
if (this.sdkOnlyDial && !isNewConfig) {
|
|
18861
|
+
return this.zitiService.delete('configs', this.hostConfigApiData.id);
|
|
18560
18862
|
}
|
|
18561
|
-
|
|
18562
|
-
|
|
18563
|
-
|
|
18564
|
-
|
|
18565
|
-
|
|
18566
|
-
|
|
18863
|
+
else if (this.sdkOnlyDial && isNewConfig) {
|
|
18864
|
+
return;
|
|
18865
|
+
}
|
|
18866
|
+
// Use the Helper Function
|
|
18867
|
+
const { status, configApiData } = await this.saveConfig(this.hostConfigApiData, 'hostIncrement', 'hostConfigId', 'hostConfigCliCommand');
|
|
18868
|
+
// Apply final status logic (slightly different than intercept)
|
|
18869
|
+
if (this.sdkOnlyDial) {
|
|
18870
|
+
summaryData[0].entities[0].status = status;
|
|
18871
|
+
summaryData[0].entities[0].apiData = configApiData;
|
|
18567
18872
|
}
|
|
18568
18873
|
else {
|
|
18569
|
-
|
|
18570
|
-
|
|
18571
|
-
this.interceptConfigCliCommand = `ziti edge create config '${this.interceptConfigApiData.name}' '${this.interceptConfigApiData.configTypeId}' '${JSON.stringify(this.interceptConfigApiData.data)}'`;
|
|
18572
|
-
status = 'done';
|
|
18573
|
-
this.interceptIncrement = -1;
|
|
18874
|
+
summaryData[0].entities[1].status = status;
|
|
18875
|
+
summaryData[0].entities[0].apiData = configApiData;
|
|
18574
18876
|
}
|
|
18575
|
-
summaryData[0].entities[0].status = status;
|
|
18576
18877
|
}
|
|
18577
|
-
async
|
|
18578
|
-
|
|
18579
|
-
|
|
18580
|
-
|
|
18878
|
+
async saveConfig(configApiData, // e.g., this.interceptConfigApiData
|
|
18879
|
+
incrementer, // The name of the incrementer property ('interceptIncrement' or 'hostIncrement')
|
|
18880
|
+
configIdProp, // The name of the ID property ('interceptConfigId' or 'hostConfigId')
|
|
18881
|
+
cliCommandProp // The name of the CLI command property ('interceptConfigCliCommand' or 'hostConfigCliCommand')
|
|
18882
|
+
) {
|
|
18883
|
+
const isNewConfig = isEmpty(configApiData?.id);
|
|
18884
|
+
const incrementValue = this[incrementer]; // Get current increment value
|
|
18581
18885
|
let status;
|
|
18582
|
-
|
|
18583
|
-
|
|
18584
|
-
|
|
18585
|
-
postFix = '
|
|
18886
|
+
let configResult;
|
|
18887
|
+
if (isNewConfig) {
|
|
18888
|
+
this[incrementer] = incrementValue + 1; // Increment for naming
|
|
18889
|
+
let postFix = '';
|
|
18890
|
+
if (this[incrementer] > 0) {
|
|
18891
|
+
postFix = '_' + this[incrementer];
|
|
18892
|
+
}
|
|
18893
|
+
configApiData.name = configApiData.name + postFix;
|
|
18894
|
+
configResult = await this.saveEntity('configs', configApiData).catch((result) => result);
|
|
18586
18895
|
}
|
|
18587
|
-
|
|
18588
|
-
|
|
18589
|
-
|
|
18590
|
-
|
|
18591
|
-
if (hostConfigResult.error) {
|
|
18896
|
+
else {
|
|
18897
|
+
configResult = await this.updateEntity('configs', configApiData).catch((result) => result);
|
|
18898
|
+
}
|
|
18899
|
+
if (configResult.error) {
|
|
18592
18900
|
status = 'error';
|
|
18593
18901
|
}
|
|
18594
18902
|
else {
|
|
18595
|
-
|
|
18596
|
-
this.
|
|
18597
|
-
|
|
18903
|
+
// Set the config ID property dynamically (e.g., this.interceptConfigId)
|
|
18904
|
+
this[configIdProp] = configApiData.id || configResult.id || configResult.data.id;
|
|
18905
|
+
// Add the new config ID to serviceApiData (assuming serviceApiData is accessible via 'this')
|
|
18906
|
+
this.serviceApiData.configs.push(this[configIdProp]);
|
|
18907
|
+
// Set the CLI command dynamically
|
|
18908
|
+
this[cliCommandProp] = `ziti edge create config '${configApiData.name}' '${configApiData.configTypeId}' '${JSON.stringify(configApiData.data)}'`;
|
|
18598
18909
|
status = 'done';
|
|
18599
|
-
this
|
|
18910
|
+
this[incrementer] = -1; // Reset incrementer
|
|
18600
18911
|
}
|
|
18601
|
-
|
|
18602
|
-
|
|
18603
|
-
|
|
18912
|
+
return { status, configResult, configApiData };
|
|
18913
|
+
}
|
|
18914
|
+
async saveService(summaryData) {
|
|
18915
|
+
const isNewService = isEmpty(this.serviceApiData?.id);
|
|
18916
|
+
let serviceResult;
|
|
18917
|
+
if (isNewService) {
|
|
18918
|
+
this.serviceIncrement++;
|
|
18919
|
+
let postFix = '';
|
|
18920
|
+
if (this.serviceIncrement > 0) {
|
|
18921
|
+
postFix = '_' + this.serviceIncrement;
|
|
18922
|
+
}
|
|
18923
|
+
this.serviceApiData.name = this.serviceApiData.name + postFix;
|
|
18924
|
+
set(this.serviceApiData, 'tags.service-type', 'simple');
|
|
18925
|
+
serviceResult = await this.saveEntity('services', this.serviceApiData).catch((result) => {
|
|
18926
|
+
return result;
|
|
18927
|
+
});
|
|
18604
18928
|
}
|
|
18605
18929
|
else {
|
|
18606
|
-
|
|
18607
|
-
|
|
18608
|
-
|
|
18609
|
-
}
|
|
18610
|
-
async createService(summaryData) {
|
|
18611
|
-
this.serviceIncrement++;
|
|
18612
|
-
let postFix = '';
|
|
18613
|
-
if (this.serviceIncrement > 0) {
|
|
18614
|
-
postFix = '_' + this.serviceIncrement;
|
|
18930
|
+
serviceResult = await this.updateEntity('services', this.serviceApiData).catch((result) => {
|
|
18931
|
+
return result;
|
|
18932
|
+
});
|
|
18615
18933
|
}
|
|
18616
|
-
this.serviceApiData.name = this.serviceApiData.name + postFix;
|
|
18617
|
-
const serviceResult = await this.zitiService.post('services', this.serviceApiData, true).catch((result) => {
|
|
18618
|
-
return result;
|
|
18619
|
-
});
|
|
18620
18934
|
let serviceStatus;
|
|
18621
18935
|
if (serviceResult.error) {
|
|
18622
18936
|
serviceStatus = 'error';
|
|
18623
18937
|
}
|
|
18624
18938
|
else {
|
|
18625
|
-
this.serviceId = serviceResult.id ? serviceResult.id : serviceResult.data.id;
|
|
18939
|
+
this.serviceId = this.serviceApiData.id ? this.serviceApiData.id : (serviceResult.id ? serviceResult.id : serviceResult.data.id);
|
|
18626
18940
|
serviceStatus = 'done';
|
|
18627
18941
|
let cliConfigIds = '';
|
|
18628
18942
|
if (!this.sdkOnlyDial && !this.sdkOnlyBind) {
|
|
@@ -18640,46 +18954,74 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18640
18954
|
const summaryIndex = (this.sdkOnlyDial && this.sdkOnlyBind) ? 0 : 1;
|
|
18641
18955
|
summaryData[summaryIndex].entities[0].status = serviceStatus;
|
|
18642
18956
|
}
|
|
18643
|
-
async
|
|
18644
|
-
|
|
18645
|
-
|
|
18646
|
-
|
|
18647
|
-
|
|
18648
|
-
|
|
18649
|
-
|
|
18957
|
+
async savePolicy(summaryData, type = 'Dial') {
|
|
18958
|
+
const isNewPolicy = isEmpty(this.serviceApiData?.id);
|
|
18959
|
+
let policyApiData, policyResult, roleAttributes, namedAttributes;
|
|
18960
|
+
let cliRoles = '';
|
|
18961
|
+
let status = '';
|
|
18962
|
+
if (isNewPolicy) {
|
|
18963
|
+
if (type === 'Dial') {
|
|
18964
|
+
this.dialIncrement++;
|
|
18965
|
+
let postFix = '';
|
|
18966
|
+
if (this.dialIncrement > 0) {
|
|
18967
|
+
postFix = '_' + this.dialIncrement;
|
|
18968
|
+
}
|
|
18969
|
+
this.dialPolicyApiData.name = this.dialPolicyApiData.name + postFix;
|
|
18970
|
+
policyApiData = this.dialPolicyApiData;
|
|
18971
|
+
roleAttributes = this.dialPolicyRoleAttributes;
|
|
18972
|
+
namedAttributes = this.dialPolicyNamedAttributes;
|
|
18650
18973
|
}
|
|
18651
|
-
|
|
18652
|
-
|
|
18653
|
-
|
|
18654
|
-
|
|
18974
|
+
else {
|
|
18975
|
+
this.bindIncrement++;
|
|
18976
|
+
let postFix = '';
|
|
18977
|
+
if (this.bindIncrement > 0) {
|
|
18978
|
+
postFix = '_' + this.bindIncrement;
|
|
18979
|
+
}
|
|
18980
|
+
this.bindPolicyApiData.name = this.bindPolicyApiData.name + postFix;
|
|
18981
|
+
policyApiData = this.bindPolicyApiData;
|
|
18982
|
+
roleAttributes = this.bindPolicyRoleAttributes;
|
|
18983
|
+
namedAttributes = this.bindPolicyNamedAttributes;
|
|
18984
|
+
}
|
|
18985
|
+
policyApiData.serviceRoles = [`@${this.serviceId}`];
|
|
18986
|
+
policyApiData.identityRoles = namedAttributes.map((name) => {
|
|
18987
|
+
cliRoles += '@' + this.identitiesNameIdMap[name] + ',';
|
|
18988
|
+
return '@' + this.identitiesNameIdMap[name];
|
|
18989
|
+
});
|
|
18990
|
+
policyApiData.identityRoles = [...policyApiData.identityRoles, ...roleAttributes.map((role) => {
|
|
18991
|
+
cliRoles += '#' + role + ',';
|
|
18992
|
+
return '#' + role;
|
|
18993
|
+
})];
|
|
18994
|
+
cliRoles = cliRoles.slice(0, -1);
|
|
18995
|
+
policyResult = await this.saveEntity('service-policies', policyApiData).catch((result) => {
|
|
18996
|
+
return result;
|
|
18997
|
+
});
|
|
18655
18998
|
}
|
|
18656
18999
|
else {
|
|
18657
|
-
|
|
18658
|
-
|
|
18659
|
-
|
|
18660
|
-
|
|
19000
|
+
if (type === 'Dial') {
|
|
19001
|
+
policyApiData = this.dialPolicyApiData;
|
|
19002
|
+
roleAttributes = this.dialPolicyRoleAttributes;
|
|
19003
|
+
namedAttributes = this.dialPolicyNamedAttributes;
|
|
18661
19004
|
}
|
|
18662
|
-
|
|
18663
|
-
|
|
18664
|
-
|
|
18665
|
-
|
|
19005
|
+
else {
|
|
19006
|
+
policyApiData = this.bindPolicyApiData;
|
|
19007
|
+
roleAttributes = this.bindPolicyRoleAttributes;
|
|
19008
|
+
namedAttributes = this.bindPolicyNamedAttributes;
|
|
19009
|
+
}
|
|
19010
|
+
policyApiData.serviceRoles = [`@${this.serviceId}`];
|
|
19011
|
+
policyApiData.identityRoles = namedAttributes.map((name) => {
|
|
19012
|
+
cliRoles += '@' + this.identitiesNameIdMap[name] + ',';
|
|
19013
|
+
return '@' + this.identitiesNameIdMap[name];
|
|
19014
|
+
});
|
|
19015
|
+
policyApiData.identityRoles = [...policyApiData.identityRoles, ...roleAttributes.map((role) => {
|
|
19016
|
+
cliRoles += '#' + role + ',';
|
|
19017
|
+
return '#' + role;
|
|
19018
|
+
})];
|
|
19019
|
+
cliRoles = cliRoles.slice(0, -1);
|
|
19020
|
+
policyResult = await this.updateEntity('service-policies', policyApiData).catch((result) => {
|
|
19021
|
+
return result;
|
|
19022
|
+
});
|
|
18666
19023
|
}
|
|
18667
|
-
|
|
18668
|
-
let cliRoles = '';
|
|
18669
|
-
let status = '';
|
|
18670
|
-
policyApiData.identityRoles = namedAttributes.map((name) => {
|
|
18671
|
-
cliRoles += '@' + this.identitiesNameIdMap[name] + ',';
|
|
18672
|
-
return '@' + this.identitiesNameIdMap[name];
|
|
18673
|
-
});
|
|
18674
|
-
policyApiData.identityRoles = [...policyApiData.identityRoles, ...roleAttributes.map((role) => {
|
|
18675
|
-
cliRoles += '#' + role + ',';
|
|
18676
|
-
return '#' + role;
|
|
18677
|
-
})];
|
|
18678
|
-
cliRoles = cliRoles.slice(0, -1);
|
|
18679
|
-
const dialPolicyResult = await this.zitiService.post('service-policies', policyApiData).catch((result) => {
|
|
18680
|
-
return result;
|
|
18681
|
-
});
|
|
18682
|
-
if (dialPolicyResult.error) {
|
|
19024
|
+
if (policyResult.error) {
|
|
18683
19025
|
status = 'error';
|
|
18684
19026
|
}
|
|
18685
19027
|
else {
|
|
@@ -18702,6 +19044,12 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18702
19044
|
this.bindPolicyCliCommand = cliCommand;
|
|
18703
19045
|
}
|
|
18704
19046
|
}
|
|
19047
|
+
saveEntity(type, data) {
|
|
19048
|
+
return this.zitiService.post(type, data, true);
|
|
19049
|
+
}
|
|
19050
|
+
updateEntity(type, data) {
|
|
19051
|
+
return this.zitiService.patch(type, data, data.id, true);
|
|
19052
|
+
}
|
|
18705
19053
|
validate() {
|
|
18706
19054
|
this.errors = {};
|
|
18707
19055
|
this.validateServiceName();
|
|
@@ -18835,6 +19183,37 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18835
19183
|
this.dialPolicyApiData = this.initDialPolicyApiData;
|
|
18836
19184
|
this.bindPolicyApiData = this.initBindPolicyApiData;
|
|
18837
19185
|
}
|
|
19186
|
+
convertToAdvanced() {
|
|
19187
|
+
const data = {
|
|
19188
|
+
appendId: 'ConvertSimpleService',
|
|
19189
|
+
title: 'Convert Service',
|
|
19190
|
+
message: `Are you sure you would like to convert this simple service to an advanced service? This change cannot be undone.`,
|
|
19191
|
+
bulletList: [],
|
|
19192
|
+
confirmLabel: 'Yes',
|
|
19193
|
+
cancelLabel: 'Oops, no get me out of here',
|
|
19194
|
+
imageUrl: '../../assets/svgs/Growl_Warning.svg',
|
|
19195
|
+
showCancelLink: true
|
|
19196
|
+
};
|
|
19197
|
+
this.dialogRef = this.dialogForm.open(ConfirmComponent, {
|
|
19198
|
+
data: data,
|
|
19199
|
+
autoFocus: false,
|
|
19200
|
+
});
|
|
19201
|
+
this.dialogRef.afterClosed().subscribe((result) => {
|
|
19202
|
+
if (result?.confirmed) {
|
|
19203
|
+
this.serviceApiData.tags['service-type'] = 'advanced';
|
|
19204
|
+
this.updateEntity('services', this.serviceApiData)
|
|
19205
|
+
.then(() => {
|
|
19206
|
+
const growlerData = new GrowlerModel('success', 'Success', `Service Updated`, `Successfully converted ${this.serviceApiData.name} to an advanced service.`);
|
|
19207
|
+
this.growlerService.show(growlerData);
|
|
19208
|
+
this.router.navigate([URLS.ZITI_ADVANCED_SERVICE + '/' + this.serviceApiData.id]);
|
|
19209
|
+
})
|
|
19210
|
+
.catch((result) => {
|
|
19211
|
+
const growlerData = new GrowlerModel('error', 'Error', `Failed to Update Service`, `Unable to convert ${this.serviceApiData.name} to an advanced service.`);
|
|
19212
|
+
this.growlerService.show(growlerData);
|
|
19213
|
+
});
|
|
19214
|
+
}
|
|
19215
|
+
});
|
|
19216
|
+
}
|
|
18838
19217
|
checkDataChange() {
|
|
18839
19218
|
const serviceDataChange = !isEqual(this.initServiceApiData, this.serviceApiData);
|
|
18840
19219
|
const interceptDataChange = !isEqual(this.initInterceptConfigApiData.data, this.interceptConfigApiData.data);
|
|
@@ -18857,11 +19236,11 @@ class SimpleServiceComponent extends ProjectableForm {
|
|
|
18857
19236
|
clear() {
|
|
18858
19237
|
}
|
|
18859
19238
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ServiceFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: SERVICE_EXTENSION_SERVICE }, { token: i5$1.MatDialog }, { token: ValidationService }, { token: ServicesPageService }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18860
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"] }] }); }
|
|
19239
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SimpleServiceComponent, selector: "lib-simple-service", inputs: { serviceRoleAttributes: "serviceRoleAttributes", identityRoleAttributes: "identityRoleAttributes", identityNamedAttributes: "identityNamedAttributes", formData: "formData" }, outputs: { close: "close", selected: "selected" }, usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"isEdit ? 'Edit Simple Service' : 'Create a Simple Service'\"\n [actionButtonText]=\"'Save'\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [moreActions]=\"moreActions\"\n ></lib-form-header>\n\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".service-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}.convert-service-button{background-color:var(--primaryColor);width:2.0625rem;height:2.0625rem;color:var(--white);font-family:icomoon!important;font-size:1.5rem;border:none;border-radius:var(--inputBorderRadius);position:relative}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"] }] }); }
|
|
18861
19240
|
}
|
|
18862
19241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SimpleServiceComponent, decorators: [{
|
|
18863
19242
|
type: Component,
|
|
18864
|
-
args: [{ selector: 'lib-simple-service', template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"showForm ? 'Create a Simple Service' : 'Service Creation Summary'\"\n [actionButtonText]=\"'Save'\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>", styles: [".ziti-entity-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"] }]
|
|
19243
|
+
args: [{ selector: 'lib-simple-service', template: "<div class=\"projectable-form-wrapper simple-service-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(true, false, 'cards', $event)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"isEdit ? 'Edit Simple Service' : 'Create a Simple Service'\"\n [actionButtonText]=\"'Save'\"\n [multiActions]=\"multiActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n (multiActionRequested)=\"multiActionRequested($event)\"\n [(formView)]=\"formView\"\n [moreActions]=\"moreActions\"\n ></lib-form-header>\n\n <div class=\"simple-service-form-container projectable-form-container\">\n <div class=\"form-group-column three-fifths\" *ngIf=\"showForm\">\n <div id=\"InlineServiceArea\" class=\"anyadd\">\n <div class=\"simple-service-inputs\">\n <lib-form-field-container [title]=\"'Service Details'\">\n <div class=\"form-field-input-group service-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <input\n class=\"form-field-input\"\n placeholder=\"Name this service\"\n autofocus\n #nameFieldInput\n [ngClass]=\"{error: errors.name}\"\n [(ngModel)]=\"serviceApiData.name\"\n (keyup)=\"serviceNameChanged($event)\"\n (change)=\"validateServiceName()\"\n />\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">SELECT OR CREATE SERVICE ATTRIBUTES</span>\n </div>\n <lib-tag-selector\n [(selectedRoleAttributes)]=\"serviceApiData.roleAttributes\"\n [availableRoleAttributes]=\"serviceRoleAttributes\"\n [placeholder]=\"'Add attributes to group services'\"\n ></lib-tag-selector>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n <div class=\"simple-service-center-content\" *ngIf=\"showForm\">\n <div class=\"form-group-row\">\n <lib-form-field-container\n [title]=\"'ACCESSING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10001'\"\n [helpText]=\"'How will client applications use this service? Specify a hostname/IP and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n >\n <div class=\"form-field-input-group accessing-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can access this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"dialPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"dialPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes to grant access'\"\n [hasError]=\"errors.dialIdentities\"\n (selectedNamedAttributesChange)=\"validateDialIdentities()\"\n (selectedRoleAttributesChange)=\"validateDialIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">How will the service be accessed?</span>\n </div>\n <div class=\"grid addressPort\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyDial()\"\n [ngClass]=\"{ on: sdkOnlyDial }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyDial\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyDial\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <div class=\"config-hostname-label\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <div\n class=\"form-field-info infoicon\"\n matTooltip=\"Accessing hostnames must include a '.'\"\n matTooltipPosition=\"above\"\n ></div>\n <span *ngIf=\"errors.interceptAddressFormat\" class=\"error-label\">Accessing hostnames must include a '.'</span>\n </div>\n <input id=\"HowTo\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateInterceptAddress()\" [ngClass]=\"{error: errors.interceptAddress}\" [placeholder]=\"sdkOnlyDial ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptConfigApiData.data.addresses[0]\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyDial}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HowToPort\" type=\"number\" maxlength=\"10\" (change)=\"validateInterceptPort()\" [ngClass]=\"{error: errors.interceptPort}\" [placeholder]=\"sdkOnlyDial ? '' : 443\" (keyup)=\"interceptPortChanged($event)\" [(ngModel)]=\"sdkOnlyDial ? '' : interceptPort\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'HOSTING CONFIGURATION'\"\n [contentStyle]=\"'z-index: 10000'\"\n [helpText]=\"'Where should traffic for this service be sent? Specify a protocol, hostname/IP, and port, or use the "SDK Only" toggle for an application embedded configuration.'\"\n\n >\n <div class=\"form-field-input-group hosting-group\">\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">What identities can host this service?</span>\n </div>\n <lib-tag-selector\n [(selectedNamedAttributes)]=\"bindPolicyNamedAttributes\"\n [(selectedRoleAttributes)]=\"bindPolicyRoleAttributes\"\n [availableNamedAttributes]=\"identityNamedAttributes\"\n [availableRoleAttributes]=\"identityRoleAttributes\"\n [placeholder]=\"'Select identity attributes'\"\n [hasError]=\"errors.bindIdentities\"\n (selectedNamedAttributesChange)=\"validateBindIdentities()\"\n (selectedRoleAttributesChange)=\"validateBindIdentities()\"\n (filterChange)=\"getIdentityNamedAttributes($event)\"\n ></lib-tag-selector>\n </div>\n <div class=\"form-field-sub-group\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Where should traffic be sent?</span>\n </div>\n <div class=\"grid addressFull\">\n <div class=\"config-item-container\">\n <span class=\"config-item-label\">SDK ONLY</span>\n <div\n class=\"sdk-toggle form-field-toggle\"\n >\n <div class=\"switchGrid\">\n <div>\n <div\n (click)=\"toggleSdkOnlyBind()\"\n [ngClass]=\"{ on: sdkOnlyBind }\"\n class=\"toggle\"\n >\n <span [hidden]=\"!sdkOnlyBind\" class=\"on-label\">YES</span>\n <span [hidden]=\"sdkOnlyBind\" class=\"off-label\">NO</span>\n <div class=\"switch\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PROTOCOL</span>\n <select id=\"HostedProtocol\" (change)=\"hostProtocolsChanged($event)\" [(ngModel)]=\"sdkOnlyBind ? '' : hostProtocol\">\n <option value=\"tcp\">TCP</option>\n <option value=\"udp\" >UDP</option>\n <option value=\"both\" >TCP/UDP</option>\n </select>\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">HOSTNAME / IP</span>\n <input id=\"HostedHost\" type=\"text\" maxlength=\"100\" data-i18n=\"EgHost\" (change)=\"validateHostAddress()\" [ngClass]=\"{error: errors.hostAddress}\" [placeholder]=\"sdkOnlyBind ? '' : 'e.g. myservice.ziti'\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.address\">\n </div>\n <div class=\"config-item-container\" [ngClass]=\"{disabled: sdkOnlyBind}\">\n <span class=\"config-item-label\">PORT</span>\n <input id=\"HostedPort\" type=\"number\" maxlength=\"10\" (change)=\"validateHostPort()\" [ngClass]=\"{error: errors.hostPort}\" [placeholder]=\"sdkOnlyBind ? '' : 443\" [(ngModel)]=\"sdkOnlyBind ? '' : hostConfigApiData.data.port\">\n </div>\n </div>\n </div>\n </div>\n </lib-form-field-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".service-header-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.simple-service-wrapper .simple-service-form-container .form-group-column{height:-moz-fit-content;height:fit-content;max-width:40.625rem;width:100%;transition:var(--transition);flex-grow:0;padding-bottom:0}.simple-service-wrapper .simple-service-form-container .simple-service-center-content lib-form-field-container{min-width:23.4375rem}.simple-service-wrapper .simple-service-form-container .simple-service-center-content .form-field-input-group{display:flex;flex-direction:column;gap:.9375rem}.simple-service-wrapper .grid.addressFull{grid-template-columns:4.375rem 5.9375rem auto 4.0625rem}.simple-service-wrapper .grid.addressPort{grid-template-columns:4.375rem auto 4.0625rem}.simple-service-wrapper input:disabled{opacity:.5!important}.simple-service-wrapper .addressPort .config-item-container.disabled,.simple-service-wrapper .addressFull .config-item-container.disabled{opacity:.3;pointer-events:none}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle{color:var(--white);display:flex;justify-content:space-between;height:var(--defaultInputHeight);align-items:center;margin-bottom:0}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .label{display:flex;font-size:.875rem;font-weight:600;text-transform:uppercase}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle{margin:0;display:flex;align-items:center;width:3.75rem;height:1.75rem;font-size:.875rem;line-height:1.5625rem;font-weight:800;font-family:Open Sans,Arial,sans-serif;background-color:var(--icon);color:var(--white);text-align:center;cursor:pointer;position:relative;float:left;border-radius:.8125rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle.on{background-color:var(--green)}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;top:.25rem;z-index:10}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .switch.on,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .switch.on{left:2.1875rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .on-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .on-label{margin-left:.4375rem}.simple-service-wrapper .addressPort .config-item-container .sdk-toggle .toggle .off-label,.simple-service-wrapper .addressFull .config-item-container .sdk-toggle .toggle .off-label{margin-left:2rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label{display:flex;flex-direction:row;justify-content:flex-start;white-space:nowrap}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .form-field-info,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .form-field-info{margin-top:.0625rem}.simple-service-wrapper .addressPort .config-item-container .config-hostname-label .error-label,.simple-service-wrapper .addressFull .config-item-container .config-hostname-label .error-label{margin-left:.3125rem}.simple-service-wrapper .form-field-input-group.service-group{gap:.625rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group.accessing-group{gap:.9375rem;display:flex;flex-direction:column}.simple-service-wrapper .form-field-input-group .form-field-sub-group{display:flex;flex-direction:column;gap:.3125rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .config-title-row{height:.875rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull,.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressPort{gap:.625rem}.simple-service-wrapper .form-field-input-group .form-field-sub-group .addressFull select{height:var(--defaultInputHeight)}.simple-service-wrapper .simple-service-center-content{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center}.simple-service-wrapper .simple-service-center-content .form-group-row{flex-wrap:wrap;gap:.9375rem;max-width:40.625rem;justify-content:center;padding:0}.config-item-label{color:#a9abaf;font-weight:600;margin-bottom:.3125rem;position:relative;display:flex}.simple-service-inputs{display:flex;flex-direction:column;gap:.9375rem}.form-field-input-group .form-field-title{color:var(--offWhite);margin-bottom:.625rem}.config-item .config-container.encryption-pod{background-color:#222f3e;background-image:linear-gradient(90deg,#232f3e,#f6f7fb);background-image:-ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%);border-radius:var(--inputBorderRadius)}.config-item .config-container .config-container-label{color:#fff}.convert-service-button{background-color:var(--primaryColor);width:2.0625rem;height:2.0625rem;color:var(--white);font-family:icomoon!important;font-size:1.5rem;border:none;border-radius:var(--inputBorderRadius);position:relative}::ng-deep .simple-service-wrapper input{max-height:var(--defaultInputHeight);min-height:0rem;height:var(--defaultInputHeight)}::ng-deep .simple-service-wrapper .select2-search__field{height:100%;min-height:2.5rem;max-height:2.5rem}::ng-deep .simple-service-wrapper .select2-selection__rendered{padding:0;max-height:7.1875rem!important;overflow:auto}::ng-deep .simple-service-wrapper .form-header-container{align-items:center}::ng-deep .simple-service-wrapper .form-header-container .form-header-group{width:40.625rem!important}::ng-deep .simple-service-wrapper .form-header-container .header-actions-container{min-width:0rem}::ng-deep .simple-service-wrapper .form-header-container .form-header-toggle-container{display:none}\n"] }]
|
|
18865
19244
|
}], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
|
|
18866
19245
|
type: Inject,
|
|
18867
19246
|
args: [SETTINGS_SERVICE]
|
|
@@ -18881,6 +19260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
18881
19260
|
type: Output
|
|
18882
19261
|
}], selected: [{
|
|
18883
19262
|
type: Output
|
|
19263
|
+
}], formData: [{
|
|
19264
|
+
type: Input
|
|
18884
19265
|
}] } });
|
|
18885
19266
|
|
|
18886
19267
|
class EdgeRouterPolicy {
|
|
@@ -20171,7 +20552,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
|
|
|
20171
20552
|
provide: MatDialogRef,
|
|
20172
20553
|
useValue: {}
|
|
20173
20554
|
}
|
|
20174
|
-
], 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 Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\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 id=\"PolicyType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
20555
|
+
], 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 Service Policy: ' : 'Create New Service Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"service-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\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 id=\"PolicyType\"\n class=\"form-field-dropdown\"\n >\n <option value=\"Bind\">Bind</option>\n <option value=\"Dial\">Dial</option>\n </select>\n <select\n [(ngModel)]=\"formData.semantic\"\n id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
20175
20556
|
}
|
|
20176
20557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
|
|
20177
20558
|
type: Component,
|
|
@@ -20598,7 +20979,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
|
|
|
20598
20979
|
provide: MatDialogRef,
|
|
20599
20980
|
useValue: {}
|
|
20600
20981
|
}
|
|
20601
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\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 id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
20982
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"edge-router-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\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 id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
20602
20983
|
}
|
|
20603
20984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
|
|
20604
20985
|
type: Component,
|
|
@@ -21481,7 +21862,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
|
|
|
21481
21862
|
provide: MatDialogRef,
|
|
21482
21863
|
useValue: {}
|
|
21483
21864
|
}
|
|
21484
|
-
], 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 Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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 id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
21865
|
+
], 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 Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'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 />\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 [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\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 [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\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 id=\"PolicySemantic\"\n class=\"form-field-dropdown\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
21485
21866
|
}
|
|
21486
21867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
|
|
21487
21868
|
type: Component,
|
|
@@ -22175,7 +22556,7 @@ class ConfigurationFormComponent extends ProjectableForm {
|
|
|
22175
22556
|
this._apiData = cloneDeep(this.apiData);
|
|
22176
22557
|
}
|
|
22177
22558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"config-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 [title]=\"'Config Name'\" [label]=\"'Required'\">\n <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 >\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 >\n <option value=\"\">Select A Type...</option>\n <option *ngFor=\"let config of options\"\n [value]=\"config.id\">{{config.name}}\n </option>\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
22559
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigurationFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config' : 'Create Config')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"config-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 [title]=\"'Config Name'\" [label]=\"'Required'\">\n <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 >\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 >\n <option value=\"\">Select A Type...</option>\n <option *ngFor=\"let config of options\"\n [value]=\"config.id\">{{config.name}}\n </option>\n </select>\n <lib-config-editor\n [hidden]=\"configTypeEmpty\"\n [schema]=\"selectedSchema\"\n [(configData)]=\"formData.data\"\n [showJsonView]=\"svc.configJsonView\"\n [(configErrors)]=\"errors\"\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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"_apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
|
|
22179
22560
|
}
|
|
22180
22561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationFormComponent, decorators: [{
|
|
22181
22562
|
type: Component,
|
|
@@ -23160,7 +23541,7 @@ class JwtSignerFormComponent extends ProjectableForm {
|
|
|
23160
23541
|
return !this.errors.jwksEndpoint;
|
|
23161
23542
|
}
|
|
23162
23543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }, { token: ValidationService }, { token: AuthService }, { token: i1$5.OAuthService }, { token: i1$1.HttpClient }, { token: ZAC_LOGIN_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23163
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JwtSignerFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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]=\"'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\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\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\"/>\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']}\"/>\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)=\"toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId }\"\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\"/>\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\"/>\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 <p-chips (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\">\n </p-chips>\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 <lib-form-field-container\n *ngIf=\"showMore && showTokenType\"\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 >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\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 <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n <div class=\"spinner\" *ngIf=\"oauthLoading\"></div>\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"oidcVerified\">\n </div>\n </div>\n <div class=\"oidc-error-message-container\" *ngIf=\"oidcErrorMessageDetail\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n <code class=\"oidc-error-message-detail2\" *ngIf=\"oidcErrorMessageDetail2\">{{oidcErrorMessageDetail2}}</code>\n <code class=\"oidc-error-message-detail2\" *ngIf=\"oidcErrorMessageDetail3\">{{oidcErrorMessageDetail3}}</code>\n </div>\n <div class=\"oidc-token-claims-container\" *ngIf=\"oidcAuthTokenClaims\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\"></lib-json-view>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"radio-group-container\" (keydown)=\"radioKeyDownHandler($event)\" tabindex=\"0\">\n <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT'}\" (click)=\"selectSignatureMethod('JWKS_ENDPOINT')\">\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 class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM'}\" (click)=\"selectSignatureMethod('CERT_PEM')\">\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 <div *ngIf=\"signatureMethod === 'JWKS_ENDPOINT'\" 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 class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\" [ngClass]=\"{error: errors['jwksEndpoint']}\"/>\n </div>\n </div>\n <div *ngIf=\"signatureMethod === 'CERT_PEM'\" 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 class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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 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\"/>\n </div>\n </div>\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)=\"toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled }\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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}.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:-moz-fit-content;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:-moz-fit-content;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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
23544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JwtSignerFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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]=\"'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\" >Required</span>\n </div>\n <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\"/>\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\"/>\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']}\"/>\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)=\"toggleUseExternalId()\"\n [ngClass]=\"{ on: formData.useExternalId }\"\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\"/>\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\"/>\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 <p-chips (keyup)=\"scopesOnKeyup($event)\"\n [(ngModel)]=\"formData.scopes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter scopes\"\n [addOnBlur]=\"true\"\n separator=\",\">\n </p-chips>\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 <lib-form-field-container\n *ngIf=\"showMore && showTokenType\"\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 >\n <option value=\"ACCESS\">Access</option>\n <option value=\"ID\">ID</option>\n </select>\n </lib-form-field-container>\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 <div class=\"test-oauth-button\"\n [ngClass]=\"{'oidc-verified': oidcVerified}\"\n (click)=\"testOIDCAuthentication()\"\n >\n {{oidcVerified ? 'Verified' : 'Authenticate' }}\n <div class=\"spinner\" *ngIf=\"oauthLoading\"></div>\n <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\" *ngIf=\"oidcVerified\">\n </div>\n </div>\n <div class=\"oidc-error-message-container\" *ngIf=\"oidcErrorMessageDetail\">\n <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n <code class=\"oidc-error-message-detail2\" *ngIf=\"oidcErrorMessageDetail2\">{{oidcErrorMessageDetail2}}</code>\n <code class=\"oidc-error-message-detail2\" *ngIf=\"oidcErrorMessageDetail3\">{{oidcErrorMessageDetail3}}</code>\n </div>\n <div class=\"oidc-token-claims-container\" *ngIf=\"oidcAuthTokenClaims\">\n <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\"></lib-json-view>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Verification'\"\n [label]=\"'REQUIRED'\"\n >\n <div class=\"radio-group-container\" (keydown)=\"radioKeyDownHandler($event)\" tabindex=\"0\">\n <div class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT'}\" (click)=\"selectSignatureMethod('JWKS_ENDPOINT')\">\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 class=\"radio-button-container\" [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM'}\" (click)=\"selectSignatureMethod('CERT_PEM')\">\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 <div *ngIf=\"signatureMethod === 'JWKS_ENDPOINT'\" 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 class=\"form-field-input read-only\" placeholder=\"Enter endpoint URL\" [(ngModel)]=\"formData.jwksEndpoint\" [ngClass]=\"{error: errors['jwksEndpoint']}\"/>\n </div>\n </div>\n <div *ngIf=\"signatureMethod === 'CERT_PEM'\" 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 class=\"select-file-button\" (click)=\"openFileSelect($event)\">\n Select File\n <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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 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\"/>\n </div>\n </div>\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)=\"toggleEnabled()\"\n [ngClass]=\"{ on: formData.enabled }\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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}.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:-moz-fit-content;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:-moz-fit-content;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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
23164
23545
|
}
|
|
23165
23546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JwtSignerFormComponent, decorators: [{
|
|
23166
23547
|
type: Component,
|
|
@@ -23918,7 +24299,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
|
|
|
23918
24299
|
this.svc.getJwtSigners(filters, 1);
|
|
23919
24300
|
}
|
|
23920
24301
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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 ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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]=\"'Required'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Auth Policy\"/>\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)=\"toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed }\"\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 <lib-form-field-container\n *ngIf=\"formData.primary.cert.allowed\"\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 <lib-form-field-container\n *ngIf=\"formData.primary.extJwt.allowed\"\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 [(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 <lib-form-field-container\n *ngIf=\"formData.primary.updb.allowed\"\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 <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\"></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 <p-dropdown\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.jwtSigners\"\n [filter]=\"true\"\n [showClear]=\"true\"\n (change)=\"secondaryJwtSignerChanged($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n (click)=\"clearJwtSignerFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n </lib-form-field-container>\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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
24302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthPolicyFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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 ? 'Auth Policy Details' : 'Create Auth Policy')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\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]=\"'Required'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Auth Policy\"/>\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)=\"toggleCertAllowed()\"\n [ngClass]=\"{ on: formData.primary.cert.allowed }\"\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 <lib-form-field-container\n *ngIf=\"formData.primary.cert.allowed\"\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 <lib-form-field-container\n *ngIf=\"formData.primary.extJwt.allowed\"\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 [(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 <lib-form-field-container\n *ngIf=\"formData.primary.updb.allowed\"\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 <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\"></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 <p-dropdown\n placeholder=\"Select JWT Signer...\"\n optionLabel=\"name\"\n optionValue=\"id\"\n filterBy=\"name\"\n [options]=\"svc.jwtSigners\"\n [filter]=\"true\"\n [showClear]=\"true\"\n (change)=\"secondaryJwtSignerChanged($event)\"\n [(ngModel)]=\"formData.secondary.requireExtJwtSigner\"\n >\n <ng-template pTemplate=\"filter\" let-options=\"options\">\n <div class=\"dropdown-filter-container\">\n <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n <input\n type=\"text\"\n pInputText\n placeholder=\"Filter\"\n (keyup)=\"jwtSignersFilterChangedDebounced($event)\" />\n </div>\n <button pButton\n icon=\"pi pi-times\"\n [ngClass]=\"{'configs-loading': svc.jwtSignersLoading}\"\n (click)=\"clearJwtSignerFilter($event)\"\n severity=\"secondary\">\n </button>\n <div class=\"spinner\" *ngIf=\"svc.jwtSignersLoading\"></div>\n </div>\n </ng-template>\n </p-dropdown>\n </div>\n </lib-form-field-container>\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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
23922
24303
|
}
|
|
23923
24304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthPolicyFormComponent, decorators: [{
|
|
23924
24305
|
type: Component,
|
|
@@ -24727,7 +25108,7 @@ class CertificateAuthorityFormComponent extends ProjectableForm {
|
|
|
24727
25108
|
this.formData.externalIdClaim.parserCriteria = parserCriteria;
|
|
24728
25109
|
}
|
|
24729
25110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24730
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateAuthorityFormComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [badges]=\"badges\"\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]=\"'Required'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\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 <option *ngFor=\"let loc of locations\" [value]=\"loc\">\n {{ loc }}\n </option>\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 <option *ngFor=\"let matcher of matchers\" [value]=\"matcher\">\n {{ matcher }}\n </option>\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 <option *ngFor=\"let parser of parsers\" [value]=\"parser\">\n {{ parser }}\n </option>\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 <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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\"></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 *ngIf=\"formData.id && !this.formData.isVerified\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
25111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateAuthorityFormComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", 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]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [badges]=\"badges\"\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]=\"'Required'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this Certificate Authority\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Name Format'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"'OPTIONAL'\"\n [helpText]=\"'The identity name format used to name automatically enrolling identities. Defaults to [caName]-[commonName]'\"\n >\n <input class=\"form-field-input read-only\" [(ngModel)]=\"formData.identityNameFormat\" [ngClass]=\"{error: errors['identityNameFormat']}\" placeholder=\"Defaults to [caName]-[commonName]\"/>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Identity Roles'\"\n [contentStyle]=\"'z-index: 99999999'\"\n [label]=\"'OPTIONAL'\"\n [helpText]=\"'The identity roles to give to automatically enrolling identities'\"\n >\n <lib-tag-selector\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 <option *ngFor=\"let loc of locations\" [value]=\"loc\">\n {{ loc }}\n </option>\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 <option *ngFor=\"let matcher of matchers\" [value]=\"matcher\">\n {{ matcher }}\n </option>\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 <option *ngFor=\"let parser of parsers\" [value]=\"parser\">\n {{ parser }}\n </option>\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 <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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\"></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 *ngIf=\"formData.id && !this.formData.isVerified\"\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 <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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:-moz-fit-content;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;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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
24731
25112
|
}
|
|
24732
25113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateAuthorityFormComponent, decorators: [{
|
|
24733
25114
|
type: Component,
|
|
@@ -24971,7 +25352,7 @@ class VerifyCertificateComponent extends ProjectableForm {
|
|
|
24971
25352
|
}
|
|
24972
25353
|
}
|
|
24973
25354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerifyCertificateComponent, deps: [{ token: VerifyCertificateService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VerifyCertificateComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper verify-certificate-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [title]=\"'Verify Certificate for CA:'\"\n [data]=\"formData\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [showHeaderToggle]=\"false\"\n [actionButtonText]=\"'Verify'\"\n ></lib-form-header>\n <div class=\"verify-certificate-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Instructions'\"\n >\n <ul class=\"instructions-list\">\n <li>Generate a certificate with the common name CN=<b>{{formData.verificationToken}}</b></li>\n <li>Upload the generated cert, or copy & paste it using the text field below</li>\n <li>Click the \"Verify\" button to submit certificate for verification</li>\n </ul>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Token'\"\n >\n <div class=\"copy-token-container\" (click)=\"copyToClipboard(formData.verificationToken)\">\n <span class=\"form-field-input copy-token-button\" matTooltip=\"Copy verifcation token\" matTooltipPosition=\"below\" matTooltipShowDelay=\"300\">{{formData.verificationToken}}</span>\n <div class=\"copy-icon\"></div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Certificate'\"\n [label]=\"'REQUIRED'\"\n >\n <span *ngIf=\"errors['certPem']\" class=\"cert-error-text error-text\">{{certErrorMessage}}</span>\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 <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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)]=\"certificate\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <div class=\"buttons-container buttons\">\n <div class=\"linkButton cancel\" (click)=\"returnToListPage()\">Oops, no get me out of here</div>\n <div class=\" save-button button save confirm\" (click)=\"save($event)\">Verify</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .verify-certificate-container lib-form-header .form-header-container{max-width:50rem}.verify-certificate-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.verify-certificate-container .projectable-form-main-column{max-width:50rem}.verify-certificate-container .copy-token-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;cursor:pointer;background-color:var(--stroke);border-radius:var(--inputBorderRadius);transition:all .2s}.verify-certificate-container .copy-token-container .copy-icon{filter:grayscale(1)}.verify-certificate-container .copy-token-container:hover .copy-token-button{transform:scale(1.02)}.verify-certificate-container .copy-token-container:hover .copy-icon{transform:scale(1.02);filter:none}.verify-certificate-container .copy-token-container .copy-token-button{cursor:pointer;align-items:center;margin-left:var(--marginMedium);display:flex}.verify-certificate-container .instructions-list{margin:0;padding-left:1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.verify-certificate-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;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}.verify-certificate-container .select-file-button:hover{filter:brightness(.8)}.verify-certificate-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.verify-certificate-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;animation:loading .5s infinite linear}.verify-certificate-container .select-file-label-container{gap:var(--marginMedium)}.verify-certificate-container .cert-error-text{height:.7rem}.verify-certificate-container .save-button{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)}::ng-deep .verify-certificate-container select:disabled,::ng-deep .verify-certificate-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .verify-certificate-wrapper lib-form-header .form-header-container{max-width:50rem}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
|
|
25355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VerifyCertificateComponent, selector: "lib-certificate-authority", inputs: { formData: "formData", errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper verify-certificate-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n tabindex=\"0\"\n>\n <lib-form-header\n [title]=\"'Verify Certificate for CA:'\"\n [data]=\"formData\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n [showHeaderToggle]=\"false\"\n [actionButtonText]=\"'Verify'\"\n ></lib-form-header>\n <div class=\"verify-certificate-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n <div class=\"form-group-column\">\n <lib-form-field-container\n [title]=\"'Instructions'\"\n >\n <ul class=\"instructions-list\">\n <li>Generate a certificate with the common name CN=<b>{{formData.verificationToken}}</b></li>\n <li>Upload the generated cert, or copy & paste it using the text field below</li>\n <li>Click the \"Verify\" button to submit certificate for verification</li>\n </ul>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Token'\"\n >\n <div class=\"copy-token-container\" (click)=\"copyToClipboard(formData.verificationToken)\">\n <span class=\"form-field-input copy-token-button\" matTooltip=\"Copy verifcation token\" matTooltipPosition=\"below\" matTooltipShowDelay=\"300\">{{formData.verificationToken}}</span>\n <div class=\"copy-icon\"></div>\n </div>\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Certificate'\"\n [label]=\"'REQUIRED'\"\n >\n <span *ngIf=\"errors['certPem']\" class=\"cert-error-text error-text\">{{certErrorMessage}}</span>\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 <div class=\"spinner\" *ngIf=\"fileSelectOpening\"></div>\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)]=\"certificate\" [ngClass]=\"{error: errors['certPem']}\"></textarea>\n </div>\n </div>\n </lib-form-field-container>\n <div class=\"buttons-container buttons\">\n <div class=\"linkButton cancel\" (click)=\"returnToListPage()\">Oops, no get me out of here</div>\n <div class=\" save-button button save confirm\" (click)=\"save($event)\">Verify</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .verify-certificate-container lib-form-header .form-header-container{max-width:50rem}.verify-certificate-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.verify-certificate-container .projectable-form-main-column{max-width:50rem}.verify-certificate-container .copy-token-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;cursor:pointer;background-color:var(--stroke);border-radius:var(--inputBorderRadius);transition:all .2s}.verify-certificate-container .copy-token-container .copy-icon{filter:grayscale(1)}.verify-certificate-container .copy-token-container:hover .copy-token-button{transform:scale(1.02)}.verify-certificate-container .copy-token-container:hover .copy-icon{transform:scale(1.02);filter:none}.verify-certificate-container .copy-token-container .copy-token-button{cursor:pointer;align-items:center;margin-left:var(--marginMedium);display:flex}.verify-certificate-container .instructions-list{margin:0;padding-left:1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.verify-certificate-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:-moz-fit-content;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}.verify-certificate-container .select-file-button:hover{filter:brightness(.8)}.verify-certificate-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.verify-certificate-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;animation:loading .5s infinite linear}.verify-certificate-container .select-file-label-container{gap:var(--marginMedium)}.verify-certificate-container .cert-error-text{height:.7rem}.verify-certificate-container .save-button{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)}::ng-deep .verify-certificate-container select:disabled,::ng-deep .verify-certificate-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .verify-certificate-wrapper lib-form-header .form-header-container{max-width:50rem}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
|
|
24975
25356
|
}
|
|
24976
25357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerifyCertificateComponent, decorators: [{
|
|
24977
25358
|
type: Component,
|
|
@@ -25628,7 +26009,7 @@ class ConfigTypeFormComponent extends ProjectableForm {
|
|
|
25628
26009
|
return '';
|
|
25629
26010
|
}
|
|
25630
26011
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25631
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigTypeFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"config-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 [title]=\"'Config Name'\" [label]=\"'Required'\">\n <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 >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"'Required'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\"></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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
26012
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigTypeFormComponent, selector: "lib-configuration", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Config Type' : 'Create Config Type')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [saveDisabled]=\"saveDisabled\"\n [saveTooltip]=\"saveButtonTooltip\"\n ></lib-form-header>\n <div class=\"config-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 [title]=\"'Config Name'\" [label]=\"'Required'\">\n <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 >\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Schema'\" [label]=\"'Required'\" class=\"schema-json-editor\">\n <lib-json-view [(data)]=\"formData.schema\" [jsonInvalid]=\"errors['schema']\"></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 <lib-form-field-container\n [title]=\"'Custom Tags'\"\n [label]=\"'OPTIONAL'\"\n class=\"form-field-advanced\"\n *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
25632
26013
|
}
|
|
25633
26014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigTypeFormComponent, decorators: [{
|
|
25634
26015
|
type: Component,
|
|
@@ -26419,7 +26800,7 @@ class PostureCheckFormComponent extends ProjectableForm {
|
|
|
26419
26800
|
macAddressesChange(event) {
|
|
26420
26801
|
}
|
|
26421
26802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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$4.Location }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26422
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PostureCheckFormComponent, selector: "lib-posture-check", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"posture-checkform-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 [title]=\"'Name'\" [label]=\"'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 >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"'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 [(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]=\"'Required'\" class=\"schema-json-editor\">\n <select\n *ngIf=\"postureCheckTypes.length > 0\"\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id\"\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 <option\n *ngFor=\"let type of postureCheckTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"'Required'\" *ngIf=\"formData.typeId === 'MAC'\">\n <p-chips (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"'Required'\" *ngIf=\"formData.typeId === 'DOMAIN'\">\n <p-chips (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Process Details'\" [contentClass]=\"'form-field-input-group'\" *ngIf=\"formData.typeId === 'PROCESS'\">\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 <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n filterBy=\"name\"\n [options]=\"osTypes\"\n [filter]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template pTemplate=\"selectedItem\">\n <div class=\"os-type-dropdown-item\" *ngIf=\"formData.process.osType && formData.process.osType !== ''\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + formData.process.osType\"\n ></div>\n <div>{{ formData.process.osType }}</div>\n </div>\n </ng-template>\n <ng-template let-os pTemplate=\"item\">\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + os.type\"\n ></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </p-dropdown>\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 <p-chips [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\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 <lib-form-field-container [title]=\"'Process Multi Details'\" *ngIf=\"formData.typeId === 'PROCESS_MULTI'\">\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 <div class=\"process-multi-item form-field-input-group\" *ngFor=\"let process of processMultiItems; index as i\">\n <div class=\"icon-clear\" *ngIf=\"processMultiItems.length > 1\" (click)=\"removeProcessItem(i)\"></div>\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 <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n filterBy=\"name\"\n [options]=\"osTypes\"\n [filter]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template pTemplate=\"selectedItem\">\n <div class=\"os-type-dropdown-item\" *ngIf=\"process.osType && process.osType !== ''\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + process.osType\"\n ></div>\n <div>{{ process.osType }}</div>\n </div>\n </ng-template>\n <ng-template let-os pTemplate=\"item\">\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + os.type\"\n ></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </p-dropdown>\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 <p-chips [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\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 <p-chips (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 separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n />\n </div>\n </div>\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 <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n *ngIf=\"formData.typeId === 'MFA'\"\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 <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n *ngIf=\"formData.typeId === 'OS'\"\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 <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 *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
26803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PostureCheckFormComponent, selector: "lib-posture-check", inputs: { formData: "formData", 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>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"(formData.id ? 'Edit Posture Check' : 'Create Posture Check')\"\n [moreActions]=\"formData.moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n ></lib-form-header>\n <div class=\"posture-checkform-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 [title]=\"'Name'\" [label]=\"'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 >\n </lib-form-field-container>\n <lib-form-field-container\n [title]=\"'Select or create Posture Check attributes'\"\n [label]=\"'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 [(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]=\"'Required'\" class=\"schema-json-editor\">\n <select\n *ngIf=\"postureCheckTypes.length > 0\"\n [(ngModel)]=\"formData.typeId\"\n (change)=\"pcTypeChanged($event)\"\n [disabled]=\"formData.id\"\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 <option\n *ngFor=\"let type of postureCheckTypes\"\n [value]=\"type.id\"\n >\n {{ type.name }}\n </option>\n </select>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'MAC Addresses'\" [label]=\"'Required'\" *ngIf=\"formData.typeId === 'MAC'\">\n <p-chips (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.macAddresses\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter mc addresses\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['macAddresses'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Windows Domain Details'\" [label]=\"'Required'\" *ngIf=\"formData.typeId === 'DOMAIN'\">\n <p-chips (keyup)=\"macAddressesChange($event)\"\n [(ngModel)]=\"formData.domains\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter domains\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['domains'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\n </lib-form-field-container>\n <lib-form-field-container [title]=\"'Process Details'\" [contentClass]=\"'form-field-input-group'\" *ngIf=\"formData.typeId === 'PROCESS'\">\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 <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n filterBy=\"name\"\n [options]=\"osTypes\"\n [filter]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"formData.process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template pTemplate=\"selectedItem\">\n <div class=\"os-type-dropdown-item\" *ngIf=\"formData.process.osType && formData.process.osType !== ''\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + formData.process.osType\"\n ></div>\n <div>{{ formData.process.osType }}</div>\n </div>\n </ng-template>\n <ng-template let-os pTemplate=\"item\">\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + os.type\"\n ></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </p-dropdown>\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 <p-chips [(ngModel)]=\"formData.process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\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 <lib-form-field-container [title]=\"'Process Multi Details'\" *ngIf=\"formData.typeId === 'PROCESS_MULTI'\">\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 <div class=\"process-multi-item form-field-input-group\" *ngFor=\"let process of processMultiItems; index as i\">\n <div class=\"icon-clear\" *ngIf=\"processMultiItems.length > 1\" (click)=\"removeProcessItem(i)\"></div>\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 <p-dropdown\n placeholder=\"Select configuration...\"\n optionLabel=\"name\"\n optionValue=\"type\"\n filterBy=\"name\"\n [options]=\"osTypes\"\n [filter]=\"false\"\n [showClear]=\"true\"\n [(ngModel)]=\"process.osType\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n <ng-template pTemplate=\"selectedItem\">\n <div class=\"os-type-dropdown-item\" *ngIf=\"process.osType && process.osType !== ''\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + process.osType\"\n ></div>\n <div>{{ process.osType }}</div>\n </div>\n </ng-template>\n <ng-template let-os pTemplate=\"item\">\n <div class=\"os-type-dropdown-item\">\n <div class=\"os-type-dropdown-icon\"\n [class]=\"'os-type-dropdown-icon-' + os.type\"\n ></div>\n <div>{{ os.name }}</div>\n </div>\n </ng-template>\n </p-dropdown>\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 <p-chips [(ngModel)]=\"process.hashes\"\n [allowDuplicate]=\"false\"\n placeholder=\"Enter hashes\"\n [addOnBlur]=\"true\"\n [ngClass]=\"{ error: errors['processHashes'] }\"\n separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n >\n </p-chips>\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 <p-chips (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 separator=\",\"\n (keyup.enter)=\"preventEnterProp($event)\"\n />\n </div>\n </div>\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 <lib-form-field-container\n [title]=\"'Multi Factor Details'\"\n [layout]=\"'column'\"\n *ngIf=\"formData.typeId === 'MFA'\"\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 <lib-form-field-container\n [showHeader]=\"false\"\n [layout]=\"'column'\"\n *ngIf=\"formData.typeId === 'OS'\"\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 <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 *ngIf=\"!hideTags\"\n >\n <lib-custom-tags [(tags)]=\"formData.tags\"></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]=\"'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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n </div>\n <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Chips, selector: "p-chips", inputs: ["style", "styleClass", "disabled", "field", "placeholder", "max", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "allowDuplicate", "inputStyle", "inputStyleClass", "addOnTab", "addOnBlur", "separator", "showClear"], outputs: ["onAdd", "onRemove", "onFocus", "onBlur", "onChipClick", "onClear"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"], outputs: ["tagsChange"] }] }); }
|
|
26423
26804
|
}
|
|
26424
26805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PostureCheckFormComponent, decorators: [{
|
|
26425
26806
|
type: Component,
|
|
@@ -27001,7 +27382,7 @@ class SessionFormComponent extends ProjectableForm {
|
|
|
27001
27382
|
provide: MatDialogRef,
|
|
27002
27383
|
useValue: {}
|
|
27003
27384
|
}
|
|
27004
|
-
], 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]=\"'Session Details'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [showHeaderButton]=\"false\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">ID</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.id}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.service.name}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Identity Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <div class=\"entity-name-and-spinner\">\n <span>{{associatedIdentity.name}}</span>\n <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n </div>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">API Session ID</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.apiSessionId}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Type</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.type}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Created At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Updated At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Edge Routers</span>\n </div>\n <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"false\"\n [allNames]=\"associatedEdgeRouters\"\n [allowRemove]=\"false\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Edge Router'\"\n (itemSelected)=\"previewEdgeRouter($event, router)\"\n ></lib-preview-list>\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\">{{associatedServicePolicies.length}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"false\"\n [clickable]=\"true\"\n (itemSelected)=\"previewServicePolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"] }] }); }
|
|
27385
|
+
], 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]=\"'Session Details'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [showHeaderButton]=\"false\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column three-fifths\">\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">ID</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.id}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Service Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.service.name}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Identity Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <div class=\"entity-name-and-spinner\">\n <span>{{associatedIdentity.name}}</span>\n <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n </div>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">API Session ID</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.apiSessionId}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Type</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.type}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Created At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Updated At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n </div>\n <div class=\"form-group-column two-fifths\">\n <lib-form-field-container\n [title]=\"'Associated Entities'\"\n [label]=\"'Click for detailed view'\"\n [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n [class]=\"'no-gap'\"\n >\n <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n <div class=\"config-title-row\">\n <span class=\"form-field-title\">Edge Routers</span>\n </div>\n <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"false\"\n [allNames]=\"associatedEdgeRouters\"\n [allowRemove]=\"false\"\n [clickable]=\"true\"\n [showfilter]=\"false\"\n [tooltip]=\"'View Edge Router'\"\n (itemSelected)=\"previewEdgeRouter($event, router)\"\n ></lib-preview-list>\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\">{{associatedServicePolicies.length}}</span>\n </div>\n <lib-preview-list\n [isLoading]=\"false\"\n [clickable]=\"true\"\n (itemSelected)=\"previewServicePolicy($event, router)\"\n [tooltip]=\"'View Service Policy'\"\n [allNames]=\"associatedServicePolicies\"\n [showfilter]=\"false\"\n ></lib-preview-list>\n </lib-form-field-container>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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"] }] }); }
|
|
27005
27386
|
}
|
|
27006
27387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SessionFormComponent, decorators: [{
|
|
27007
27388
|
type: Component,
|
|
@@ -27562,7 +27943,7 @@ class APISessionFormComponent extends ProjectableForm {
|
|
|
27562
27943
|
provide: MatDialogRef,
|
|
27563
27944
|
useValue: {}
|
|
27564
27945
|
}
|
|
27565
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper api-session-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"'API Session Details'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [showHeaderButton]=\"false\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column\">\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">ID</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.id}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Identity Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./services/' + formData.identity.id\" (click)=\"identityNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.identity.name}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">IP Address</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.ipAddress}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Created At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Updated At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Last Activity</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.lastActivity).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container{max-width:35rem!important}::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.projectable-form-main-column.form-group-row{max-width:35rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton"], outputs: ["formViewChange", "actionRequested"] }, { 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"] }, { 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"] }] }); }
|
|
27946
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper api-session-form-wrapper\"\n (keyup.enter)=\"save($event)\"\n (keyup.escape)=\"closeModal(false)\"\n>\n <lib-form-header\n [data]=\"formData\"\n [title]=\"'API Session Details'\"\n [moreActions]=\"moreActions\"\n (actionRequested)=\"headerActionRequested($event)\"\n [(formView)]=\"formView\"\n [showHeaderButton]=\"false\"\n ></lib-form-header>\n <div class=\"edge-router-form-container projectable-form-container\">\n <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n <div class=\"form-group-column\">\n <lib-form-field-container [showHeader]=\"false\">\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">ID</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.id}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Identity Name</span>\n </div>\n <a class=\"form-field-link\" [href]=\"'./services/' + formData.identity.id\" (click)=\"identityNameLinkClicked($event)\">\n <div class=\"config-container config-container-clickable\">\n <span>{{formData.identity.name}}</span>\n </div>\n </a>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">IP Address</span>\n </div>\n <div class=\"config-container\">\n <span>{{formData.ipAddress}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Created At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Updated At</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n <div class=\"form-field-label-container\">\n <div class=\"form-field-title-container\">\n <span class=\"form-field-title\">Last Activity</span>\n </div>\n <div class=\"config-container\">\n <span>{{moment(formData.lastActivity).format(\"M/D/YYYY h:mm A\")}}</span>\n </div>\n </div>\n </lib-form-field-container>\n <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n </div>\n </div>\n <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n </div>\n </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container{max-width:35rem!important}::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.projectable-form-main-column.form-group-row{max-width:35rem}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1' viewBox%3D'0 0 20.2 10.8' x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B fill%3A %23668291%3B %7D%3C%2Fstyle%3E %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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"] }] }); }
|
|
27566
27947
|
}
|
|
27567
27948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: APISessionFormComponent, decorators: [{
|
|
27568
27949
|
type: Component,
|
|
@@ -27827,11 +28208,11 @@ class ProgressWizardComponent {
|
|
|
27827
28208
|
return trackHeight + 'rem';
|
|
27828
28209
|
}
|
|
27829
28210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressWizardComponent, selector: "lib-progress-wizard", inputs: { title: "title", steps: "steps", backButtonLabel: "backButtonLabel", nextButtonLabel: "nextButtonLabel", nextButtonDisabled: "nextButtonDisabled", titleImageSrc: "titleImageSrc", showCloseButton: "showCloseButton", currentStepIndex: "currentStepIndex" }, outputs: { currentStepIndexChange: "currentStepIndexChange", close: "close", done: "done", stepChanged: "stepChanged" }, ngImport: i0, template: "<div class=\"progress-wizard-wrapper\">\n <div class=\"progress-wizard-container\">\n <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n <div class=\"side-progress-bar\">\n <div class=\"progress-steps\">\n <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n <div class=\"progress-step-number\">{{step.index}}</div>\n <div class=\"progress-step-number-background\"></div>\n <div class=\"progress-step-label\">{{step.label}}</div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"center-content-container\">\n <div class=\"center-content\">\n <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n <div class=\"header-title-container\">\n <div class=\"header-title\">{{title}}</div>\n </div>\n </div>\n <form name=\"form\" class=\"step-content-form\">\n <div class=\"step-content-wrapper\">\n <ng-content></ng-content>\n </div>\n <div class=\"buttons-container\">\n <div *ngIf=\"currentStepIndex === 0\">\n </div>\n <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n {{backButtonLabel}}\n </button>\n <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n {{nextButtonLabel}}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
|
|
28211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressWizardComponent, selector: "lib-progress-wizard", inputs: { title: "title", steps: "steps", backButtonLabel: "backButtonLabel", nextButtonLabel: "nextButtonLabel", nextButtonDisabled: "nextButtonDisabled", titleImageSrc: "titleImageSrc", showCloseButton: "showCloseButton", currentStepIndex: "currentStepIndex" }, outputs: { currentStepIndexChange: "currentStepIndexChange", close: "close", done: "done", stepChanged: "stepChanged" }, ngImport: i0, template: "<div class=\"progress-wizard-wrapper\">\n <div class=\"progress-wizard-container\">\n <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n <div class=\"side-progress-bar\">\n <div class=\"progress-steps\">\n <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n <div class=\"progress-step-number\">{{step.index + 1}}</div>\n <div class=\"progress-step-number-background\"></div>\n <div class=\"progress-step-label\">{{step.label}}</div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"center-content-container\">\n <div class=\"center-content\">\n <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n <div class=\"header-title-container\">\n <div class=\"header-title\">{{title}}</div>\n </div>\n </div>\n <form name=\"form\" class=\"step-content-form\">\n <div class=\"step-content-wrapper\">\n <ng-content></ng-content>\n </div>\n <div class=\"buttons-container\">\n <div *ngIf=\"currentStepIndex === 0\">\n </div>\n <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n {{backButtonLabel}}\n </button>\n <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n {{nextButtonLabel}}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
|
|
27831
28212
|
}
|
|
27832
28213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressWizardComponent, decorators: [{
|
|
27833
28214
|
type: Component,
|
|
27834
|
-
args: [{ selector: 'lib-progress-wizard', template: "<div class=\"progress-wizard-wrapper\">\n <div class=\"progress-wizard-container\">\n <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n <div class=\"side-progress-bar\">\n <div class=\"progress-steps\">\n <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n <div class=\"progress-step-number\">{{step.index}}</div>\n <div class=\"progress-step-number-background\"></div>\n <div class=\"progress-step-label\">{{step.label}}</div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"center-content-container\">\n <div class=\"center-content\">\n <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n <div class=\"header-title-container\">\n <div class=\"header-title\">{{title}}</div>\n </div>\n </div>\n <form name=\"form\" class=\"step-content-form\">\n <div class=\"step-content-wrapper\">\n <ng-content></ng-content>\n </div>\n <div class=\"buttons-container\">\n <div *ngIf=\"currentStepIndex === 0\">\n </div>\n <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n {{backButtonLabel}}\n </button>\n <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n {{nextButtonLabel}}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}\n"] }]
|
|
28215
|
+
args: [{ selector: 'lib-progress-wizard', template: "<div class=\"progress-wizard-wrapper\">\n <div class=\"progress-wizard-container\">\n <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n <div class=\"side-progress-bar\">\n <div class=\"progress-steps\">\n <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n <div class=\"progress-step-number\">{{step.index + 1}}</div>\n <div class=\"progress-step-number-background\"></div>\n <div class=\"progress-step-label\">{{step.label}}</div>\n </div>\n </div>\n </div>\n <div>\n <div class=\"center-content-container\">\n <div class=\"center-content\">\n <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n <div class=\"header-title-container\">\n <div class=\"header-title\">{{title}}</div>\n </div>\n </div>\n <form name=\"form\" class=\"step-content-form\">\n <div class=\"step-content-wrapper\">\n <ng-content></ng-content>\n </div>\n <div class=\"buttons-container\">\n <div *ngIf=\"currentStepIndex === 0\">\n </div>\n <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n {{backButtonLabel}}\n </button>\n <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n {{nextButtonLabel}}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}\n"] }]
|
|
27835
28216
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
27836
28217
|
type: Input
|
|
27837
28218
|
}], steps: [{
|
|
@@ -28041,7 +28422,8 @@ class OpenZitiConsoleLibModule {
|
|
|
28041
28422
|
PreviewListComponent,
|
|
28042
28423
|
TagSelectorComponent,
|
|
28043
28424
|
ProgressMeterComponent,
|
|
28044
|
-
ProgressWizardComponent
|
|
28425
|
+
ProgressWizardComponent,
|
|
28426
|
+
ConfigEditorComponent] }); }
|
|
28045
28427
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, providers: [
|
|
28046
28428
|
{ provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
|
|
28047
28429
|
{ provide: ZITI_NAVIGATOR, useValue: {} },
|
|
@@ -28244,7 +28626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
28244
28626
|
PreviewListComponent,
|
|
28245
28627
|
TagSelectorComponent,
|
|
28246
28628
|
ProgressMeterComponent,
|
|
28247
|
-
ProgressWizardComponent
|
|
28629
|
+
ProgressWizardComponent,
|
|
28630
|
+
ConfigEditorComponent
|
|
28248
28631
|
],
|
|
28249
28632
|
providers: [
|
|
28250
28633
|
{ provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
|
|
@@ -28260,7 +28643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
28260
28643
|
}] });
|
|
28261
28644
|
|
|
28262
28645
|
const VERSION = {
|
|
28263
|
-
"version": "3.12.
|
|
28646
|
+
"version": "3.12.7"
|
|
28264
28647
|
};
|
|
28265
28648
|
|
|
28266
28649
|
/*
|
|
@@ -29960,5 +30343,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
29960
30343
|
* Generated bundle index. Do not edit.
|
|
29961
30344
|
*/
|
|
29962
30345
|
|
|
29963
|
-
export { APISessionFormComponent, APISessionsPageComponent, ApiSessionsPageService, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanToggleInputComponent, COMPONENTS, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, PreviewListComponent, ProgressMeterComponent, ProgressMeterStep, ProgressWizardComponent, ProgressWizardStep, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, Session, SessionFormComponent, SessionsPageComponent, SessionsPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TagSelectorComponent, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, VERSION, ValidationService, VerifyCertificateComponent, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
|
|
30346
|
+
export { APISessionFormComponent, APISessionsPageComponent, ApiSessionsPageService, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanToggleInputComponent, COMPONENTS, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ConfigEditorComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, PreviewListComponent, ProgressMeterComponent, ProgressMeterStep, ProgressWizardComponent, ProgressWizardStep, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, Session, SessionFormComponent, SessionsPageComponent, SessionsPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TagSelectorComponent, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, VERSION, ValidationService, VerifyCertificateComponent, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
|
|
29964
30347
|
//# sourceMappingURL=openziti-ziti-console-lib.mjs.map
|