@openziti/ziti-console-lib 0.12.9 → 0.12.10
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/styles/global.scss +1 -0
- package/esm2022/lib/features/data-table/cells/table-cell-select/table-cell-select.component.mjs +18 -5
- package/esm2022/lib/features/data-table/data-table.component.mjs +5 -3
- package/esm2022/lib/features/preview-list/preview-list.component.mjs +13 -3
- package/esm2022/lib/features/preview-selections/preview-selections.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/edge-router-policy/edge-router-policy-form.service.mjs +3 -1
- package/esm2022/lib/features/projectable-forms/form-header/form-header.component.mjs +2 -2
- package/esm2022/lib/features/projectable-forms/identity/identity-form.component.mjs +16 -4
- package/esm2022/lib/features/projectable-forms/service/service-form.component.mjs +3 -3
- package/esm2022/lib/features/projectable-forms/service/service-form.service.mjs +51 -12
- package/esm2022/lib/features/projectable-forms/service/simple-service/simple-service.component.mjs +11 -5
- 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-edge-router-policy/service-edge-router-policy-form.service.mjs +3 -1
- package/esm2022/lib/features/projectable-forms/service-policy/service-policy-form.component.mjs +1 -1
- package/esm2022/lib/features/projectable-forms/service-policy/service-policy-form.service.mjs +4 -2
- package/esm2022/lib/features/projectable-forms/session/session-form.component.mjs +3 -3
- package/esm2022/lib/pages/edge-router-policies/edge-router-policies-page.component.mjs +6 -1
- package/esm2022/lib/pages/identities/identities-page.component.mjs +3 -9
- package/esm2022/lib/pages/identities/identities-page.service.mjs +50 -1
- package/esm2022/lib/pages/services/services-page.component.mjs +2 -13
- package/esm2022/lib/pages/services/services-page.service.mjs +35 -2
- package/esm2022/lib/pages/terminators/terminators-page.component.mjs +7 -5
- package/esm2022/lib/services/ziti-controller-data.service.mjs +4 -4
- package/esm2022/lib/services/ziti-data.service.mjs +1 -1
- package/esm2022/lib/shared/list-page-component.class.mjs +4 -1
- package/esm2022/lib/shared/list-page-service.class.mjs +5 -2
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/openziti-ziti-console-lib.mjs +227 -64
- package/fesm2022/openziti-ziti-console-lib.mjs.map +1 -1
- package/lib/features/data-table/cells/table-cell-select/table-cell-select.component.d.ts +2 -6
- package/lib/features/data-table/cells/table-cell-select/table-cell-select.component.d.ts.map +1 -1
- package/lib/features/data-table/data-table.component.d.ts +1 -0
- package/lib/features/data-table/data-table.component.d.ts.map +1 -1
- package/lib/features/preview-list/preview-list.component.d.ts +3 -1
- package/lib/features/preview-list/preview-list.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/edge-router-policy/edge-router-policy-form.service.d.ts.map +1 -1
- package/lib/features/projectable-forms/identity/identity-form.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/service/service-form.service.d.ts +9 -3
- 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 +1 -5
- package/lib/features/projectable-forms/service/simple-service/simple-service.component.d.ts.map +1 -1
- package/lib/features/projectable-forms/service-edge-router-policy/service-edge-router-policy-form.service.d.ts.map +1 -1
- package/lib/features/projectable-forms/service-policy/service-policy-form.service.d.ts.map +1 -1
- package/lib/pages/edge-router-policies/edge-router-policies-page.component.d.ts.map +1 -1
- package/lib/pages/identities/identities-page.component.d.ts +0 -2
- package/lib/pages/identities/identities-page.component.d.ts.map +1 -1
- package/lib/pages/identities/identities-page.service.d.ts +3 -0
- package/lib/pages/identities/identities-page.service.d.ts.map +1 -1
- package/lib/pages/services/services-page.component.d.ts +0 -3
- package/lib/pages/services/services-page.component.d.ts.map +1 -1
- package/lib/pages/services/services-page.service.d.ts +2 -0
- package/lib/pages/services/services-page.service.d.ts.map +1 -1
- package/lib/services/ziti-controller-data.service.d.ts +1 -1
- package/lib/services/ziti-controller-data.service.d.ts.map +1 -1
- package/lib/services/ziti-data.service.d.ts +1 -1
- package/lib/services/ziti-data.service.d.ts.map +1 -1
- package/lib/shared/list-page-component.class.d.ts.map +1 -1
- package/lib/shared/list-page-service.class.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -96,12 +96,12 @@ class FormHeaderComponent {
|
|
|
96
96
|
return this.data.badges || this.badges;
|
|
97
97
|
}
|
|
98
98
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
-
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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i4.MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
|
|
99
|
+
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\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i4.MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
|
|
100
100
|
}
|
|
101
101
|
export { FormHeaderComponent };
|
|
102
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, decorators: [{
|
|
103
103
|
type: Component,
|
|
104
|
-
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"] }]
|
|
104
|
+
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\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
|
|
105
105
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
106
106
|
type: Input
|
|
107
107
|
}], badges: [{
|